[4주차] 김현민 미션 제출합니다.

Dockerfile.prod

@@ -0,0 +1,33 @@
+FROM node:14 AS builder
+
+# set working directory
+WORKDIR /app
+
+
+# install app dependencies
+#copies package.json and package-lock.json to Docker environment
+COPY package-lock.json ./
+COPY package.json ./
+# Installs all node packages
+RUN npm i
+
+
+# Copies everything over to Docker environment
+COPY . ./
+RUN npm run build
+
+#Stage 2
+#######################################
+#pull the official nginx:1.19.0 base image
+FROM nginx
+#copies React to the container directory
+# Set working directory to nginx resources directory
+# WORKDIR /usr/share/nginx/html
+COPY config/nginx/default.conf /etc/nginx/conf.d/default.conf
+# Remove default nginx static resources
+RUN rm -rf ./usr/share/nginx/html/*
+# Copies static resources from builder stage
+COPY --from=builder /app/build /usr/share/nginx/html/
+# Containers run nginx with global directives and daemon off
+EXPOSE 3000
+ENTRYPOINT ["nginx", "-g", "daemon off;"]

README.md

@@ -1,66 +1,57 @@
-# 서론
+# 4주차 미션: React-Messenger 💌
 
-안녕하세요 🙌🏻 18기 프론트 운영진 김문기입니다. 이번 미션에서는 드디어 투두리스트에서 벗어나 새로운 프로젝트인 **messenger** 만들기를 진행합니다.
+## 서론
 
-이번주는 특별히 **디자이너와의 협업**으로 진행되는 미션입니다. 디자이너분께서 열심히 리디자인 한 메신저 프로젝트를 여러분들께서 구현해주시면 됩니다.
+안녕하세요 🙌🏻 프론트엔드 운영진 김문기입니다.
 
-동시에, 이번주부터는 새로 **TypeScript**를 적용해보려고 합니다.
+다들 저번주 미션은 어떠셨나요? 이번주에는 저번 과제를 확장하여 보다 더 완성도 높은 메신저 서비스를 만들어 봅시다.
 
-프로젝트의 규모가 커지게 될 수록, 컴포넌트가 가지는 props의 종류 또한 다양해지게 됩니다. 무지성 코딩을 하다보면 가끔 이 props의 구성과 이름, 어떤 타입이 들어가야 하는지 헷갈리기 마련이죠. 보통 그럴 때 다시 컴포넌트 정의 부분으로 돌아가 props의 구성을 보고 오곤 합니다.
+이번주 과제의 목표는 React에서 **Routing**을 구현하는 방법과 **상태를 관리**하는 방법에 대해 익숙해지는 것입니다. 해당 부분을 잘 고려하시면서 미션을 수행해 주세요!
 
-하지만 이럴 때, typescript를 적용한다면 컴포넌트의 구성과 그 이름, 심지어 타입까지 한번에 자동완성으로 편리하게 관리할 수 있고, 생산성이 증대되겠죠.
+또한, 이번주에는 디자이너 측에서 QA를 전달해주실 예정입니다. 전달받은 QA에 대해 디자이너와 소통 후, 이를 고쳐보시는 과정도 수행해주세요!
 
-또한, **React Hooks**에 조금 더 익숙해지는 것을 목표로 합니다. 여러 Hook들이 있지만 그 중에서도 `useState`, `useEffect`, `useRef`를 중점적으로 사용해 보는 미션인데요, React를 사용하면서 굉장히 자주 쓰이는 Hook들이기 때문에 이 부분을 집중적으로 공부해 보아요!
+그럼 이번주도 파이팅입니다 😤
 
-그럼 이번 미션도 파이팅입니다!!🎉
+## 미션
 
-# 미션
+### 미션 목표
 
-## Key Questions
-
-- JavaScript를 사용할때에 비해 TypeScript를 사용할 때의 장점은 무엇인가요?
-- 디자이너로부터 전달받은 피그마 링크 혹은, 피그마 캡처본
-- 컴포넌트를 분리한 기준은 무엇인가요?
-- 디자인 시스템을 적용하면서 느낀 점은 무엇인가요?
-- 디자이너와 소통하며 느낀점은 무엇인가요?
+- SPA의 개념을 이해하고, 그에 따른 라우팅을 구현합니다.
+- 디자이너로부터 QA를 전달받고, 이에 대한 대응합니다.
+- React에서 사용하는 상태 관리 방법에 익숙해집니다.
+- UI 컴포넌트의 중복을 줄여 봅니다.
+- 코드를 확장/재사용/리팩토링하는 방법을 이해합니다.
 
-## 미션 목표
+### 기한
 
-- TypeScript를 사용해봅시다.
-- useState로 컴포넌트의 상태를 관리합니다.
-- useEffect와 useRef의 사용법을 이해합니다.
-- styled-components를 통한 CSS-in-JS 및 CSS Preprocessor의 사용법에 익숙해집니다.
+2023년 11월 3일 금요일 (기한 엄수!)
 
-## 기한
+### 필수 요건
 
-2023년 9월 29일 금요일
+- 친구 목록 페이지, 채팅 목록 페이지, 설정 페이지 세 부분으로 구성합니다.
+- 채팅 목록을 누르면 3주차 미션에서 구현했던 채팅방으로 이동합니다.
+- 검색 기능을 추가하여 검색한 내용과 일치하는 이름을 가진 사용자만 화면에 표시합니다.
+- (선택) 각자 메신저에 추가하고 싶거나, 구현하고 싶은 기능 마음껏 구현합니다. ✨
+- Custom hooks를 통해 중복되는 로직을 줄입니다.
 
-## 필수 구현 기능
+### 선택 사항
 
-- 피그마를 보고 [결과화면](https://3th-fb-messenger.netlify.app)과 같이 구현합니다.
-- 디자인 시스템을 구축합니다.
-- 채팅방 상단의 프로필을 클릭하면 사용자를 변경할 수 있습니다.
-- 메세지를 보내면 채팅방 하단으로 스크롤을 이동시킵니다.
-- 메세지에 유저 정보(프로필 사진, 이름)를 표시합니다.
-- user와 message 데이터를 json 파일에 저장합니다.
-- UI는 **반응형을 제외**하고 피그마파일을 따라서 진행합니다.
+- Recoil, Redux 등의 상태 관리 라이브러리를 적용해 봅니다.
+- Base UI component system을 통해 UI 컴포넌트의 코드 재사용성을 높입니다.
 
-### 추가 구현 기능
-
-- 더블 클릭 하면 감정표현을 추가합니다.
-- 그 외 추가하고 싶은 기능이 있다면 마음껏 추가해 주세요!
+## Key Questions
 
-참고로 이번 과제는 다음주까지 이어지는 과제이므로 **확장성**을 충분히 고려해 주세요. 참고로 **4주차 과제에서는 유저 및 기능 추가와 Routing을** 진행합니다. 이를 위해 [recoil](https://recoiljs.org/ko/)이나 [redux](https://ko.redux.js.org/introduction/getting-started/)를 이용한 상태관리를 미리 해보시는 것을 추천합니다!! 모두 공식문서 많이 읽어보시고 자신만의 상태관리 조합도 찾아보면 재밌을 거에요 XD
+- 디자이너로부터 받은 QA 목록
+- QA 반영한 커밋(or 브랜치) 링크 (커밋 분리 필수!!!)
+- Routing
+- SPA
+- 상태관리
 
 ## 링크 및 참고자료
 
-- [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)
+- [React Router v6 튜토리얼](https://velog.io/@velopert/react-router-v6-tutorial)
+- [(선택) react-router v6에서는 어떤 것들이 변했을까?](https://blog.woolta.com/categories/1/posts/211)
+- [React 상태 관리 가이드](https://www.stevy.dev/react-state-management-guide/)
+- [Flux 패턴이란?](https://velog.io/@huurray/React%EC%9D%98-%ED%83%84%EC%83%9D%EA%B3%BC-Flux-%ED%8C%A8%ED%84%B4%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC)
+- [useReducer](https://www.daleseo.com/react-hooks-use-reducer/)
+

config/nginx/default.conf

@@ -0,0 +1,12 @@
+server {
+    listen 3000;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri /index.html;
+    }
+
+    error_log /var/log/nginx/api_error.log;
+    access_log /var/log/nginx/api_access.log;
+   }

craco.config.js

@@ -0,0 +1,12 @@
+const path = require("path");
+
+module.exports = {
+  webpack: {
+    alias: {
+      "@common": path.resolve(__dirname, "src/common"),
+      "@features": path.resolve(__dirname, "src/features"),
+      "@pages": path.resolve(__dirname, "src/pages"),
+      "@styles": path.resolve(__dirname, "src/styles"),
+    },
+  },
+};

custom.d.ts

@@ -0,0 +1,6 @@
+declare module "*.svg" {
+  import React = require("react");
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}