React | Wanted 클론 프로젝트

Teasan·2021년 1월 7일
0

wecode

목록 보기
2/2
post-thumbnail

프로젝트 소개

채용 플랫폼 서비스인 원티드(Wanted)를 기획/디자인을 제외한 주요 기능을 구현하였습니다.

👩🏻‍💻 👨🏻‍💻 Team Winted

◼️ FrontEnd

김수연 / 민지연 / 김한나 / 김한나

◼️ BackEnd

김형욱(Product Manager) / 박재용

◼️ 프로젝트 기간

2020.11.02 ~ 2020.11.13 (약 2주간 진행)


◼️ 프로젝트 구현 영상

🔹 메인 화면

🔹 구현 영상 링크


◼️ 구현 페이지

  • 회원가입, 로그인/로그아웃 (소셜로그인)
  • NAV bar
  • 구직정보 리스트 탐색페이지
  • 구직정보 상세 페이지
  • 직군별 연봉 페이지
  • 이력서 관리 페이지
  • 회원 추천 페이지

◼️ 기술스택

🔹 front-end

  • React / React-Redux / React-Hooks / React-router / Styled Component / Chart.js
  • JavaScript(ES6) / Sass / HTML

🔹 back-end

  • Python / Django
  • CORS Header / Bcrypt / PyJWT / MySQL / REST API / AqueryTool (데이터베이스 모델링)

🔹 협업 도구


◼️ 내가 구현한 기능

  • Role : Team Member
  • Position : Front-end
  • Stack : React / Javascript / styled-components / React-router
  • Works :
    1) 디자인을 바탕으로 Component 설계 및 styled-component를 이용한 web 디자인 구현
    2) 내부 API와 Map method를 이용한 data render
    3) menu tap 및 Modal 창 component 구현
    4) 로그인/회원가입 기능 제어 구현
    5) Trello와 Git을 통한 협업 기술
    6) Git rebase를 활용하여 git Workflow 진행

◼️ 진행 과정

🔹 trello

📍 trello를 이용하여 팀의 작업 현황과 각자의 진행사항 확인 및 공유

🔹 10 minute meeting

📍매일 아침 10분간 팀원들과 각 파트별로 진행상황 발표 및 피드백 공유와 일정 조율을 하였다.

🔹 Github

📍 github에서 각 기능 별 branch를 생성하여 git을 이용한 버전관리 및 협업을 진행했다.


◼️ 기억에 남는 코드

1) 추천 페이지 메뉴탭 구현

객체의 value를 page component로 각각 할당하고 map method를 사용하여 click할 때마다 해당 component로 이동 가능하도록 구현했다. 조건문을 활용해서 font color 변경 기능도 포함시켰다. 처음으로 map method의 기능을 제대로 이해하는데 도움이 된 코드라 기억에 남는다.

2) Modal 구현

Modal을 처음 구현하면서 겪은 역경과 고난(?!) 덕분에 Modal 구현 부분을 기억에 남는 코드로 꼽았다. Modal 기능은 초기값 설정과 onClick event로 Modal Component에 setState로 값을 넘겨주는 것까지 구현하는데까지 진행하였다. 그런데 문제는 style 적용에 있었다. Modal 창이 뜨면 배경이 흐릿해지고 Modal 창만 올라와야 하는데 styled-component의 사용법에 익숙하지 않아서인지 고치면 고칠수록 레이아웃이 뒤죽박죽😅 이 되었다.

Modal의 가장 상위 tag style에 z-index를 높게 주고 Modal 창의 background가 되는 상위 tag에 position을 absolute로 설정한 뒤 Modal창 tag에 position : relative 를 주었더니 다행히 원하는 대로 style이 적용되었고, Modal의 background 부분을 클릭했을 때 Modal이 닫히는 기능까지 무사히 적용시킬 수 있었다.

Modal 안에서 Menu Tap도 component 쪼개기를 통해 그대로 구현해봤다. 이때 앞서 Main page 구현했던 방법대로 Modal 창 안에서 미니 사이즈로 Menu Tap 코드를 응용해서 적용해보니 기능이 그대로 구현되어 너무 재밌게 만들었던 것 같다!

