[2주차 기본/심화/공유 과제] 회원 관리 페이지

[bongtta]

✨ 구현 기능 명세

💡 기본 과제

• 바닐라 JavaScript 사용. (React 등 라이브러리 사용 X)

1. 데이터

   • 초기 데이터는 데이터 파일을 별도로 생성해서 저장
   • 이 데이터를 불러와서 localStorage에 저장(이미 localStorage에 값이 있으면 안 불러옴).
   • localStorage 데이터를 이용해서 테이블을 렌더링(HTML에 데이터를 직접 넣는 하드코딩 x)

2. 헤더

   • 왼쪽엔 아이콘 1개 (종류는 상관 x)
   • 가운데에는 타이틀(아무거나)
   • 오른쪽에는 긴 컨텐츠(텍스트, 아이콘 등 아무거나)
   • 좌측/우측 컨텐츠의 길이가 달라도 헤더가 정확히 3등분 되어 정렬되어야 함.

3. 필터

   • 7개의 검색필터, 2개의 버튼으로 구성
   • 검색필터를 배치할때는 반드시 display: grid 속성 사용
   • 속성이 4줄에 각각 1개, 1개, 3개, 2개 배치 되어야 함(속성의 내용은 상관 x)
   • 필터링 할 값을 input에 입력
     (기본과제에서는 7개 모두 input으로 구현해도 괜찮음)
   • 7개의 속성 모두 필터링이 동작해야 함(포함하는 값으로 필터링)
   • (기본) 1번에 1개씩 입력하고 검색 필터 적용

4. 표

   • 우측 상단에는 선택삭제, 추가 버튼이 위치
   • 상단 필터에서 필터링 된 값만 나타남
   • 반드시 HTML의 table 태그를 사용해서 구현
   • 체크박스 기능
   • 선택삭제 버튼 클릭 시, 체크된 항목들 삭제
   • 추가 버튼 클릭 시, 항목 추가 모달 등장

5. 모달

   • 필터링, 테이블에 사용되는 7개의 항목을 입력 가능
   • 우측 상단에 모달 닫기 버튼
   • 하단에 추가 버튼 클릭 시, 모달 닫히면 데이터 추가
   • 1개라도 비어있는 상태로 추가 시, alert 창 띄워주기

---

🔥 심화 과제

1. 필터

   • 필터에 dropdown을 1개 이상 사용
   • 초기화 버튼을 누르면 모든 필드가 비워짐
   • (심화) 여러 조건들을 모두 만족하도록(and) 검색 필터 적용

2. 표

   • 한 개 이상의 열에는, 눌렀을 때 해당 칸의 값을 이용해서 링크 이동
   • 전체 체크박스 기능 (전체가 체크되면 맨위 체크박스도 자동으로 체크, 하나라도 해제되면 같이 해제)

3. 모달

   • 백드롭(모달 주변 어두운 배경 부분) 클릭 시 모달 닫힘

공유과제

제목: dialog 태그로 모달창 구현하기!

링크 첨부 : https://wave-web.tistory.com/68

❗️ 내가 새로 알게 된 점

• 주어진 css 선택자와 일치하는 요소를 찾을 때까지 가장 가까운 부모(조상)를 찾는 메서드인 Element.closest() 에 대해서 알게 되었어요!

const checked = document.querySelectorAll(".check:checked");
  const checkedTrs = Array.from(checked).map((checkedTr) => parseInt(
    checkedTr.closest("tr").id
  ));
  const newMember = getData.filter(member => {
    return !checkedTrs.includes(member.id);
});

이 코드를 통해서 체크된 tr 요소의 id를 숫자형으로 추출하고 checkedTrs에 포함되지 않은 member.id 필터링해서 새로운 데이터로 테이블을 업데이트 할 수 있었습니다!

• 모달창 구현하는 방법에 대해서 구글링했을 때 처음 보게 된 방법으로 시도하다가 많이 오류가 났었는데, 더 찾아보니 dialog 태그라는 게 있더라고요!! 이걸 사용해서 훨씬 간편하게 모달창을 구현할 수 있었어요!!

❓ 구현 과정에서의 어려웠던/고민했던 부분

• 모달창의 바깥영역을 클릭하면 닫히게 하는 기능을 구현할 때 getBoundingClientRect()를 사용해서 클릭 위치가 객체의 위치를 벗어나는지 확인하고, 벗어난다면 모달창을 닫도록 했는데, 더 좋은 방법이 있는지 궁금합니다..!!

modal.addEventListener('click', function(event) {
  const target = event.target;
  const rect = target.getBoundingClientRect();
  if (rect.left > event.clientX || rect.right < event.clientX ||
    rect.top > event.clientY || rect.bottom < event.clientY) {
      modal.close();
    }
});

• 저는 초기화 버튼의 타입을 reset으로 주고 js에서는 클릭시 새로고침 되도록 했는데, 버튼 타입은 그냥 버튼으로 주고 js에서 기능을 추가하는 것이 더 좋을지 고민됩니다..!

