챌린지를 참여하게 된 배경

작년 겨울 드디어 나도 취업했다는 기쁜 마음을 안고 첫 출근을 하였지만 5일 만에 말도 안되는 권고사직을 당했다. 이유는 프론트엔드 개발자로 하기엔 실력이 없다고.. 애초에 사수도 없었지만 더 웃긴건 4일차에 프론트엔드 말고 AI나 안드로이드 개발자를 할생각 없냐고 대표가 물었는데 나는 AI는 거의 다뤄본적도 없고 안드로이드도 대학교때 말곤 준비한적이 없어서 공부를 해야할거같다고 했다.근데 대표는 계속 안드로이드 개발자 권유를 하면서 3개월만 공부하고 다시 지원하라고 했다.. ㅋㅋㅋㅋㅋ 나보고 전공자라서 이런거 다룰줄 알았다고 기대 많이 했다는데 이럴거면 프론트엔드로 왜 뽑아놓은건지.. 그리고 앱개발자로 한번 해볼래도 아니고 나갔다가 공부해서 다시 그걸로 지원하라는 말이 어이가 없었다.
결론은 회사랑 안맞다고 짤리게 되어 어이없게 다시 취준생이 되었고.. 별 준비없이 12월을 마무리 하였다. 하지만 다시 새롭게 준비해서 내 역량을 좀 더 키우기 위해 원티드 프리온보딩 챌린지에 신청하게 되었다.

챌린지하기 전 나는?

• 리팩토링 해본적이 없다
• 폴더 구조에 대해 진지하게 생각해본적이 없다
• 변수명이나 함수명에 대해 많이 고민을 했지만 결국은 일관성 없게 이름을 지은 경우가 많다.
• README를 꼼꼼하게 작성한 적이 없다.
• 기본적인 기능 구현에만 초점을 맞췄었다. 정말 단순히 최적화 이런거 신경안쓰고 이 기술을 기본적으로만 다룰 수있는지에 초점을 맞춘 기능구현에만..

챌린지 사전과제

과제 내용

제공된 API를 이용하여 나만의 Todo App 개발

사용된 기술

• Javascript
• React
• mui/material
• Recoil

아쉬운 점

• 회원가입 시 비밀번호 확인 칸 존재 x
• Recoil은 단순히 실시간으로 데이터를 불러오기 위한 랜더링을 강제로 하게끔 하는 수단으로만 사용
• Typescript 미사용
• 사용자 관점에서 생각을 많이 못함

챌린지 1-1주차

1차 리팩토링

• Javascript -> Typescript 변환

• any나 타입단언을 최소화 하여 인터페이스/ 유니온 등을 사용하여 타입 정의

• 이름이 불명확한 변수 & 함수명 , 폴더 & 컴포넌트명 변경

느낀점

• 예전에 타입스크립트를 이용하여 2인 프로젝트를 하였는데 그때는 any타입을 많이 사용했었다. 하지만 any타입을 최소화해야한다는 것을 알게 되었다.

• 폴더 구조를 어떻게 구분해야할지 함수 & 변수명 이름 짓는거에 좀더 많은 고민을 할수 있는 시간이 되었고 이로 인해 다음 프로젝트때는 좀 더 효울적으로 폴더와 컴포넌트를 분리 할수 있을 것 같다.

챌린지 1-2주차

2차 리팩토링

• React-Query를 이용해 API 호출 구현

느낀점

• Recoil로 단순히 실시간으로 데이터를 불러오기 위한 랜더링을 강제로 하게하는 것 대신에 React-Query의 stale-while-revalidate 원리를 이용하여 실시간으로 데이터를 업데이트 할수 있는 것을 알게 되었다.

챌린지 2-1주차

3차 리팩토링

• 사용자 관점에 맞춘 UI 수정

• 커스텀 훅을 따로 폴더를 만들어 분리

• 폴더 구조 변경

느낀점

• 단순히 기술을 사용하여 구현이 아닌 사용자 입장에서 생각해 실제로 사용자가 사용한다는 마음으로 회사에서 뿐만 아니라 프로젝트할때에도 이러한 마음을 가지고 개발할 것이다.

• 폴더 구조에 대해 좀 더 고민하면서 앞으로 프로젝트할때에 좀 더 정리된 환경에서 개발할 수 있을거 같아서 도움이 되었다.

• 커스텀 훅을 만들어 분리할수 있어 다음 프로젝트에는 조금 더 효율적으로 분리해보고 싶다.

번외로 추가 리팩토링 (작업중)

원래는 2-1주차로 마지막으로 끝내야 하지만 추가적으로 JEST를 이용하여 테스팅해보고 배포까지 해보고싶어 추가로 리팩토링을 진행하고 있다.
그리고 미처 다뤄보지 못한 React-query로 토큰 처리, 토큰 유무로 리다이렉트 처리를 제대로 정리하지 못해서 추가적으로 작업하려 한다.

최종 소감문

간단한 Todo-List를 구현했지만 막상 깊게 파고 들어 개발하다보니 정말 많은 시간이 걸렸다. 단순히 기능구현이 아닌 실제로 서비스를 개발한다는 생각으로 개발하니 신경쓸게 너무 많았다. 비록 디자인은 그렇게 이쁘지는 않지만...
그리고 다른사람들은 어떻게 개발을 하고 있는지 경험할 수 있는 좋은 계기가 되었고 내 자신에 대해서도 문제점에 대해서 제대로 파악할수 있어서 좋았다. 또한 앞으로 코드를 짤때 어떤 생각을 가지고 깔끔하게 짤수 있을지 좀 더 고민해서 최대한 가벼운 앱을 만들고자 노력할 것이다. 그리고 개발하면서 겪은 에러들 고민들을 꼼꼼히 기록해 정리하는 습관도 가질 것이다.

앞으로 계획

작년 9월부터 11월까지 만든 프로젝트가 있다. 카카오 프렌즈를 참고하여 만든 쇼핑몰 페이지였는데 정말 디자인도 엉망이고 코드도 엉망이었다. 컴포넌트 분리는 제대로 되어있지도 않고 함수나 훅들도 따로 빼놓지도 않았다. 그러다 보니 코드가 정말 지저분했다. 단순히 이러이러한 기술들을 한번 써보자는 생각으로 너무 임하다보니 정작 중요한 코드 관리, 최적화, UI 에 신경을 많이 못 썼던거 같다.
챌린지 때 배웠던 걸 토대로
https://github.com/raw20/kokoafriends
이 프로젝트를 리팩토링할 것이다.