[4주차] 이나현 미션 제출합니다.

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+ root: true,
+ env: { browser: true, es2020: true },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:react-hooks/recommended',
+ ],
+ ignorePatterns: ['dist', '.eslintrc.cjs'],
+ parser: '@typescript-eslint/parser',
+ plugins: ['react-refresh'],
+ rules: {
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true },
+ ],
+ },
+}

README.md

@@ -1,66 +1,64 @@
-# 서론
+# 3주차 미션: React-Messenger
 
-안녕하세요 🙌🏻 19기 프론트 운영진 배성준입니다. 이번 미션에서는 드디어 투두리스트에서 벗어나 새로운 프로젝트인 **messenger** 만들기를 진행합니다.
+## 🐻 배포 링크
 
-이번주는 특별히 **디자이너와의 협업**으로 진행되는 미션입니다. 디자이너분께서 열심히 리디자인 한 메신저 프로젝트를 여러분들께서 구현해주시면 됩니다.
+https://discord-react-typescript.vercel.app/
 
-동시에, 이번주부터는 새로 **TypeScript**를 적용해보려고 합니다.
+## 👩‍💻 구현 기능
 
-프로젝트의 규모가 커지게 될 수록, 컴포넌트가 가지는 props의 종류 또한 다양해지게 됩니다. 무지성 코딩을 하다보면 가끔 이 props의 구성과 이름, 어떤 타입이 들어가야 하는지 헷갈리기 마련이죠. 보통 그럴 때 다시 컴포넌트 정의 부분으로 돌아가 props의 구성을 보고 오곤 합니다.
+- 하단바 아이콘을 누르면 해당하는 페이지로 라우팅
+- 채팅 목록 페이지에서 특정 채팅을 누르면 해당 채팅방으로 이동
+- 채팅방 메세지 보내기 기능
+- 채팅 상대 토글 기능
+- 유저 프로필 조회 및 유저 링크 바로가기 기능
 
-하지만 이럴 때, typescript를 적용한다면 컴포넌트의 구성과 그 이름, 심지어 타입까지 한번에 자동완성으로 편리하게 관리할 수 있고, 생산성이 증대되겠죠.
+## 🥳 후기
 
-또한, **React Hooks**에 조금 더 익숙해지는 것을 목표로 합니다. 여러 Hook들이 있지만 그 중에서도 `useState`, `useEffect`, `useRef`를 중점적으로 사용해 보는 미션인데요, React를 사용하면서 굉장히 자주 쓰이는 Hook들이기 때문에 이 부분을 집중적으로 공부해 보아요!
+Redux, Routing 기능을 처음 공부해서 사용해봤습니다! 걱정을 많이 했는데 생각보다 Redux가 어렵지 않았고 코드 구현을 하면서 재미도 많이 느꼈습니다. Routing도 페이지가 많지 않아서 그런 건지 쉽게 구현했습니다.
 
-그럼 이번 미션도 파이팅입니다!!🎉
+오히려 타입스크립트와 localStorage 관련 부분에서 더 어려움을 겪었던 것 같습니다.
 
-# 미션
+그리고 프로젝트를 하면서 점점 느끼는 것은 무작정 코드를 짜기 시작하는 것보다 전체적인 구조와 세부 컴포넌트 틀, 전역으로 관리할 상태 등을 미리 정리하고 코드를 짜는 게 중요하다는 생각이 들었습니다. 그 과정이 처음에 할 때 오래 걸릴지 몰라도 개발에 들어가면 훨씬 수월하게 개발할 수 있는 것 같습니다.
 
-## Key Questions
+## 💡 새롭게 배운 점
 
-- JavaScript를 사용할때에 비해 TypeScript를 사용할 때의 장점은 무엇인가요?
-- 디자이너로부터 전달받은 피그마 링크 혹은, 피그마 캡처본
-- 컴포넌트를 분리한 기준은 무엇인가요?
-- 디자인 시스템을 적용하면서 느낀 점은 무엇인가요?
-- 디자이너와 소통하며 느낀점은 무엇인가요?
+- Redux를 이용한 전역 상태관리
+- Routing 기능
 
-## 미션 목표
+## 🔥 어려웠던 부분 / 의문점
 
-- TypeScript를 사용해봅시다.
-- useState로 컴포넌트의 상태를 관리합니다.
-- useEffect와 useRef의 사용법을 이해합니다.
-- styled-components를 통한 CSS-in-JS 및 CSS Preprocessor의 사용법에 익숙해집니다.
+- localStorage: localStorage에 저장될 때 key가 문자열 타입이라는 것을 잊고 에러 해결하는데 한참을 헤맸습니다🥲
+- 타입스크립트: 어디부터 어디까지 타입을 작성해주어야 하는지 아직 감이 잘 오지 않습니다. 그리고 어떻게 작성해야 가독성이 좋을지도 고민이 많이 되는 것 같아요. 좀 더 공부가 필요할 것 같습니다!
 
