🏃 프로젝트 진행 상황
초기 페이지 기획 / 요구 사항 - 약 80% (28/34)
- 로그인 페이지
사용자는 로그인을 할 수 있다.
- 회원 가입 페이지
사용자는 회원 가입을 할 수 있다.
- 메인 페이지
- header (검색 창, 로그인, 로그아웃, 프로필 아이콘, 알람 아이콘)
- nav bar (면접, 데이트, 출근, 일상, 운동, 경조사, 기타)
- carousel (홈페이지 주제 배너 or 실시간 베스트 포스트)
- 포스트 목록 (무한 스크롤 구현)
- footer(저작권)
로그인 페이지로 링크(비 인증 사용자만)해준다.
프로필 페이지, 로그아웃, 알람 페이지로 링크(인증 사용자만)해준다.
메인 페이지로 링크해준다.
사용자, 포스트 검색할 수 있다.
토글을 통해 사용자 / 포스트 카테고리 선택
선택한 카테고리의 포스트 목록을 보여준다.
carousel 기능 구현
사이트에 대한 설명 배너를 달아준다.
베스트 좋아요 포스트 배너를 달아준다.
사용자는 채널에 올라온 글을 볼 수 있다.
스크롤을 맨 위로 올려주는 버튼을 추가한다.
글 작성하기(인증 사용자만) 버튼을 추가한다.
팀 정보와 저작권을 표시해 준다.
- 알람 페이지
좋아요, 댓글에 대한 알람 목록을 보여준다.
팔로우한 사람의 포스트를 알려준다(?)
- 프로필 페이지 (본인, 타 사용자)
프로필 이미지, 닉네임, 등록된 추가정보(나이, 키, 몸무게), 작성 글 보여주기
팔로워, 팔로우, 온라인 여부(해당 프로필 사용자의 온라인 여부)
본인 프로필이 아닐 경우 팔로우를 할 수 있는 기능 추가한다. (팔로우 버튼까지 렌더링, 기능X)
본인 프로필일 경우 팔로우, 팔로잉 한 사람 목록 보여주는 기능 추가한다.
- 프로필 수정
프로필 사진을 수정한다.
비밀번호를 수정한다.
닉네임을 수정한다.
나이를 등록 혹은 수정한다.
키를 등록 혹은 수정한다.
몸무게를 등록 혹은 수정한다.
- 상세 게시글( 모달 )
글쓴이 정보(닉네임, 프로필 사진)를 보여준다
글쓴이의 등록된 추가 정보(나이, 키, 몸무게)를 보여준다
포스트를 좋아요 할 수 있다(인증 사용자만)
포스트에 댓글을 남길 수 있다(인증 사용자만)
- 글 작성 페이지
제목, 본문 내용, 사진, 해시 태그 입력한다.
- 글 수정 페이지
기존에 썼던 글이 불러 와지고, 그 중 자신이 수정할 내용을 수정하고 저장한다.
- 404 페이지
엉뚱한 페이지에 접속하면 404 페이지를 보여준다.
미구현 사항
- 메인 페이지
토글을 통해 사용자 / 포스트 카테고리 선택
- 캐러셀
베스트 좋아요 포스트 배너를 달아준다
- 알림 페이지
팔로우한 사람의 포스트를 알려준다(?)
- 프로필 페이지
팔로워, 팔로우, 온라인 여부(해당 프로필 사용자의 온라인 여부)
본인 프로필일 경우 팔로우, 팔로잉 한 사람 목록 보여주는 기능 추가한다
- 상세 페이지(모달)
글쓴이의 등록된 추가 정보(나이, 키, 몸무게)를 보여준다
👍 프로젝트 진행하며 좋았던 점
기획 / 디자인
- 말로만 듣던 피그마를 처음 써봤는데 왜 많이 사용하는지 알게 됐고 기본 사용법을 배워서 좋았습니다.
- 보통 디자인을 하게 되면 협업이 불편하여 한 사람이 맡게 되는 경우가 대다수인데 피그마를 통해 다같이 한 사이트 내에서 작업을 할 수 있어서 좋았습니다
협업
- 처음으로 프론트엔드 개발자끼리 협업을 진행하면서, 어떻게 업무를 나누고 소통하고 개발을 진행하는지 경험할 수 있었습니다.
- 처음으로 같은 분야의 개발자끼리 협업을 해서 깃 브랜치 전략이나 컨벤션 등을 왜 정하고 프로젝트를 시작해야 하는지 잘 알게 되었습니다.
- 개발 속도는 혼자 할 때보다 더뎠지만 다른 사람들도 같이 사용하는 코드라는 생각이 들어서 가독성에 좀 더 신경 쓰면서 개발을 할 수 있었습니다.
개발
- 프로젝트가 재밌어서 잠도 안(못) 자가면서 진행했습니다.
- 깃헙 충돌에 직접 마주하고 해결하면서 깃에 대해 어느 정도 이해할 수 있었고, 전보다 더 많은 지식을 얻게 되었습니다. (하지만 아직 무섭습니다)
- 컴포넌트 단위를 잘 나눠 후반부에 빠르게 진행 할 수 있었습니다.
- storybook이나 react-query같은 새로운 기술들을 사용해 볼 수 있어서 좋았습니다.
- API에 대한 이해가 부족했는데, 이번 프로젝트를 통해 어느 정도 이해할 수 있게 되었습니다.
프로젝트 관리
- 이슈별로 브랜치를 만들어서 개발을 진행, 깃헙 project 자동화 설정, 슬랙에 알람 연동 등을 통해 프로젝트 관리 느낌을 내면서 처음으로 개발해서 재밌었습니다.
팀 문화
- 루카스팀 최고 ← ???
- 잘 모르거나 에러가 발생해서 오래 시간이 소요되는 문제들에 대해서 바로바로 공유하면서 빠르게 해결했던 문제들이 많아서 좋았습니다.
- 시작 전 후로 스크럼을 진행하여 각자 할 일과 자신이 맡은 부분을 얼마나 진행했는지 공유해서 좋았습니다.
- 코어타임에 개발 중 모르는 것이 있으면 실시간으로 소통을 해서 빠르게 해결할 수 있어 좋았습니다.
💦 프로젝트 진행하며 어려웠던 점
기획 / 디자인
- 서비스를 기획하면서 고려해야 할 점이 생각보다 많아서 복잡했던 것 같습니다.
- 기획한 서비스를 효율적으로 사용할 수 있고 깔끔해 보이는 디자인으로 만드는 것이 어려웠습니다.
- 처음 기획서에서 작성한 기능들보다 더 많은 기능들이 필요했고, 이로 인해 일정 관리 부분이 어려워졌던 것 같습니다
- 각 페이지의 공통적인 레이아웃을 잡기 힘들었던 것 같습니다
협업
- 코드 컨벤션에 대한 부분을 정했지만 구체적으로 잡고 시작하지 않아서 개발을 진행하면서 코드 스타일이 다르다는 점을 몇 가지 발견하게 되었습니다.(function ↔ arrow function, flex↔grid, export default 방법 등.. )
개발
- 충돌이 너무 무서웠습니다.
- 리액트 렌더링 과정과 비동기에 대한 이해가 부족하여 개발하는데 어려움을 겪었습니다. if문을 사용해서 분기해서 렌더링할 생각이 먼저 들었는데 그런 방식이 아니라 적응이 쉽지 않았습니다.
- airbnb eslint가 생각보다 빡빡했던 것 같습니다.
- react-query를 사용했지만 라이브러리의 의도나 목적에 부합하지 않게 단순 api 함수만 사용했고, 제대로 응용해서 쓰진 못했던 것 같습니다.
- 처음엔 rebase merge를 하며 충돌이 자주 일어나면서 해결에 많은 시간을 쏟아서 아쉬웠습니다.
- 리액트 훅 및 커스텀 훅을 제대로 이해하지 못하고 사용해서 다른 로직을 생각하느라 시간이 오래 걸렸습니다.
프로젝트 관리
- 이슈, 브랜치, PR, Github 프로젝트 등을 세팅했지만 사실상 프로젝트 탭은 잘 사용하지 못했던 것 같습니다.
- 특정 버그가 발생하거나 추가적인 기능 개발이 필요하게 되면 시간이 더 많이 필요하게 되면서 일정 관리에 스트레스를 받게 된 것 같습니다.
문서화
- 시간이 촉박해서 프로젝트를 진행하며 생겼던 문제들이나 에러 처리에 대해 문서로 정리를 제대로 하지 못했던 것 같습니다.
🤔 프로젝트 진행하며 아쉬웠던 점
기획 / 디자인
- 다크 모드 구현하고 싶었는데 못해서 아쉬웠습니다.
협업
- 코드 리뷰가 활발하게 진행되지 않았던 것 같습니다.
개발
- TypeScript를 적용하지 못해서 아쉬웠습니다.
- 기본적인 컨벤션은 정했지만 세부적인 코드 스타일은 정하지 않아서 통일성을 갖지 못해 아쉬웠습니다.
- 테스트 코드를 작성해보고 싶었는데 일정이 안돼서 아쉬웠습니다.
- api를 각 팀에 맞춤으로 적용하기 어렵기에 애로 사항이 있었습니다.
- 반응형 웹사이트를 구현하지 못해서 아쉬웠습니다.
프로젝트 관리
- 일정을 체계적으로 관리하지 못해서 시간이 부족하다는 느낌이 든 것 같습니다.
- 팀장을 돌아가면서 하다보니 일정을 주도적으로 신경 써줄 사람이 없어서 진도가 빠르게 나가지 못한 부분도 있는 것 같습니다.
팀 문화
- 없습니다. 루카스팀 최고✨ ← 범인 찾았습니다 지은님입니다 (ㄴㅇㄱ)
개인 회고
김지은
- 기획부터 디자인, 개발까지 팀원과 직접 해나가면서 많은 점을 배우고 느꼈습니다. 생각보다 기획, 디자인, 컨벤션 등에 대한 회의 기간이 길어졌는데, 팀원들과 함께 고민하면서 개발 외에도 중요하고 어려운 일이 많다는 것을 깨닫게 되었습니다.
- 처음으로 프론트엔드 개발자끼리 협업하면서 전체적인 프로젝트 진행 흐름과 역할 분담 방식, 소통 방식을 배울 수 있었고, figma, storybook을 사용해보거나 컨벤션이나 깃 활용 방법을 경험하면서 전보다 훨씬 많은 지식(눈물을 살짝 곁들인)을 알게 됐습니다.
- 배우고 느낀 점이 너무나 많기에 모두 적을 수는 없지만, 팀원들이 서로 배려하고 소통하며 프로젝트를 진행하는 과정 자체만으로도 좋았고 많이 배운 것 같습니다. 이번 프로젝트에서 제가 많은 역할을 하지 못했지만, 부지런히 성장해서 꼭 도움이 될 수 있는 개발자가 되어야겠다고 다짐할 수 있는 프로젝트였습니다.
나호석
- 처음으로 다른 사람들과 함께 진행하는 웹개발을 해봤습니다. 생각한 것보다 어려움이 더 많았습니다. 리액트를 잘 모르는 기술적인 부분도 떠나서 함께 개발을 진행할 때는 고려해야할 점이 많다는 것을 느꼈습니다. 기획 단계 부터 최종 마무리까지 다 같이 진행하면서 많은 의견들을 나누고 생각을 공유했습니다. 테스트 코드 같은 도전적인 목표는 달성 못했지만 기획했던 내용에서 80% 정도 구현을 한 것만으로도 잘했다는 생각도 들었습니다. 코드리뷰도 거의 못했지만 기간내에 완성해나가기 위해서는 우리팀에 맞는 방식으로 잘 진행했다고 생각합니다. 아쉬운 점은 기본적인 컨벤션은 잡고 시작했지만 세세한 스타일까지 정해야 함께 쓰는 코드의 통일성을 갖출 수 있겠음을 느꼈습니다. 또한 개발 진도가 느려서 내가 맡은 역할을 다른 팀원분이 도와주셔서 진행을 할수가 있었습니다. 더 빠르게 개발하던지 나의 속도를 조금 더 정확히 인지할 필요성을 느꼈습니다. 짧은 기간이였지만 고생해주신 팀원분들에게 감사함을 느끼고 중간프로젝트를 마무리합니다. 물론 리팩토링은 계속해야겠죠 ㅎㅎ
유창헌
- 같이 프로젝트 진행하는 것이 늘 그렇듯 재미있었습니다. 아이디어 회의부터 페이지 구성, 구현까지 혼자 프로젝트를 진행했을 때는 얻을 수 없는 함께 의견을 모으고 조율하는 과정을 배울 수 있어 좋았습니다.
- 혼자 쓰기 어려워서 주저했던 기술들을 함께 배워가며 쉽게 익힐 수 있었습니다.
- 진행하며 모르는 부분이나 막히는 부분이 있으면 팀원들에게 물어보며 함께 고민하는 시간이 좋았습니다. 자기가 맡은 부분만 개발하면 다른 쪽은 신경을 많이 못쓰게 되는데 이렇게 질문을 주고 받으며 다른 쪽에는 어떤 문제가 있고, 어떻게 해결할지 같이 고민을 하며 제가 구현하는 부분에도 도움이 되었던 적이 많았습니다.
- 깃 사용을 더 능숙하게 할 수 있게 되었습니다. 혼자 프로젝트를 진행하면 깃 충돌이 일어날 일이 거의 없는데 협업을 통해 깃을 더 잘 이해할 수 있게 되었습니다.
- 생각보다 할 일이 많아 원래 계획했지만 못한 것이 있어 아쉽습니다. (test코드, 미구현 사항)
임재현
👍 Good
- 여태까지 프론트엔드를 혼자서 맡아서 해본 프로젝트 뿐이라 깃을 제대로 활용해볼 기회가 없었는데 이번에 이슈, 컨벤션, PR 등을 활용해서 여러 기능 브랜치들을 만들고 충돌도 겪어보면서 브랜치 전략이나 컨벤션들이 왜 중요하게 사용되는지 절실히 깨닫는 프로젝트가 되었다.
- 단순히 React만을 활용하는 것이 아닌 react-router, react-query, feather-icon 등 여러 라이브러리들을 활용하면서 내가 현재 어떤 개념이 부족해서 라이브러리를 잘 사용하지 못하는지 알게 되고, 오픈 소스 라이브러리를 이런 식으로도 만들 수 있구나 하는 점을 알게 됐다.
- 작은 컴포넌트들부터 storybook을 통해 만들어나가고 테스트해가면서 점점 큰 컴포넌트들을 만들어나가는 과정이 재밌었고, 현재 만들어놓은 프로젝트에서도 좀 더 추상화해나가고 싶다는 생각을 했다.
👎 Bad
- 이전에 프로젝트 했던 기억들을 떠올리면서 초기 라우팅 세팅, 전역 Context API 세팅, react-query, 초기 인증 세션 토큰 세팅 등을 구현했었는데 만들고 나서 팀원들에게 설명을 해줄 정도로 정확한 지식을 가지고 있지 않아서 설명을 제대로 못해준 느낌도 들었다.
- 일정 관리를 제대로 못해서 다른 팀원 분들이 개발이 어느정도 되어야 진행할 수 있었기 때문에 초반에 남는 시간에 초기 세팅들을 도와주고 후반부에 개발을 진행하다보니까 제대로 기능 구현을 못한 부분이 있거나 깔끔한 코드를 구현하지 못한 것 같아서 아쉽다.
- 프로젝트 전에 비해 후의 실력이 많이 늘었나 스스로 생각했을 때 그렇지는 않은 것 같아서 조금 아쉬운 기분이 들고, 리팩토링을 계속해가면서 고민을 해야지 실력이 제대로 늘 수 있을 것 같다고 생각한다.
👊 Todo
- 메인 페이지의
useEffect
부분에서 버그가 있어서 중복된 데이터가 배열에 합쳐지는 경우가 종종 있었기 때문에 이 부분을 제대로 원인 파악하여 고쳐야겠다는 생각을 했다.
- react-query에 좀 더 익숙해져서 POST 관련 API는 useMutation 등을 이용해서 react-query 본연의 기능을 좀 더 활용할 수 있도록 하고 싶다.
- 아직 UX를 고려한 사이트 개발을 하지 못했다(로딩 Spinner 구현, 반응형 디자인 등). 이 부분을 진행해야 제대로 실력이 있는 프론트엔드 개발자가 될 것 같아서 계속해서 리팩토링을 이어 나가고 싶다.