[2주차] 권오진 과제 제출합니다.

[KOJ50]

느낌점: 저번주 과제와는 다르게 React와 Tailwind CSS는 처음 다뤄보기 때문에 시작부터 어려웠습니다. HTML / CSS / JS는 각각 파일을 구성하고 시작하는 것에 비해 React는 CLI를 통해 Vite와 결합된 파일을 만들어야 했습니다. 그리고 내부의 파일 구성 또한, 이전과는 다른 형태인 점에서도 난관을 겪었습니다. 일주일이 생각보다 짧아 React와 Tailwind CSS를 공부하기에 시간이 부족하여 다크 모드 등 일부 기능들을 이전 과제와 100% 동일하게 구현하지 못한 점이 아쉬웠습니다.
이전 과제 기능 중 input를 한국어로 받을 때 중복으로 입력되었던 부분은 isComposing을 이용하여 입력 중 일 때는 입력을 받지 않고, 입력이 끝났을 때 등록되도록 리팩토링 했으며, 날짜 변경에서 일부 코드가 동일한 부분은 인자를 받도록 수정하였습니다.
또한, 지난 과제에서 Vercel를 통한 배포가 되지 않아 Github에서 배포를 진행하였습니다. 그러나 Github를 통해서 이후 대규모 과제에서 배포가 어려울 것이라는 조언을 통해 Vercel를 통해 배포를 진행하려고 했습니다. 배포 처음에는 Branch가 master로 설정되어 변경해도 이동하지 않아 여러 방법을 시도했습니다. 실제 파일 변경이 없더라도 새로운 커밋을 강제로 생성하여 연결된 Vercel 프로젝트의 자동배포 트리거로 사용하기 위해 새로운 커밋을 집어넣은 것이 효과가 있었으며, 정상적으로 배포를 마무리하였습니다.

초기 구성:

1. 현재 날짜를 나타내고 버튼에 따라 날짜 변경 기능
2. 입력을 하고 등록 버튼을 통해 리스트 작성
3. 날짜별로 등록된 리스트 노출
4. Tailwind CSS를 통해 디자인

---

배포링크

---

Review Questions
1) Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
Virtual DOM : UI 효율성을 극대화하기 위해 DOM의 가벼운 복사본을 메모리 상에서 유지 관리하는 기술

• 실제 HTML DOM의 복사본이며 복사본은 JS 객체 형태로 메모리에 저장
• 브라우저에 있는 Document에 직접 접근할 수 없어 직접 화면을 수정하는게 불가능함
  작동 방식 :

1. Virtual DOM 생성 : React 컴포넌트가 렌더링되면 가상 DOM트리 생성
2. 변경사항 감지 : 상태 변경 시, 새로운 가상 DOM을 생성하고 이전 가상 DOM과 비교(= diffing)
3. 최소한의 업데이트 계산 : 비교 결과를 바탕으로 실제 DOM에서 변경이 필요한 부분만 추적하고 업데이트(= patching)
4. 실제 DOM 업데이트 : 변경된 부분만 실제 DOM에 적용하여 화면을 재구성

2) React.memo(), useMemo(), useCallback() 함수로 진행할 수 있는 리액트 렌더링 최적화에 대해 설명해주세요. 다른 방식이 있다면 이에 대한 소개도 좋습니다.
React.memo()

• 컴포넌트가 React.memo()로 래핑 될 때, React는 컴포넌트를 렌더링하고 결과를 Memoizing함. 그 다음 렌더링이 일어날 때 props가 같다면 Memoizing된 내용을 재사용함.
• React.memo() 는 함수형 컴퍼넌트에 적용되어 같은 props에 같은 렌더링 결과를 제공함. 따라서 같은 props로 자주 렌더링 될 때 해당 함수로 래핑하는 것이 좋음.

useMemo()

• React에서 컴포넌트의 성능을 최적화하는데 사용되는 Hook
• 함수의 결과를 메모이제이션하여 비용이 많이 드는 계산을 최적화
• useMemo는 함수의 결과 값을 메모함
• 렌더링 과정에서 마지막 렌더링에서 저장된 값을 반환하거나( 종속성이 변경되지 않은 경우), calculateValue를 다시 호출하고 반환된 값을 저장

const memo = useMemo(calculateValue, dependancies);
// calculateValue = 캐시하려는 값을 계산하는 함수
// dependancies = calculateValue에서 참조된 모든 값의 목록

