CEOS-Developers · moong23 · Mar 21, 2023 · Mar 21, 2023 · Mar 21, 2023 · Mar 21, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 node_modules
+
+.env
diff --git a/README.md b/README.md
@@ -2,23 +2,29 @@
 
 # 서론
 
-안녕하세요 🙌🏻 17기 프론트엔드 운영진 **유선호**입니다.
 
-다들 1주차 미션 Vanilla Todo 만드시느라 수고 많으셨습니다! 1주차 미션을 통해 여러분들께서 본격적인 React 사용에 앞서 Vanilla JS로 SPA를 만들때의 불편한 점을 느끼셨을 것 이라 생각합니다.
+안녕하세요 🙌🏻   
+17기 프론트엔드 **김문기** 입니다!!   
 
-그리하여 이번 미션은, 1주차 스터의 미션으로 주어진 Todo list 만들기를 **React**로 리팩토링하는 것 입니다!
-기존에 리액트를 잘 아시던 분들께는, 조금 더 효울적인 디자인 패턴에 대해 고민할수 있는 주차가 될 것이고, 리액트를 접해보지 못하신 분들께는 기존의 어플리케이션을 리액트로 포팅하는 과정을 통해 왜 프론트엔드 시장에 리액트가 등장하게 되었고, 리액트에서 사용하는 여러가지 방식들이 왜 바닐라에 비해 효율적인지 꺠닫는 주차가 될 것이라 생각합니다.
+왜인지 모르겠는데 하나의 파일에 작성하는 js가 약간은 그리웠던 프로젝트입니다.
+useMemo나 useCallback등의 함수를 사용해본적이 없어서 이번에 todo를 만들면서 사용해보아야겠다!
+고 했던 1주일전의 저와는 다르게 아무것도 사용하지 ~~않았~~ 못했습니다
 
-비교적 가벼운 미션인 만큼 코드를 짜는 데 있어 여러분의 **창의성**을 충분히 발휘해보시기 바랍니다. 작동하기만 하면 되는 것보다 같은 코드를 짜는 여러가지 방식과 패턴에 대해 많이 고민해보시고, 본인이 작성할 수 있는 가장 창의적인 방법으로 코드를 작성해주셨으면 합니다. 여러분이 미션 수행을 하는 과정에서 한 생각과 고민만큼 스터디에서 더 많은 것을 얻어가실 수 있을 것입니다.
+!!! 사용법 !!!
+구현이 완벽하지 않아서 사용법을 적어놓겠습니다 ㅜㅜㅜㅜ
+- 바탕화면의 아이콘을 한번 누르면 아이콘이 focus됩니다
+- 바탕화면의 아이콘을 더블클릭하면 창이 열리거나 닫힙니다
+- 이후는 지난주와 동일합니다!
+~~모바일에서는 더블클릭이 안된다고 하더라고요... 모바일은 다음부터 기능 구현해보겠습니다😢~~
+데스크탑의 모바일뷰로는 안되는데 핸드폰으로는 잘 되네요 ㅎㅎ
 
-막히는 부분이 있더라도 우선 스스로 공부하고 찾아보면서 미션을 진행하는 방식을 권고드리지만, 미션과 관련하여 운영진의 도움이 필요하시다면 얼마든지 슬랙 Q&A 채널이나 프론트엔드 카톡방에 질문을 남겨 주세요!
+추가 구현하고 싶은 기능들이 많았는데, 체력과 시간 이슈로 저번주 과제를 react로 옮기는 것에 집중하기로했습니다 ㅜㅜ
+- swipe기능
+- drag and drop 기능
+의 기능을 시도해보고 싶은데, 관심 있으신 분들은 함께 얘기해보면 좋을 것 같아요!
 
 # 미션
 
-## 예시
-
-- [리액트 투두](https://react-todo-16th-kongnayeon.vercel.app/)
-
 ## 미션 목표
 
 - VSCode, Prettier를 이용하여 개발환경을 관리합니다.
@@ -34,13 +40,19 @@
 ## Key Questions
 
 - Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
+-> Document Model 인데 Virtual하다. 즉, 가상의 Document Model으로, DOM에 state가 업데이트 될 경우, update되는 state의 갯수 만큼 DOM이 렌더링이 되어야 하는데, Virtual Dom을 사용하면 state가 update되는것을 기다렸다가, DOM이 새로이 생성되기 전, 이전 상태 값과 현재의 update값을 비교하여 '달라진 부분만'을 DOM에 전달하여 한번의 렌더링을 진행할 수 있게 됩니다.
+
 - 미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
+-> 앞으로 자주 쓸 혹은 자주 쓰는 구조의 경우 Component로 따로 제작하여 반복 호출할 수 있음. 각각의 page나 component에서 필요한 js를 나누어 사용함으로서 코드 관리가 용이하다. 정도를 느꼈습니다.
+
 - React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
+-> React에서 상태는 data를 hold하고 있는 객체로, 컴포넌트의 현재 상태를 저장하고 있는 공간정도로 생각할 수 있을 것 같습니다. 상태 관리를 할 때 react에서는 useState에 자동으로 제공되는 get, set함수를 사용하기도 하지만, 프로젝트 폴더 전체에서 효율적으로 상태 관리를 하기 위해 `context-api` `redux` `recoil`등의 외부 라이브러리를 사용하기도 합니다.
 - Styled-Components 사용 후기 (CSS와 비교)
+-> css와 비교할 때 css에서는 태그에 className을 열거하여 해당 className이 있는 경우 다른 스타일을 주는 식으로 해야했지만, styled-component를 사용하면 props를 css로 넘겨 css안에서 props의 값에 대한 렌더링을 할 수 있습니다. 또한, 가상 클래스 선택자 또한 하나의 블락(`)안에 작성함으로서 보다 깔끔한 코드 작성이 가능합니다.
 
 ## 필수 요건
 
-- 1주차 미션의 결과물을 그대로 React로 구현합니다
+- 1주차 미션의 결과물을 **그대로** React로 구현합니다
 - Functional Components를 사용합니다
 - React Hooks만을 사용해 상태를 관리합니다 
 - (이번주는 Redux, MobX, Recoil, SWR등의 외부 상태관리 라이브러리를 사용하지 않아도 미션 수행에 지장이 없습니다.)
@@ -49,21 +61,8 @@
 
 - 기존 Todo-list에 여러분들이 추가하고 싶은 기능과 디자인을 자유롭게 추가해보세요.
 
-## 로컬 실행방법
-
----
-
-`npm start` : 로컬에서 react application을 자동으로 리로드하여 실행시켜줍니다.
-
-
 # 링크 및 참고자료
 
----
+[Vercel 배포 링크](https://react-todo-17th-seven.vercel.app/)   
 
-- [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)
+[진행하면서 적은 내용](https://moong23.notion.site/2-React-todo-bc0cb4a2a2104dcaa6a8986a08601186)