-## 기한
+## ✨ 더 구현해보고 싶은 기능
 
-2024년 3월 29일 금요일
+- 시간 관계 상 친구 목록 페이지는 별다른 기능 없이 이미지로만 넣어뒀는데 수정하고 싶습니다. 여유가 되면 시도해보겠습니다.
+- 채팅 목록 최신순 정렬 기능
+- 검색 기능(현재는 그냥 이미지)
 
-## 필수 구현 기능
+## ❓ Key Questions
 
-- 피그마를 보고 [결과화면](https://3th-fb-messenger.netlify.app)과 같이 구현합니다.
-- 디자인 시스템을 구축합니다.
-- 채팅방 상단의 프로필을 클릭하면 사용자를 변경할 수 있습니다.
-- 메세지를 보내면 채팅방 하단으로 스크롤을 이동시킵니다.
-- 메세지에 유저 정보(프로필 사진, 이름)를 표시합니다.
-- user와 message 데이터를 json 파일에 저장합니다.
-- UI는 **반응형을 제외**하고 피그마파일을 따라서 진행합니다.
+### 1. Routing이란?
 
-### 추가 구현 기능
+- 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것
+- ex) 블로그를 만든다면?
+ - **글쓰기 페이지**: 새로운 포스트를 작성하는 페이지
+ - **포스트 목록 페이지**: 블로그에 작성된 여러 포스트들의 목록을 보여주는 페이지
+ - **포스트 읽기 페이지**: 하나의 포스트를 보여주는 페이지
+- 리액트에서 라우팅을 하기 위한 대표적인 두 가지 방법
+ - **리액트 라우터(React Router)**: 이 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있다. 이 라이브러리는 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있다.
+ - **Next.js**: Next.js 는 리액트 프로젝트의 프레임워크이다. 이 프레임워크는 우리가 사용했던 Create React App처럼 리액트 프로젝트 설정을 하는 기능, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능들을 제공한다. → 이 프레임워크의 라우팅 시스템은 파일 경로 기반으로 작동하여 파일경로만 설정해주면 라우팅이 자동으로 적용되는 형태이다
 
-- 더블 클릭 하면 감정표현을 추가합니다.
-- 그 외 추가하고 싶은 기능이 있다면 마음껏 추가해 주세요!
+### 2. SPA란?
 
-참고로 이번 과제는 다음주까지 이어지는 과제이므로 **확장성**을 충분히 고려해 주세요. 참고로 **4주차 과제에서는 유저 및 기능 추가와 Routing을** 진행합니다. 이를 위해 [recoil](https://recoiljs.org/ko/)이나 [redux](https://ko.redux.js.org/introduction/getting-started/)를 이용한 상태관리를 미리 해보시는 것을 추천합니다!! 모두 공식문서 많이 읽어보시고 자신만의 상태관리 조합도 찾아보면 재밌을 거에요 XD
+- 싱글페이지 어플리케이션이란 index.html이 하나인, 한 개의 페이지로 이루어진 어플리케이션이라는 의미
+ ↔ 멀티 페이지 애플리케이션에서는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 CSS, JS, 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여 주었다 !
+- 사용자 인터랙션이 별로 없는 정적인 페이지들은 기존의 방식(MPA)이 적합하지만, 사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션은 이 방식이 적합하지 않음 → SPA를 통해 html을 한 번만 받아와서 웹 어플리케이션을 실행시킨 후에, 그 이후에는 필요한 데이터만 화면에 업데이트!
 
-## 링크 및 참고자료
+### 3. 상태관리란?
 
-- [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://ui.toast.com/fe-guide/ko_CODING-CONVENTION)
-- [타입스크립트 핸드북](https://joshua1988.github.io/ts/intro.html)
-- [리액트 프로젝트에서 타입스크립트 사용하기 (시리즈)](https://velog.io/@velopert/series/react-with-typescript)
-- [디자인 시스템 구축기](https://yozm.wishket.com/magazine/detail/1830/)
-- [[영상] : 컴포넌트에 대한 이해](https://www.youtube.com/watch?v=21eiJc90ggo)
-- [Styled Component로 디자인 시스템 구축하기](https://zaat.dev/blog/building-a-design-system-in-react-with-styled-components/)
-- [ts 절대경로 설정하기](https://tesseractjh.tistory.com/232)
+- 데이터를 관리하는 방법. 여러 component간에 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 것.
+- 상태 관리가 필요한 이유
+ 1. 데이터가 바뀌어도 페이지가 렌더링 되지 않게 하기 위해
+ 2. 상태(state)들이 복잡하게 얽혀있다면, 상호간에 의존성이 많아지게 되어서 UI가 어떻게 변하는지 알기 어렵기 때문에 효율적인 관리가 필요하다.
+- 상태 관리 라이브러리 종류 : redux,MobX,Overmind.js,recoil

dist/.gitignore

@@ -0,0 +1 @@
+.vercel