Skip to content

๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿš€โšก [12-CํŒ€] ๊ฒ๋‚˜ ๋น ๋ฅธ ์Šฌ๋ž™ ํ”„๋กœ์ ํŠธ โšก๐Ÿš€๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Notifications You must be signed in to change notification settings

boostcamp-2020/Project12-C-Slack-Web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

[12-C] ๊ฒ๋‚˜ ๋น ๋ฅธ ์Šฌ๋ž™ ํ”„๋กœ์ ํŠธ โšก


ํ”„๋กœ์ ํŠธ ์†Œ๊ฐœ โšก

  • Slack web ๋ฒ„์ „์˜ ์›Œํฌ์ŠคํŽ˜์ด์Šค, ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ… ๋“ฑ์˜ ์ฃผ์š” ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ๋ชฉํ‘œ๋กœ ํ•ฉ๋‹ˆ๋‹ค.

๋ฐ๋ชจ ์˜์ƒ โšก



๋ฐฐํฌ ์ฃผ์†Œ (ํ˜„์žฌ๋Š” ๋น„์šฉ ๋ฌธ์ œ๋กœ ์„œ๋น„์Šค ์ค‘๋‹จ)


์ฃผ์š” ๊ธฐ๋Šฅ



Tech Stack โšก

Frontend Backend etc
react Javascript Recoil Styled-components socket.io NodeJS Express JWT MongoDB socket.io github VScode Babel Webpack Naver Cloud Platform Docker Nginx

๊ธฐ์ˆ  ํŠน์žฅ์  โšก

โค๏ธ ๊ฒ๋‚˜ ๋น ๋ฅธ ๋Œ€์‘์„ ์œ„ํ•œ Mongo DB ์‚ฌ์šฉ โค๏ธ

  • ์‚ฌ์šฉ์ž์˜ ์ฑ„ํŒ… ๋ฉ”์‹œ์ง€ ์กฐํšŒ์™€ ์ฑ„ํŒ… ์ž…๋ ฅ์— ๋น ๋ฅด๊ฒŒ ๋Œ€์‘ํ•˜๊ธฐ ์œ„ํ•ด MongoDB๋ฅผ ์‚ฌ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • ODM์œผ๋กœ๋Š” Mongoose๋ฅผ ์‚ฌ์šฉํ•ด ๋ชจ๋ธ ๊ด€๋ฆฌ์™€ CRUD ๊ทธ๋ฆฌ๊ณ  ๊ฐœ๋ฐœ์˜ ํŽธ์˜๋ฅผ ๋„๋ชจํ–ˆ์Šต๋‹ˆ๋‹ค.
  • references ํƒ€์ž…์˜ ๋ฐ์ดํ„ฐ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ค‘๋ณต๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์—…๋ฐ์ดํŠธ ํ•˜๋Š” ๊ณผ์ •์„ ์ตœ์†Œํ™”ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๐Ÿ’š ๊ฒ๋‚˜ ๋น ๋ฅธ ์ฑ„ํŒ…์„ ์œ„ํ•œ Socket ์‚ฌ์šฉ ๐Ÿ’š

  • ์ฑ„ํŒ…, ๋ฆฌ์•ก์…˜, ๋Œ“๊ธ€ ๋“ฑ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ฐ˜์˜๋˜์–ด์•ผ ํ•˜๋Š” ๊ธฐ๋Šฅ๋“ค์„ socket์„ ํ†ตํ•ด ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ’™ ๊ฒ๋‚˜ ๋น ๋ฅธ ํ•™์Šต๊ณผ ์ ์šฉ์„ ์œ„ํ•œ Recoil ์‚ฌ์šฉ ๐Ÿ’™

  • React์˜ hook๊ณผ ์œ ์‚ฌํ•œ ๋ฐฉ์‹์œผ๋กœ ๋™์ž‘ํ•˜์—ฌ ๋‚ฎ์€ ๋Ÿฌ๋‹์ปค๋ธŒ๋ฅผ ๊ฐ–๊ธฐ ๋•Œ๋ฌธ์— ๋น ๋ฅด๊ฒŒ ํ•™์Šตํ•˜๊ณ  ์„œ๋น„์Šค์— ์ ์šฉํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.
  • Recoil atom์„ ์‚ฌ์šฉํ•ด ์›Œํฌ์ŠคํŽ˜์ด์Šค, ์ฑ„๋„, ์ฑ„ํŒ… ๋ฉ”์‹œ์ง€ ๋“ฑ์˜ data๋“ค์„ global state๋กœ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
  • Custom hook์„ ์‚ฌ์šฉํ•ด Recoil state๋ฅผ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ’œ ๊ฒ๋‚˜ ๋น ๋ฅธ ์ธ์ˆ˜์ธ๊ณ„๋ฅผ ์œ„ํ•œ Swagger API ๋ช…์„ธ ๐Ÿ’œ

  • ์‚ฌ์šฉ๋˜๋Š” API๋“ค์˜ ๋ช…์„ธ๋ฅผ ์ž‘์„ฑํ•˜์—ฌ Swagger ๋ช…์„ธ๋งŒ ์ฝ์–ด๋„ ํ˜‘์—…, ์œ ์ง€ ๋ณด์ˆ˜๊ฐ€ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  • ๋ณ„๋„์˜ ๋ฌธ์„œ ๊ณต์œ  ์—†์ด API์„œ๋ฒ„์— Swagger๋ฅผ ๋ฐฐํฌํ•˜์—ฌ ์–ธ์ œ๋“  ๋ช…์„ธ๋ฅผ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ’› ๊ฒ๋‚˜ ๋น ๋ฅธ ๋ฐฐํฌ ํ™˜๊ฒฝ ์„ค์ •์„ ์œ„ํ•œ Docker, Nginx ์‚ฌ์šฉ ๐Ÿ’›

  • Docker๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐฐํฌ ํ™˜๊ฒฝ ์„ค์ •์ด ์ˆœ์‹๊ฐ„์— ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  • NGINX๋Š” ํ”„๋ก ํŠธ์„œ๋ฒ„, ๋ฐฑ์—”๋“œ ์„œ๋ฒ„ ๊ฐ๊ฐ ์„ค์ • ํŒŒ์ผ ํ•˜๋‚˜์™€ ssl ์ ์šฉ์œผ๋กœ ์›น์„œ๋ฒ„ ๊ตฌ์ถ•์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

