🌃 Winted PRJ 소개
- 원티드랩에서 운영중인 채용 플랫폼 원티드 클론 프로젝트
(짧은 기간, 개발에만 집중하기 위해서 디자인/기획 부분만 클론하였습니다.)
😎 개발 기간 및 인원
🔧 적용 기술
- Frontend
. React / React-Redux / React-Hooks / React-router / Styled Component / Chart.js
. JavaScript(ES6) / Sass / HTML - BackEnd
. Python / Django
. CORS Header / Bcrypt / PyJWT / MySQL / REST API / AqueryTool (데이터베이스 모델링) - 공통: git / github, Postman, Trello
🎪 구현 기능
🎪 프로젝트 영상
🤗 기억에 남는 코드
1) 로그인 > 회원가입 or PW 입력 화면 띄우기
: 로그인 email 입력시 Backend DB에 있는 유효한 사용자면 PW 입력창으로 유효하지 않으면 회원가입 모달창이 뜬다.
Wanted의 회원가입/로그인의 경우, 별도의 page가 있는 형태가 아니라 현재 경로에서 모달창을 띄워서 진행되는 구조였다. email 인증 > pw 입력 또는 회원가입 창으로 넘어가야 하는데, <div id="root"><div> 안의 html tag가 전부 날아가는 심각한 bug가 발생했다...😭 여러 가지 case로 debugging을 해보니 조건부 rendering을 사용한 게 문제인 것을 확인했고, styled component를 사용해서 각각의 state를 props로 전달해서 true/false에 따라 css의 display를 control하여 bug를 수정하였다.
2) 연차별 연봉 Chart 구현
: 대분류/중분류에 따라 연봉 data를 fetch를 받는다.
직군별 연봉 페이지를 rendering 할 때, 4개의 Backend API와 통신하여 fetch를 받아야 했다. react hook을 처음 써보다 보니 불필요하게 fetch문을 작성해서 data loading시 delay가 발생했는데, rendering시 최초 1회만 필요한 data와 이 후 category 변화에 따라 fetch를 계속 받아야 하는 data를 구분하여 fetch가 실행되는 함수를 작성하였다. (initialFetchData, fetchData) 이 때 axios.get.then 구문을 처음 사용해 보았는데 조금 더 공부가 필요하다고 느꼈다. 이 부분은 향후에 추가로 블로그에 포스팅하면서 정리하는 시간을 가질 예정이다.
: 연차 및 예상 연봉 선택시, chart design이 변화한다.
이전 프로젝트에서 slick-slider라는 library를 사용했었는데 처음에는 라이브러리니까 그냥 쉽게 사용법 보고 따라 하면 되겠지?! 했다가 큰코다쳤었던 경험이 있었다. 그래서인지 이번 chart.js는 조금 더 쉽게(?) 접근할 수 있었다. 물론 라이브러리 구조를 100% 완벽하게 이해하는 경지는 아니지만... 적어도 다른 사람이 작성한 코드를 보면서 이건 이렇게 사용하면 되겠다. 정도의 느낌은 가져갈 수 있었다. 가장 마지막까지 고생했던 건 예상 연봉을 입력했을 때 해당 연차에 해당하는 bar에 mini bar가 floating 되는 형태로 움직이게 하는 것이었다. 해당 효과를 적용하기 위해서 datasets에 1) 기존 bar가 그려지는 data Obj 이외에 2) overlay bar가 그려지는 data Obj를 추가로 작성하였고, 현재 선택된 연차 정보를 props로 전달하여 선택된 연차일 경우에만 background 효과를 다르게 주어서 원래 사이트의 느낌을 살릴 수 있었다.
🐇 느낀점
1차 프로젝트가 끝나자마자 2차 프로젝트가 시작되었다. 처음에는 1차를 한 번 해봤으니 2차는 조금 더 속도가 나서 많은 기능을 구현할 수 있을 거라고 생각했는데, 새로 배우는 React hook, styled component 등을 코드에 적용하느라 예상과는 다르게 속도가 나질 않았다. 마음속으로 잠깐 조바심이 나기도 했지만, 같이 프로젝트 진행하는 팀원분들도 마찬가지의 상황이었기에 팀원들과 대화를 많이 나누면서 불안함을 금세 털어버릴 수 있었다. 내 부족한 부분을 채우기 위해서 1차보다 좀 더 많은 시간을 쏟아야 했고 그만큼 피로가 누적되어서 끝에는 정말 힘들었지만, 마지막까지 고생해준 팀원들 덕분에 무사히 2차 프로젝트 발표를 마무리 할 수 있어 감사하다.
📧 TO. 윈티드 팀
(저도 PM 형욱님을 따라서 간단히 메세지를 남깁니다. 😙)
1차 프로젝트 피로가 누적되어 힘든 상황에서도 서로 내색하지 않고 즐겁게 프로젝트를 할 수 있도록 좋은 팀 분위기를 만들어 주어 너무 고맙습니다. 다음주 기업협업에서도 잘 할 수 있을거라고 믿습니다. 윈티드팀 화이팅!
🕛 어떤 개발자?
프로젝트 이후 오랜만에 집에 전화했다. 그냥 간단한 안부 통화였는데 엄마가 도중에 이런 말을 했다. "네 목소리가 되게 행복하게 들려". 그 말을 듣고 약간 울컥하는 게 있었지만 내색하지 않고 대화를 이어나갔다. 아직도 새로운 것을 배우는 건 어렵다. 하지만 2달간의 생활을 해보니 결국에는 해낼 것이라는 믿음이 있다. 그리고 그 믿음이 바탕에는 정말 좋은 동료들이 있었다. 앞으로도 지금까지처럼 배움의 즐거움을 유지하며 동료와 성장하고 싶다.
