원티드 프리온보딩 프론트엔드 코스 회고

원티드 프리온보딩 프론트엔드 코스가 끝난지 거의 한 달이 지났다.

끝나자 마자 바로 다른 프로젝트를 시작하게 되어서 바로 회고를 쓰지 못했는데 프로젝트도 다 끝났으니 프리온보딩 코스의 회고를 작성해보려 한다.

✨ Project

한달동안 총 2개의 개인 과제와 4개의 팀 과제를 진행했다.

 

1. Todo-list

코스를 시작하고 제일 처음으로 한 팀 과제. 처음에만 해도 타입스크립트는 물론이고 린터도 사용해보지 않았었다. 멘토님께서 알려주신 폴더 구조와 린터 세팅, 그리고 타입스크립트를 이용해서 간단하게 투두리스트를 만들어보았다.

 

투두 리스트라는 작은 프로젝트를 10명의 팀원(그것도 모두 프론트엔드!)과 함께 하려다 보니 역할을 나누기가 굉장히 어려웠다. 최대한 세세하게 역할을 나눴고, 나는 폴더 세팅과 라우팅 부분을 맡게 되었다.

처음에 세팅만 하고 그 후에는 작업할 내용이 없었기 때문에 기능에 많은 부분을 참여하지 못해서 아쉬웠다. 하지만 당시 엘리스 2차 프로젝트의 마지막 주였기 때문에 엘리스 프로젝트의 마무리를 좀 더 신경쓸 수 있었다.

 

지금 이 프로젝트를 돌아보니 배포는 물론이고 리드미도 작성되어있지 않다. 그리고 안쓰는 파일이나 코드도 몇 개 보인다. 내가 2주 전에 짠 코드가 💩으로 보여야 한다고 멘토님께서 그러셨었는데 지금 보니 한 달동안 정말 많이 늘었구나라는 것을 다시 느꼈다.

 

2. 그립컴퍼니 기업 과제

첫 개인과제이자 첫 기업 과제.

영화 api를 활용한 영화 검색, 즐겨찾기 앱 만들기였다.

 

타입스크립트도 아직 익숙하지 않았고, recoil도 처음 써봤다. 디자인도 드리블을 참고해서 직접 했었다.

무한 스크롤 구현때문에 애썼는데 이 기회에 intersection observer를 공부해볼 수 있었다.

처음에는 이것저것 새로운 게 많아서 어려웠지만 그래도 완성해놓고 보니 맘에드는 프로젝트!

 

3. 휴먼스케이프 기업 과제

팀으로 한 첫 기업 과제. 10명의 팀원을 반으로 나눠 5명으로 진행했다.

공공 api를 이용해 검색어 추천 기능이 있는 검색 창 만들기였다.

 

이 프로젝트에서 react-query를 처음으로 쓰게 되어서 그 부분 세팅을 담당했다.

그런데 디바운싱으로 검색 횟수를 줄이는 파트를 맡으신 다른 팀원 분께서 이미  react-query를 적용하시고 코드를 올리셔서 어쩌다 보니 내 일이 없어지게 되어 아쉬웠다. 😭😭

 

그래서 최대한 다른 팀원들의 작업에 방해가 되지 않으면서 할 수 있는 일이 무엇인지 찾아 요구사항 중 놓친 부분을 조금씩 수정하거나 안쓰는 코드 정리, 코드 리뷰를 했다.

 

4. 매드업 기업 과제

이번에도 다섯 명이 진행한 팀 과제. 매드업의 Lever 서비스의 한 부분을 개발하는 프로젝트였다.

 

이전까지 작은 역할들을 맡았었는데 해당 프로젝트에서는 차트를 그리는 역할을 맡아 재밌게 할 수 있었다.

차트 라이브러리는 멘토님께서 추천해주신 victory.js를 사용했다.

 

victory.js가 문서 정리가 잘 되어있어서 이해하는 데는 어렵지 않았지만 요구 사항에서 단위가 다른 두 지표를 한 그래프에 동시에 보여줘야 하는 부분 작업에 어려움을 겪었다. 공식 문서와 여러 글들을 참고해서 구현에는 완료했지만 왜인지 가끔씩 그래프가 떠는(?) 현상은 해결하지 못했다.. 😢

그리고 요구사항에 나와있는 지표 중 따로 값이 제공되지 않고 주어진 값들을 이용해 계산을 해야하는 부분이 있었는데, 광고 관련 지식이 없다보니 계산하는 것과 이 값이 맞는지 확인하는 것이 어려웠던 것 같다.

 

5. KB헬스케어 기업 과제

오랜만에 10명의 팀원이 다 같이 한 프로젝트.

 

마지막 남은 10일동안 해야할 팀 기업 과제 2개, 개인 과제 1개가 남아있어서 시간 관리가 중요했다.

