🌏 NextJS 기반의 과제 전형을 하게 되다.
12월 말.. 코로나 걸렸을 시점.. 집에서 돈까스를 먹고 있었을 시점.. 지인을 통해서 한 연락을 받았다.
내 주변 개발자 분들은 이직을 자주 권한다. 회사를 자주 옮기라는 말은 아니다.
그저, 현재 어떤 실력을 갖췄고, 그걸 테스트 해 보고 증명하는 단계를 겪어보면서 성장하라는 뜻이다.
또 개인적으로 프로그래머 열정을 말하다라는 책을 인상 깊게 봤다. 좋은 사수, 좋은 동료가 더 많은 환경에 가 보고 싶었다.
두 가지 이유로 나는 도전해보기로 했다.
이력서를 넣은 후, 기업에서 연락이 왔다.
감사하게도, 사전 과제를 볼 수 있는 기회를 주셨다.
과제 전형 요구사항은 아래와 같다.
- 피그마에 서술된 기본 기능들이 동작해야 합니다.
- 피그마 디자인에 가능한 가깝게 구현해 주세요.
- 서버는 데이터 제공만 해주며 진행률이나 유저가 선택한 정답 등 여러 변경되는 데이터는 클라이언트에서 타입을 정의하고 관리해야 하며 브라우저 스토리지를 활용해서 구현해야 합니다.
- "a > b > c" 순서로 구현해주세요(시간이 부족할 경우에 대비한 우선순위로 생각하시면 됩니다).
- 시간이 부족하다면, 구현하지 못한 기능들을 어떻게 구현할 것인지 설명으로 대체해 주세요.
- UI Framework는 사용하지 않습니다.(디자인 시스템 필요시 직접 구현)
- 이외에 3rd party 라이브러리들은 필요시 사용 가능합니다.
- 빌드 도구는 자유롭게 사용 가능합니다.
- 간결함, 유지보수성, 확장성을 고려해주세요.
- User interaction을 테스트하는 코드를 작성해주세요.
프로젝트 세팅, 서버환경 구축, 서버 환경 구축,, 요구사항 외에도 해야할 부분이 너무 많았다.
생각보다 많은 양 때문에... 내가 할 수 있을까.. 이도 저도 아무것도 못 보여줄 거 같다 생각이 들었다.
(안색이 변해가는 내 표정...)
일단 프로젝트 셋팅부터 ㄱ ㄱ
프로젝트 셋팅부터 하자.
프로젝트 셋팅하면서 문제가 생겼다.. 첫 관문부터 난관이....
you are using node.js 16.20.0. for next.js, node.js version >= v18.17.0 is required.node.js 버전 문제이다..
기존에는 next 13버전을 사용했는데, 14부터 node도 버전을 올려줘야한다는 것이다.
기존 프로젝트 버전으로 사용할 수 없는지, nvm을 사용하지 않고 할 방법들을 계속 알아봤다. (시간에 쫒겨서..)
프로젝트 별로 node 버전을 관리하여, 필요할 때마다 변경해주는 방법 밖에 없었다.
분명 오후 2시부터 시작했는데, 밤이 늦도록 방법을 찾지 못하자 nvm를 사용하기로 했다.
(하나 배워갑니다~)
사전 과제는 처음인지 엄청나게 해맸다.
server 세팅하면서 bun을 패키지 매니저를 사용한다. 처음 써보는 거라 document, blog를 읽어보며 사용했다.
npm, yarn 보다 엄청 빨라서, 컴퓨터 부팅이 빠르면 괜히 기분 좋듯,, 가볍고 빨라서 좋았다. 다음에 더 공부해봐야겠다 생각했다.
🥲 프로젝트 셋팅 후, 마음이 조급해졌다.
처음에 할 수 있다라는 마음은 어디로 갔을까..
하루 종일 못할 거 같다, 포기하고 싶다는 마음이 올라왔다. 내가 부족해서 못하는 거 같다는 생각이 들었다. 절망의 계곡 그 어딘가에서... 나는 울고 있었다..
문득, 내가 이 과정을 온전히 겪어 내지 못할 때, 성장할 수 있을까라는 생각이 들었다.
결과도 중요하지만, 최선을 다해보자 생각했다. 그리고 주어진 7일 안에 끝까지 해보자는 마음이 들었다.
끝까지 하는 것도 실력이라 생각한다.
부족한 것은 인정하며 앞으로 채워나가면 되고, 반성하면 그만이다.
개발을 하면서
개발하기 전, 요청서와 Figma를 여러 번 검토하는 것은 물론이고, NextJS로 개발을 진행하는데 있어 유의해야 할 부분들을 짚는데 시간을 먼저 할애했다.
기존에 next.js로 개발을 했던 프로젝트 토대로, 나름의 디자인 시스템도 구축하였다.
공통 부분은 미리 정의 해 놓았다. api 구조를 보면서, 컴포넌트 별로 쪼개서 작업했다.
스스로 작은 스프린트를 한다고 생각하며 접근했다. 어려운 부분은 작게 쪼개서 생각했다.
selectBox가 있을 때, div부터 생각해본다. 컴포넌트거 완성이 되고, 작은 컴포넌트들이 모여 한 페이지가 된다. 또 한 페이지가 모여서 프로젝트 완성에 도달했다.
전반적인 완성도는 85% 이상 만들어지도록 github 완료하지 못한 부분에 대해서는 어떤 방법으로 작성하여 참고하는 방식으로 진행 하였다.
아쉬웠던 점
- 테스트 코드
- bun
- graphql
이 세가지이다. 특히 graphql은 써본 적이 없어서, 공부를 하면서 해야하나 고민했다. 기존에 메서드와 url로 작업하는 REST API와 달리 graphql은 Query를 이용해 정보를 조회하고, Mutation을 이용해 필요한 정보만 불러오는 형태가 마음에 들었다.
테스트코드는 서비스에 꼭 있어야할 부분이다. 작업 선행이든 후든 꼭 !!!!!
마무리~
이로 인해, 내가 부족한 기술 스택을 알게 되었고, 직접 부딪히면서 기술을 학습한다는 점을 배웠다. (부끄럽지만 기존에는 그냥 인프런 보면서 학습하였다..왜 선배들이 사이드 프로젝트를 강조하는지 알겠다.) 또 적극적으로 제품을 만들려는 마음과 시간이 오래 걸릴지라도 어떻게든 개발을 하는 방법은 어딘가에 존재한다는 것을 잊지 말아야 한다. 뭐든 끝장 보자 !
