배포 URL
•
테스트용 ID & PW : readme@test.com / 123123
프로젝트 소개
•
README는 책을 좋아하는 사람들이 자신의 책 취향을 공유하고, 다 읽은 책을 판매할 수 있는 SNS입니다.
•
개인의 프로필 페이지에 좋아하는 구절 등 책에 대한 정보를 작성하고 판매하고 싶은 책을 등록할 수 있습니다.
•
검색을 통해 책 취향이 비슷한 다른 유저들의 피드를 구경할 수 있습니다.
•
다양한 유저들을 팔로우하며 마음에 드는 게시글에 좋아요를 누르거나 댓글을 작성할 수 있습니다.
팀원 구성
•
고지연
•
김민제
•
양희지
•
지창언
1. 개발 환경
개발환경
•
Front : HTML, React, styled-components, Recoil
•
Back-end : 제공된 API 활용
•
버전 및 이슈관리 : Github, Github Issues, Github Project
•
협업 툴 : Discord, notion
•
서비스 배포 환경 : Netlify
•
디자인 : Figma
2. 채택한 개발 기술과 브랜치 전략
React, styled-component
•
React
◦
컴포넌트화를 통해 추후 유지보수와 재사용성을 고려했습니다.
◦
유저배너, 상단과 하단 배너등 중복되어 사용되는 부분이 많아 컴포넌트화를 통해 리소스 절약이 가능했습니다.
•
styled-component
◦
props를 이용한 조건부 스타일링을 활용하여 상황에 알맞은 스타일을 적용시킬 수 있었습니다.
◦
빌드될 때 고유한 클래스 이름이 부여되어 네이밍 컨벤션을 정하는 비용을 절약할 수 있었습니다.
◦
S dot naming을 통해 일반 컴포넌트와 스타일드 컴포넌트를 쉽게 구별하도록 했습니다.
Recoil
•
최상위 컴포넌트를 만들어 props로 유저 정보를 내려주는 방식의 경우 불필요한 props 전달이 발생합니다. 따라서, 필요한 컴포넌트 내부에서만 상태 값을 가져다 사용하기 위해 상태 관리 라이브러리를 사용하기로 했습니다.
•
Redux가 아닌 Recoil을 채택한 이유
◦
Recoil은 React만을 위한 라이브러리로, 사용법도 기존의 useState 훅을 사용하는 방식과 유사해 학습비용을 낮출 수 있었습니다.
◦
또한 Redux보다 훨씬 적은 코드라인으로 작동 가능하다는 장점이 있었습니다.
•
로그인과 최초 프로필 설정 시 유저 정보를 atom에 저장하며 필요한 컴포넌트에서 구독하는 방식으로 사용했습니다.
eslint, prettier
•
정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 했습니다.
•
코드 품질 관리는 eslint에, 코드 포맷팅은 prittier에 일임해 사용했습니다.
•
airbnb의 코딩 컨벤션을 참고해 사용했고, 예외 규칙은 팀원들과 협의했습니다.
•
협업 시 매번 컨벤션을 신경 쓸 필요 없이 빠르게 개발하는 데에 목적을 두었습니다.
브랜치 전략
•
github-flow 전략을 기반으로 main, develop 브랜치와 feature 보조 브랜치를 운용했습니다.
•
main, develop, Feat 브랜치로 나누어 개발을 하였습니다.
◦
main 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
◦
develop 브랜치는 개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.
◦
Feat 브랜치는 기능 단위로 독립적인 개발 환경을 위하여 사용하고 merge 후 각 브랜치를 삭제해주었습니다.
3. 프로젝트 구조
├── README.md
├── .eslintrc.js
├── .gitignore
├── .prettierrc.json
├── package-lock.json
├── package.json
│
├── public
│ └── index.html
│
└── src
├── App.jsx
├── index.jsx
│
├── api
│ ├── accountnameValidAPI.js
│ └── addProductAPI.js
│
├── asset
│ ├── fonts
│ ├── css_sprites.png
│ ├── logo-404.svg
│ └── logo-home.svg
│
├── atoms
│ ├── LoginData.js
│ └── LoginState.js
│
├── common
│ ├── alert
│ │ ├── Alert.jsx
│ │ └── Alert.Style.jsx
│ ├── button
│ ├── comment
│ ├── inputBox
│ ├── post
│ ├── postModal
│ ├── product
│ ├── tabMenu
│ ├── topBanner
│ └── userBanner
│
├── pages
│ ├── addProduct
│ │ ├── AddProduct.jsx
│ │ └── AddProduct.Style.jsx
│ ├── chatList
│ ├── chatRoom
│ ├── emailLogin
│ ├── followerList
│ ├── followingList
│ ├── home
│ ├── join
│ ├── page404
│ ├── postDetail
│ ├── postEdit
│ ├── postUpload
│ ├── productEdit
│ ├── profile
│ ├── profileEdit
│ ├── profileSetting
│ ├── search
│ ├── snsLogin
│ └── splash
│
└── styles
└── Globalstyled.jsx
Plain Text
복사
4. 역할 분담
고지연
•
UI
◦
페이지 : 홈, 검색, 게시글 작성, 게시글 수정, 게시글 상세, 채팅방
◦
공통 컴포넌트 : 게시글 템플릿, 버튼
•
기능
◦
유저 검색, 게시글 등록 및 수정, 게시글 상세 확인, 댓글 등록, 팔로워 게시글 불러오기, 좋아요 기능
김민제
•
UI
◦
페이지 : 프로필 설정, 프로필 수정, 팔로잉&팔로워 리스트, 상품 등록, 상품 수정, 채팅 목록, 404 페이지
◦
공통 컴포넌트 : 탭 메뉴, InputBox, Alert 모달, 댓글
•
기능
◦
프로필 설정 및 수정 페이지 유저 아이디 유효성 및 중복 검사, 상품 등록 및 수정
양희지
•
UI
◦
페이지 : splash 페이지, sns 로그인 페이지, 로그인, 회원가입
◦
공통 컴포넌트 : 상품 카드, 사용자 배너
•
기능
◦
splash 페이지, sns 로그인 페이지, 로그인 유효성 및 중복 검사 , 회원가입 유효성 및 중복 검사, 이메일 검증, 프로필 설정
지창언
•
UI
◦
페이지 : 사용자 프로필 페이지
◦
공통 컴포넌트 : 탑 배너, 하단 모달창
•
기능
◦
팔로우 & 언팔로우, 로그아웃, 하단 모달창, 댓글 삭제, 게시글 삭제, 상품 삭제, 사용자 게시글 앨범형 이미지, 탑 배너 뒤로가기 버튼, Alert 모달
5. 개발 기간 및 작업 관리
개발 기간
•
전체 개발 기간 : 2022-12-09 ~ 2022-12-31
•
UI 구현 : 2022-12-09 ~ 2022-12-16
•
기능 구현 : 2022-12-17 ~ 2022-12-31
작업 관리
•
GitHub Projects와 Issues를 사용하여 진행 상황을 공유했습니다.
•
주간 회의를 진행하며 작업 순서와 방향성에 대한 고민을 나누고 GitHub Wiki를 사용해 회의 내용을 기록했습니다.
6. 신경 쓴 부분
접근제한 설정
Recoil을 통한 상태관리 및 유지 → 조금 더 고급진(교육비용을 낮출 수 있다.)라고 더 자세히
7. 페이지별 기능 → GIF
8. 트러블 슈팅
탭메뉴 프로필 버튼 이슈
프로필 수정 이슈
9. 개선 목표
•
이미지 압축 : browser-image-compression 라이브러리 사용해볼 예정(이부분 통으로 제거예정)
◦
~~~ 개선(아래 Properly size images 캡쳐도 제거예정)
•
API 모듈화 : API를 불러오는 코드의 반복이 많아 모듈화할 예정
•
lighthouse Performance 증진
◦
모든 페이지에서 특히 Best Practices & SEO 점수는 90~100으로 우수
◦
Performance 점수가 대체적으로 미흡한 문제
이메일 로그인 페이지
•
23-01-15 성능 개선 내용
◦
이미지 최적화
▪
<img> 요소에 width , height 속성값을 명시해 불필요한 Reflow를 방지했습니다.
▪
browser-image-compression 라이브러리를 사용해 유저가 업로드하는 이미지를 압축했습니다.
▪
Intersection Observer API를 사용해 Lazy Loading 기법을 적용하여 홈 피드의 게시글 이미지가 viewport 내에 들어오는 순간 로딩되도록 변경했습니다.
◦
웹폰트 최적화
▪
WOFF2 포맷을 추가하고 가장 우선적으로 적용되도록 선언했습니다.
▪
서브셋 폰트로 교체해 용량을 줄였습니다.
10. 프로젝트 후기
고지연
깃헙을 통한 협업에 익숙해지는 것, 서로 감정 상하지 않고 무사히 마무리하는 것이 1차적인 목표였어서 항상 이부분을 명심하면서 작업했습니다.
각자 페이지를 작업하고 합치는 과정에서 마주친 버그들이 몇 있었는데, 시간에 쫓기느라 해결하기에 급급해서 제대로 트러블슈팅 과정을 기록하지 못한 게 살짝 아쉬운 부분으로 남습니다. 그래도 2022년 한 해 동안 가장 치열하게 살았던 한 달인 것 같습니다. 조원들 모두에게 고생했다고 전하고 싶습니다
김민제
여러모로 많은 것들을 배울 수 있었던 한 달 이었습니다. 혼자서는 할 수 없었던 일이라는 것을 너무 잘 알기에 팀원들에게 정말 감사하다는 말 전하고 싶습니다. 개인적으로 아쉬웠던 부분은 기한 내에 기능을 구현하는 데에만 집중하면서 트러블 슈팅이나 새로 배웠던 것들을 체계적으로 기록하지 못했다는 점입니다. 이렇게 느낀 바가 있으니 이후의 제가 잘 정리하면서 개발할 거라 믿습니다… 하하 다들 수고하셨습니다!!!!
양희지
팀프로젝트 시작에 앞서 초기 설정을 진행하며 프로젝트 초기에 진행되는 체계적인 설계의 중요성을 느꼈습니다. 이후에 프로젝트를 하게 된다면 조금 더 발전된 모습으로 진행하고 팀프로젝트에 있어 주어진 역할에 최선을 다하고 싶습니다.
정규 수업 직후에 프로젝트를 진행하면서 배운 내용을 직접 구현하는 과정이 어색했지만 어떤 부분이 부족한지 알 수 있었습니다. 스스로 최대한 노력해보고 이슈가 발생하면 팀원들과 해결해나가면서 협업의 장점을 체감할 수 있었습니다.
’멋쟁이 사자처럼’이라는 같은 목표를 가진 집단에서 좋은 프로젝트에 함께 할 수 있어서 소중한 경험이었습니다.
함께 고생한 조원들 모두 고생하셨습니다! 앞으로도 화이팅해서 함께 목표 이뤄가고 싶습니다.
지창언
컨벤션을 정하는 것부터 Readme 파일 작성까지 전 과정을 진행하려니 처음 생각보다 많은 에너지를 썼어요. 좋은 의미로 많이 썼다기보다, 제 능력을 십분 발휘하지 못해서 아쉬움이 남는 쪽입니다. 개발한다고 개발만 해서는 안 된다는 것을 몸소 느껴보는 기간이었던 것 같습니다. 이번 기회로 프로젝트를 진행하면서, 제가 잘하는 점과 부족한 점을 확실하게 알고 가는 건 정말 좋습니다. 기술적인 부분에 있어서는 리액트의 컴포넌트화가 주는 장점을 알았습니다. 조금 느린 개발이 되었을지라도 코드 가독성 부분에 있어서 좋았고, 오류가 발생해도 전체가 아닌 오류가 난 컴포넌트와 근접한 컴포넌트만 살펴보면 수정할 수 있는 부분이 너무 편했습니다. 모두 고생 참 많으셨고 리팩토링을 통해 더 나은 프로젝트 완성까지 화이팅입니다.
