<공고 바로가기>

0. 데브 매칭이란?

프로그래머스에서 진행하는 채용을 전제로한 챌린지이다. 비단 프론트엔드 분야 뿐만 아니라 백엔드(서버), 안드로이드, ios 앱 등 여러 분야로 진행된다. 다른 테스트와 다른 점이라면 시간 제한 과제 테스트로 진행된다는 점!

내가 참여한 프론트엔드 분야는 Vanilla Javascript, html, css 만을 사용할 수 있다. react 나 vue를 사용하지 않고 순수 자바스크립트로 개발하라는 조건은 확실히 ‘과제’ 라고 할만한 도전 과제이다.

프레임워크와 라이브러리의 소중함을 깨달을 순간이 왔다.

1. 준비하기

코딩 테스트는 알고리즘 문제를 풀어보면 된다. 그럼 과제 테스트는? 다행히도 프로그래머스에서는 매년 챌린지를 진행해왔기 때문에 이전 과제들을 풀어보면 된다. 특히 올해 상반기 챌린지는 친절하게도 풀이까지 붙어있다.

하지만 풀이에서 보여준 건 기본 조건이다.

이전 챌린지들의 풀이는 인터넷에 찾아보면 나와있다. 사실 외부로 유출하면 안 된다고 되어있는데 괜찮으려나

만약 순수 자바스크립트로 개발하는 것이 처음이라면, 그것도 순수 자바스크립트로 SPA 를 따라해서 컴포넌트 기반으로 개발하는 것이 처음이라면(나처럼)! 풀이를 참고해보는 것을 무척 추천한다.

물론 따라하지 말고 직접 구현해봐야 실력이 는다.

나는 의욕이 먼저 앞섰는지 함수 기반 리액트를 구현해보겠다고 가상 돔, 리액트 훅스 등의 개념을 바닐라로 구현하는 법을 공부하다 시험날이 다가왔다… 덕분에 결국 클래스 기반으로 작성하게 된 건 비밀…

2. 챌린지

문제는 어려울 것이 없었다. 오히려 html 마크업과, css 가 전부 완성되어있어 정말 js에만 집중하면 될 정도였다!

지난번 토스 코테도 그렇고 테스트 문제들이 진화하는 게 느껴진다.

2-1 넌 못 지나간다

그런데…! 초장부터 난관에 부딪혔다. js 스크립트를 불러오는 과정에서 module 타입이 먹히질 않는 것이었다!

기존에는 웹팩으로 번들링하던 습관이 있어서 어떠한 라이브러리도 사용하지 못하는 이번 챌린지에서 눈치채지 못한 부분이었다.

‘에이 설마~ 이런 시험에서 module을 못 쓰겠어…?? import/export문을 못 쓰게 하겠어…??’ 라는 생각에 package.json에서 "type": "module"을 정해주기도 해보고, index.html에서 <script type="module" src="./main.js"></script> 로 해줘도 소용이 없었다.

돌아오는 건 MIME? 타입이 맞지 않다는 오류뿐… 그렇게 시간을 초장에 30분을 넘게 잡아먹었다… 결국 commonJS로 하려고 require를 썼음에도 먹히질 않아서 어쩔 수 없이 index.html에 스크립트 주소를 전부 적어줬다…

이렇게 하는 거 불편해ㅠㅠ

2-2 스타트가 늦었으니 스퍼트를 내야

프로그래머는 코딩하는 시간보다 생각하는 시간이 더 길다고 했지만, 난 이번 챌린지만큼은 코딩하는 시간이 더 길었다. 어떻게 작성해야 할지 코드가 머리에 그려지는 수준이었기 때문에 막힘 없이 물 흐르듯 써 내려갔다. 가끔 에러가 안 나게 분기 처리하는 시간을 빼면 막히는 부분이 없었다.

리팩토링은 못 해도 평소처럼 클린 코딩도 하고, 가독성을 최우선으로 개발했다. 아무래도 습관인지라…

api부분에서 오류가 날 법한데, 처음에 적었던 코드가 오류 없이 완전히 잘 작동하는 걸 보고 뿌-듯😁

이렇게 쉬우면 챌린지가 아니지

2-3 울지 말고 얘기해봐요

문제는 다른 부분에 있었다. 화면을 구현하는 것에는 문제가 없었다. SPA처럼 해주면 됐으니까.

허나 이번 챌린지에서는 저번과 다른 점이 있었다. 바로 routing의 구현이었다. 음?! vue-router 나 react-router를 가져다 쓴 적은 있어도 그 내부 구현을 본 적은 없었다…

‘설마 index.html 여러 개로 만들어?’, ‘아니야 SPA에서 url은 속임수라고 했으니까 대충 바꿔치기 하면 되나?’

오픈북이니깐 구글링으로 찾아보려고 했지만 너무나도 순수 자바스크립트로 SPA 라우팅 따라하기 라니 잘 나오지도 않고, 시간도 촉박했다…

오픈북 특징) 책 볼 시간 없음. 책 봐도 못 풂.

그래서 결국 url 은 못 바꾸고 한 페이지에서 일단 구현하기로 결정하고 넘어갔다… 시간이 남게 되면 그때 시도 해보는 걸로…

2-4 아무것도 안 했는데 벌써 3시간이야

화면 구현을 다 했을 무렵, 남은 시간이 30분 정도였다.

예?!

아직 화면 내에서 데이터를 바꾸는 것도 구현 못했는데요…?? 더미 데이터 가지고 움직였는데요??

게다가 세 번째 페이지에서는 api를 병렬로 처리해야하는 것이라는 물음이 들었지만, 다행히 캐싱이 생각나서 그걸로 넘어가긴 했다. 허나 내가 하나의 url에서 움직이도록 만들어서 가능한 것이었지, url을 통해 단번에 세번째 페이지로 들어오면 이전 페이지에서 불러온 데이터가 캐싱이 되어있지 않으니 오류가 날 것이 뻔했다.

그래서 그 예상되는 오류를 처리하다가… 시간이 다 됐다…

1시간만 더 줘요ㅠㅠ

3. 좋은 경험했다고 생각해야지 방법이 없습니다.

사실 평소에는 과제 테스트에 자신이 있다고 생각해왔다. 하지만 이번 챌린지를 통해 내가 생각보다도 더 라이브러리와 프레임워크에 의존하고 있다는 것을 깨달았다. 시간이 1시간 더 있었다면 모든 구현이 가능했겠지만, 결국 라우팅을 구현하지는 못했을 것이다… 고작해야 강제로 url을 바꾸는 것뿐이었을 테다.

그래서 좀 분하기도 하다… 그립습니다 리액트 센세…

크윽 프레임워크만 있었어도…!!

이래놓고 채용되길 바라면 그게 욕심이다

그래도 3시간 동안이나 쉼 없이 개발하니 옛날 해커톤 생각이 나기도 하고 집중하기에 좋은 경험이었다. 만약 허락이 나서 개발 풀이를 쓸 수 있게 된다면 그 풀이도 해보고 싶다. 아마 그 전에 바닐라 자바스크립트로 라우팅 하는 방법을 공부해야겠…

그렇지만 과제 구현은 잠시 접어두고! 다음 주에 있는 전국민 코딩테스트, 카카오 코테를 준비하러 가봅시다!