☕ 문벅스 카페 메뉴 앱 만들기 #01 (에스프레소 메뉴판 만들기)

☕ 블랙커피 Vanilla JS Lv1. 문벅스 카페 메뉴 앱 만들기

메이커준님 유데미 강의 시작!

강의도 여러개 끊어놓고 책도 읽고 있지만 

그저 따라치고 뭘 어떻게 만들어야 할지 갈피를 잡지 못하던 나에게

딱 필요한 강의인 것 같아서 유데미 할인할 때 저렴하게 질렀다!! 

(이렇게 산 것만 수두룩^^*)

 

---

강의 목적

• 바닐라 자바스크립트를 아는 걸 넘어 자바스크립트를 잘 사용하는 방법(사고하는 방법)
• 바닐라 자바스크립트로 상태관리가 가능한 애플리케이션 만들기

---

1. 요구사항 분석

• 요구사항의 목적을 명확히 체크 (기능 구현을 위한 필요한 지식과 개념이 무엇인지 파악)
• 기능을 세부적으로 쪼개서 (메뉴추가/수정/삭제) 순서대로 적어보기 

※ 요구사항 예시 ※

에스프레소 메뉴에 새로운 메뉴를 확인 버튼 또는 엔터키 입력으로 추가한다.

메뉴가 추가되고 나면, input은 빈 값으로 초기화한다.

사용자 입력값이 빈 값이라면 추가되지 않는다.

.

.

 

 

💡 꿀팁 : selector를 $ 하나로 가져올 수 있는 매직! 제이쿼리에서도 이런 식으로 사용되는가 보다!  

const $ = (selector) => document.querySelector(selector);

 

2. 메뉴 추가하기

• 반복적으로 쓰이는 코드는 어떻게 줄일 수 있을지 고민해보기
• insertAdjacentHTML("beforebegin", 추가하려는node) : 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가
  • beforebegin : 태그 시작 바로 앞
  • afterbegin : 태그 시작 바로 뒤
  • beforeend : 태그 끝 바로 앞
  • afterend : 태그 끝 바로 뒤

• 변수명 지을 때 html에서 사용한 id 값이나 class 값을 참고해서 지으면 다른 사람이 내 코드를 볼 때도 알기 쉬움
• length는 객체, 배열의 길이뿐 아니라 html요소의 개수도 세어줌 
• ❗ 내가 계속 헷갈리는 부분 : input값을 받고난 뒤 input을 비울 때 자꾸만 input값을 할당한 변수를 비우려고 해서 오류를 낸다 주의주의!! 

3. 메뉴 수정하기

• 이벤트 위임 : 부모 요소에 이벤트를 지정하여 자식 요소를 컨트롤할 수 있음
  장점 : 동적으로 추가되는 요소에도 사용, 코드의 간결 
• closest() : 자신부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색한다(문서 루트까지 이동). 이 중 가장 가깝게 조건에 만족한 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 null 값을 반환

4. 메뉴 삭제하기

• confirm 은 보통 if문 안에 써서 true일 때 삭제, 아니면 취소 

5. 리팩토링

• 나중에 보더라도 알아보기 쉽게 코드 정리 (일일이 읽어야되지 않도록 함수로 만들 수 있으면 만들자)
• 함수끼리 모아서 정리
• 일관된 이름으로 작성
• 수정한 뒤 바로 잘 동작하는지 확인
• 구현하는 부분 외의 기능은 접어두면 한눈에 큰 그림을 보기 쉬움

---

배운 점 & 느낀 점

📝 요구사항을 보고 바로 코딩에 들어가지 말고 단계를 세부적으로 쪼개서 (ex. 메뉴이름>엔터키로 입력받기) 먼저 할 일을 적어보면 훨씬 코딩하기가 수월해진다! 그동안 코딩강의 보면서 제일 힘들었던 점 중 하나가 강의 볼 때는 다 알 것 같은데, 막상 혼자 해보려고 하면 손도 못 대는 상황의 반복이라 좌절감이 심했는데..  이런 식으로 잘게 쪼개 보니 어디서부터 시작해야 할지에 대한 막연함이 훨씬 줄었다. (물론 쪼개는 것도 초보에겐 험난한 과정이고, 쪼갠다고 해도 다 뚝딱 만들어지는 것도 아니지만.. 흑흑..) step1에서 만든 결과물이 어떻게 보면 굉장히 단순하지만 현실적으로 많이 쓰이는 기능들이라 복습하고 제대로 익히면 다른 것도 만들 수 있을 것 같은 자신감이 뿜뿜! 

 

✔ 아직 잘 모르는 부분 : 이벤트 위임(closeset 메서드 활용), e.target, insertAdjacentHTML