<button type="reset" id="resetBtn" class="reset">초기화</button>

resetBtn.addEventListener("click", () => {
  window.location.reload();
});

🥲 소요 시간

• 6days

🖼️ 구현 결과물

과제구현영상

-.Chrome.2024-10-29.12-38-39.mp4

[thisishwarang]

이런 전체 css 설정 및 초기 브라우저에 적용되어있는 스타일을 초기화 시키기 위해서 reset.css 파일을 만들면 좋아요.
reset css라고 구글링해도 나오고, 저와 지유 과제에도 reset.css 파일이 있으니 참고해보면 좋을 것 같습니다!

[thisishwarang]

색상과 관련해서 재사용성을 높이고 캡슐화 하기 좋은 방식을 사용하면 좋을 것 같아요. reset.css파일 혹은 global.css 파일을 만들어서

:root {
    --background: #fff;
}

이처럼 정의해놓은 후 컬러를 사용할 때

body {
    background-color: var(--background);
}

이렇게 사용할 수 있어요.
이러면 같은 색상을 넣을 때 좀 더 편리하고, 다른 사람이 코드를 읽을 때도 가독성이 높아지겠죠?
제 2주차 과제에도 활용해놓았으니 한번 보시면 좋을 것 같습니다!

[thisishwarang]

앞서 컬러를 미리 선언해놓고 var()로 컬러를 지정하는 방식을 추천드리고, 추가로 보통 컬러는 대부분 hex코드를 많이 사용하기 때문에 rgb를 hex코드로 바꿔주면 더 좋을 것 같습니다!

[thisishwarang]

여기도 검색 필터 부분에 남긴 리뷰와 마찬가지로 label, input들을 하나의 div로 묶어주면 레이아웃도 깔끔하고 좀 더 편하게 스타일링 할 수 있을 것 같아요!

[thisishwarang]

각 요소들의 display를 block으로 수정하여 구현하는것도 가능하지만, 제가 html태그쪽에 달아드린 리뷰처럼 label, input들을 하나의 div로 묶은 뒤

 display: flex;
 flex-direction: column;
 gap: 마음대로;

이런식으로 레이아웃을 잡아주면 더 좋을 것 같아요!

[thisishwarang]

모달에 있는 입력폼을 form태그로 만들었기 때문에 click이벤트도 좋지만 submit 이벤트도 활용해보면 좋을 것 같아요. 이때 필요한 e.preventDefault() 도 같이 공부해보면 좋을 것 같습니다. 이번에 지유님이 공유과제로 잘 작성해놓으셨더라구요!

[thisishwarang]

이 새로운 데이터를 테이블에 추가해주는 부분은 불필요해보입니다.
이미 새로 추가된 newMember를 getData.push()를 통해 배열에 추가해줬고, 이를 로컬스토리지에도 넣었으니, 이 데이터를 다시 화면에 렌더링만 시켜주면 되겠네요!
그럼 getData를 addTable()에 넣어 실행시켜주면 되겠죠?

[thisishwarang]

시험기간과 겹친데다 시험치는 과목도 많아서 이번 2주차 과제 하기 정말 힘들었을텐데 고생 많으셨습니다!! css파일에서 grid를 사용하는 부분에 꽤 많은 시간이 들었을 것 같고 색다른 방식으로 구현한 부분이 인상깊었습니다!

조금더 빨리 성장하기 위해서 코드를 작성하면서 주석으로 어떤 영역에 해당하는지, 혹은 지금은 아직 과제 단계니까 필기도 하면서 과제를 진행하면 훨씬 도움이 될 것 같아요! 저도 코드에 주석으로 필기하면서 많이 공부해서 도움이 되었습니다ㅎ

3주차 과제에 한번 적용해보셨으면 좋겠고, 저와 지유 코드리뷰 뿐만 아니라 다른 잘하는 웨비들의 코드를 보면서 함수를 분리하고, 이 순서를 따라가는 법을 공부해보면 큰 도움이 될 것 같습니다.
3주차 과제도 화이팅하시길 바랍니다!!

[gudusol]

채은님 2주차 과제 고생 많으셨습니다! 고민한 흔적도 많이 보이고, 꼼꼼히 잘 하신 것 같아요

리뷰 100개 달려고 왔는데 화랑님도 이미 열심히 달아놔주셨고 그렇게 달 것도 없네요~

3주차도 화이팅~!

[zzz-myam]

과제하느라 너무너무 고생 많았습니다 :)
코드를 보는데, 정말 많이 고민하고 최선을 다해 기능을 구현하기 위해 노력한 것이 보여서 너무 좋았습니다!
결국 끝까지 해내는 채은님의 열정을 배워갈 수 있었습니다 :)

결과물을 만들어내기 위해 얼마나 노력했을지 너무 잘 알기에 코드를 보는 내내
꼬옥,, 안아주고 싶었습니다..❤️
3주차 과제도 화이팅 해봅시닷!!!!