넥슨 기업 과제 후기

Jin·2022년 3월 28일
0

이번 프리온보딩 코스의 하이라이트는 단연 5일 동안 혼자 하는 마지막 개인 기업 과제였습니다.
이번 코스 5주 동안 총 팀 프로젝트 8개와 개인 과제 1개로 9개의 프로젝트를 하였습니다.
그 중에서 이번 개인 과제를 하면서 다양한 것을 많이 시도해볼 수 있었습니다. (이 말이 가장 어려운 과제였다는 것과 같은 말인 것은 비밀)

그 중에서 시행착오를 겪었던 것들을 공유합니다.

1. firebase 연동

firebase는 serverless하게 DB를 구축할 수 있게 구글에서 서비스하고 있는 Saas입니다.
적용하고 난 지금 시점에서는 이렇게 쉽게 서버 따로 없이 DB를 쓴다는 것에서 놀랍지만 처음 적용하는 당시에는 쉽지 않은 도전이었습니다.

여기서 다시금 확인한 진리는 일단 블로그보다는 공식 문서를 확인하여야 한다는 것입니다.
firebase가 버전업이 되면서 import하는 경로가 달라졌는데 블로그에서 본 코드들은 다 예전 경로라 동작을 하지 않아서 애꿎은 firebase를 탓했던 기억이...

2. API 호출 지옥

이번 넥슨 과제에서는 필요한 데이터를 불러와서 정제하기 위해서는 정말 많은 API 호출이 필요하였습니다.
아마도 데이터를 불러와서 정제하여 요구되는 데이터를 뽑아내는 것도 과제의 주요 사항이 아닐까 싶습니다.

트랙 쪽 데이터를 가져오면서 모든 매치들의 목록을 가져온 뒤 매치 하나하나 상세 정보를 다시 불러와야 하는 과정이 필요하였습니다. 하루 기준으로만 해도 몇 백 개니 그 짧은 순간에 정말 비동기를 계속 반복해야 했습니다.

그 과정에서 Promise가 비동기로 동작하다보니 로직이 꼬여서 해결하는 데에 시행착오를 겪은 부분이 있었습니다 ㅠㅠ

반드시 이 부분은 추가적으로 블로깅하여 기록으로 남겨야 안 억울할 것 같습니다.

3. Observer API로 무한 스크롤 구현

기존에 scroll 이벤트로 구현하면 쓸데없는 호출이 굉장히 많이 발생합니다.
이 Observer API는 타겟 요소를 정하고 특정 요소와 타겟 요소가 얼마나 교차됐는지를 관찰하여 교차될 때에만 이벤트가 발생하기 때문에 쓸데없는 이벤트가 발생하지 않습니다.

하지만 이것도 분명히 개발하면서 컴포넌트가 마운트된 이후에 변경했을 때는 잘 작동하는데 마운트부터 시작해서 테스트해보면 이벤트가 발생하지 않아서 애를 좀 먹었습니다 😅

결국 stateuseEffect를 사용하여 상태 변경시 감지하여 업데이트하도록 구현하여 해결하였습니다.

4. Yarn Berry 사용

그간 팀 프로젝트를 하면서 yarn을 주로 사용했었습니다.
yarn도 충분히 좋지만 패키지를 전부 다운로드 받아야 하고 그것은 곧 의존성 깨짐과 빌드시 시간 소요 등으로 이어지는 것은 필연적이었습니다.
그래서 이번에는 Yarn Berry를 사용하였습니다.
plug n play 방식으로 패키지를 다운로드 받지 않아도 되는 zero install로 관리할 수 있어서 앞의 단점들을 해결한 Yarn의 최신 버전입니다.
패키지를 굳이 다운로드 받지 않고 의존성 정보만을 받습니다. 어떤 패키지가 어떤 라이브러리에 의존하는지, 각 라이브러리는 어디에 위치하는지 바로 알고 있기 때문입니다.

모든 게 다 좋았습니다.
패키지를 다운로드하면서 용량이 급증하는데 반해 의존성 정보만 추가되므로 현저히 용량이 줄었고 빌드 속도는 체감될 정도였으며 이는 배포할 때 감동을 받을 정도였습니다.

하지만, 단 하나의 크리티컬한 문제가 있었습니다.
바로 자동 완성이 되지 않는다는 것이었습니다. yarn berry에서도 기존의 node_modules 방식을 사용하면 잘만 자동 완성이 되는데 pnp 방식으로만 하면 자동 완성이 되지를 않았습니다...

패키지의 코드가 아닌, 의존성 정보만을 가져오기 위해서는 어쩔 수 없다는 것이 검색의 결과였습니다.
역시 하나를 주면 하나는 포기해야 한다는 말이 괜히 이어져오는게 아니었습니다.
그래도 이런 딜은 오히려 이득이라고 생각하며 즐겁게 import 문을 타이핑하여 사용하였습니다 😁

후기

이번 넥슨 과제에서는 위의 과정뿐만 아니라 정말 사소하지만 다양한 것들도 많이 경험할 수 있었습니다.
애니메이션과 차트, UI/UX에서의 디테일 등등 정말 많이 고민해볼 수 있는 기회가 되었고 저도 끝까지 포기하지 않고 제가 목표로 한 것들은 다 구현을 하였기 때문에 아쉬움은 없습니다. (시간이 조금만 더 있었다면 하는 아쉬움은 어쩔 수 없지만... )

더불어서, 이렇게 원티드 프리온보딩 프론트엔드 코스 일정은 마무리되고 이제 채용설명회와 참가 기업들에 지원하고 면접하는 과정이 남았는데 마지막까지 유종의 미를 거두기 위해 최선을 다하겠다는 다짐을 스스로에게 하며 이만 후기를 마무리하겠습니다.

profile
배워서 공유하기

0개의 댓글