[ 2주차 기본 과제 ] 비니의 냠냠 🍰 창업🏠 손님을 모셔오자!🌈 #3
Conversation
eunbeann
changed the title
| this.checked?showCards(checkedId):deleteCards(checkedId) | ||
| this.checked?addCategoryTag(checkedId):deleteCategoryTag(checkedId) | ||
| }) | ||
| }) |
There was a problem hiding this comment.
이거 구냥 이렇게 중간에 써도 잘 돌아가나여? (궁금궁금)
저는 dom에 안올리면 동작을 잘 안해서 이런식으로 돌아가게 하고 싶은 함수들 돔에 올려줬어요!
document.addEventListener("DOMContentLoaded", function () { // 여기에 함수 들어감! });
There was a problem hiding this comment.
돔에 올린다는 생각을 따로 안해봤는데.. 잘 돌아가더라구요?!
생각해보니 저도 함수에 넣을까 하다가 렌더링을 따로 해줘야돼서 그냥 냅다 바깥으로 빼서 onload에 돌아가게 것 같네여
아마 showCard 같은 함수가 DOM을 건드려서 잘 돌아가는 것 같아효....
| } | ||
|
|
||
| .section__tag-list::before { | ||
| content: "#"; | ||
| content: "#"; | ||
| } |
There was a problem hiding this comment.
어 나두 리팩토링 할 때 일일히 # 추가 안해도되게 요런 식으로 해야겠다..!
There was a problem hiding this comment.
후후 저번 과제 코드리뷰로 받은 의견 .!!
코드리뷰 짱~
| padding-bottom: 0.5rem; | ||
| white-space: normal; | ||
| overflow: auto; | ||
| /* text-overflow: ellipsis; */ |
There was a problem hiding this comment.
우왓!! 계속 생각했는데 놓쳤군요 센스쟁이 찝어줘서 고맙습니다 움쪽~
|
아 그리구 카테고리 태그 모달에 있는 x 버튼 눌렀을 때, 해당 카테고리의 input 체크도 풀리고 카드도 사라지는 부분..!! 저는 let으로 빈 배열(categoryData) 하나 만들어서 구현했습니당! input 클릭하면 클릭한 카테고리의 id가 배열로 들어가고, 체크를 해제하면 배열에서 해당 카테고리는 빠지고 filter로 화면에는 나머지 카테고리에 해당하는 아이템만 남아있도록..! 도움이 됐으면 좋겟네여ㅠㅠ🫡🥳😇!!! |
| @@ -13,6 +13,8 @@ | |||
|
|
|||
| </head> | |||
| <body> | |||
|
|
|||
| <script type="module" src="main.js"></script> | |||
There was a problem hiding this comment.
js를 head에 놓았는데 용량이 크다면 head를 모두 부르는데 오래걸리고, 그만큼 body도 늦게 실행되어 사용자 입장에서 백지화면를 더 오래볼 수 있어요! 그래서 최적화를 위해서 script는 body 태그 최하단에 두는 게 조아요-! <script> 태그는 어디에 위치해야 할까요?
| <input type="checkbox"/> | ||
| <p>쿠키</p> | ||
| </label> | ||
| <div class="nav__category"> |
There was a problem hiding this comment.
조금 더 시맨틱하게 nav 안에서 ul-li 태그로 카테고리 버튼을 만들어줘도 될 것 같아요!
| <p>쿠키</p> | ||
| </label> | ||
| <div class="nav__category"> | ||
| <input type="checkbox" class="category" value="all" id="all"/> |
There was a problem hiding this comment.
id는 아무래도 클래스처럼 이 태그가 어떤 역할을 하는지를 보여주는 태그이니까 이런 경우에는 dataset을 이용해봐도 좋을 것 같아!
HTML 데이터셋(Dataset, data-*) 속성의 이해
| </section> | ||
| <main> | ||
|
|
||
| <section id="cards"> |
There was a problem hiding this comment.
화면 상에서 태그가 상단에 위치하는데 html 문서상에서는 하단에 있는게 어색하기도 하고, html은 기본적으로 코드 순서대로 파싱을 하니까 이 section 친구는 위로 가는 게 좋지 않을까요오?!
| window.onload=initialPage(); | ||
|
|
||
| // onload | ||
| function initialPage() { |
There was a problem hiding this comment.
오홍 로드 됐을 때는 다 체크되게 한 거 너무 야무지다! 이거 나도 적용해야지 헤헤
| } | ||
|
|
||
| .section__like:hover { | ||
| color: #E97BAC; | ||
| color: #e97bac; |
|
|
||
| // 카테고리 태그 만들기 | ||
| function addCategoryTag(addId) { | ||
| let resultList = `` |
There was a problem hiding this comment.
요기서 빈값으로 먼저 선언해준 이유가 있으까요-? 그냥 categorySection 하단에서 바로 선언과 동시에 값 지정해도 될 것 같은데!
| const checked = document.querySelectorAll(".category"); | ||
| const btn = document.getElementById(`tag-btn-${addId}`); | ||
| btn.addEventListener('click', function() { | ||
| checked.forEach(function(checkbox) { |
There was a problem hiding this comment.
forEach 안에서 함수를 또 써준 이유가 있을까요?! 아예 전역 함수로 빼거나 아니면 함수 빼고 코드만 넣거나! 하면 더 깔끔할 것 같은데!
| function deleteTagByBtn(addId) { | ||
| const checked = document.querySelectorAll(".category"); | ||
| const btn = document.getElementById(`tag-btn-${addId}`); | ||
| btn.addEventListener('click', function() { |
There was a problem hiding this comment.
보통은 화살표 함수를 많이 쓰는 것 같아요
btn.addEventListener("click", ()=> {})이렇게! 더 가독성이 좋은 것 같아!
| }) | ||
|
|
||
| // 모달 구현 | ||
| function openModal(event) { |
There was a problem hiding this comment.
isModalOpen이라는 변수를 만들고 이 값에 따라서 모달을 열고 닫는 함수 하나만 만들면 openModal, closeModal 두 개의 함수가 필요하지 않을 것 같아!
한 번 이 방법으로도 구현해보기! 이 방법이 실제로 리액트에서 state를 활용해서 많이 사용하는 방법이라 미리 연습해보면 좋을 것 같아:)
There was a problem hiding this comment.
아니면! css 로 미리 속성 지정해둔다음에 classList.toggle로 모달 구현해도 덴다!
| <p>쿠키</p> | ||
| </label> | ||
| <div class="nav__category"> | ||
| <input type="checkbox" class="category" value="all" id="all"/> |
| @@ -0,0 +1,122 @@ | |||
| import { breads } from "./products.js"; | |||
|
|
|||
| window.onload=initialPage(); | |||
| function filterBreadsByType(type) { | ||
| const filteredBreads = breads.filter((bread) => bread.type === type); | ||
| return filteredBreads.length > 0 ? filteredBreads : breads; | ||
| } | ||
|
|
There was a problem hiding this comment.
내가 한참 헤맸던 필터링 정말 깔끔하게 함수 짰다! 보고 배웁니다ㅎㅎ 최고최고!
| //카드들 삭제하기 | ||
| function deleteCards(filterType) { | ||
| const articleList = document.querySelectorAll(`.${filterType}`); | ||
| articleList.forEach(article => article.parentNode.removeChild(article)); |
| }) | ||
|
|
||
| // 모달 구현 | ||
| function openModal(event) { |
There was a problem hiding this comment.
아니면! css 로 미리 속성 지정해둔다음에 classList.toggle로 모달 구현해도 덴다!
| window.onload=initialPage(); | ||
|
|
||
| // onload | ||
| function initialPage() { |
breadStore/main.js
Outdated
| let resultList = `` | ||
| const categorySection = document.querySelector("#section__category"); | ||
| resultList = ` | ||
| <div id="tag-${addId}">${addId}<button class="typeTag" id="tag-btn-${addId}" type="button"> X</button></div> | ||
| `; |
There was a problem hiding this comment.
| let resultList = `` | |
| const categorySection = document.querySelector("#section__category"); | |
| resultList = ` | |
| <div id="tag-${addId}">${addId}<button class="typeTag" id="tag-btn-${addId}" type="button"> X</button></div> | |
| `; | |
| const categorySection = document.querySelector("#section__category"); | |
| const resultList = ` | |
| <div id="tag-${addId}">${addId}<button class="typeTag" id="tag-btn-${addId}" type="button"> X</button></div> | |
| `; |
로하면 let안써도 데지않나?!! 왜냠 js도 그렇고 리액트도 그렇고 let은 변경이 쉬워서 의도대로 작동하지 않을수도 있어서 최대한 지양하는게 조하!
| // 배열 필터링 | ||
| function filterBreadsByType(type) { | ||
| const filteredBreads = breads.filter((bread) => bread.type === type); | ||
| return filteredBreads.length > 0 ? filteredBreads : breads; |
There was a problem hiding this comment.
| return filteredBreads.length > 0 ? filteredBreads : breads; | |
| return filteredBreads.length ? filteredBreads : breads; |
로만 해도 될것가튼데!
breadStore/main.js
Outdated
| const breadsList = breads.map((bread) => { | ||
| const hashtags = bread.hashtags | ||
| .map((tag) => `<li class="section__tag-list">${tag}</li>`) | ||
| .join(" "); | ||
| return ` | ||
| <article class="section__card"> | ||
| <h3>${bread.name}</h3> | ||
| <ul class="section__tag">${hashtags} </ul> | ||
| <img class="section__img" src="./imgs/${bread.src}"/> | ||
| <button class="section__like" id="btn${bread.id}" type="button">♥</button> | ||
| </article> | ||
| `; | ||
| }); |
There was a problem hiding this comment.
| const breadsList = breads.map((bread) => { | |
| const hashtags = bread.hashtags | |
| .map((tag) => `<li class="section__tag-list">${tag}</li>`) | |
| .join(" "); | |
| return ` | |
| <article class="section__card"> | |
| <h3>${bread.name}</h3> | |
| <ul class="section__tag">${hashtags} </ul> | |
| <img class="section__img" src="./imgs/${bread.src}"/> | |
| <button class="section__like" id="btn${bread.id}" type="button">♥</button> | |
| </article> | |
| `; | |
| }); | |
| const breadsList = breads.map(({name, src, id, hashtags }) => ` | |
| <article class="section__card"> | |
| <h3>${name}</h3> | |
| <ul class="section__tag"> | |
| ${hashtags | |
| .map((tag) => `<li class="section__tag-list">${tag}</li>`) | |
| .join(" ")} | |
| </ul> | |
| <img class="section__img" src="./imgs/${src}"/> | |
| <button class="section__like" id="btn${id}" type="button">♥</button> | |
| </article> | |
| `; | |
| ); |
이렇게도 구조분해 할당해서 쓸 수 있을고야!
| type: "breads", | ||
| src: "Bread1.png", | ||
| hashtags: ["바게트", "바게뜨?", "가로로 긴 바게뜨"], | ||
| like: false, |
✨ 구현 기능 명세
기본 과제
navcard article+아이콘 클릭시 태그 모달이 등장합니다.심화 과제 …ㅜ.^
목록
새 상품 추가
href=’/addCard’
새 상품 추가 페이지
label,input연결시켜 구현,로 구분해서 담기카드 띄울 때 애니메이션
🌼 PR Point
// 체크 change에 따라 상태 변경코드에 영향을 받아서 카드랑 태그가 생기고 사라지고가 될 텐데🥺 소요 시간, 어려웠던 점
⇒ 전반적으로 아직 내가 부족하구나를 느꼈던 과제 🥺 배울 점이 아직 한참 남았단 건 좋은거에요 아자아자
모든 코드리뷰 열렬히 환영 제발 해주세요 제발
🌈 구현 결과물