이 포스트에서 다룰 것

8월 27일에 응시한 프론트엔드 데브매칭에서 구현한 것과 구현하지 못한 것을 정리하고 복기할 것이다.

구현 사항

• 무한스크롤
• fetch로 json 파일 가져오기
• localStorage
• input pattern, title
• 요소 가운데 정렬하기

기억나는 대로 정리하면 위와 같다. 페이지는 2개였는데, 1개 페이지는 완벽하게 구현했고 나머지 1개 페이지에 대해서는 2가지 기능(무한스크롤, localStorage)을 시간이 모자라서 구현하지 못했다.

회고

시간낭비 1

너무 아쉬웠던 점은 3시간 중에 25분을 그냥 멍때리며 날려버렸다는 것이다. 처음에 코딩테스트나 과제구현 테스트를 입장하면, 순간적으로 사용자가 몰려 몇분간 화면이 뜨지 않는 일이 잦다. 이번에도 그랬다. 그런데 화면공유를 켜 놓아야 하니 새로고침을 하면 화면공유가 풀릴 것이고, 부정행위 처리가 될 까봐 겁이 나서 계속 기다리기만 했다...ㅠㅠ 고민고민하다가 새로고침하니까 vscode가 정상적으로 나왔다. 이 25분만 낭비하지 않았어도 모든 기능 구현할수 있을것 같았는데.ㅠㅠ

시간낭비 2

겨우 vscode에 접속해서 페이지를 띄우는 데도 시간을 너무 허비했다. 상단에 있는 도움말 탭을 눌러보지 않고 혼자 서버 어떻게 띄우지? 고민하며 별의 별 커맨드를 다 넣었더랬다. 프로그래머스에서 친절하게 /strat만 누르면 되게끔 세팅을 해뒀는데 말이다.. 새 기기를 사면 설명서부터 정독하는 편인 내가 이런 바보같은 짓을 하다니.

문제 보기

문제 보기 탭이 눌렀다 껐다 하는 방식이어서 굉장히 불편했다. 듀얼모니터도 허용되지 않는데, 한 편에 계속 띄워놓고 보는 것이 불가능하니까 문제에서 요구하는 string 같은 것도 복붙하기 정말 귀찮았다. 그리고 껐다 켜면 스크롤이 맨 위로 올라가 있어서 내가 원하는 내용이 나올 때까지 내려야 했다. 이건 개선되었으면 좋겠다.

Vanila.js

모든 기능은 라이브러리 사용 없이 순수 js만 이용해서 구현해야 했다. 셀렉터를 이용해 DOM을 가져오고, 클래스를 add/remove/toggle하는 기능을 요구했다. fetch 함수를 이용해 디렉토리 내의 json파일을 읽어오고, 조작할 줄 알아야 한다. 또 localStorage를 이용해 탭을 닫았다 열어도 상태가 그대로 유지되도록 하는 기능이 있었다.

이번 데브매칭 js 구현 요구사항은 90%가 업무 중에 경험했던 내용이어서 수월하게 했던 것 같다.

CSS

생각보다 css 관련 문제가 많이 나왔다. 단순히 폰트 크기 변경, 색상 변경 부터 :hover, :after 등의 css 가상클래스 선택자를 많이 이용했다. display에 대한 이해가 필요한 문제도 있었다. grid와 flex, justify-content 등등.