EggplantMarket

배포 URL: https://eggplant-market.netlify.app
id: [email protected]
pw: 123123123

팀원 소개

박재영	안지원	이보경	이예지
GitHub	GitHub	GitHub	GitHub

목차

1. 프로젝트 주제 및 목표
2. 기술 스택
3. 역할 분담
4. 작업 관리
5. 주요 기능
6. 프로젝트 구조
7. 페이지 기능
8. 개선사항
9. 느낀점
10. 리팩토링 *

1. 프로젝트 주제 및 목표

[프로젝트 설명]

‘가치를 지켜라'라는 의미를 담은 가지마켓은 나눔과 기부 관련 정보를 공유하고 중고거래가 가능한 SNS 커뮤니티입니다.

• 사용자는 글과 사진을 함께 첨부하여 포스터나 행사 후기 등을 손쉽게 공유할 수 있습니다. 또한, 다른 사용자를 팔로우하면 그들이 올린 게시물을 홈 피드에서 확인할 수 있습니다.

• 상품 등록을 통해 자신에게 소중한 물건이지만 이제는 잘 사용하지 않는 애장품이나 튼튼한데 사용하지 않는 물건들을 거래할 수도 있습니다. 이렇게 가지마켓을 활용하여 물건들을 재활용하면서 환경과 경제적으로도 유익함을 누릴 수 있습니다.

• 가지마켓은 더 나아가, 나눔의 정신을 실천하고 사회적 가치를 실현하는데 기여할 수 있는 소중한 플랫폼입니다. 함께 가치를 지켜가며 더 나은 세상을 만들어가보세요. :)

[프로젝트 목표]

• 프로젝트 목표 1 - 웹접근성 고려 (고대비테마, 키보드 접근성)
• 프로젝트 목표 2 - 코드 완성도보다는 작동을 중심,
• 프로젝트 목표 3 - 시맨틱 마크업

2. 기술 스택

사용 기술
협업
IDE

3. 역할 분담

4. 작업 관리

[작업 관리]

• 🔗issues 를 사용하여 진행도와 상황을 꾸준히 공유

[프로젝트 기간]

• 총 개발 기간 : 2023.06.01 ~ 2023.06.27
• 프로젝트 기확 단계 : 2023.06.01 ~ 2023.06.07
• 마크업 구현 : 2023.06.08 ~ 2023.06.16
• 기능 구현 : 2023.06.17 ~ 2023.06.26
• 리팩토링 : 2023.06.23 ~ 2023.06.28

[Git flow]

놀고먹고십구 협업플로우.pdf

[커밋 컨벤션]

• Git commit message
  • #이슈번호 <아래컨벤션> : <커밋내용>

- add : 새로운 기능 추가
- fix : 버그 수정(단순 수정 X), 충돌 해결
- docs : 문서 수정
- chore : 코드의 논리에 영향이 없는 작업. 변수명 변경 등등
- design : 마크업 및 디자인 구현, 변경
- rename : 파일 이름의 변경 or 파일의 이동
- remove : 파일의 삭제
- refactor : 리팩토링
- test : 테스트 관련 코드 추가 및 삭제 등
- comment : 필요한 주석 추가 및 변경

[코드 컨벤션]

• 들여쓰기 4칸
• prettier 사용하지 않음
• 시맨틱 마크업으로 작성하기
• JS : 변수 ⇒ 카멜 케이스 / 클래스 ⇒ 파스칼 케이스
• 의미 있는 변수명 사용하기, 함수명은 동사로 시작하기, class명은 형태 + 의미 + 상태

5. 주요 기능

• 로그인 / 회원가입
  • 로그인
  • 회원가입
  • 유효성 검사
  • 프로필 설정
• 피드
  • 게시글 목록 - 목록형/앨범형
• 검색
  • 유저 검색
• 게시물
  • 게시물 작성 / 수정 / 삭제
  • 댓글 게시 / 삭제
  • 이미지 업로드 / 수정
• 채팅 (마크업만 진행)
  • 채팅 리스트
  • 채팅창
• 마이 프로필
  • 로그아웃
  • 프로필 수정
  • 팔로우 / 팔로잉
• 유저 프로필
  • 팔로우 / 팔로잉

6. 프로젝트 구조

• assets/ : 이미지, 파비콘, 아이콘 등

  • sprites : 이미지 스프라이트만 따로 보관

• css/ : 컴파일된 scss 및 css 디렉토리

  • reset.css : 기본 리셋과 공통으로 사용되는 스타일 모음 파일

• html/ : html 디렉토리

  • component : 버튼, 헤더, 푸터 등 컴포넌트 마크업 모음 파일
  • "htmlname".html 으로 작성

• js/ : html 디렉토리의 html과 매칭되는 JS 디렉토리.

  • common.js : 공통으로 사용되는 함수가 등록된 파일
  • modal.js : 모달 관련 js 파일
  • theme.js : 기본/고대비 테마 전환관련 js 파일
  • "htmlname".js 으로 작성

• scss/ : html 디렉토리의 html과 매칭되는 scss

  • _mixin.scss : 믹스인 모아두기
  • _variable.scss : 변수들 모아두기
  • "htmlname".scss 로 작성
    • 필요시 mixin, variable 임포트
    • ex) @import "mixin";

기본포맷
├── README.md
├── 📁 assets
│   ├── basic-profile.png
│   ├── favicon.ico
│   ├── 📁 icon 
│   ├── 📁 logo
│   ├── 📁 sprites
│   └── 📁 symbol
│   ├── og(1400x630).png
│   ├── og(800x400).png
├── 📁 css
│   ├── ...
│   ├── reset.css
│   └── splash.css
├── 📁 font
├── 📁 html
│   ├── 📁 component
│   │   ├── button.html
│   │   ├── component.html
│   │   ├── footer.html
│   │   └── header.html
│   │   └── post.html
│   ├── 404.html
│   ├── chat_list.html
│   ├── chat_room.html
│   ├── home_search.html
│   ├── home.html
│   ├── join_membership.html
│   ├── login_email.html
│   ├── login.html
│   ├── post_detail.html
│   ├── post_upload.html
│   ├── product_upload.html
│   ├── profile_follower.html
│   ├── profile_following.html
│   ├── profile_info.html
│   └── profile_modification.html
├── index.html
├── 📁 js
│   ├── chat_room.js
│   ├── common.js
│   ├── footer.js
│   ├── contrast.js
│   ├── 📁 fetch
│   │   └── fetchRefact.js
│   ├── follower.js
│   ├── following.js
│   ├── home.js
│   ├── home_search.js
│   ├── index.js
│   ├── join.js
│   ├── login_email.js
│   ├── modal.js
│   ├── postDetail.js
│   ├── postUpload.js
│   ├── productUpload.js
│   ├── profile_info.js
│   ├── profile_modification.js
│   ├── scrollFetch.js
│   └── setProfile.js
├── naver58620a79d9c9b9f251caee0753f0748c.html
├── robots.txt
└── 📁 scss
    ├── _variables.scss
    ├── _mixin.scss
    ├── 📁 components
    │   ├── button.scss
    │   ├── comment.scss
    │   ├── footer.scss
    │   ├── modal.scss
    │   ├── skip_nav.scss
    ├── 📁 pages
    │   ├── 404.scss
    │   ├── chat_list.scss
    │   ├── chat_room.scss
    │   ├── home_search.scss
    │   ├── home_withoutfollowers.scss
    │   ├── join_membership.scss
    │   ├── login_email.scss
    │   ├── login.scss
    │   ├── post_detail.scss
    │   ├── post_upload.scss
    │   ├── product.scss
    │   ├── profile_follow.scss
    │   ├── profile_info.scss
    │   ├── profile_modification.scss
    │   ├── profile_productlist.scss
    │   └── profile_view.scss

7. 페이지 기능

1) 홈

[로그인]	[회원가입]

[채팅]	[검색]	[홈 화면]

2) 게시글

[게시글 업로드]	[게시글 수정]	[게시글 상세]

3) 상품 판매

[상품 등록]	[상품 수정]	[상품 삭제]

4) 프로필

[나의 프로필]	[나의 팔로우/팔로잉 목록]	[다른 사람의 팔로우/팔로잉 목록]

5) 고대비 테마

[고대비테마 적용]	[다시 라이트모드로]	[고대비 상품 등록]

6) 키보드 접근성

[Tab으로 focus 이동]	[skip navigation]

8. 개선사항

• 시멘틱 마크업 추가개선
• 성능보다 구현을 중심으로 짠 코드
• 반복되는 api 통신 코드 통합
• 터치스크롤 개선
• 게시글 수정시 이미지 여러개 첨부 기능 버그
• 키보드 접근성 tab 버그 
• sass 공동작업 시간 부족해서 못함
• css 사용하듯이에서 그친 느낌 
• 이미지 최적화
• meta tag 사용

9. 느낀점

10. 리팩토링

[기간]

07.12 ~ 07.31

[리팩토링 내용]

1) 렌더링 성능 개선

• 클린 코드
  • 코드라인 줄이기
  • 변수명, 함수명 시멘틱하게 수정 (ex. querySelector 변수에 $ 추가, getData())
  • 함수 기능 쪼개기 (하나의 함수에는 하나의 기능만! ex. api 요청과 화면에 뿌리는 함수 분리)
  • 코드 순서 정리로 가독성 높이기
  • 무의미한 개행, 주석, console.log 삭제
  • 성능 고려 (ex. innerHTML → createElement, textContent / promiseAll / DocumentFragment )
  • 중복 사용 코드 함수화
  • 버그 수정
• 컴포넌트화
• API 모듈화
• SASS

2) 로딩 성능 개선

• 이미지 스프라이트
• +] css minify
• +] 이미지 지연 로딩

3) SEO 개선

• meta tag, robot.txt, sitemap.xml 작성
  
  

[리팩토링 결과]