메신저 과제

서비스 링크: https://console-lo9-messenger.herokuapp.com

👏 프로젝트 소개

json-server 로 만든 가상의 서버에서 대화 목록을 가져와 대화 목록을 화면에 출력한 후 대화에 참여한 사용자가 메시지를 전송할 수 있도록 하는 페이지 제작.

🚀 스택

⚙ 설치

# clone the project
$ git clone https://github.com/console-lo9/messenger.git

# install modules
$ cd messenger
$ npm ci || yarn

# start
$ npm run start:dev || yarn start:dev

⠀
⠀  You can now view this project in the browser.
⠀  http://localhost:3000/
⠀

🔗 의존성

"dependencies": {
    "@reduxjs/toolkit": "^1.7.2",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "concurrently": "^7.0.0",
    "cross-env": "^7.0.3",
    "json-server": "^0.17.0",
    "nanoid": "^3.2.0",
    "polished": "^4.1.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "styled-components": "^5.3.3",
    "web-vitals": "^2.1.4"
}

📂 파일 구조

├── public
├── server
└── src
    ├── assets
    ├── components
    │   ├── Header
    │   ├── Login
    │   ├── Messages
    │   ├── Modal
    │   ├── NewMessage
    │   └── SideNav
    ├── hooks
    ├── layout
    ├── models
    ├── pages
    ├── store
    │   ├── action
    │   └── reducer
    └── utils
    │   └── constants
    ├── App.js
    ├── GlobalStyle.js
    └── index.js

✨ 구현 사항

🗺 한 눈으로 보는 구현 기능

로그인 및 사용자 인식 기능

메시지 답장 기능

메시지 삭제 기능

💡 과제 후기

이번 프로젝트에서 배운점은 크게 세 가지입니다.

첫째는, 협업을 위한 팀 컨벤션 확립입니다. 그동안 과제를 진행하면서 팀원들과 서로 달랐던 코딩 스타일, 폴더 구조 스타일, 깃 커밋, 깃 브랜치 전략 등을 지속적으로 협의를 통해 하나의 컨벤션을 만들어 나갔는데, 특히 이번 과제에서 저희 팀만의 규칙들을 명확하게 확립하고 발전시킬 수 있었던 것 같습니다.

두번째는, 리팩토링의 중요성이었습니다. 하나의 컴포넌트 스타일을 프로젝트 내에서 최대한 재사용할 수있도록 스타일드 컴포넌트를 리팩토링하고 상수화 시킴으로서 깔끔하고 통일된 코드 구조를 어떻게 만들 수있는지를 배울 수있었습니다.

세번째는 리덕스의 활용법이었는데, 리덕스를 통한 상태관리를 프로젝트에 적용해볼 수 있어 좋았습니다. 다음에는 리덕스 툴킷또한 사용해보고싶습니다.

Suyeong-Lim/messenger