pje1740/js-todo-list-step1

Hi there 👋

I am a web FrontEnd developer working for Naver.

🌱 I’m currently working with:

• JavaScript (TypeScript, Node JS)
• React / Next
• Web development related in general 💻

👨‍👩‍👦‍👦 I was a member of:

• 🤟 BoostCamp 2020 (Korea)
• 🤟 42Seoul (Seoul)

📫 How to reach me:

[email protected]

js-todo-list-step1's Issues

[FEAT] todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기

🗣 설명

todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기

✅ 체크리스트

• 버튼에 클릭에 따라 현재 데이터 필터링
• 필터된 내용으로 리렌더링

[FEAT] todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기

🗣 설명

todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기

✅ 체크리스트

• 카운트 컴포넌트 생성
• 업데이트 및 init 로직 작성

[FEAT] todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제

🗣 설명

todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제

✅ 체크리스트

• 삭제 이벤트 ul에 부착해서 위임

[FEAT] todo list에 todoItem을 키보드로 입력하여 추가하기

🗣 설명

todo list에 todoItem을 키보드로 입력하여 추가하기

✅ 체크리스트

• todoItem 모듈 제작
• 입력창 엔터 이벤트 추가
• todo list에 리스트 아이템 추가 메소드 작성

[REFACTOR] 옵저버 패턴 적용하기

🗣 설명

옵저버 패턴 적용하기

✅ 체크리스트

• 옵저버 클래스 생성
• 서브젝트 클래스 생성
• todos를 관리하는 서브젝트 생성
• todolist 옵저버로 변환

[FEAT] 리팩토링

🗣 설명

리팩토링

✅ 체크리스트

• index에서 컴포넌트 init하기

[FEAT] todo list를 더블클릭했을 때 input 모드로 변경

🗣 설명

todo list를 더블클릭했을 때 input 모드로 변경. (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀

✅ 체크리스트

• 더블클릭 이벤트로 수정창 display 및 view display 끄기
• 엔터로 수정 적용
• esc키 입력 시 수정이 반영되지 않고 view display 켜기

[FEAT] localStorage에 데이터 CRUD 반영

🗣 설명

localStorage에 데이터를 저장하여, TodoItem의 CRUD를 반영하기. 따라서 새로고침하여도 저장된 데이터를 확인할 수 있어야 함

✅ 체크리스트

• 로컬 스토리지 생성
• 할일 추가 구현
• 할일 삭제 구현
• 할일 수정 구현 (내용 변화, 상태 변화)

[FEAT] import entry script in index.html

[ENV] 환경설정

🗣 설명

프로젝트의 환경설정 관련 이슈입니다.

✅ 체크리스트

• npm
• gitignore
• eslint
• prettier

[FEAT] todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기

🗣 설명

todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기

✅ 체크리스트

• ul#todo-list에 있는 li 개수 카운트해서 출력하기

[FEAT] todo list의 체크박스를 클릭하여 complete 상태로 변경

🗣 설명

todo list의 체크박스를 클릭하여 complete 상태로 변경.
(li tag 에 completed class 추가, input 태그에 checked 속성 추가)

✅ 체크리스트

• 리스트의 부모에 클릭 이벤트 부착 (클래스 추가)