[2주차] 안혜연 미션 제출합니다.

.prettierrc

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

README.md

@@ -1,23 +1,40 @@
 # 2주차 미션: React-Todo
 
-# 서론
+# 미션
 
-안녕하세요 🙌🏻 19기 프론트엔드 운영진 **변지혜**입니다.
+## 배포 링크
 
-다들 1주차 미션 Vanilla Todo 만드시느라 수고 많으셨습니다! 1주차 미션을 통해 여러분들께서 본격적인 React 사용에 앞서 Vanilla JS로 SPA를 만들때의 불편한 점을 느끼셨을 것 이라 생각합니다.
+- [배포 링크](https://react-todo-19th.vercel.app/)
 
-그리하여 이번 미션은, 1주차 스터의 미션으로 주어진 Todo list 만들기를 **React**로 리팩토링하는 것 입니다!
-기존에 리액트를 잘 아시던 분들께는, 조금 더 효울적인 디자인 패턴에 대해 고민할수 있는 주차가 될 것이고, 리액트를 제대로 접해보지 못하신 분들께는 기존의 어플리케이션을 리액트로 포팅하는 과정을 통해 왜 프론트엔드 시장에 리액트가 등장하게 되었고, 리액트에서 사용하는 여러가지 방식들이 왜 바닐라에 비해 효율적인지 꺠닫는 주차가 될 것이라 생각합니다.
+## 기능 구현
 
-비교적 가벼운 미션인 만큼 코드를 짜는 데 있어 여러분의 **창의성**을 충분히 발휘해보시기 바랍니다. _❕작동하기만 하면 되는 것보다 같은 코드를 짜는 여러가지 방식과 패턴에 대해 많이 고민해보시고, 본인이 작성할 수 있는 가장 창의적인 방법으로 코드를 작성해주셨으면 합니다.❕_ 여러분이 미션 수행을 하는 과정에서 한 생각과 고민만큼 스터디에서 더 많은 것을 얻어가실 수 있을 거라 기대합니다!
+기존 기능
 
-막히는 부분이 있더라도 우선 스스로 공부하고 찾아보면서 미션을 진행하는 방식을 권고드리지만, 미션과 관련하여 운영진의 도움이 필요하시다면 얼마든지 슬랙 Q&A 채널이나 프론트엔드 카톡방에 질문을 남겨 주세요!
+- 입력창을 통해 할 일 추가
+- 삭제 버튼 클릭으로 할 일 삭제
+- 체크 버튼 클릭으로 완료 표시, 밑줄 그어 완료 표시
+- 날짜 출력
+- 총 할 일 개수와 완료한 일 개수 출력
+- 로컬 스토리지 저장
 
-# 미션
+추가된 기능
+
+- 반응형 구현
+- 버튼 컨테이너 애니메이션 효과
+- React.memo를 이용한 렌더링 최적화
 
-## 예시
+## 느낀 점
 
-- [리액트 투두 예시](https://react-todo-18th-lemon.vercel.app/)
+안녕하세요, 19기 프론트 안혜연입니다!
+
+1주차 과제에서 추가로 몇몇 기능을 넣으려고 했으나,, 일단 필수 기능 위주로 구현했습니다.
+추가로 스타일을 반응형으로 지정해주려고 했습니다. 평소 자주 쓰는 px 단위가 익숙해서 반응형 구현에 있어 어렵게 느껴졌습니다..
+다른 분들은 어떤 단위 위주로 사용하는지,, 피그마로 디자인을 볼 때 px 단위로 나타나는데 직접 다른 단위로 계산해서 사용하는지,,
+반응형 구현은 미디어 쿼리로 지정해주시는지 궁금합니다.!!
+그리고 Tailwind CSS를 사용하면 반응형 디자인 구현이 훨씬 편리하다는 것 같아 Tailwind CSS도 공부해서 사용해보고 싶습니다.
+
+할 일을 입력할 때마다 할 일 목록들이 불필요하게 렌더링되어 React.memo를 사용해 이를 방지하였습니다.
+또 할 일 텍스트를 선택하면 버튼 컨테이너가 나오게끔 슬라이드 효과를 주고 싶어 애니메이션 효과를 지정해주었습니다.
 
 ## 미션 목표
 
@@ -27,33 +44,20 @@
 - React Hooks에 대한 기초를 이해합니다.
 - Styled-Components를 통한 CSS-in-JS 및 CSS Preprocessor의 사용법을 익힙니다.
 
-## 기한
-
-- 2024년 3월 22일 금요일
-
 ## Key Questions
 
-- Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
-- 미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
-- React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
-- Styled-Components 사용 후기 (CSS와 비교)
-
-## 필수 요건
-
-- 1주차 미션의 결과물을 그대로 React로 구현합니다. (‼️ todo / done 개수 잊지 마세요 ‼️)
-- Functional Components를 사용합니다.
-- React Hooks만을 사용해 상태를 관리합니다.
-- (이번주는 Redux, MobX, Recoil, SWR등의 외부 상태관리 라이브러리를 사용하지 않아도 미션 수행에 지장이 없습니다.)
+1. Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
+   Virtual DOM은 웹 개발에서 사용되는 개념으로, 실제 DOM(Document Object Model)의 가벼운 사본입니다. Virtual DOM은 메모리 내에 존재하며, 실제 DOM과 상호작용하는 대신에 애플리케이션의 UI 상태를 효율적으로 업데이트하는 데 사용됩니다. 애플리케이션의 상태가 변경될 때 이전 Virtual DOM에서 변경된 부분만 업데이트하여 실제 DOM 업데이트가 최소화되어 애플리케이션의 성능이 향상됩니다.
 
-## 선택 요건
+2. 미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
+   UI를 독립적인 컴포넌트로 나누어 개발할 수 있다는 것이 장점으로 느껴졌습니다. 컴포넌트들은 재사용이 가능하고, 컴포넌트에서 자신이 개별적으로 상태 관리를 할 수 있어 복잡한 UI도 쉽게 관리하고 유지할 수 있습니다.
 
-- 기존 Todo-list에 여러분들이 추가하고 싶은 기능과 디자인을 자유롭게 추가해보세요.
-
-## 로컬 실행방법
-
----
+3. React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
+   상태란 컴포넌트의 상태를 저장하고 관리하는 데이터로 컴포넌트가 동적으로 데이터를 처리하고 UI를 적절히 업데이트할 수 있게 해줍니다.
+   클래스 컴포넌트 내에서는 this.state를 사용하여 상태를 초기화하고, this.setState 메소드를 사용해 상태를 업데이트합니다. React 16.8부터 도입된 Hooks는 class없이 state를 사용할 수 있게 하여 함수 컴포넌트에서도 상태 관리를 가능하게 합니다.
 
-`npm start` : 로컬에서 react application을 자동으로 리로드하여 실행시켜줍니다.
+4. Styled-Components 사용 후기 (CSS와 비교)
+   css 파일로 스타일을 지정하는 것보다 Styled-Components가 더 편리하게 느껴졌습니다. 별도의 css 파일 없이 하나의 js 파일 안에서 컴포넌트 단위별로 스타일을 지정해줄 수 있다는 점에서 스타일을 관리하기 더 쉬웠습니다. 또한 props나 상태에 따라 해당 스타일을 쉽게 처리할 수 있어 편리했습니다.
 
 # 링크 및 참고자료
 

package.json

@@ -8,7 +8,10 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.8",
+    "styled-reset": "^4.5.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

public/index.html

@@ -24,7 +24,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <link
+      href="https://webfontworld.github.io/pretendard/Pretendard.css"
+      rel="stylesheet"
+    />
+    <title>To-Do-List</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/App.js

@@ -1,9 +1,15 @@
-function App() {
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import ToDoList from './pages/ToDoList';
+import GlobalStyles from '../src/GlobalStyles';
+
+export default function App() {
   return (
-    <div className="App">
-      <h1>CEOS 19기 프론트엔드 파이팅!( ¨̮ )و✧🔥</h1>
-    </div>
+    <BrowserRouter>
+      <GlobalStyles />
+      <Routes>
+        <Route path="/" element={<ToDoList />} />
+      </Routes>
+    </BrowserRouter>
   );
 }
-
-export default App;