스터디에서 2번째 과제로 투두리스트 프로젝트를 받았다.
이전에 챌린지때 투두리스트 미션이 있었는데
챌린지 당시에는 강의를 듣고 하는 게 아닌
미션만 주어진 것이었어서 온전히 이해되면서 한 게 아니었다고 생각하는데
이번 기회에는 좀 더 기능에 대한 이해를 할 수 있는 시간이 될 것 같다.
해보자 해보자 🏄♂️
기본 뼈대 구현
-
필요한 기능 정의
-
구조 생성
-
스타일 작성한 후 결과
기능 구현
- 동작 구현하기
1. 할 일 추가
2. 체크
3. 삭제
4. 아이템 필터링
결과물
 |  |
|---|
추가 보완할 점
추가로 보완하고 싶은 점은 전체삭제나 검색기능, 고정 기능에 대한 도입을 생각했다.
++ 지금은 최근에 입력한 태스크가 아래로 나타나는데 위로 쌓이게 변경해주면 좋을 것 같다.
ui 배치도 살짝씩 조정해보았다.
- 최신 작성한 일이 위로 쌓이게 변경 완료
일 데이터가 저장된 배열에 push 대신 unshift를 사용하면 요소가 추가될 때
맨 뒤에 추가 - > 맨 앞에 추가로 변경되어 최신 일이 위로 쌓이게 할 수 있다.
 |  |
|---|
+++
모바일시 이상한 밑줄 위치 해결
pc에서 확인하는 모바일뷰에는 이상 없이 언더 선이 잘 보이지만
오른쪽 이미지처럼 실제 폰에서 확인해보면 호버 라인 선이 하나 더 보이고
뭔가 이상한 걸 발견할 수 있었다.
 |  |
|---|
왜인지 알 수가 없었는데 의심되던 곳은 여기었다.
text-underline-position, text-underline-offset은
일부 브라우저에서 호환이 제대로 이루어지지 않는다는 글을 발견했다.
💬 수정
underline 관련 삭제 - > border-bottom / padding-bottom으로 선 만들기
수정하고 푸시한 뒤 다시 폰으로 배포주소를 확인해보니 잘 반영되고 있다 얏호 !!
text-underline 관련
https://hianna.tistory.com/679
padding-bottom 관련
https://hianna.tistory.com/680
다시 만들어보기
복습겸 다시 처음부터 만들어보면서 기능 익히자 !!
스타일은 기본적으로만 하고 기능에 초점쓰 !!
뼈대 생성
 |  |
|---|
입력창, 버튼 추가
 |  |
|---|
js에서 html 요소 변수 등록 ( 입력창, 버튼 등록 / 버튼 클릭 이벤트 추가 / 입력 값 콘솔에서 테스트 )
 |  |
|---|
입력 값을 배열에 담기
 |  |
|---|
엔터를 입력했을 때도 값이 전달되게 키다운 이벤트 추가
할 일이 추가될 때 체크/삭제 아이콘 html에 반영
할 일 추가한 뒤 입력창 초기화 / 포커스
 |  |
|---|
아이콘에 이벤트 추가 - > 할일 체크 / 삭제 (삭제시에 한 번 더 물어보고 삭제하기)
 |  |
|---|
탭 필터링 -> 탭에 같은 클래스 주기 - > 전체에는 active 처음부터 넣기(맨 처음은 전체로 포커싱되어있는게 기본이니깐 ! - > js에서 클래스 tab인 애들 모두 선택 - >
아이템(할 일)이 없을 때는 none /
for each문 사용해서 클릭된 탭에 따라 필터링해서 보여주기
현재 클릭된 탭을 눈으로 확인되게 하려고 active 클래스 추가/삭제
이번건 연습용이어서 스타일에 bold랑 오렌지색으로 테스트해보았다 !
 |  |
|---|
 |  |
|---|
느낀점
복기해보면서 느낀 점은
투두에서 가장 어려운 부분이 탭 필터링이었다.
투두가 기초적인 기능을 많이 품은 형식이라
이걸 내가 안 보고도 만들줄 알게 많이 연습해두어야겠다는 생각이 들었다.
기능들의 플로우를 이해하는 게 중요한 포인트인 것 같다.
querySelectorAll() 함수 예시 참고
https://codingeverybody.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-queryselectorall-%ED%95%A8%EC%88%98-%EC%82%AC%EC%9A%A9%EB%B2%95/
