개발공부/JavaScript 강의
☕ 문벅스 카페 메뉴 앱 만들기 #02 (메뉴판 여러개 만들기)
김놀먹
2022. 1. 3. 20:53
1. 요구사항 분석
2. 로컬스토리지 개념
- localStorage : 브라우저에 저장할 수 있는 저장소 (url 별로 저장 / key:value 형태로 저장)
- setItem() : 저장
- getItem() : 가져오기
- JSON.stringify() : 로컬스토리지는 문자열로만 저장되기 때문에 객체 형태를 문자열로 저장
- 상태(=데이터)관리 : 변할 수 있는 데이터 > 변하기 때문에 관리를 해줘야 하는구나!
3. 메뉴상태 저장하여 관리 (추가, 수정, 삭제, 불러오기)
- map() : 배열을 순회(리턴한 값으로 새로운 배열로 만듦)
- join() : 문자열을 하나로 합쳐줌
- 상태 초기화를 해주는 이유 : 어떤 데이터를 넣을지 정의하고 관리하는지 명확히 알 수 있음
- data- : html마크업에서 어떤 데이터를 저장하고 싶을 때 사용하는 속성 (dataset.xxx 으로 접근)
- 데이터 상태를 변경할 때는 최소한의 로직으로 만들어야 함
(ex. localStorage에 접근할 때 바로 접근하기 보다 변수에 담은 객체로 접근) - splice() : 배열의 특정 원소를 삭제
- JSON.parse() : JSON 객체로 변환
- Q. init 할 때 인스턴스로 띄워진다?
A. 함수가 하나 있다고 할 때, 그 함수는 하나밖에 존재하지 않는다. (하나만 선언했기에) 인스턴트 뉴로 만든다는 것은 함수를 모델로 새로운 객체들이 여러 개 만들어질 수 있는 것(=각각의 상태를 가질 수 있는 것)
(ex. 카카오 채팅방 여러개 띄우듯)
4. 카테고리별 메뉴 추가, 수정, 삭제
- 계속 재사용하는 코드들은 더 많이 쓸 수 있도록 고민하여 클래스명, 아이디명, 변수명 등 적절히 수정
5. 품절 상태 관리
- 여러 개의 if문 사용시 불필요한 연산이 수행되지 않도록 한개의 if문 끝날 때마다 return 해주는 습관!
- 간단하게 토글버튼처럼 true / undefined 오가기
this.menu[this.currentCategory][menuId].soldOut = !this.menu[this.currentCategory][menuId].soldOut;
6. 리팩터링
- 이벤트리스너를 한 함수에 모아서 사용하면 간결!
- 한 파일에 객체는 하나만 있는게 좋음 (=>파일분리)
7. 회고
배운 점 & 느낀 점
📝 리팩터링의 중요성을 많이 깨닫게 된 것 같다. 어딜가나 리팩터링이 중요하다고 하는데 나는 혼자 공부하는 데다 배운거 따라가기도 바쁘다 보니 그동안 제대로 된 리팩터링이란 걸 해본 적이 없었다. (사실 하는 법도 몰랐음) 그런데 리팩토링 파트 쭉 듣고 보니 어느새 엄청 간결해진 코드 😲 (그리고 별 거 아닌 팁일 수 있는데 코드를 접어놓으니까 한 눈에 보기에 훨씬 좋더라!) 수업하는 내용을 엿듣는(?) 형식의 강의인데 이게 참 좋은 것 같다. 배우시는 분이 실시간으로 내가 궁금한 부분 물어봐주면 속이 다 시원하다가.. 너무 말을 똑부러지게 잘하시고 이해도 잘하셔서 괜히 나혼자 주눅 들었다가.. 나도 이렇게 누가 속시원히 가르쳐주면 좋겠다 싶은 부러운 마음도 들고ㅎㅎ; 이제 남은 강의는 서버랑 통신하는 부분인데 처음 해보는 거라 아마 엄청 돌려봐야될 것 같다.
📝 두번째 보면서 느낀 점은 내가 객체나 배열에 관한 이해도가 아직 많이 떨어진다는 것ㅠㅠ 탭을 나누어서 데이터를 관리해야되다보니 엄청 헷갈렸다.. this..this... 하지만 편하게 상태관리하려면 꼭 알아야하는 부분이라는 것도 몸소 느꼈다. 몇번은 더 봐야 이해될듯^^;
✔ 아직 잘 모르는 부분 : 상태관리, this, 생성자
this를 이용해서 상태관리를 하는데 처음에 여기서 계속 오류가 났다!
이유를 찾아보니 맨 마지막에 생성자 함수를 생성해주지 않아서였음