Unsplah 클론 프로젝트 후기

• 위코드에서 2주동안 진행한 2차 프로젝트 후기입니다. 1차 프로젝트에서는 React Class형과 Sass를 사용했다면 2차에는 React Hooks(Function형)과 Styled Component를 배워 적용한 프로젝트입니다.

✅프로젝트 소개

• Forbes에서 선정한 전세계 Photograpy Stock Sharing 사이트 중 가장 선도(leanding)하는 사이트 중 하나인 Unsplash 웹사이트 클로닝

• 개발기간 :20.08.03 ~ 20.08.14 (약 2주)

• Front-End Github

• Back-End Github

---

📹데모영상

✔️사용기술

Front-End

• JavaScript(ES6)
• React Hooks (CRA, Function형 component 사용)
• Styled Component
• Git / Github

React 라이브러리

• React-router-dom
• React-Link

Back-End

• Python, Django web framework
• Bcrypt
• jwt
• MySQL
• AWS EC2, RDS
• CORS headers
• Gmail smtp

---

👍프로젝트에서 맡은 역할

회원가입 페이지

• 회원가입 페이지 레이아웃
• 체크박스 유효성 검사, 유효하지 않을 시 경고 색깔(빨간색) 변경
• fetch 함수 통한 회원가입 버튼 클릭 시 회원정보 서버 전달

로그인 페이지

• 로그인 페이지 레이아웃
• Local Storage에 저장된 토큰과 일치 시 login 기능구현(없을 시 불가)
• 소셜로그인 기능 구현 (kakao 소셜로그인)

메인페이지 검색박스

• 메인 페이지 검색 박스 레이아웃
• 백엔드와 통신해 검색 기능 구현 (정규식 적용 첫 글자부터 일치한 데이터만 호출)

검색페이지

• 검색페이지 레이아웃
• 해당 검색어로 백엔드 통신, 데이터 호출 기능 구현
• 해당 검색어와 관련 검색어(태그) 백엔드 호출, 해당 관련검색어 클릭 시에도 검색 기능 구현

유저페이지

• 유저페이지 레이아웃
• JWT 보유 유저일 경우 마이프로필 페이지 호출 기능 구현
• 마이프로필 시 태그 수정 기능 구현(추가,삭제)
• 아닐 경우 유저페이지 호출 기능 구현
• action tab 활용 사진, 좋아요, 콜렉션 각각의 탭 클릭시 호출 기능 구현

---

🤘기억하고 싶은 기능/코드

• 소셜로그인
• 검색 및 필터 기능

💕회고

좋았던점

• 이번 프로젝트에서 가장 좋았던 점은 모든 팀원들이 1차에서 못해봤던 페이지 및 기능을 해볼 수 있었다는 점이다. 개인적으로 1차 프로젝트에서 못해본 검색 기능 및 필터 기능 및 소셜 로그인 기능을 해볼 수 있어 좋았다!
  또한 2차 프로젝트에서는 React Hooks 및 Styled Component를 배우고 적용해 볼 수 있어 기존 클래스형 컴포넌트, Sass와 다른 속성 및 장점을 배울 수 있어 시야를 더 넓힐 수 있었다

• React Hooks 블로깅

• Styled Component 블로깅

• 두 번째로는 페이지별로 나눈 저번 프로젝트와 달리 이번 프로젝트에서는 컴포넌트별로 나눠 서로간의 코드 공유 및 설명을 통해 내가 짠 코드 뿐만 아니라 남이 짠 코드에 대한 이해도를 높일 수 있었다! (메인페이지만 해도 이번에는 각 컴포넌트 별로 모두 다 관여했다)

• 마지막으로 1차 프로젝트에서는 모든 팀 중 가장 적은 인원 (4명)으로 팀을 짰었는데 이번에는 가장 많은 (6명)이 팀이 되어 더 많은 사람들과 협업 시 해야되는 의사소통 및 생길 수 있는 상황에 대한 경험을 할 수 있어 좋았다!

아쉬운점

동전의 양면처럼 좋았던 점의 이면에는 아쉬운점도 공존했다

• 첫 번째로는 1차 프로젝트를 하며 이제 좀 알 것 같다고 느낀 Class형 Component, Sass를 안쓰고 또 새롭게 배운 Hooks, Styled Component를 익히면서 프로젝트를 해서 초반에 진도가 생각보다 안나가 스트레스를 조금 받았다!