Modal 창 안에서 추천사를 수정하고 저장까지 진행했던 기능도 기억에 남는다. 이 기능은 프로젝트 마지막 날 발표 직전의 직전까지 붙들고 있었던 것 같다. 추천 user box 안에 BE 서버에서 받은 각각의 user 정보 data도 뿌려줘야하고 삭제를 하면 데이터가 담긴 추천 user box도 지워줘야 했다. 그리고 Modal 창 안의 게시판에서 추천사를 작성하고 저장하는 것까지 해야했는데 솔직히 이때쯤부터 거의 기억을 잃었다고 말할 수 있다.. 밤새 멘토님과 동기들의 도움을 받아서 겨우겨우 그럴 듯한(?) 모양새는 갖춰질 수 있었다. 이부분은 (정신이 좀 돌아왔을 때) 리팩토링이 필요할 것 같다.


◼️ 팀 프로젝트 후기

좋았던 점
새로운 기술을 배우고 적용해서 프로젝트를 진행할 수 있었다. 1차 팀 프로젝트에 비해서 다소 진행속도가 느렸지만, 조급해지지 않으려고 스스로를 매순간 캄다운😤 시키면서 차근차근 하나씩 해보려고 했던 것 같다. 그리고 이번에는 다뤄야할 데이터가 많았기 때문에 시시각각 BE와의 소통이 중요했고, BE와의 소통 방식을 더 잘 이해하기 위해서 익숙해지려고 노력헀다.

아쉬웠던 점
당연히 체력이다. 1차 팀 프로젝트를 진행하면서 많이 지쳐있기도 했고, 쉬는 텀 없이 바로 2차 팀 프로젝트를 시작하고 새로운 언어를 배우고 익히느라 정신도 없었다. 스스로도 시간이 부족하다 느끼고 있었기에 배우고 있는 언어를 과감히 적용하지 못했던 것 또한 아쉽게 느껴진다. 반성.. 거의 매일 새벽까지 작업한 탓에 심지어 마지막 발표 이틀 전부터는 어떻게 진행했는지조차 잘 기억이 나지 않는다.. 개발자에게 체력(그리고 멘탈 관리!)이 얼마나 중요한지를 다시 한번 느낄 수 있었던 시간이었다. 운동하자!! 😩

그리고
2차 팀 프로젝트를 시작하기 전에는 1차 팀 프로젝트를 진행하던 것보다 좀 더 수월하게 진행될 것이라 생각했지만 그건 크나큰!!! 착각이었음을 깨닫는데는 하루조차 걸리지 않았다. 새로운 언어를 배우고 익히는데에만 어느 정도의 시간 투자가 반드시 필요한데, 익히는 시간이나 고민 없이 바로 기능에 새로운 언어를 적용해야했기 때문에 기능을 구현하기까지의 진행이 아주아주 더뎠던 것 같다. 속도가 너무 느려서 마지막에는 과연 결과물을 제대로 보여줄 수 있을지조차 알 수 없는 상황이었다. rebase를 하다가 어떤 과정에서 문제가 생겨 최종 코드가 사라져서 팀원들 모두 새벽 내내 발을 동동 구르던 것까지 무엇하나 긴장감을 놓칠 수 없었던 시간들이었다. 4주차에 접어들면서 모두가 지쳐갈 때쯤이었고, 텐션이 낮아질 때도 있었지만 그래도 함께 화이팅하면서 새벽까지 웃음을 잃지 않았던 팀원 모두에게 진심으로 감사의 말을 전하고 싶다. 짧은 시간 탓에 아쉬운 점도 많고, 체력 조절을 잘 하지 못한 자신에게 때때로 실망할 때도 있었지만 이 시간들이 더 나은 개발자로서 성장할 수 있는 좋은 토양이 되어주리라 믿는다. 그리고 마지막으로 끝까지 포기하지 않은 나에게도 큰 박수를 쳐주고 싶다!

profile
일단 공부가 '적성'에 맞는 개발자. 근성있습니다.

0개의 댓글