[2주차] 송은수 미션 제출합니다.

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

README.md

@@ -1,68 +1,50 @@
 # 2주차 미션: React-Todo
 
-# 서론
+## 기능구현
 
-안녕하세요 🙌🏻 19기 프론트엔드 운영진 **변지혜**입니다.
+- todo 추가 및 삭제
+- 유효성 체크, 중복 체크
+- todo 완료 여부에 따른 이동
+- 날짜 표시
+- 갯수체크
+- 반응형 구현
 
-다들 1주차 미션 Vanilla Todo 만드시느라 수고 많으셨습니다! 1주차 미션을 통해 여러분들께서 본격적인 React 사용에 앞서 Vanilla JS로 SPA를 만들때의 불편한 점을 느끼셨을 것 이라 생각합니다.
+## 리뷰
 
-그리하여 이번 미션은, 1주차 스터의 미션으로 주어진 Todo list 만들기를 **React**로 리팩토링하는 것 입니다!
-기존에 리액트를 잘 아시던 분들께는, 조금 더 효울적인 디자인 패턴에 대해 고민할수 있는 주차가 될 것이고, 리액트를 제대로 접해보지 못하신 분들께는 기존의 어플리케이션을 리액트로 포팅하는 과정을 통해 왜 프론트엔드 시장에 리액트가 등장하게 되었고, 리액트에서 사용하는 여러가지 방식들이 왜 바닐라에 비해 효율적인지 꺠닫는 주차가 될 것이라 생각합니다.
+리액트의 hooks, 그리고 상태를 사용해 변경되면 자동으로 리렌더링을 해주는 방식 덕분에 JS만을 사용했을때보다 직접 신경써줘야 할 부분이 적었습니다.
 
-비교적 가벼운 미션인 만큼 코드를 짜는 데 있어 여러분의 **창의성**을 충분히 발휘해보시기 바랍니다. _❕작동하기만 하면 되는 것보다 같은 코드를 짜는 여러가지 방식과 패턴에 대해 많이 고민해보시고, 본인이 작성할 수 있는 가장 창의적인 방법으로 코드를 작성해주셨으면 합니다.❕_ 여러분이 미션 수행을 하는 과정에서 한 생각과 고민만큼 스터디에서 더 많은 것을 얻어가실 수 있을 거라 기대합니다!
+선연형 프로그래밍 패러다임을 지키기 위해 각 기능별로 컴포넌트화 시키다보니 각 컴포넌트에서 todoList들을 따로 접근해야 했고, 하나의 컴포넌트에서 변경이 이루어지면 다른 컴포넌트들도 변경이 일어난 걸 알아야 하니 이를 어떻게 처리할 지 고민이 되었습니다.
 
-막히는 부분이 있더라도 우선 스스로 공부하고 찾아보면서 미션을 진행하는 방식을 권고드리지만, 미션과 관련하여 운영진의 도움이 필요하시다면 얼마든지 슬랙 Q&A 채널이나 프론트엔드 카톡방에 질문을 남겨 주세요!
+일반적으로 props 전달방식, 혹은 전역상태관리로 해결하겠지만 이번에는 Localstorage를 사용하기 떄문에 이것만으로 해결할 수 있지 않을까 싶었습니다. 하지만 직접해보니 localstorage는 리액트의 상태가 아니기 떄문에 변경이 되어도 리렌더링이 되지 않았고 새로고침을 해야 정상적으로 변경사항이 반영됐습니다.
 