• 두 번째로는 컴포넌트의 재활용성 시 설계의 중요성을 간과했던 것이 아쉬웠다. 단순히 다른 사람이 만든 컴포넌트를 사용하면 되겠지라는 생각으로 그대로 import해왔는데 실제로 붙여보는 과정에서 문제가 생겼다. 문제는 계획한 진도를 맞추느라 하루 전에 부랴부랴 맞추는 과정에서 계속 문제가 발생했고 그 문제를 파악하는데 발표 전까지 대부분의 시간을 썼던 것이 아쉬웠다.

• 마지막으로 많은 인원이 합류함에 따라 그만큼 의사소통 미스도 생겼던 것이 아쉬웠다. 특히 백엔드분들과의 소통에 있어 미스가 간혹 있었는데, 백엔드가 생각하는 현재의 진척 상황과 프런트가 생각하는 진척상황에 갭이 발생해 마지막 날 전에 혼란이 왔다.
  아마도 1차 때는 수정님 혼자서 담당하셔서 의사소통이 간결했다면 이번에는 더 복잡함에 따라 생기는 미스가 아니었나 싶다.

개선방법

아직 부족하기에 아쉬운점은 있을 수 밖에 없다. 아쉬운점을 통해 배운 것이고 다음 기회를 통해 매꿔나가면서 성장하자

• 첫 번째 아쉬운 점은 어떤 것을 완전히 새롭게 시작할 때 늘상 생길 수 있는 상황이다. 개발자의 특성상 새로운 배움,문제 봉착의 연속이므로 스트레스 받지 않고 첫 일정계획 시 마음만 앞서서 무리한 일정을 세우지 말아야겠다

• 두 번째 아쉬운 점은 컴포넌트 재활용 시 그대로 사용함에 따라 생길 수 있는 문제를 생각하며 import하자. 추가적으로 2주라는 짧은 시간안에 결과물을 완성해야 되서 컴포넌트 간의 연관성 및 설계에 투자하는 시간이 적어 비효율적인 코드를 양산 한 부분이 있는데 (특히 마이프로필 페이지 부분) 추후에는 무작정 코드를 치기보다 설계할 때부터 더 많은 고민을 들이도록 하자.

• 마지막으로 아쉬운 점은 많은 사람들과 협업 시 생길 수 있는 문제였다. 특히 백과의 소통에 있어 어떻게 소통을 해야 미스가 안나는 지에 대해 생각해볼 수 있는 기회였다. 협업 시 소통은 과할 정도로 해야 내가 전하고자 하는 바가 상대방에 전달된다는 생각으로 그냥 넘어가는 부분이 절대 생기지 말게 해야겠다. 그렇게되면 이번 프로젝트처럼 마지막에 큰 화를 불러오게 된다.

❣️끝으로

• 1차는 아무것도 모르고 시작한 반면에 2차 프로젝트에는 알 것 같은데, 아는 데 잘안되서 스트레스를 조금 받았던 것 같다. 특히 위에서 말했듯 마지막에는 소통 미스로 그간 고생했던 것들을 다 보여주지 못할까봐 조바심에 예민해지기도 했다. 회식 때 들어보니 평소에 항상 돌아다니면서 장난치고 말을 건넸기에 모두 다 내 기분을 눈치 챘다고 한다. 앞으로 그런 감정 컨트롤에 있어 더 신경써야겠다.

• 아쉬움도 많았지만 결과물을 보니 애초에 계획했던 것 이상으로 결과물은 잘 나온 것 같다.
  (물론 코드에는 아직 리팩토링 해야될 게 산더미지만...) 새로운 것을 배우며 2주만에 저런 결과물을 낸 것이 신기하고 감사하다. 모두 다 팀원들이 제 몫을 해줬기 때문에 이룬 결과물이라 생각한다(이걸 보고 있다면 모두 다 너무 수고했고 감사했어요!) . 이번에 느낀 것은
  코드를 잘치는 것도 물론 중요하지만 어떤 개발자랑 일했을 때 소통이 잘되고 마음이 편할 수 있는지, 나는 그런 사람인지 그런 것에 대한 끊임없는 고민을 해야겠다고 생각했다.