2차 프로젝트 회고록 (Wecode)

프로젝트 기간 🗓 : 2022.06.07(화) ~ 2022.06.17(금)

클론사이트 📎 : 원티드 - https://www.wanted.co.kr

팀명 📌 : wantUS

GitHub  : https://github.com/wkddb1359/33-2nd-wantUS-frontend

팀 구성 및 기술 스택 ⚙️

1. FrontEnd : HTML, CSS3(styled-component), JavaScript, React
   • 안성주
   • 김정준
   • 김현주
   • 염종은
2. BackEnd 
   • 황재승
   • 이예은

---

 2차 프로젝트에 앞서 ☀️

1차 프로젝트가 마무리 되고 난 후 개인적으로 더 클린한 코드를 짰으면 하는 아쉬움이 남았었다. 프로젝트를 2주에 동안 스프린트로 진행하였기 때문에 프로젝트 시작 전 휴식 시간을 가지면서 어떠한 기술 스택을 사용해볼지, 클린한 코드를 어떻게 구성할지, 데이터 송수신 과정에서 백엔드 개발자와 어떻게 잘 소통할 것인가에 대해 충분한 고민 시간을 가진 후 프로젝트에 들어가게 되었다.

첫 프로젝트를 끝낸 뒤 내 마음속의 열정이 폭발💥💥하였기 때문에 어떠한 문제도 해결이 가능하다는 자신감으로 2차 프로젝트를 성공적으로 마무리 지어야 겠다는 생각으로 시작되었던것 같다.

지금부터 내가 어떻게 2차 프로젝트를 진행하고 마무리 하였는지 알아보자!

 

페이지 시연 영상 🎥

https://www.youtube.com/watch?v=SqFNWewFKKk&t=4s

wantUS 페이지 시연 영상

 

협업 도구 💁🏻‍♂️  

1. Trello

wantUS-Trello

👉 1차 프로젝트와 동일하게 일정관리 도구로 트렐로를 활용하였다. 이번에는 기능별 작업 일정을 나누고 티켓을 구성하였으며 매일 스크럼하였던 내용을 트렐로에 기록하면서 적극적으로 사용하였다. 

 

2. Slack

👉 팀 프로젝트를 진행하면서 슬랙은 정말 필수인것 같다!! 슬랙을 통해서 개발관련된 내용 뿐만 아니라 기획에서도 어느정도 수정이 필요하였기에 부담없이 소통이 가능했던 것 같다.

 

구현 페이지 🐭

1. Navbar

 

🔴 로그인 시 navbar 구성 메뉴 변경하기

👉 로그인이 되었을때와 로그인이 되어있지 않는 경우를 구분하기 위해서 useState를 활용해서 로그인 토큰이 담기면 true값을 전달하여 구분하였다.

 

👉 isLogin값에 따라서 텍스트가 변경된다.

 

👉 로그아웃을 누르게 되면 토큰을 제거하고 isLogin값을 false로 반환하며 메인페이지로 이동한다.

 

🟠 Nav dropmenu 구현

👉 햄버거바를 눌렀을 때 나타나는 dropmenu의 상수데이터를 우선 구성하였다. 2차 dropmenu가 있기 때문에 또 하나의 배열안의 객체형태를 만들었다.

 

👉 onMouseEnter 이벤트를 사용하여 currentID값을 세팅하였고 id값과의 비교를 통해 2차 dropmenu를 구현하였다.

 

👉 다음은 dropmenu바를 제거하기 위해서 작성한 코드이다. 햄버거바를 2번 클릭하면 dropmenu가 없어지는 방식이 아닌 일반 사이트에서도 흔히 사용하는 브라우저 클릭 시 dropmenu가 없는 방식으로 만들기 위하여 window객체와 addEventListener를 이용한 코드를 작성하였다. modalEl을 사용하여 사용자가 햄버거바외의 공간을 클릭하는 경우를 구분하였고 DropMenu값을 false로 변환시켜주게 되면서 브라우저 클릭 시 dropmenu제거 기능을 구현하였다.

 

2. Mypage

 

🟡 정적 데이터와 동적 데이터 구분하여 구현