useCallback()

• 콜백 함수를 메모이제이션하고 재사용할 수 있도록 하는 Hook
• 주로 부모 컴포넌트부터 자식 컴포넌트로 전달되는 콜백 함수를 최적화 함
• 이벤트 핸들러 함수가 자주 재생성되는 경우 : useCallback을 사용하면 함수가 처음 생성될 때 한 번만 생성, 나중에는 동일한 함수 인스턴스를 재사용
• 하위 컴포넌트에 props로 전달되는 함수가 자주 재생성되는 경우 : props로 함수를 전달할 때 함수를 재사용하여 하위 컴포넌트의 재랜더링 방지

3) React 컴포넌트 생명주기에 대해서 설명해주세요.
생명주기 : 컴포넌트가 생성되고 사용되고 소멸될 때까지 일련의 과정
라이프 사이클 이벤트 : 생명주기 안에서 특정 시점에 자동으로 호출되는 메서드
라이프 사이클 이벤트 분류

• 마운팅 이벤트 : React element를 DOM 노드에 추가할 때 발생, 한번만 실행
• 갱신 이벤트 : 속성이나 상태가 변경되어 React element를 업데이트할 때 발생, 여러 번 실행
• 언마운팅 이벤트 : React element를 DOM에서 제거할 때 발생, 한번만 실행

[minseo0614]

2주차 과제 고생 많으셨습니다!
코드를 전체적으로 깔끔하게 작성해주셔서 보기 편했고 저도 많이 배울 수 있었습니다.

[minseo0614]

dateKey를 기준으로 현재 날짜의 todo만 꺼내 쓰는 흐름이 직관적이라 전체 로직을 이해하기 쉬웠습니다. 날짜별 상태 구조를 깔끔하게 잡으신 것 같아요!

[minseo0614]

남은 할 일 수를 바로 보여주는 점이 좋았습니다! 여기에 완료된 개수까지 같이 보여주면 사용자가 현재 상태를 더 직관적으로 파악할 수 있을 것 같아요 :)

[minseo0614]

isComposing까지 체크해주신 점이 좋았습니다! 한글 입력 환경까지 꼼꼼하게 고려하신 것 같아요.

[Tutankhannun]

이번 주차 과제도 수고하셨습니다~ 컴포넌트 단위도 적당하고 리액트와 tailwind의 장점을 잘 활용하신 것 같습니다. 리액트 프로젝트 환경 셋팅에 더 익숙해지면 좋아지실 것 같아요. 다음 과제에서는 파비콘과 prettier 설정도 충분히 해보실 수 있을 것 같습니다!! 앞으로도 이렇게 성실한 과제로 잘부탁드립니다~

[Tutankhannun]

HTML의 lang 속성을 en으로 하였을 때 브라우저에서 의도치 않은 자동 번역을 할 수가 있습니다.
이를 원치 않는다면 ko 속성을 사용하는 것이 좋습니다.

[Tutankhannun]

사용하지 않는 레거시 CSS들은 정리해주시는 것이 좋습니다. 이후의 유지보수 비용이나 혼란을 늘릴 수 있습니다.

[Tutankhannun]

전역 CSS가 Tailwind CSS 스타일링과 겹쳐 있습니다. 정확히는 Tailwind로 스타일링을 해도 전역 CSS가 한번 덮는 상황입니다. 그래서 다크모드와 관련된 설정이나 마진, 패딩 등이 본래 의도와 다르게 적용될 수 있습니다. 사용하지 않는 파일이라면 삭제하여도 되고 설계 의도에 맞게 수정해주시면 좋을 것 같아요.

[Tutankhannun]

체크박스와 텍스트가 상위 div에서 flex로 묶여 같은 공간을 나눠 가지는데 텍스트가 두 줄 이상 넘어갈 때 체크박스가 줄어듭니다. 기본적으로 flex-shrink: 1이기 때문인데 체크박스 스타일에 shrink-0를 추가해주시면 됩니다.

[Tutankhannun]

공백이 없는 문자열이나 숫자가 올 때 구역을 텍스트가 구역을 벗어납니다. min-w-0으로 flex 래퍼에 최대 가로 길이를 설정해주고 wrap-anywhere와 같은 overflow-wrap 관련 property를 사용해보시면 좋을 것 같습니다.

overflow-wrap