๐Ÿงก ๊ฒ๋‚˜ ๋น ๋ฅธ ์ดˆ๊ธฐ ๋กœ๋”ฉ์„ ์œ„ํ•œ infinite scroll ๊ตฌํ˜„ ๐Ÿงก

  • ์ดˆ๊ธฐ์—๋Š” ๋ฉ”์‹œ์ง€๋ฅผ ์ผ๋ถ€๋ถ„๋งŒ ๊ฐ€์ ธ์˜ค๋ฉฐ ์Šคํฌ๋กค์ด ํŠน์ • ์œ„์น˜์— ๋„๋‹ฌํ•˜๋ฉด ๋‹ค๋ฅธ ๋ฉ”์‹œ์ง€๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.
  • ์Šคํฌ๋กค์˜ ์œ„์น˜๊ฐ€ ํŠน์ • ์œ„์น˜์— ๋„๋‹ฌํ–ˆ์„ ๋•Œ reflow๋ฅผ ๋ฐฉ์ง€ํ•˜๋ฉฐ ๊ด€์ฐฐํ•˜๊ธฐ ์œ„ํ•ด intersection observer๋ฅผ ์ด์šฉํ•ด infinite scroll์„ ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์„ค์น˜ ๋ฐฉ๋ฒ• โšก

  • ๊ฐœ๋ฐœ๋ฒ„์ „์œผ๋กœ ์‹คํ–‰์‹œํ‚ฌ์‹œ backend ๋””๋ ‰ํ† ๋ฆฌ์—๋Š” .env.dev๊ฐ€ ๋ฐฐํฌ ๋ฒ„์ „์˜ ๊ฒฝ์šฐ .env.prod๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
git pull https://github.com/boostcamp-2020/Project12-C-Slack-Web.git
cd Project12-C-Slack-Web/backend
sudo docker build -t backend .
sudo docker run -d -p 4000:4000 -p 5000:5000 backend
cd ../front && npm install
npm start

.env ํŒŒ์ผ ์˜ˆ์‹œ

PORT=
CHAT_PORT=
MONGOURI=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_CALLBACK_URL=
JWT_SECRET=
FRONTEND_HOST=
COOKIE_SECRET=
NODE_ENV=
ENCRYPTION_KEY=
S3_ENDPOINT=
S3_REGION=
S3_ACCESSKEY=
S3_SECRETKEY=
S3_BUCKETNAME=

Teammate ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘ฆโ€๐Ÿ‘ฆ

๊น€์ข…์›_J052 ๋ฅ˜์ฐฌ๊ทœ_J065 ์ž„์ฑ„์šฑ_J171
Image Image Image
FE/BE ๊ฐœ๋ฐœ
(FE ์ง€์›)
FE/BE ๊ฐœ๋ฐœ
(FE ์ง€์›)
FE/BE ๊ฐœ๋ฐœ
(BE ์ง€์›)
- ํ•ญ์ƒ ๋ณธ์งˆ์„ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
- ์˜๊ฒฌ ์ถฉ๋Œ์„ ์ฆ๊น๋‹ˆ๋‹ค ^-^ ๐Ÿคฆโ€โ™‚๏ธ
- ์ง€์† ์„ฑ์žฅ ๊ฐ€๋Šฅํ•œ ๊ฐœ๋ฐœ์ž ๐Ÿ‘จโ€๐Ÿ’ป
- pro ์–ด๊ทธ๋กœ๊พผ ๐Ÿ˜Ž
- ๋”ด๊ธธ๋กœ ์ƒˆ๋Š”๊ฑฐ ๋„ˆ๋ฌด ์žฌ๋ฐŒ์Šต๋‹ˆ๋‹ค. ๐Ÿคฃ

๐Ÿ‘‰ ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ wiki๋ฅผ ํ™•์ธํ•ด์ฃผ์„ธ์š”



About

๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿš€โšก [12-CํŒ€] ๊ฒ๋‚˜ ๋น ๋ฅธ ์Šฌ๋ž™ ํ”„๋กœ์ ํŠธ โšก๐Ÿš€๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages