[3주차] 한규진 미션 제출합니다.

README.md

@@ -1,68 +1,40 @@
-# 2주차 미션: React-Todo
+# 3주차 미션: React-Todo: Refactor!💌
 
-# 서론
+안녕하세요 한규진입니다!! 왜 갑자기 문장과 문장 사이에 띄어쓰기가 안될까요..
 
-안녕하세요 🙌🏻 프론트엔드 운영진 **김현재**입니다.
+### 0.
+https://9yujin.github.io/react-todo-15th/
 
-다들 1주차 미션 Vallia Todo를 멋지게 잘 수행해주신 모습이 너무 멋졌습니다! 1주차 미션을 통해 여러분들께서 본격적인 React 사용에 앞서 Vailla JS로 SPA를 만들때의 불편한 점을 느끼셨을 것 이라 생각합니다.
+배포링크는 이전과 같습니다. 2주차 과제에서 폴더 이름의 대소문자를 변경하면서 깃에 반영이 되지 않아 vercel 배포 시 문제가 됐던 경험이 있었습니다. [이 방법](https://crong-dev.tistory.com/41)으로 해결할 수 있습니다. 하지만 세팅해둔게 있다보니 주소는 그대로 쓰도록 하겠습니다..!
 
-그리하여 이번 미션은, 1주차 스터의 미션으로 주어진 Todo list 만들기를 **React**로 리팩토링하는 것 입니다!
-기존에 리액트를 잘 아시던 분들께는, 조금 더 효울적인 디자인 패턴에 대해 고민할수 있는 주차가 될 것이고, 리액트를 접해보지 못하신 분들께는 기존의 어플리케이션을 리액트로 포팅하는 과정을 통해 왜 프론트엔드 시장에 리액트가 등장하게 되었고, 리액트에서 사용하는 여러가지 방식들이 왜 바닐라에 비해 효율적인지 꺠닫는 주차가 될 것이라 생각합니다.
+<br>
 
-비교적 가벼운 미션인 만큼 코드를 짜는 데 있어 여러분의 **창의성**을 충분히 발휘해보시기 바랍니다. 작동하기만 하면 되는 것보다 같은 코드를 짜는 여러가지 방식과 패턴에 대해 많이 고민해보시고, 본인이 작성할 수 있는 가장 창의적인 방법으로 코드를 작성해주셨으면 합니다. 여러분이 미션 수행을 하는 과정에서 한 생각과 고민만큼 스터디에서 더 많은 것을 얻어가실 수 있을 것입니다.
+### 1.
+애를 많이 먹었습니다. 타입스크립트를 아예 처음 접했다보니, 이해하고 썼다기보단 한줄 한줄 구글링해가며 붙여넣은 것에 가깝다고 볼 수 있을 것 같습니다. <br> 타입스크립트 활용에 대해서 많은 코드리뷰 부탁드립니다😻
 
-막히는 부분이 있더라도 우선 스스로 공부하고 찾아보면서 미션을 진행하는 방식을 권고드리지만, 미션과 관련하여 운영진의 도움이 필요하시다면 얼마든지 슬랙 Q&A 채널에 질문을 남겨 주세요!
+커스텀 훅에 관한 부분은 2주차 미션에서 현재 님과 선종 님의 코드를 많이 참고했습니다. 보다 감탄할 정도로 배워갈게 정말 많은 코드였습니다. 정말 감사합니다😁
+<br>
+`useForm`에서 handler 함수를 넘겨받아서 사용하는 점이 인상깊었습니다. 그 부분을 활용하기 위해서 등록된 투두를 수정하는 기능을 추가해보았습니다. 투두를 추가할 때와 동일하게 useForm과 useInput 커스텀 훅을 사용합니다. <br>커스텀훅을 사용하니 재사용이 정말 편해지네요. 많이 배워갑니다. 다만, handler 함수의 타입을 설정할 때 any가 아닌 다른 방법을 찾지 못한 게 아쉽습니다.
 
-# 미션
+<br>
 
-## 예시
-- [리액트 투두](https://react-todo-14th-three.vercel.app/)
+추가로, 과제를 진행하면서 구글링했던 글들을 파일 안에 주석으로 남겨놓았습니다. 참고하시면 좋을 것 같습니다!!
 
-## 미션 목표
+<br>
 
-- VSCode, Prettier를 이용하여 개발환경을 관리합니다.
-- React의 기초를 이해합니다.
-- React를 통한 어플리케이션 상태 관리 방법을 이해합니다.
-- React Hooks에 대한 기초를 이해합니다.
-- Styled-Components를 통한 CSS-in-JS 및 CSS Preprocessor의 사용법을 익힙니다.
+### 2.
+다만, 이런 오류가 종종 나왔습니다.
 
-## 기한
+|정상|오류|
+|:-:|:-:|
+|![정상](https://user-images.githubusercontent.com/55226431/161199617-00227914-f067-438f-900c-2aa0dfa03ec2.gif)|![비정상](https://user-images.githubusercontent.com/55226431/161199663-c4f2e6b6-ad5f-4784-be03-de6d6ff41232.gif)|
 
-- 2022년 3월 25일(금)까지
 
-## Key Questions
+기존의 값을 initialValue로 주어서 그대로 사용할 수 있도록 했는데, 빈 input 박스가 나오는 경우가 꽤 자주 있습니다. 새로고침하면 다시 정상적으로 작동되네요. 왜 이럴까요..?ㅠㅠ
 
-- Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
-- 미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
-- React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
-- Styled-Components 사용 후기 (CSS와 비교)
+<br>
 
-## 필수 요건
+### 3. 
+두번째로는 해결하지 못한 부분은 `Modal.tsx` 부분입니다. <br> 처음에는 todoItem 오른쪽에 threeDot 버튼 하나만 두고 클릭했을 시 모달을 띄워서 삭제와 수정을 선택하도록 디자인을 했었습니다. 이전에 만들어두었던 모달 컴포넌트가 있어서 그대로 타입스크립트로 바꿔서 가져오는 과정에서 막히고 말았습니다. children을 받아와 사용하고, 상위 컴포넌트에서 ref를 받아오기 위해서 forwardRef라는 것도 사용하는데 (사실 정확히 이해한 개념은 아닙니다ㅠ), 이 두가지 이유 때문에 타입스크립트 적용이 뭔가 복잡해진 것 같습니다. 혹시 이 부분도 아시는 분 계시면 가르침을 주시면 정말 감사하겠습니다ㅠㅠ 
 
-- 1주차 미션의 결과물을 그대로 React로 구현합니다
-- Functional Components를 사용합니다
-- React Hooks만을 사용해 상태를 관리합니다 
-- (이번주는 Redux, MobX, Recoil, SWR등의 외부 상태관리 라이브러리를 사용하지 않아도 미션 수행에 지장이 없습니다.)
-
-## 선택 요건
-
-- 기존 Todo-list에 여러분들이 추가하고 싶은 기능을 자유롭게 추가해보세요.
-
-## 로컬 실행방법
-
----
-
-`npm start` : 로컬에서 react application을 자동으로 리로드하여 실행시켜줍니다.
-
-
-# 링크 및 참고자료
-
----
-
-- [create react app (CRA)](https://create-react-app.dev/docs/getting-started/)
-- [리액트 docs 주요 개념 1-12](https://ko.reactjs.org/docs/hello-world.html)
-- [리액트 docs Hook 1-3](https://ko.reactjs.org/docs/hooks-intro.html)
-- [리액트 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)
+그래서 모달창을 만드는 방법 대신, 이전 성우님 과제를 본따 remove 버튼 옆에 edit 버튼을 추가했습니다. 작은 버튼 두개가 한쪽에 붙어있는 것이 깔끔해보이지는 않아서 많이 아쉽네요.