211023 클론 코딩 회고

ミンミン·2021년 10월 23일
1

TIL

목록 보기
28/42

PINTEREST 클론코딩

ezgif com-gif-maker


📋 목차

1. 프로젝트 설명

2. 개발 기간

3. 팀원소개

4. 사용기술

5. 기능소개

6. API설계

7. 잘했던 부분

8. 애매했던 부분


🎬 프로젝트 설명

스크린샷 2021-10-22 오후 4 16 00

BackEnd Repository


📅 개발 기간

  • 2021년 10월 18일(월) ~ 2021년 10월 22일(금) / 총 5일
  • 설계 1일 / 개발 4일

📹 시연영상 Youtube

다양한 기능이 있는 Pinterest를 클론코딩했습니다.


🧑🏽‍🤝‍🧑🏽 팀원소개

FRONT END

BACK END


🛠 Tools

  • React
  • 상태관리 (Redux)
  • 스타일 (styled-components)
  • 라우터 (connected-react-router)
  • 통신 (Axios)
  • 배포 (AWS S3)

💻 기능소개

  • 로그인/회원가입/로그인 유지 (JWT 인증 방식).
  • 사진 등록, 댓글, 좋아요 기능.
  • 내가 작성한 게시물 확인.
  • 게시물 검색.

🏘️ API설계

전체 API설계

스크린샷 2021-10-22 오후 3 59 41


잘했던 부분

  • Git-flow를 설정하였고, 규칙을 정해서 commit을 하였다. git이 아직 안 익숙한 팀원도 익숙해 질때까지 계속 도와 주었다.
  • 승규멘토님의 조언대로 왠만하면 마이크를 켜두려고 하였다. 그러기위해서 처음에 만났을 떄 부터 마이크를 계속 켜고 모르는 것은 계속 물어보고 서로 공유하는 분위를 조성하였다. 처음보는 사이였지만 계속 대화를 주도해서(실력은 제일 부족했지만) 서로간에 거리를 빠르게 좁혀서 프로젝트가 끝날 때 까지 좋은 분위기가 형성 되었다.

애매했던 부분

  • 각 페이지의 최상위 컴포넌트에서 useSelector로 전체 데이터를 받아온 후 하위 컴포넌트로 전달해주는 방식으로 데이터를 관리했는데, 맞는 방식인지 알아볼 필요가 있음.

  • 현재 로그인 유지 방식은 로컬 쿠키에 있는 토큰을 백엔드로 전송하고,
    백엔드에서 해당 토큰이 인증이 안되어있으면 400 에러, 되어있으면 200에러를 받고 프론트에서는 각각 isLogin = false, isLogin = true로 내려줌.
    이후 App.js에서 isLogin의 true/false 여부를 체크하여 로그인을 유지하는 방식. 맞는건지?

  • 로그인이 되었을 때와 안되었을 때 렌더링되어야 하는 컴포넌트가 다르기때문에, 삼항연산자를 통해 isLogin이 true면 거기에 맞는 컴포넌트를, false면 거기에 맞는 컴포넌트를 렌더링함. 맞는 방식인지?

  • useSelector로 객체 요소인 배열을 받아올 때,
    const mainPins = useSelector((state) => state.main.list.list.list);
    이런 식으로 useSelector 상에서 하위 객체로 접근이 안되는 이유가 궁금함.
    왜 Redux 상에서 나눈 다음에 전달해줘야만 하는건지?

profile
같이 성장해 나가는 개발자가 되고 싶습니다

0개의 댓글