👉 서버로부터 사용자마다 지원한 결과에 대한 데이터를 받아온다.

 

👉 다음과 같은 방식으로 지속적으로 변하지 않을 정적 데이터는 하드코딩으로 표현하였으며 동적 데이터는 서버로 부터 받아와서 값을 할당한 useState값에 따라서 달라지게 된다.

 

👉 공통적으로 같은 컴포넌트가 사용되는데 padding값만 조금만 다른점을 발견하였다. 따라서 하나의 컴포넌트로 해결하기 위해서 상수데이터를 사용하였다. 상수데이터에 각 컴포넌트마다 조금 다른 padding 값을 전달하였다.

 

🟢 filter 메소드를 통한 사용자 지원 현황 수치 계산

👉 filter 메소드를 사용하여 사용자의 지원 결과에 대하여 서버로부터 데이터를 받아오면 그 수치를 계산하여 표현하였다.

 

3. Resume

 

🟤 이력서 조회 기능

👉 서버로부터 사용자가 지원한 이력서 데이터를 받아와 userFile에 값을 할당한다. 이력서 파일 데이터는 객체형식으로 들어오는 것을 확인하였고 userFile에 값이 할당되면 서버에서 받아온 이력서 파일 개수만큼 map 메소드를 통하여 이력서 카드가 늘어나게 표현하였다.

 

🔵 이력서 삭제 기능

👉 이력서 삭제 버튼을 누르게 되면 서버로부터 DELETE 요청을 보내게 되고 삭제가 완료되면 alert을 통하여 삭제가 완료되었다는 알림창을 사용자로부터 보여주게 된다. 하단부분에 다시 GET 요청을 통하여 사용자 이력서 데이터를 받은 이유는 DELETE 요청이 완료된 후 새로고침을 해야만 삭제요청이된 이력서가 화면에서 제거된 것을 볼 수 있었기 때문에 DELETE 요청이 되고 다시 GET요청을 통하여 새로고침에 대한 이슈를 해결하기 위해서이다.

 

🟣 이력서 다운로드 기능

👉 file-saver 라이브러리를 통하여 파일 다운로드 기능을 구현하였다. 파일을 다운로드 할 경우 파일의 제목으로 저장되게 코드를 작성하였다.

 

⚫️ 이력서 업로드 기능

👉 type속성을 통하여 사용자 컴퓨터로부터 파일을 가져올 수 있으며 파일이 업로드 되면 handleChangeFile함수에서 서버로 데이터를 보낸다. 데이터를 보낸 후 GET요청을 보낸것 또한 새로고침에 대한 이슈를 해결하기 위하여 작성하였다.

---

 

🌈 프로젝트를 마치며... 

엄청난 자신감으로 시작했던 2차 프로젝트!!! 어떠한 상황이든 만족하는 결과를 얻을 수 없다는 사실을 깨달은 프로젝트였다. 클린코드를 구성하기 위해서 최대한 중복되는 코드를 줄이면서 서버와 데이터를 송수신할 때에도 어떠한 방법으로 조금 더 쉽고 가독성이 좋은 코드는 무엇인가에 대하여 고민을 많이 했었는데 마지막에 코드를 보면 항상 아쉬운 마음이 드는건 어쩔 수 없나보다...

2차 프로젝트가 종료되는 동시에 기업협업에 나가서 한달간 기업에서 실무를 해보는 시간을 가지는데 프로젝트 기간동안 기업협업에 대한 설렘 때문인지 마무리하는 작업에서 코드를 정리하지 못하고 시연영상 찍는데 급급했던 것 같다.

항상 아쉬운 마음이 많은 만큼 프로젝트를 하면서 어떠한 점을 고쳐야 할지, 어떠한 부분을 더 필요로 공부하고 나의 강점으로 내세울지에 대하여 많이 배울 수 있는 시간인 것 같아 매우 소중한 경험이라고 생각한다.

다음 프로젝트는 언제일지 모르지만 항상 초심을 잃지말고 결과보다는 과정에서 얻는 가치가 더 소중하다는 것을 잊지말자!