웹 개발

프로그래머스 <2021 네이버웹툰 개발 챌린지> 2차 과제 후기

spideyDev 2021. 7. 13. 23:54

 

VanillaJS 개발에 자신이 없고 어느 부분이 부족한지 모르는 막막한 상황에서 프로그래머스의 Dev-Matching에서 했던 과제 테스트가 도움이 많이 됐었다.

그래서 이번에 <2021 네이버 웹툰 개발 챌린지> 공지를 보고 좋은 기회가 될 것이라고 생각해 고민 없이 지원했고 1차 코딩 테스트도 무사히 통과했다.

문제가 공개된 것이 아니기 때문에 자세하게 문제 내용을 포스팅하지 못할 것 같고 내가 부족하다고 느낀 점을 기록해 보려고 한다.

 

1. 에러 핸들링

fetch가 실패했을 때 데이터를 불러오는데 실패했다는 정보를 화면에 표시해야 하는데 처음에는 이 점을 고려하지 않고 설계했다.

그래서 시간이 얼마 남지 않은 상황에서 기존의 설계 구조를 변경해야 하는 상황이 발생했다. 당황해서 이것저것 시도하다 시간이 부족할 것 같아 포기하고 다른 요구사항에 신경을 썼다.

처음부터 이 요구사항을 생각하고 구조를 짰다면 시간을 더 들일 필요도 없이 요구사항을 만족시킬 수 있었다.

 

2. Promise 처리

과제 테스트 중 인터넷 검색 불가능하기 때문에 DOM 관련 함수나 자주 사용하는 객체 메서드를 찾아보지 않아도 사용할 수 있도록 미리 공부를 했었다.

그런데 과제테스트에 들어가서 fetch를 하고 response를 처리하려고 할 때 response.json(), JSON.stringify(), JSON.parse() 와 같은 json 관련 함수들이 기억나지 않아서 당황했었다.

다행히도 지정된 레퍼런스 사이트(https://developer.mozilla.org/ko/docs/Web/JavaScript)는 사용이 가능했고, 사이트에서 검색해 과제 테스트를 마저 진행했다.

내가 알고 있다고 생각한 부분에서 구멍이 있었고 이러한 경우가 반복되지 않도록 내가 알고 있다고 생각하는 지식을 점검하는 방법들을 마련해 놓아야 할 것 같다.

 

3. 이미지 최적화

Dev-Matching 과제 테스트에서 Lazy Loading이 요구사항으로 나온 적이 있어 이번 과제 테스트를 준비할 때 Lazy Loading을 공부했지만 시간이 부족해서 구현하지 못했다.

<img> 태그들의 src 값을 비워뒀다가 사용자 화면에 요소가 들어가면 src 값을 추가하는 방법만 알고 있기 때문에 Image Placeholder를 사용하는 방법이랑 Skelton Loading까지 공부해서 포스팅해야겠다.

 

4. Web Storage API

새로고침을 해도 기존의 화면을 유지하는 요구사항도 Dev-Matching 과제 테스트에 나온 적이 있었지만 이번 과제 테스트에서도 구현하지 못했다.

MDN이나 모던 Javascript 튜토리얼의 sessionStorage 명세만 읽어봤어도 쉽게 구현할 수 있는 요구사항이었다.

모던 Javascript 튜토리얼 (https://ko.javascript.info/)을 띄엄띄엄 골라서 읽었는데 목차대로 정독하면서 한번 정리를 해두면 비슷한 상황이 나오는 것을 방지할 수 있겠다.

 

 

결과 얘기를 하자면 필수 요구사항은 다 만족시켰지만 추가 요구사항은 절반도 구현 못했고 구현 못한 요구사항들 중에 이미 공부한 내용들도 있었기 때문에 만족스럽지 않았다. 아마도 이번 과제 테스트는 통과하지 못할 것 같다. 

<2021 Dev-Matching: 웹 프론트엔드 개발자>, <고양이 사진 검색 사이트>, <2021 네이버웹툰 개발 챌린지> 이번이 세 번째 과제 테스트인데 처음 과제 테스트를 했을 때와 비교했을 때 VanillaJS 실력도 많이 늘었고 자신감도 붙었다.

그리고 무엇보다 과제 테스트가 너무 재밌다. 시간을 4시간이나 주는데 신나서 구현하다 보면 시간이 금방 지나있는 걸 경험할 수 있다. 

이번 <2021 네이버 웹툰 개발 챌린지> 프론트엔드 과제 테스트는 2020 Dev-Matching 프론트엔드 과제 테스트였던 <고양이 사진 검색 사이트>와 요구사항이 많이 겹치기 때문에 과제 테스트를 경험해보고 싶다면 프로그래머스 - 실력 체크에서 <고양이 사진 검색 사이트>를 진행해보면 된다.

프론트엔드 개발 공부를 시작한 지 얼마 안 된 사람들에게는 과제 테스트를 풀어보는 것을 꼭 추천해 주고 싶다. 모르는 게 나오면 검색해가면서 하면 되니까 겁내지 말고 해 봤으면 좋겠다.