[2차 프로젝트] 회고

✨ 2차 프로젝트 : 원스톱 인테리어 플랫폼[오늘의집] 을 모티브로 한 팀 프로젝트

💰 프로젝트 팀 : Bank House(은행의집)

(1) 프로젝트 소개

• 오늘의집은 커뮤니티, 스토어, 인테리어시공 크게 3가지로 구성되어 있는데, 그 중에서도 SNS에서 핫 한 집구경 컨텐츠 및 커뮤니티 페이지를 메인 아이템으로 구현

(2) 프로젝트 기간 : 2021.05.24. ~ 2021.06.04. (2주)

(3) 프로젝트 계획

• 1주차 Sprint : 각자 맡은 페이지 기능 구현 및 컴포넌트화
• 2주차 Sprint : code Refactoring 및 conflict 해결 등

(4) 프로젝트 팀원 (👩‍💻github)

• Front-end(4명) : 김유림, 안정현, 안준현, 이지연
• Back-end(2명) : 김경래, 최대환
  • Back-end github 링크

(5) 적용기술

• Front-end : React, React Router, React Hooks, Styled Components, JavaScript
• Back-end : Python, Aquery, Django web framework, Bcrypt, My SQL, PyJWT, Django Unit Test, Docker, AWS(RDS, EC2, S3), unicorn, nohup
• Common : Slack, Trello, GitHub, Git, RESTful API

(6) 필수 구현사항 💥

• 🎈 로그인/회원가입 페이지
  • 일반 로그인 및 회원가입
    • 정규식을 활용한 로그인/회원가입 유효성 체크
    • 로그인/회원가입 input 값 유효성 체크 통과 여부 실시간 알림 기능
  • 카카오 소셜 로그인 및 회원가입
    • OAuth2.0 기반 카카오 로그인 API 연동
      
      
• 🎈 메인 페이지(사진 카테고리 페이지)
  • Nav 컴포넌트
    • location 객체를 활용한 커뮤니티 내 카테고리 메뉴 경로 이동에 따른 폰트 색 변경
    • 페이지 스크롤 시, 메인 Nav 고정 기능(position: sticky 적용)
    • localStorge 상의 access token 저장 여부에 따른 로그인/로그아웃 상태 변화
  • 페이지 헤더 슬라이더
    • 라이브러리(slick slider)를 활용한 슬라이더 구현
  • 컨텐츠 필터링 기능
  • 컨텐츠 card 기능
    • 동적라우팅을 활용한 페이지 이동 구현(카테고리 페이지 -> 상세 페이지)
    • mock data 활용 및 적용, 백엔드와 API 연결
  • 페이지네이션 기능
    • mock data 적용, 백엔드와 API 연결
  • throttle을 적용한 GoToTop button 기능 구현
  • Footer 컴포넌트
    
    
• 🎈 사진 card component 상세 페이지
  • 댓글 추가 및 해당 이미지 삭제 기능 구현
  • 댓글 게시된 시간 계산하여 1분 전, 2분 전 등 표기 기능 구현
    
    
• 🎈 글쓰기 페이지
  • 글쓰기 기능 (사진 및 내용 업로드)
    • 옵션값 미선택시, 해당 input창 border 색 변경
    • 옵션값 선택시, placeholder 검정으로 변경
  • 글쓰기 업로드 시, 메인페이지 내 사진 카테고리 페이지에 업데이트
  • 업로드된 컨텐츠 삭제 기능
    

(7) 프로젝트 전체 시연 영상

• 🎬 유튜브 영상 링크

🌳 1. 구현 사항

1) Nav 컴포넌트

* Nav 상단에 '광고 배너'(TopBanner.js) 부분 컴포넌트화하여 적용

2) Footer 컴포넌트

* 상수 데이터를 활용하여 컴포넌트 내 배열 안의 객체로 관리

(1) Nav 컴포넌트 로그인/로그아웃 상태 변화

• 로그인이 성공하여 access token이 localStorage에 있는 경우
  Nav 의 로그인을 로그아웃 으로 변경

(2) Nav 컴포넌트 레이아웃 및 기능 구현

• location 객체 를 활용하여, 메인페이지(커뮤니티) 내 하위 카테고리 메뉴 경로 이동에 따른 폰트 색 변경 적용

  • 선택된 하위 카테고리 메뉴인 경우 파란색 폰트를 적용, 그렇지 않은 경우에는 검은색 폰트 적용

• 페이지 스크롤 시, 메인 Nav 부분 고정 기능

  • position: sticky 스타일 적용

(3) Footer 컴포넌트

• 링크 연결되는 부분 없이 보여지는 레이아웃만 구현

  • 일부 메뉴에 hover 시, 포인터 모양으로 변경

  • 상수 데이터 활용(map 메서드 이용)

🎁 2. 기억하고(?) 싶은 로직/코드

position: sticky

• 구현 목표
  • 페이지 내 스크롤 시, 메인 Nav 영역만 고정되어 움직이도록
  • Nav 상단의 '광고 배너' 부분 및 Nav 하단의 하위 메뉴 부분은 제외하고

• 처음엔 position: relative/absolute/fixed 스타일 속성을 활용하여, 쉽게 구현이 가능할 거라 생각했으나
  • 좀처럼 생각한대로 구현이 되지 않았고
• 프로젝트 일정에 차질이 없도록 하기 위해, BLOCKER 라고 판단하여 담당 멘토님께 힌트(?)를 얻어 진행

🎨 3. 프로젝트를 마치고...

(1) 긴장 보다는 조금이나마 더 발전된 팀원의 모습으로,

• 1차 프로젝트를 진행하면서 겪은 여러 시행착오들을 통해 2차 프로젝트에 대한 막연한 두려움은 사라지고,

• 2차 프로젝트를 진행하면서 새로 배우게 된 개념들에 대해

  • React Hooks
  • React Styled-Components
  • Git Rebase

• 익히고, 적용하고, 익숙해지기 위해 노력함

(2) 적극적인 Trello 활용과 소통으로,

• 각자가 맡은 부분 외에 프로젝트의 전체적인 큰 그림을 보면서 daily stand-up 미팅에 참여하고자 노력하였고,

• 하나의 기능을 구현하더라도 coding convention 에 맞게 작성하는 것에 초점을 맞춤

(3) class 컴포넌트 사용에서 function 컴포넌트 사용으로 넘어가면서,

• function 컴포넌트 안에서도 React Hooks 을 이용해 React 컴포넌트 의 상태(state) 와 라이프사이클(lifecycle) 을 관리할 수 있다고 배웠는데,

• 이에 대한 적용을 제대로 해보지 못한 것은 아쉬움으로 남음