Solo-Project ( Todo-List ) 회고록

• TODO-LIST 만들기
  • 폰트나 색깔은 겉으로 봤을 때 최대한 비슷하게 만들기
  • TODO 리스트에서 체크 박스 클릭시 COMPLETED 로 옮기기
  • Edit Delete Add 버튼 hover 시 색깔 변경
  • 레이아웃 및 백그라운드 색깔 및 위치동일하게 해야됨 (중앙)

완성본

Todo-List 코드 및 완성본 확인

1차 코드 작성 후 추가 및 수정사항

1차 코드

1. 구현

UI/UX

1. 전체 TODO-LIST 의 위 아래의 여백이 사진과 상이함
2. Edit 과 Delete 버튼의 정렬이 결과물 사진과 상이함
3. 버튼들에 hover 했을 때 색깔을 추가해보는 것을 추천함
   • 버튼 들마다 hover 했을 때 색깔이 다르게 구현하기
4. TODO-LIST 의 항목이 두 줄이 되지 않게끔 처리하고 ...처리하기
5. 한 TODO-LIST 항목안에 있는 체크박스와 텍스트를 수직 정렬 하기
6. TODO-LIST 전체 레이아웃 자체를 수직 정렬하기
7. “TODO LIST” 띄어쓰기 하기
8. edit 을 눌렀을 때 기존에 있던 텍스트가 input에 유지되게끔 하기
9. 완전 아래의 디자인과 동일하게 만들기 (복붙 금지)
   1. 색깔, input 등 완전히 같아야 함.
   2. https://codepen.io/BeeCodes/pen/MWYEwov

2. 기능

1. 키보드에서 엔터를 입력했을 때 Add 를 눌렀을 때 와 같이 Todo-list 에 항목이 추가되어야 한다. (추가)
2. input에 텍스트를 입력해야지만 Add 버튼이 활성되어야 한다. (validation)
   1. add 버튼에 대한 hover 는 구현할 필요는 없고 input 에 텍스트를 무언가 입력하면 바로 add 의 버튼이 색깔이 변경됨
   2. 텍스트가 없는 상태에서 add 버튼이 disabled 되어야하고 텍스트가 있으면 disabled 가 풀린다.
   3. input 에 공백만 있을 때도 disabled 상태를 유지해야 한다.
3. 컴플리트 탭에 있는 체크박스를 풀었을 때 다시 TODO 로 올라간다.
   1. 순서는 상관없음.

---

코드 베이스

HTML, CSS

1. 파일의 확장자를 마음대로 대문자로 만들지 마세요.
2. HTML 의 DOM 레벨마다의 탭 간격을 제대로 넣어주세요.
3. 기본적으로 DOM이 한줄에 여러개 있으면 가독성이 떨어지니 줄 바꿈을 해주세요.
4. DOM을 좀 더 영역에 맞게 나눌 필요가 있습니다.
5. CSS 의 selector 나 중괄호 양옆에 띄어쓰기를 조금 넣어주세요.
6. tab-size 를 2개의 스페이스 바꿔보세요.
7. font 같은 프로퍼티는 font 관련 CSS 프로퍼티를 한번에 적용할 수 있는 프로퍼티 입니다.
   1. size 만 조절할거면 font-size 프로퍼티를 쓰는게 가독성이 좋습니다.
8. 기본적으로 id 나 class 같은 경우는 camelCase 가 아닌 kebab-case 를 사용합니다.
   1. todoList (camelCase)
   2. todo-list (kebab-case)
9. 기본적으로 id 는 엘리먼트 중에서 단 하나만 존재해야 한다. 겹치지 않아야 함. 겹치는 경우는 class 를 사용하는게 좋다.
10. todo-list 항목에 대한 hr 은 굳이 넣을 필요가 없다. border 로 넣으면 된다.
11. todo-list 를 묶는 태그는 li 를 쓰는게 좋다. list 라는 의미를 담고 있기 때문이다.
12. 0px 같은 경우는 굳이 px를 붙힐 필요가 없다.
13. CSS Selector 는 의외로 상세하게 선택가능하다. type 같은 엘리먼트의 프로퍼티를 사용하여 선택할 수 있다. 굳이 class 를 추가해서 처리할 필요가 없다.
14. HTML 에서 태그를 사용할 때는 스타일보다는 용도에 맞는 태그를 사용하는 것이 중요하다.
    1. button 경우는 기본 디자인이 있지만 button 자체에 의미가 부여되어 있기 때문에 웹 브라우저가 이것이 버튼으로 사용된다는 사실을 알기 때문에 용도에 맞춰서 사용하는게 중요하다.
    2. a 태그는 페이지를 이동할 때 사용하는 것이고 버튼은 눌렀을 때 이벤트를 실행하는 용도이다.

JavaScript

1. add 라는 전역변수가 두 번 이상 사용이 되는가?
2. 파라미터가 사용되지않는 다면 굳이 적을 필요가 없다.
3. 함수를 인자로 넘길 때, 굳이 함수를 더 래핑해서 넣을 필요는 없다.
4. 함수 및 변수명의 camelCase를 지켜주세요.

소감

처음으로 HTML, CSS, JavaScript를 모두 활용해 쓸 만한 것을 만든 것 같다.
많이 신경 쓴 부분은 변수와 함수명을 짓는 데 꽤 고민했다.
그럼에도 뭔가 가독성이 좋지 않은 것 같아 다른 사람들의 코드를 보면 네이밍도 배울 필요가 있다고 생각이 들었다.