[14기 정새미] step1 돔 조작과 이벤트 핸들링으로 메뉴 관리하기 #274

Eddington524 · 2022-07-17T12:04:37Z

🎯 step1 요구사항 - 돔 조작과 이벤트 핸들링으로 메뉴 관리하기

에스프레소 메뉴에 새로운 메뉴를 확인 버튼 또는 엔터키 입력으로 추가한다.
- 메뉴가 추가되고 나면, input은 빈 값으로 초기화한다.
- 사용자 입력값이 빈 값이라면 추가되지 않는다.
메뉴의 수정 버튼을 눌러 메뉴 이름 수정할 수 있다.
- 메뉴 수정시 브라우저에서 제공하는 prompt 인터페이스를 활용한다.
메뉴 삭제 버튼을 이용하여 메뉴 삭제할 수 있다.
- 메뉴 삭제시 브라우저에서 제공하는 confirm 인터페이스를 활용한다.
총 메뉴 갯수를 count하여 상단에 보여준다.
추가되는 메뉴의 아래 마크업은 <ul id="espresso-menu-list" class="mt-3 pl-0"></ul> 안에 삽입해야 한다.

joseph-106 · 2022-07-18T13:36:30Z

src/js/index.js

+ const editedName = prompt("메뉴명을 수정하세요", $menuName.innerText);
+ $menuName.innerText = editedName;


prompt를 취소한다면 메뉴명이 null 값으로 변경될 수도 있을 것 같습니다 !

아하 null값 체크를 못했네요! 감사합니다! if(!editedName) return; 이렇게 체크해보겠습니다~

joseph-106 · 2022-07-18T13:40:44Z

src/js/index.js

+ // form 태그가 자동으로 전송되는 걸 막기
+ $("#espresso-menu-form").addEventListener("submit", (e) => {
+ e.preventDefault();
+ })
+
+ // 메뉴의 이름을 입력 받기
+ $("#espresso-menu-name").addEventListener("keydown", (e) => {
+ if(e.key !== "Enter") return;
+ createMenuName();
+ });
+
+ $("#espresso-menu-submit-button").addEventListener("click", createMenuName);


submit 이벤트에 createMenuName 함수를 넣어주면 더 간결하지 않을까요?

submit이벤트에서 createMenuName를 호출하는것을 말씀하시는 것일까요? :)
submit 이벤트 부분은 form 태그 때문에 자동으로 새로고침되는 부분을 막기위해서 e.preventDefault(); 만 넣고 입력받는 이벤트는 아래의 keydown과 click에서만 createMenuName을 호출하고 있어서~ 호출할 필요는 없을 것 같습니다~

Suggested change

// form 태그가 자동으로 전송되는 걸 막기

$("#espresso-menu-form").addEventListener("submit", (e) => {

e.preventDefault();

})

// 메뉴의 이름을 입력 받기

$("#espresso-menu-name").addEventListener("keydown", (e) => {

if(e.key !== "Enter") return;

createMenuName();

});

$("#espresso-menu-submit-button").addEventListener("click", createMenuName);

// form 태그가 자동으로 전송되는 걸 막기

$("#espresso-menu-form").addEventListener("submit", (e) => {

e.preventDefault();

createMenuName();

})

아아 동작은 동일하지만 아마 이렇게 줄이면 조금 더 간결하지 않을까 하는 의미였습니다 !

form 요소 안의 input에 Enter keydown이벤트를 받는 방식을, 위에 106님이 하신 것처럼 할 수 있습니다
ref: https://codesandbox.io/s/input-in-form-2o9x9i

는 이미 달아주셧군요

n00nietzsche · 2022-07-21T17:28:03Z

src/js/index.js

+
+ $("#espresso-menu-list").insertAdjacentHTML("beforeend", menuItemTemplate(espressoMenuName));
+ updateMenuCount();
+ $("#espresso-menu-name").value = "";


input 의 .value 를 활용하여 값을 비워주는 방식도 좋지만, 우리가 사용하는 HTMLFormElement 스펙에서는 reset 이라는 메서드를 지원하여 form 요소를 기본 값으로 초기화하기도 합니다. HTML 의 기본 스펙은 생각보다 많은 기능을 지원하여 알아두면 도움이 될 것 같아요.

n00nietzsche · 2022-07-21T17:37:52Z

src/js/index.js

