2차 프로젝트 회고록

1. 프로젝트 소개

원티드 - 지인 추천하고 보상금 받기

1차 프로젝트 리모아가 끝이 나고, 2차 프로젝트로 "원티드"라는 사이트를 클론 하게 되었다. 원티드는 ‘지인을 추천해 채용되면 채용된 사람과 추천한 사람 모두에게 보상금을 주는 곳’으로 알려진 원티드는 채용 추천 플랫폼이다.

이 원티드는 내가 낸 아이디어였고, 다행히도 투표를 많이 받아서 진행하게 되었다.

 

2. 사용된 기술

- HTML / CSS 및 Styled Component
- JavaScript(ES6)
- React(Hooks, styled component)

 

3. 내가 맡은 부분 및 역할

원티드 채용 상세 페이지 UI 및 기능 구현

-  useState를 사용하여 사용할 변수를 선언하고 값을 변경함

- styled component로 css 작업

- useEffect를 사용하고, 그 안에 fecth()를 이용해서 백엔드 API를 연동 후 POST, GET을 사용하여 백엔드와 값을 주고 받음

-  POST, GET을 사용하여 팔로우, 좋아요, 북마크 기능 구현

- GET으로 백엔드 API에서 준 HTML 코드들을 dangerouslySetInnerHTML을 사용하여 삽입 성공

- Google Map API를 활용하여, 백엔드 API에서 받은 위도, 경도를 화면에 뿌림

- 백엔드 API를 받아서 map()을 써서 채용 리스트를 화면에 뿌림

 

원티드 모달 창  UI 및 띄우기 구현

- ModalPortal을 사용하여 root가 아닌 modal이라는 id를 가진 요소에 접근하여 모달 창을 띄움

- useLayoutEffect를 사용하여 모달 창을 띄울 시, 스크롤 방지

- styled component로 css 작업

 

원티드 이력서 지원하기 UI 및 기능 구현

- useEffect를 사용하고, 그 안에 fecth()를 이용해서 백엔드 API를 연동 후 POST, GET을 사용하여 이력서 리스트들을 받아오고, 이력서를 클릭하면 마이 페이지에 지원 현황에 추가

- styled component로 css 작업

 

회사 디테일 페이지 UI 및 기능 구현

- 채용 리스트를 filter()와 map()으로 구현

- 이미지 슬라이더 hooks으로 구현

 

마이 페이지 UI 및 기능 구현

- styled component로 css 작업

- POST 방식으로 로그인된 유저의 토큰을 인식하면 그 유저의 정보들이 프로필에 보이고, 좋아요, 북마크, 지원 현황을 모두 확인할 수 있음

 

4. 잘한 점(3가지)

- 백엔드 개발자분들과 일할 때, 포스트맨을 잘 활용했던 점

- Hooks와 스타일 컴포넌트를 사용하여 프로젝트를 진행한 점

- 팀원들과 즐겁게 작업을 했던 점

 

5. 아쉬운 점(3가지)

- Github rebase 할 때, 데이터들이 자꾸 사라져서 rebase를 잘 쓰지 못한 점

- 내 css를 다른 팀원들이 수정할 때, 못 알아보게 짜서 더 공부할 필요를 느낌 

- 블로그 정리 못한 점...

- 파일 업로드 기능 시간이 없어서 못한 점

 

6. 기록하고 싶은 코드/함수/로직

이 로직은 백엔드 API에서 채용 리스트들을 그냥 뿌려줬고, filter()와 map()을 써서 list가 4개 이하 일 때, 화면에 4개만 뿌려지고 4개 이상 일 때는, 더보기와 접기 버튼을 만들어서 "보였다, 말았다" 하는 로직이 제일 맘에 들었다.