[우아한 테크코스] 프론트엔드 프리코스 3주차

프리코스는 우아한 테크코스 측의 repository를 fork하여 코드를 작성한뒤 pull request를 보내는 방식으로 진행돼요. 3주차 프리코스의 저장소는 https://github.com/woowacourse/javascript-vendingmachine-precourse였답니다.

 

 

3주차 미션 : 자판기

3주차 미션은 자판기 설계였어요.  자판기의 상품 관리(물건 충전), 잔돈 충전, 상품 구매 기능을 구현하고, 자판기 안의 해당 물건들과 동전들을 table을 통해 나타내는 것이었어요. 더욱이 localStorage를 이용하여 새로고침을 해도 해당 정보를 유지할 수 있어야 했습니다.

• 스크립트 추가 외에 주어진 index.html파일은 수정할 수 없다.
• 모든 예외 발생 상황은 alert메서드를 이용하여 처리한다.
• 외부 라이브러리(jQuery, Lodash 등)를 사용하지 않고, 순수 Vanilla JS로만 구현한다.
• 자바스크립트 코드 컨벤션을 지키면서 프로그래밍 한다. 정답이 없으므로, 다양한 컨벤션을 비교해보며 스스로 더 적절해보이는 컨벤션을 자율적으로 선택한다.
• indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용한다.
• 함수(또는 메소드)가 한 가지 일만 하도록 최대한 작게 만들어라.
• 변수 선언시 var 를 사용하지 않는다. const 와 let 을 사용한다.
• import 문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만든다.
• 함수(또는 메소드)의 길이가 15라인을 넘어가지 않도록 구현한다.

 

힘들었던 점

1) 구현할 기능이 너무 많았다.

이번 주 미션은 지난 주 미션에 비해 구현해야할 기능이 엄청나게 많았습니다. 하나의 탭의 내용을 구현하는 것도 쉽지 않지만 그게 3개라니 눈앞이 깜깜했습니다..ㅜㅜ README에 구현할 기능을 적는 것도 쉽지 않았습니다. 3개의 탭이 모두 연동되어 있으나 다른 기능을 수행하다보니, 기능을 정리하다가 페이지에 구현해야할 내용을 적기도하고 에러처리해야할 내용에 대한 고려가 빠지기도 했습니다. 

 

2) localStorage에 정보를 저장하여 활용해야 했다.

localStorage에 정보를 저장하고 빼내어 활용하는 것은 이번 주에 처음 해봤습니다. JSON에 대한 공부도 부족하여 거기서 부터 시작해야했고, JSON을 이용한 저장을 잘못해서 2시간이상 헤매기도 하고 했습니다. object형태로 저장이 되니 불러와도 null객체라고 뜨더군요. 그래서 여러 블로그를 전전하다가 결국 답은 MDN에서 찾았습니다. 여러분은 MDN을 우선으로 보세요...

 

3) 3과목 시험 & 면접...

첫 주부터 겪었던 고질적인 문제가 이번 주에 결국 터졌죠... 3과목 시험 중에서도 제가 특히나 약한 수학과목이 포함되면서 시험에 대한 부담감이 이만저만이 아니었습니다. 더구나 싸피 1차를 붙어서 면접까지 잡히면서 하루를 통으로 날려야했거든요. 그러다보니 프리코스에 쏟은 시간은 겨우 하루였고, 결국은 코드를 전부 작성하지 못하고 제출해야했습니다.

 

정리

제가 pull request를 보낸 branch는 https://github.com/NaRae-tech/javascript-racingcar-precourse/tree/narae이고, 최종 코딩테스트 전에 공부삼아 다시 코딩해본 branch는 https://github.com/NaRae-tech/javascript-racingcar-precourse/tree/retry입니다. 

이번 주는 지난 미션들 중 가장 해야할 일이 많았고 제가 코드를 마무리 짓지 못한 유일한 주입니다. 지난 미션들만 생각하다가 이번 일정들을 마치고 코딩을 시작하니 시간이 턱없이 부족하더라구요. 구현해야할 기능은 많고 나는 쓸 줄 모르는 것이 많아 공부도 해야하고 하니까 코드를 구현하는 시간보다 어떻게해야 이런 기능을 수행할 수 있는지 고민하고 문법 공부를 하는 시간이 더 길었습니다. 그러다보니 제한 시간 내에 기능구현을 마치지 못하고 제출해야했고 npm run test를 통한 테스트 조차 통과하지 못한 상태로 제출했습니다.(npm run test를 이용한 test를 통과하지 못하면 0점 처리된다고 합니다.) 혹시 이 때문에 최종 코딩테스트에 참여하지도 못할까 싶어 억울하다가도 내 탓이니까 누구한테 하소연도 못하고 내 자신이 너무 바보같아서 엉엉 울기도 했습니다. 하지만 다음날 그래도 3주차 미션을 제출했으니 최종 코딩테스트에 참여할 자격은 있다는 메일을 받았고, 아쉬움이라도 털어내자 싶어 열심히 공부했습니다.

   < 이번 주 아쉬운 점 >

    (1) 중복은 코딩의 적인데, 같은 코드를 너무 반복해서 사용했음

    (2) localStorage를 제대로 활용하기 위한 JSON 지식 부족

    (3) 어떤 일이든 시간 엄수