3개의 프로젝트를 동시에 진행하는 것보다 하나씩 진행하는 것이 덜 혼란스러울 것이라고 생각했기 때문에 빨리 끝낼 수 있을 거라고 생각한 kb헬스케어 과제를 진행했다.

 

요구 사항이 복잡해보였지만 자세히 보면 거의 퍼블리싱 느낌이 강해서 10명이 역할을 나누는 게 어려웠다.

해당 프로젝트에서 나는 레이아웃과 css 작업을 맡게 되어 기능 구현을 따로 하지 못했다. 그래도 공통적인 스타일을 잡는 방법과 시맨틱한 마크업에 대해 고민해볼 수 있었다.

 

6. 모아데이터 기업 과제

이 프로젝트 역시 10명의 팀원이 진행했다. 회원 관리 대시보드를 만드는 프로젝트였다.

남은 시간동안 개인 과제도 해야했기 때문에 3일 안에 해보자고 했지만 생각보다 길어져서 5일 정도 걸렸다.

kb헬스케어 과제에서 css를 맡아서 이 과제에서는 다른 기능을 맡아보고 싶었는데 사다리 타기를 한 결과 또 css 부분을 맡게 되었다. 😂😂

 

모아데이터 과제는 따로 디자인이 되어있는 것이 없었기 때문에 디자인도 처음부터 했어야 했는데 깔끔하면서 너무 단조롭지 않은 디자인을 하느라 힘들었다.

 

저번 kb헬스케어 과제는 임의의 데이터를 넣고 css를 먼저 작업하는 방식으로 했었는데, 이 과제에서는 기능 구현이 끝난 후에 css 작업을 하기로 했다.

기능 구현이 지연되다 보니 레이아웃 작업도 지연되었고, 기능 구현 파트를 맡은 팀원이 약간의 레이아웃 작업도 했는데 각자 조금씩 다른 구조를 가지다 보니 그것을 통일하는 데에도 어려움을 겪었다.

 

그리고 이번 프로젝트에서 반응형 웹을 만들게 되었는데, 먼저 데스크탑 사이즈를 기준으로 디자인이 되어있던 것을 모바일 기준으로 만드려다 보니 어려웠다. 모바일과 잘 어울리는 디자인은 어떤건지에 대해서도 많이 고민해볼 수 있었다.

평소 flex를 자주 이용했는데, 해당 프로젝트에서 grid를 적용해보면서 이런 저런 어려움이 있었지만 그래도 끝내 반응형 웹을 만들 수 있었다.

 

7. 최종 개인 과제

마지막 개인 과제였다. 카카오 지도 api를 이용한 장소 즐겨찾기 사이트를 만들었다.

 

주제가 완전히 자유였기 때문에 어떤 것을 구현할 지, 어디까지 구현할 지 굉장히 고민이 많았다.

졸업 작품으로 만들었던 프로젝트를 리팩토링 할 지, 평소에 해보고 싶던 주제로 프로젝트를 할 지 고민을 했는데 평소에 해보고 싶던 주제를 만들어보기로 결정했다.

 

평소에 인스타그램이나 트위터를 하다가 맛집이나 좋은 호텔, 관광 명소 등을 보고 캡처를 하거나 즐겨찾기를 해놓는다. 하지만 막상 나중에는 꺼내보지 않게 되었고, 새로운 장소에 갔을 때 혹시 내가 가보고 싶었던 곳이 이 근처에 있는 지 궁금한 경우가 많았다.

이럴 때 나만의 장소 즐겨찾기 앱이 있으면 좋겠다고 생각했었다.

 

이 프로젝트를 하기 얼마 전 수업에서 멘토님께서 구글 지도와 카카오 지도 적용하는 방법을 알려주셨었기 때문에 카카오 지도를 이용해 장소 즐겨찾기 사이트를 만들어 보기로 했다.

그런데 만들어놓고 보니 생각보다 간단해서 약간 아쉬웠다. 기능을 좀 더 추가해보면 좋겠다는 생각이 들었다!

 

---

지금 이 글을 쓰면서 프로젝트들을 하나씩 보고 있는데 점점 좋아지는 게 보여서 한달동안 정말 많이 배웠다는 것을 다시 한번 느꼈다. 나중에 보면 또 이상한 코드겠지만 그래도 지금은 만족하는 중!

 

현재는 원래 듣고있던 엘리스도 수료하고 진짜 취업을 준비하고 있다. 원티드 프리온보딩 코스를 통해 배운 것을 엘리스 최종 프로젝트에도 적용해볼 수 있어서 좋았고 이번 기회에 정말 린터와 프리티어, 타입스크립트의 소중함을 깨달았다. (린터없이 못살아!~!)

 

수줍어서 표현은 못했지만 이자리를 빌어.. 한달동안 정말 고생많이 해주신 이준혁 멘토님 정말 감사드리고 존경합니다 ^~^!!. 수료 후에도 계속 신경써주셔서 너무 감사하고 또 감사합니다! 😊😊😊