-# 미션
-
-## 예시
-
-- [리액트 투두 예시](https://react-todo-18th-lemon.vercel.app/)
-
-## 미션 목표
-
-- VSCode, Prettier를 이용하여 개발환경을 관리합니다.
-- React의 기초를 이해합니다.
-- React를 통한 어플리케이션 상태 관리 방법을 이해합니다.
-- React Hooks에 대한 기초를 이해합니다.
-- Styled-Components를 통한 CSS-in-JS 및 CSS Preprocessor의 사용법을 익힙니다.
-
-## 기한
-
-- 2024년 3월 22일 금요일
+localstorage에 있는 값이 변경될때마다 모든 컴포넌트에서 localstorage의 값을 다시 받아오는 과정은 굉장히 비효율적인 거 같아 결국 처음에 생각했던 방법을 사용하기로 했습니다. 프로젝트가 그렇게 크지 않기 때문에 전역상태관리 없이 props drilling으로도 해결이 가능할 거 같아 props로 전달하는 방식을 선택했습니다. 구현해보니 생각보다 drilling이 많이 생겨 전역상태관리로 해결했어도 좋았겠다 싶었습니다.
 
 ## Key Questions
 
 - Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
-- 미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
-- React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
-- Styled-Components 사용 후기 (CSS와 비교)
+  리액트에서 사용하는 가상 돔으로, 리액트 변경점이 발생하면 가상 돔이 변경되고, 실제 DOM과 차이점을 확인 후 해당하는 부분만 변경이 이루어집니다. 이를 통해 DOM의 변경을 최소화 시킬 수 있습니다.
 
-## 필수 요건
+  리액트는 마운트가 된 이후 변경사항이 발생하면 리렌더링이 발생합니다. js에서 속성변경 등으로 이루어지는 리렌더링 역시 수정되는 부분만 수정되지만, 이는 개발자가 직접 컨트롤 해줘야 합니다. 하지만 react는 선언적 UI를 사용하기 때문에 상태가 변하면 자동으로 UI를 필요한 부분만 업데이트 해줍니다.
 
-- 1주차 미션의 결과물을 그대로 React로 구현합니다. (‼️ todo / done 개수 잊지 마세요 ‼️)
-- Functional Components를 사용합니다.
-- React Hooks만을 사용해 상태를 관리합니다.
-- (이번주는 Redux, MobX, Recoil, SWR등의 외부 상태관리 라이브러리를 사용하지 않아도 미션 수행에 지장이 없습니다.)
+- 미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
+  html 태그들 대신 컴포넌트들을 볼 수 있기 때문에 해당 코드(컴포넌트)가 무엇을 하려고 하는 지 알기 쉬웠습니다. 코딩하는 과정에서도 어느 부분을 내가 짜고 있는지, 어디서 에러가 났는지 찾지 편했습니다.
 
-## 선택 요건
+  상태라는 개념을 통해 변경사항이 자동으로 변경되고, hooks들을 통해 이미 만들어진 함수들을 사용해 개발자의 부담을 덜어줬습니다.
 
-- 기존 Todo-list에 여러분들이 추가하고 싶은 기능과 디자인을 자유롭게 추가해보세요.
+- React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
+  컴포넌트의 현재 상태를 의미합니다. `useState`를 사용해 상태변수를 생성하고, 관리할 수 있습니다.
 
-## 로컬 실행방법
+  리액트는 변수를 관리하지 않습니다. `useState`hook을 사용해 상태를 선언하면 이를 관리하며 변경사항이 생기면 이를 반영해 리렌더링을 시킵니다.
 
----
+  주의할 점은 `useState`는 비동기처리 된다는 것입니다. set함수를 호출하면 이는 스케쥴링되는데 스케쥴링 되어있는 상태에서 또 set함수를 호출하면 변경이 이루어지지 않은 값을 사용합니다. 따라서 리렌더링 되지 않았을 때 값에 접근하는 것을 주의해야 하고, 그럼에도 set함수를 호출해야 한다면
 
-`npm start` : 로컬에서 react application을 자동으로 리로드하여 실행시켜줍니다.
+  ```js
+  set함수((prev)=>{...})
+  ```
 
-# 링크 및 참고자료
+  방식을 활용해 이전 값에 올바르게 접근할 수 있게 해줘야합니다.
 
----
+- Styled-Components 사용 후기 (CSS와 비교)
+  CSS를 JS파일 안에서 컨트롤 할 수 있기 때문에 수정하고 싶을때 CSS-IN-CSS 방식을 사용할 때보다 빠르게 찾아 수정할 수 있었습니다. 또한 props를 통해 동적인 스타일링을 할 수 있는 것도 장점입니다.
 
-- [create react app (CRA)](https://create-react-app.dev/docs/getting-started/)
-- [리액트 docs 주요 개념 1-12](https://react.dev/learn)
-- [리액트 docs Hook 1-3](https://react.dev/reference/react)
-- [리액트 useEffect 완벽 가이드](https://overreacted.io/ko/a-complete-guide-to-useeffect/)
-- [컴포넌트 네이밍을 위한 자바스크립트 네이밍 컨벤션](https://velog.io/@cada/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%ED%83%80%EC%9D%BC-%EA%B0%80%EC%9D%B4%EB%93%9C-%EB%84%A4%EC%9D%B4%EB%B0%8D-%EC%BB%A8%EB%B2%A4%EC%85%98-%ED%8E%B8)
-- [useState, useEffect hooks](https://velog.io/@velopert/react-hooks#1-usestate)
-- [styled-component](https://styled-components.com/docs/basics#getting-started)
+  다만 스타일드 컴포넌트와 일반적인 컴포넌트를 구분할 수 없어서 이 부분이 불편했습니다.

package.json

@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {