[0, 1주차/카사] 워크북 제출합니다.

[jjeunv]

✅ 워크북 체크리스트

• 모든 핵심 키워드 정리를 마쳤나요?
• 핵심 키워드에 대해 완벽히 이해하셨나요?
• 이론 학습 이후 직접 실습을 해보는 시간을 가졌나요?
• 미션을 수행하셨나요?
• 미션을 기록하셨나요?

✅ 컨벤션 체크리스트

• 디렉토리 구조 컨벤션을 잘 지켰나요?
• pr 제목을 컨벤션에 맞게 작성하였나요?
• pr에 해당되는 이슈를 연결하였나요?(중요)
• 적절한 라벨을 설정하였나요?
• 파트장에게 code review를 요청하기 위해 reviewer를 등록하였나요?
• 닉네임/main 브랜치의 최신 상태를 반영하고 있는지 확인했나요?(매우 중요!)

📌 주안점

[haewonwon]

innerHTML은 1) 보안 2) 성능 3) 유지보수 측면에서 좋지 않습니다. DOM을 직접 생성하는 메서드를 사용하는 편이 좋을 것 같습니다. 물론 1) 완전 신뢰할 수 있는 데이터(고정된 텍스트) 2) 성능이 중요하지 않음 3) 간단한 렌더링일 경우, 사용해도 괜찮습니다.

[jjeunv]

innerHTML 대신 createElement + textContent 사용하는 방향으로 수정해보았습니다!
말씀해주신 것처럼 지금은 단순한 구조라 동작에는 문제 없지만,
보안이랑 유지보수 측면까지 생각하면 DOM을 직접 생성하는 방식이 더 적절한 것 같습니다.
리뷰 감사합니다!

  const span = document.createElement("span");
  span.className = "section__text";
  span.textContent = text;

  const buttonWrapper = document.createElement("div");
  buttonWrapper.className = "section__buttons";

  const completeBtn = document.createElement("button");
  completeBtn.className = "section__btn--complete";
  completeBtn.textContent = "완료";

[qkrdmsthff]

현재 as 를 사용하여 타입들을 단언하고 있습니다! 앞선 엠버의 코드에서 TS 의 타입 안전성을 완벽하게 적용한 코드를 한 번 참고해 보면 좋을 것 같아요!

해당 방식으로 개발하면, HTML 구조가 변경되어 id 가 바뀌거나, 스크립트를 로드할 시점에, 해당 요소가 없다면 런타임에서 Cannot read property of null 에러가 발생할 수 있습니다!

as 보다는 as HTMLInputElement | null 을 허용하고, 실제 사용 시점에 옵셔널 체이닝(.?) 이나 조건문으로 체크해 보는 방식을 고민해 보면 좋을 것 같아요!

<옵셔널 체이닝에 대한 추가적인 개념>
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

[qkrdmsthff]

해당 부분에서 onClick 이벤트를 사용하는 것보다, addEventListener 를 사용하는 것을 권장합니다!

onClick 의 경우, 하나의 이벤트만을 등록할 수 있고, 기존 값을 새롭게 덮어쓴다는 문제점이 있습니다!
따라서, 향후의 유지보수를 위해서 이벤트 리스너 개념을 이용해서 해당 코드를 개선해 보는 게 좋을 것 같네요 ㅎㅎ

[qkrdmsthff]

현재 코드는 데이터를 RAM 에만 저장하고 있기 때문에, 새로고침 시 입력했던 데이터들이 모두 날아갈 수 있습니다!
DOM 요소를 직접 만들고 옮기는 UI 중심의 코드인데요! 입력 받은 텍스트 데이터를 저장해서 새로고침 시에도 유지되도록 하는 부분을 고민해 보면 좋을 것 같아요!

1. 로컬 스토리지 사용
   아직 배우진 않았지만, 데이터 배열을 별도로 관리하여 todos 라는 배열에 할 일을 담고, 새로운 이벤트가 발생할 때마다 localStorage.setItem()을 이용해서 데이터를 저장하는 방식을 추가적으로 적용해 보면 좋을 것 같아요!

그 과정에서 초기화 로직도 잊지 않고 추가하면 좋습니다!
페이지가 새로고침 후 다시 로드될 때 로컬 스토리지에 담긴 정보를 잊지 않고 다시 그려주도록 하는 초기화 함수가 필요합니다! JSON.parse() 를 사용해 볼 수도 있겠네요~

2. 로컬 스토리지 + 데이터 구조 설계
   로컬 스토리지의 경우 단순 텍스트를 저장하는 것보다 객체 형태로 저장하는 것이 유리합니다!
   할 일에 id, text, isDone 상태를 부여한 객체 형태로 저장, 그러면 새로고침 후에도 이 아이템이 '할 일' 목록에 있었는지 '완료' 목록에 있었는지 정확히 인지할 수 있습니다!

아직 배우지 않은 개념이지만, 더 알려드리고자 첨언한 부분이니 확인만 하고 넘어가셔도 괜찮습니다~
[로컬 스토리지] - https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

[qkrdmsthff]

LGTM ~~ 카사 수고하셨어요!!
이번주 너무 수고하셨고 다음주도 화이팅입니다!
merge 해주시면 됩니당