[3주차] 과제 이나현

[CSE-pebble]

✨ 구현 기능 명세

<DropDown 구현>

1. Dropdown 생성
2. Dropdown 중 하나를 마우스를 올리면, 색상이 변경되며 해당 리스트에 마우스를 올렸음을 확인할 수 있음
3. Dropdown 중 하나를 클릭하면, 해당 리스트의 글자가 변경되고 Dropdown 박스 안 글자가 변경됨

<Modal 창 구현>

1. Card 클릭 시, modal 창 생성
2. X 클릭 시 modal 사라짐
3. modal 창이 있는 동안은 scroll 막기

<태그 추가 및 삭제>

1. "새 글 작성" 클릭 시 write.html 파일로 이동
2. input 창에 원하는 글자를 입력하고 enter를 누르면 tag 생성
3. 중복된 태그의 입력을 막음
4. 추가된 태그를 클릭하면 태그가 삭제됨

🎁 PR Point

Javascript를 조금 더 공부해야될 것 같습니다..

😭 어려웠던 점

1. Dropdown 리스트에 event가 발생했을 때 해당 element를 가져와야 한다는 생각을 초반에 못해서 삽질을 조금 많이 했던 것 같아요..
2. Modal 창 위치나 CSS 적용이 card랑 겹쳐서 헷갈렸고 이걸 어떻게 하면 효율적으로 생성할 수 있을지가 아직 잘 떠오르지 않습니다!

😎 구현 결과물

2023-11-22.212533.mp4

[Nahee-Park]

왕 진짜 최고 !!!!!!!!! 너무 이뻐요 :D
Modal 창 위치나 CSS 적용이 card랑 겹쳐서 헷갈렸고 이걸 어떻게 하면 효율적으로 생성할 수 있을지가 아직 잘 떠오르지 않습니다! -> 이 부분은 사실 css 네이밍 컨벤션의 영역이랑도 맞닿아있어서 이 부분을 찾아보시면 좋을 것 같습니다 : )

[Nahee-Park]

그리고 클래스 네이밍 때문에 스타일이 중복되거나 섞이는 문제가 있었다고 하셨는데 아래 같은 아티클 바탕으로 class name convention을 맞춰보아도 좋을 것 같습니다 : )

주로 협업할 땐 무조건 컨벤션을 맞춰서 작성하게 될텐데, HTML,CSS.javascript 조합에서는 BEM 방법론을 가장 흔히 사용하는 것 같아요

https://tech.elysia.land/%EB%84%A4%EC%9D%B4%EB%B0%8D-%EC%BB%A8%EB%B2%A4%EC%85%98-bem-b291ba7bff01

[Nahee-Park]

혹은 css utility 클래스 형식도 고려해볼 수 있습니다 : )

[Nahee-Park]

좋은 방식이지만 또 새로운 방식을 제안해보자면
let tagArr = new Set(); 의 방식을 통해 Set자료형을 이용하면 처음부터 중복을 피할 수도 있습니다!

[CSE-pebble]

@Nahee-Park 혹시 요 커밋내역 한번만 확인해주실 수 있나요..! 이렇게 수정하는게 맞는건지 확신이 안 들어서요🥲

[Nahee-Park]

이 부분은 클래스로 스타일을 준다면 코드를 간소화시킬 수 있을 것 같아욤

Suggested change

	function handleMouseenter(event) {
	let selected = event.currentTarget;
	selected.style.backgroundColor = "lightgrey";
	}
	function handleMouseleave(event) {
	let selected = event.currentTarget;
	selected.style.backgroundColor = "whitesmoke";
	}
	function handleMouseEnterLeave(event, isEntering) {
	let selected = event.currentTarget;
	selected.classList.toggle("hovered", isEntering); // 클래스로 스타일 변경
	}
	dropDownContents.forEach((content) => {
	content.addEventListener("mouseenter", (e) => handleMouseEnterLeave(e, true));
	content.addEventListener("mouseleave", (e) => handleMouseEnterLeave(e, false));
	content.addEventListener("click", handleContentClick);
	});

[Nahee-Park]

이처럼 수정한다면 이벤트 리스너가 중복되는 부분도 해결할 수 있을 것 같아요 : )

[CSE-pebble]

@Nahee-Park 이렇게 수정하려고 했는데 CSS 적용이 잘 안되네요 ㅠㅠ isEntering이 될 때마다 해당 html 태그 class에 hovered 가 정상적으로 추가되는 것도 확인했는데... 왜 적용이 안될까요?
해당 커밋 내역입니다! => #