[5주차] 전시원 미션 제출합니다.

.gitignore

@@ -1,23 +1,4 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# dependencies
 /node_modules
-/.pnp
-.pnp.js
+5th.md
 
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

.prettierrc

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

README.md

@@ -1,45 +1,70 @@
-# 4주차 미션: React-Messenger 💌
+# Getting Started with Create React App
 
-## 서론
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-안녕하세요 🙌🏻 15기 프론트 파트장 **김주현**입니다.
+## Available Scripts
 
-이번주부터는 드디어 투두리스트에서 벗어나 새로운 프로젝트인 **messenger** 만들기를 진행합니다. 이번 미션은 저번 미션의 연장선으로, TypeScript와 다양한 React Hook에 익숙해지는 것을 목표로 합니다. 이번 주차에 중점적으로 사용하는 Hook은 React를 사용하면서 굉장히 자주 쓰이기 때문에 해당 부분을 중점적으로 공부해 보세요.
+In the project directory, you can run:
 
-그럼 이번 미션도 파이팅입니다 ❤️‍🔥
+### `npm start`
 
-# 미션
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
 
-## 미션 목표
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
 
-- TypeScript에 익숙해집니다.
-- useState로 컴포넌트의 상태를 관리합니다.
-- useEffect와 useRef의 사용법을 이해합니다.
-- styled-components를 통한 CSS-in-JS 및 CSS Preprocessor의 사용법에 익숙해집니다.
+### `npm test`
 
-## 기한
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-- 2022년 5월 6일 금요일 **(기한 엄수!)**
+### `npm run build`
 
-## 필수 요건
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
 
-- 함수형 컴포넌트를 사용합니다.
-- styled-components를 사용합니다.
-- 컴포넌트 네이밍에 신경써 봅니다.
-- UI는 자유롭게 구성하되, 반응형까진 고려하지 않으셔도 됩니다.
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
 
-## 필수 구현 기능
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-- [결과 화면](https://corinth-messenger.vercel.app/)과같이 구현합니다.
-- 채팅방 상단의 프로필을 클릭하면 사용자를 변경할 수 있습니다.
-- 공백 입력 시 alert 메세지를 띄우고, 전송되지 않도록 합니다.
-- 메세지를 보내면 채팅방 하단으로 스크롤을 이동시킵니다. (Hint: useEffect + scrollTo)
-- 메세지에 유저 정보(프로필 사진, 이름)를 함께 표시합니다.
-- user와 message 데이터를 json 형식의 파일에 저장합니다.
+### `npm run eject`
 
-# 링크 및 참고자료
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
 
-- [React docs - Hook](https://ko.reactjs.org/docs/hooks-intro.html)
-- [React의 Hooks 완벽 정복하기](https://velog.io/@velopert/react-hooks#1-usestate)
-- [useEffect 완벽 가이드](https://overreacted.io/ko/a-complete-guide-to-useeffect/)
-- [리액트 프로젝트에서 타입스크립트 사용하기 (시리즈)](https://velog.io/@velopert/series/react-with-typescript)
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)