Mission #4. vending machine 을 시작하며

이현정·2022년 8월 12일
0

지난 Mission #3. racing car 에서는...

🤓 배운점

  • 클래스,this 라는 개념을 익히고 모델을 만들며 직접 사용해 보았다.
  • 상태관리라는 개념을 익히고 사용해 보았다.
  • 랜더링을 최소화하는 법에 대해 배우면서 DOM을 최대한 적게 불러오는 방법에 대해 고민해 보게 되었다.
  • 그를 위해 브라우저의 랜더링 과정DOM에 대해 공부해야 했기에... 유익한 시간이었다.
  • 페어 프로그래밍을 경험해 보고, 좋은 페어프로그밍이란 무엇인지 생각해보게 되었다.

🥲 아쉬웠던 점

  • BDD 보다는 기능 구현 후 테스트코드로 가게 되었다.
  • 언뜻 기능은 하는 듯 하지만 에러가 많다. 리팩토링 필수.

🧐 리팩토링 때는

  • 상태 관리 방법 중 옵저버 패턴이라는 개념을 접했으나, 적용까진 못했다. 한 번 해보고 싶다.
  • 클래스, 실행 컨텍스트 등 자스에 대해 몰랐던 점에 대해 제대로 공부해봐야 겠다고 느꼈다.
  • for문 대신 promise 를 이용해 스피너를 불러와보자.

🚗 지난 NEXT STEP: Mission #3. racing car 보러가기
( 언급했듯 에러가 많아 아직 main브런치로 merge가 안된 상태이다. pull request 에서 볼 수 있다.)

이번 Mission #4. vending machine 시간에는...

총 4단계로 구성되어 있고, 저번 미션보다 난이도가 확 뛴걸 볼 수 있다.
1 단계부터 만만치 않다. 탭 별로 다른 화면을 로딩해야 하니 라우팅도 해야하고, local storage 도 이용해야 한다. 예전 클론 코딩 때 접해봤지만 다 잊어버렸는데, 이번에 복습도 하면서 지난 시간 클래스를 적용하는 방법도 알아봐야겠다.

이번 강의 때는 Obejct, OOP(Object-Oriented Programming), Prototype, Module 개념에 대해서 다뤘다. 먼저 소화하고 들어가면 좋을 것 같다.

🎰 이번 NEXT STEP: Mission #4. vending machine 보러 가기

🎯 개인 목표

🟩 class(model) 이용한 상태관리 한 번 더 적용해보며 소화해봤다.

🟩 local storage 를 이용한 상태관리를 바닐라 자바스크립트로 할 수 있다.

🟩 router 를 바닐라 자바스크립트로 구현하며, 앞으로 배울 리액트 router-dom의 작동원리를 더 깊이 이해할 수 있다.

🟩 prototype, module, mixin 에 대해 설명할 수 있다.

0개의 댓글