Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[2주차 기본과제] 마켓페이지 만들기 #5

Open
wants to merge 13 commits into
base: main
Choose a base branch
from

Conversation

eastlaw80
Copy link

✨ 구현 기능 명세

  • 기본 과제

✅ nav

  1. 종류 선택시 태그를 카드섹션 위에 하나씩 부착합니다
  2. 태그별 상품 리스트 보여줍니다.
    1. 전체 → 다보여주기
    2. 종류별 → 필터기능
  3. x 클릭시
    1. 카드 다시 정렬
    2. 종류 선택 해제
      1. 태그 삭제

✅ card article

  1. + 아이콘 클릭시 태그 모달이 등장합니다.
  2. 카드 위에 덮어씌워지는 창 → 해시태그 목록 담은 content 보여주기
  3. x 버튼을 누르면 모달이 닫힙니다.(실패)

🌼 PR Point

  1. 기능별로 최대한 깔끔하게 함수를 분리하고자 하였습니다.
  2. 이벤트 확인 -> 리스트 구성 -> 리스트에 따라 html 변경 이런 순서로 전체적인 로직을 구현하고자 하였습니다.
  3. 체크에 따라 상품을 분류할 때, 상품들에 따로 카테고리 속성을 부여하는 것이 아닌 기존에 작성한 태그들을 활용했습니다. 체크박스를 체크하면, 해당 체크된 내용과 같은 이름의 태그를 보유한 상품들을 정렬해주는 방식으로 정렬을 구현했습니다. 아쉬운점은, 한 상품에 여러개의 태그가 있다보니, 태그들 끼리 배타적으로 구성되지 않으면 체크후 해제를 구현할 때 논리가 너무 복잡해져서 아쉽게도 교집합이 있는 태그들은 다 빼고, 배타적으로 태그들을 구성했습니다

🥺 소요 시간, 어려웠던 점

  • 11h
    11시간을 적긴 했는데, 정확히 얼마나 걸렸는지는 계산이 어렵습니다,,제대로 JS코드를 짜본게 처음이었기 때문에 가장 기본적인 문법부터 복습하면서 차근차근 하나씩 바꿔가면서 작성하느라 더 시간이 오래 걸렸습니다. 제꺼를 작성하고 디버깅한 시간 외에도 다른 사람들 코드들 찾아보고 읽어보고 이해하기 위해 계속 개념들을 찾아보는 것도 시간이 많이 들었던 것 같습니다. 지금도 사실 제대로 이해하고 코드를 적은건지 좀 의문이 드는 부분들이 몇부분 있는데,,뒤에 todo리스트를 하면서 비슷한 기능들을 다시 사용하니 이를 하면서 다시 하나씩 확인해보면서 지나가려고 합니다.
    마지막으로 태그를 체크하면 위에 뜨는 태그들이 x를 누르면 체크가 해제되긴 하는데 위에 떠있는 태그가 삭제가 되지 않습니다. 이렇게 저렇게 해봤는데도 왜 안되나 싶어서 연구하다가 결국 포기했습니다...

🌈 구현 결과물

스크린샷 2023-04-22 오전 12 12 23

Comment on lines +3 to +9
const TAG_NAME = {
check_all: "전체",
check_full: "풀프레임",
check_crop: "크롭센서",
check_ddok: "똑딱이",
check_action: "액션캠",
};
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

왕 좋다 깔꼼해.....진촤...

content.innerHTML = newHtml;
tagsSection.appendChild(content.content);
} else {
const target = document.getElementsById("tag_" + checkBox.id);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

근데 요길 getElementById로 바꾸곡 target.parentNode.removeChild(target)요걸 이용해도 삭제가 안되낭?? 큠.... 요긴 좀 더 생각해보곡!! 또 달아놓을게이!!!!

Copy link

@Dangpy Dangpy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Copy link

@yesongoget yesongoget left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

동헌오빠 카메라 탐난다,,,,,탐난ㄷㅏ,,,,,,,,,,,,,탐난다,,,,,,,,,,정보좀주세요
image

@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="en">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이거 lang = "ko" 로 바꿔주면 좋겠다!!

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web_TO-DO_MATE</title>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

title 지정해주는 디테일 대박~!

})
: checkBoxAll.checked || (list = removeTag(list, tagName));
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

왕 삼항연산자로 깔끔하게 잘썼다!!

isChecked
? allDataList.forEach((item) => {
list.push(item);
list = Array.from(new Set(list));

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

array.from 말고 map 활용해보는 건 어떨까용?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants