PINTEREST 클론코딩

---

📋 목차

1. 프로젝트 설명

2. 개발 기간

3. 팀원소개

4. 사용기술

5. 기능소개

6. API설계

7. 잘했던 부분

8. 애매했던 부분

---

🎬 프로젝트 설명

BackEnd Repository

---

📅 개발 기간

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

---

📹 시연영상 Youtube

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

---

🧑🏽‍🤝‍🧑🏽 팀원소개

FRONT END

• 이수창(https://github.com/eternalclash)
• 윤상준(https://github.com/highjoon)
• 이성민(https://github.com/sungminleeme)

BACK END

• 황창환(https://github.com/changchanghwang)
• 정창우(https://github.com/changpro1)

---

🛠 Tools

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

---

💻 기능소개

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

---

🏘️ API설계

전체 API설계

---

잘했던 부분

• 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 상에서 나눈 다음에 전달해줘야만 하는건지?