+
+ const editMenuName = (e) =>{
+ const $menuName = e.target.closest("li").querySelector(".menu-name");
+ const editedName = prompt("메뉴명을 수정하세요", $menuName.innerText);


innerText 보다는 가급적 textContent 를 이용하시는게 미래에 있을 예상하지 못할 버그나 성능문제를 막는데에 조금 더 도움이 될 거에요.

https://stackoverflow.com/questions/35213147/difference-between-textcontent-vs-innertext

https://developer.mozilla.org/ko/docs/Web/API/Node/textContent

여기서는 innerText 와의 비교를 유심히 보세요.

n00nietzsche · 2022-07-21T17:40:22Z

src/js/index.js

+ $("#espresso-menu-form").addEventListener("submit", (e) => {
+ e.preventDefault();
+ })
+


HTMLFormElement 의 submit 은 기본 스펙으로 엔터키와 submit 버튼을 눌렀을 때를 모두 지원합니다. 그래서 onsubmit 이벤트에 콜백 함수를 기록해두면, onclick 과 keydown 이벤트 두개를 잡을 필요가 없어지죠. 다만, 현재 html 에서 버튼의 type 이 submit 이 아닌데, 그것만 바꿔주면 잘 동작 할 거예요.

domuk-k · 2022-07-20T03:56:13Z

src/js/index.js

+ const menuItemTemplate = (espressoMenuName) => {
+ return `<li class="menu-list-item d-flex items-center py-2">
+ <span class="w-100 pl-2 menu-name">${espressoMenuName}</span>
+ <button
+ type="button"
+ class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"
+ >
+ 수정
+ </button>
+ <button
+ type="button"
+ class="bg-gray-50 text-gray-500 text-sm menu-remove-button"
+ >
+ 삭제
+ </button>
+ </li>`
+ };


제안드립니다
이 함수를 표현해보면

// espressMenuName 문자열을 받아서 템플릿리터럴로 쓰여진 html코드 문자열을 반환하는 함수 type menuItemTemplate = (espressMenuName : string ) => string

이런 식으로 볼 수 있을 거같아요. 그럼 get- 접두사prefix 붙이는게 더 좋은 네이밍일거 같아요 getMenuItemTemplate.
혹시 접두사를 일부러 사용하지 않은 이유가 있다면 궁금합니다

네네! 말씀해주신대로 prefix를 붙이는게 더 좋은 것 같아요~ 감사합니다!

domuk-k · 2022-07-20T04:26:05Z

src/js/index.js

+ // form 태그가 자동으로 전송되는 걸 막기
+ $("#espresso-menu-form").addEventListener("submit", (e) => {
+ e.preventDefault();
+ })
+
+ // 메뉴의 이름을 입력 받기
+ $("#espresso-menu-name").addEventListener("keydown", (e) => {
+ if(e.key !== "Enter") return;
+ createMenuName();
+ });
+
+ $("#espresso-menu-submit-button").addEventListener("click", createMenuName);


form 요소 안의 input에 Enter keydown이벤트를 받는 방식을, 위에 106님이 하신 것처럼 할 수 있습니다
ref: https://codesandbox.io/s/input-in-form-2o9x9i

는 이미 달아주셧군요

sammy added 4 commits July 11, 2022 22:00

first commit

3277862

[14기 정새미]팀원 이름 업데이트

b3c32d5

add: 메뉴 추가 동작

5f2d9a9

[14기 정새미] step1 돔 조작과 이벤트 핸들링으로 메뉴 관리하기

88eeceb

joseph-106 reviewed Jul 18, 2022

View reviewed changes

fix: prompt null 체크

9829958

n00nietzsche reviewed Jul 21, 2022

View reviewed changes

domuk-k reviewed Jul 22, 2022

View reviewed changes

sammy added 2 commits July 26, 2022 20:36

fix: 필요없는 테스트 삭제

e16647e

♻️ 코드리뷰 사항 반영 후 리팩터링

e1a0fef

imakerjun changed the base branch from main to eddington524 July 31, 2022 11:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[14기 정새미] step1 돔 조작과 이벤트 핸들링으로 메뉴 관리하기 #274

[14기 정새미] step1 돔 조작과 이벤트 핸들링으로 메뉴 관리하기 #274

Eddington524 commented Jul 17, 2022

joseph-106 Jul 18, 2022

Eddington524 Jul 19, 2022

joseph-106 Jul 18, 2022

Eddington524 Jul 19, 2022 •

edited

Loading

joseph-106 Jul 19, 2022 •

edited

Loading

domuk-k Jul 20, 2022

n00nietzsche Jul 21, 2022

n00nietzsche Jul 21, 2022

n00nietzsche Jul 21, 2022

domuk-k Jul 20, 2022

Eddington524 Jul 31, 2022

domuk-k Jul 20, 2022

		const editedName = prompt("메뉴명을 수정하세요", $menuName.innerText);
		$menuName.innerText = editedName;

[14기 정새미] step1 돔 조작과 이벤트 핸들링으로 메뉴 관리하기 #274

Are you sure you want to change the base?

[14기 정새미] step1 돔 조작과 이벤트 핸들링으로 메뉴 관리하기 #274

Conversation

Eddington524 commented Jul 17, 2022

🎯 step1 요구사항 - 돔 조작과 이벤트 핸들링으로 메뉴 관리하기

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Eddington524 Jul 19, 2022 • edited Loading

Choose a reason for hiding this comment

joseph-106 Jul 19, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Eddington524 Jul 19, 2022 •

edited

Loading

joseph-106 Jul 19, 2022 •

edited

Loading