[JSCODE] 개발자 포트폴리오 사이트 v1

Ocean·2023년 3월 6일
0

JSCODE - React study

목록 보기
5/5

프로젝트 내용

  • 회원가입 - 구글 로그인 API를 통해 구현
  • 포트폴리오 정보 입력
  • 포트폴리오 정보 수정 및 삭제

구현 영상

위 사진을 누르면 동영상이 실행됩니다.

GitHub 바로가기

역할

  • 구글 로그인 구현
  • 정보 입력 받고 저장하는 페이지 구현
  • 정보를 수정/삭제하는 Mypage 구현

이 중 mypage 구현을 담당했다.

배운 점

  • 감정일기장 클론코딩 때 배운 useReducer를 더 익히고 싶어서 프로젝트에 사용했다. 결론적으로 reducer 함수나 dispatch에 대해 더 잘 알게되었다.
  • 공부하는 법에 대해 고민이 많았는데, 물론 강의를 듣고 책을 읽는 것도 도움이 많이 되지만 프로젝트를 진행하면서 직접 부딪히는 게 가장 학습이 빠르다는 것을 느꼈다.
  • 프론트엔드 공부를 시작한 뒤로 프론트 여러 명이 진행하는 프로젝트는 처음이었는데 팀프로젝트에서 첫 프로젝트 설계가 정말 중요하다는 것을 깨달았다.

힘들었던 점

  • 위 배운 점과 이어지는 점인데, 아이스브레이킹이 되지 않은 상태에서 프로젝트 설계를 하느라 데이터 구조 등을 정하지 않았는데, 후에 기능을 합칠 때 충돌이 너무 많이 일어나서 해결하느라 애를 먹었다.
  • 정보를 저장하는 페이지를 구현한 팀원은 useState를 쓰고 정보를 수정 및 삭제하는 페이지를 구현한 나는 useReducer를 썼다.

    해결 방법:
    reducer에 데이터를 초기화 시키는 로직을 만들어 onInit 함수를 만들었다.
    onInit 함수를 정보 입력 페이지에서 submit 할 때 사용해서 데이터를 통일시켰다.

아쉬웠던 점

  • 개발자 포트폴리오 공유 사이트인데 백엔드가 없어서 "공유" 부분을 구현을 못 했다. 프로젝트를 이어나가서 통신까지 하는 사이트를 만들고 싶다.
  • 아직 CSS를 제대로 만들지 못해서 페이지가 너무 못생겼다..🥲 CSS도 styled-component를 사용해보고 싶다!

다짐

  • 더 이쁘고, 더 많은 기능을 가진 v2를 3월 안에 만드는 것이 목표이다!
profile
chick! chick!

0개의 댓글