์ ๋์ฌ์ธ ble
๋ GitHub
์ ๋๋ค์( 1-blue
)์์ ๊ฐ์ ธ์์ต๋๋ค.
๊ทธ๋ฅ blue
๋ ๋๋ฌด ์ ๋ช
ํ ๋จ์ด๋ผ ๋ง์ ์ฌ๋๋ค์ด ์ด๋ฏธ ๋๋ฉ์ธ์ผ๋ก ์ฌ์ฉํ๊ณ ์์ด์ blue
์ค์ ์กฐํฉํด์ ble
๋ง ์ถ์ถํด์ ๋ชจ๋ ํ๋ก์ ํธ์ ์ ๋์ฌ๋ก ์ฌ์ฉ ์ค์
๋๋ค.
๊ทธ๋ฆฌ๊ณ gram
์ instargram
์์ ๊ฐ์ ธ์์ ble
์ gram
์ ํฉ์ณ์ ํ๋ก์ ํธ๋ช
์ผ๋ก ์๋ช
ํ์ต๋๋ค.
ํ์ฌ ํ๋ก ํธ์ฉ๊ณผ ๋ฐฑ์๋์ฉ์ผ๋ก ๋ ๊ฐ๋ฅผ ์ฌ์ฉ ์ค์ด๋ผ ํ ๋ฌ ๋ด๋ด ์ฌ์ฉํ๋ฉด ๊ณผ๊ธ์ด ๋ฐ์ํ๊ธฐ ๋๋ฌธ์ ๋งค๋ฌ 1์ผ ~ 15์ผ๊น์ง๋ง ํ์ด์ง๋ฅผ ์ด์ด๋ ์๋ ์์ต๋๋ค.
SNS์ธ ๋งํผ ๊ฒ์์์ง์ ์ํด ํฌ๋กค๋ง ๋๋๋ก ์ฒ๋ฆฌํด์ค์ผ ํ๋ฏ๋ก SSR
๊ณผ SSG
๋ฅผ ์ฝ๊ฒ ์ฌ์ฉํ ์ ์๋ Next.js
๋ฅผ ์ ํํ์ต๋๋ค.
๋ํ ํ์ด์ง ๋ผ์ฐํ
, ์ด๋ฏธ์ง ์ต์ ํ ๋ฑ๋ฑ ๋ง์ ๊ธฐ๋ฅ์ ์ฝ๊ฒ ์ฌ์ฉํ ์ ์๋๋ก ์ง์ํด์ฃผ๊ธฐ ๋๋ฌธ์ ์ฌ์ฉํ์ต๋๋ค.
( + Next.js
์ฌ์ฉ๋ฒ ๊ณต๋ถ๋ฅผ ์ํด์ )
์ํ ๊ด๋ฆฌ๋ฅผ ์ํด์ Redux
๋ฅผ ์ฌ์ฉํ๊ณ ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ๊ฐ์ข
์ ์ฉํ ์ดํํธ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด redux-saga
๋ฅผ ์ ํํ์ต๋๋ค.
Flux
ํจํด์ ๋ํด ์ดํดํ๊ณ ์ฌ์ฉํ๊ธฐ ์ํด ๋
ธ๋ ฅํ๊ณ , Next.js
์ Redux
๋ฅผ ์ ์ฉํ๊ธฐ ์ํด์ ๊ตฌ๊ธ๋ง๊ณผ ์ธํ๋ฐ - nodebird๋ฅผ ๋ณด๊ณ ํ์ตํ์ต๋๋ค.
Redux-Toolkit ์ฌ์ฉ์ผ๋ก ์์ ํ์ต๋๋ค.
Flux
ํจํด์ด๋action
์dispatch
ํด์reducer
์์ ์ฒ๋ฆฌ๋ฅผ ํตํด ์๋ก์ดstate
๋ฅผ ๋ง๋๋ ๋ฐฉ์์ ๋งํฉ๋๋ค.
๋จ๋ฐฉํฅ์ผ๋ก๋ง ๋ฐ์ดํฐ๊ฐ ํ๋ฅด๊ณ , ํน์ ๋ฐฉ๋ฒ์ ํตํด์๋งstate
๋ฅผ ๋ณ๊ฒฝํ ์ ์๊ธฐ ๋๋ฌธ์ ๋ฐ์ดํฐ์ ํ๋ฆ์ด ๊ผฌ์ด์ง ์์ต๋๋ค.
์ ๋ช
ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ธฐ๋ ํ๊ณ theme
์ด๋ globalStyle
๊ฐ์ ์ข์ ๊ธฐ๋ฅ๋ ์ ๊ณตํด์ฃผ๊ธฐ ๋๋ฌธ์ styled-components
๋ฅผ ์ ํํ์ต๋๋ค.
์ฒ์์ ์ฌ์ฉํ ๋๋ ์ ๋ง ํธํ๊ณ ์ข์๋๋ฐ ์ฌ์ฉํ ์๋ก JS
์ฝ๋๊ฐ ๋ง์์ ธ์ ๋ถํธํจ์ด ๋๊ปด์ก์ต๋๋ค.
( ์ต๊ทผ์ tailwindCSS
๋ฅผ ๊ณต๋ถํ๊ณ ์ฌ์ฉํด๋ดค๋๋ฐ ๋๋ฌด ์ข์์ styled-components
์ฌ์ฉํ๋ฉด์ ๋๋ฌด ๋ถํธํ๋ค๊ณ ์๊ฐํ์ )
์ด์ ๊น์ง๋ ์ ๋ถ JavaScript
๋ก ๊ฐ๋ฐํ์ง๋ง, ์ต๊ทผ์ TypeScript
๋ฅผ ๊ณต๋ถํ๊ธฐ๋ ํ๊ณ , 4๊ฐ์ ์ ๋ ์ง๋์ ์ ๋ฆฌ๋ฅผ ์ํด ๋ค์ ์ฝ๋๋ฅผ ๋ดค์ ๋ ๋๋ฌด ์ฝ๋ ์ฝ๊ธฐ๊ฐ ํ๋ค์ด์ ์ด์ ์ฝ๋๋ ์ ๋ถ ๋ฒ๋ฆฌ๊ณ TypeScript
๋ฅผ ์ ์ฉํด์ ๋ค์ ๋ง๋ค์์ต๋๋ค. ( ๋ค์ ๋ง๋ค ๋ ๋๋ถ๋ถ TypeScript
๋ฅผ ์ ์ฉํด์ ์ฌ์ฌ์ฉ ํ์ )
TypeScript
๋ก ๊ฐ๋ฐํ๊ฒ ๋๋ฉด ์๋์์ฑ์ ์ง์ํด์ฃผ๊ธฐ๋ ํ๊ณ ๋ฐ์ดํฐ์ ํํ๋ฅผ ์ฝ๊ฒ ์ ์ ์์ด์ ์ด๋ฒ์ ์ ์ฉํ๋ฉด ๋ค์์ ์ฝ์ ๋๋ ๋ง์ด ๋์ ๋ ๊ฑฐ๋ผ๊ณ ํ๋จํ์ต๋๋ค.
react-toastify
: ํ ์คํธ ๋ฉ์์ง๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์ ์ ํreact-slick
, slick-carousel
: carousel
๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด ์ ํreact-hook-form
: form
๊ด๋ จ ์ฒ๋ฆฌ๋ฅผ ์ฝ๊ฒ ํ๊ธฐ ์ํด์ ์ ํsocket.io-client
: DM
์ ์ํด์ ์ ํ์๋ฒ๋ฅผ ๋์ฑ ์ฝ๊ฒ ๊ตฌํํ๊ธฐ ์ํด ์ ํํ์ต๋๋ค.
ORM
์ผ๋ก ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ์ฝ๊ฒ ์ฌ์ฉํ๊ธฐ ์ํด์ ์ ํํ์ต๋๋ค.
JavaScript
๋ง์ ์ด์ฉํด์ DB
๋ฅผ ์ฒ๋ฆฌํ ์ ์๊ณ ๋ชจ๋ธ๋ง, ๊ด๊ณ, ํฌํผ ํจ์ ๋ฑ์ ๋ง์ ๊ธฐ๋ฅ์ ์ ๊ณตํด์ค์ ์ฌ์ฉ๋ฒ๋ง ์ตํ๋ฉด ์ ๋ง ์ ์ฉํฉ๋๋ค.
์ต๊ทผ์
prisma
๋ฅผ ์ฌ์ฉํด๋ดค๋๋ฐprisma studio
๊ฐ ๋๋ฌด ์ ์ฉํ๊ณ ๋ชจ๋ธ๋ง๋ ๋ ํธํ๋ค๊ณ ์๊ฐํ๊ณtypescript
์ ๊ฐ์ด ์ฌ์ฉํ๋ฉด ์ ๋ง ํธํด์ ์์ผ๋ก๋sequelize
๋ ์ฌ์ฉํ์ง ์์ ์๊ฐ์ ๋๋ค.
๋ณต์กํ ์ธ์ฆ ์ ์ฐจ๋ฅผ ์ฝ๊ฒ ํด๊ฒฐํ๊ธฐ ์ํด ์ ํํ์ต๋๋ค.
์ฌ๋ฌ ๊ฐ์ง ์ ๋ต๋ค์ด ์์ง๋ง ์ผ๋จ ์์ฑ๋ถํฐ ํ๊ณ ์ดํ์ ์ธ๋ถ ์๋น์ค๋ฅผ ํตํด์ ์ธ์ฆ์ ์ฒ๋ฆฌํ๊ณ ์ถ์ด์ ํ์ฌ๋ ๋ก์ปฌ์ ๋ต๋ง ์ ์ฉํ์ต๋๋ค.
์ธ์คํ๊ทธ๋จ ํด๋ก ์ธ ๋งํผ ๊ฐ์ฅ ์ค์ํ ์ด๋ฏธ์ง๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํด ์ ํํ์ต๋๋ค.
multer
๋ฅผ ์ด์ฉํด์ ๋ธ๋ผ์ฐ์ ์์ ๋ณด๋ธ ์ด๋ฏธ์ง๋ฅผ ๋ฐ๊ณ multer-s3
, aws-sdk
๋ฅผ ํตํด์ ์ ์ ์ธ ์ด๋ฏธ์ง๋ฅผ AWS-S3
์ ์ ์ฅํ๊ณ ์ฌ์ฉํฉ๋๋ค.
DM
๊ธฐ๋ฅ ์ฆ ์ฑํ
์ ๊ตฌํํ๊ธฐ ์ํด์ ์ ํํ์ต๋๋ค.
์์ง webSocket
์ ์ ๋๋ก ์ดํดํ๋ ค๊ณ ๊ณต๋ถํ์ง ์์์ ๋จ์ํ 1 : 1 ์ฑํ
๊ธฐ๋ฅ(ํ
์คํธ)๋ง ๊ตฌํํ์ต๋๋ค.
์ดํ์ ์ถ๊ฐ๋ก ์์
ํ ๋ ์ด๋ฏธ์ง ์ฒจ๋ถ ๋ฐ ๋ค์์ ์ฑํ
๋ฐฉ์ ๋ํ ๊ธฐ๋ฅ์ ๊ตฌํํด๋ณผ ์๊ฐ์
๋๋ค.
๋์ค์ ๊ฐ๊ฐ gif๋ก ๋ง๋ค์ด์ ์ ๋ก๋ํ ์์
๋ฌด๋ฃ๋ก ์ฌ์ฉํ ์ ์๋ AWS-EC2
๋ฅผ ์ด์ฉํด์ ๋ฐฐํฌํ์ต๋๋ค.
ubuntu 20.04
๋ฅผ ์ ํํ๊ณ , Git
/GitHub
๊ณผ Node
/NPM
์ ์ด์ฉํด์ ์ฝ๋๋ฅผ ๊ฐ์ ธ์๊ณ , nginx
์ certbot
์ ์ด์ฉํด์ HTTPS
๋ฅผ ์ ์ฉํ๊ณ , Mysql
์ ์ฌ์ฉํ์ต๋๋ค.
curl -sL https://deb.nodesource.com/setup_16.x | sudo bash -E -
sudo apt install -y nodejs
sudo apt install mysql-server
sudo apt-get install nginx
sudo snap install certbot --classic
sudo certbot --nginx
# nginx ์ค์ ํ์ผ ์ด๊ธฐ
sudo vim /etc/nginx/nginx.conf
# "http { ... }" ๋ด๋ถ์ ์๋ ์ฝ๋ ์์ฑ
server {
server_name blegram.com; # ์ฌ๊ธฐ์ ์ฌ์ฉํ ๋๋ฉ์ธ ์์ฑ
}
# ์ ์ฝ๋๋ง ์์ฑํ๋ค๋ฉด "sudo certbot --nginx"๋ฅผ ์คํํ์ ๋ ์๋์ผ๋ก URL์ ์ธ์ํด์ ์ ํํ๋๋ก ๋ณด๊ธฐ๋ฅผ ์ ๊ณตํจ
# ๊ตณ์ด ์์ ์ฝ๋๋ฅผ ๋จผ์ ์์ฑํ์ง ์๊ณ ์ง์ URL์ ์ ์ด์ค๋ ์๊ด์์
# sudo certbot --nginx ๋ช
๋ น์ด ์คํ ํ ์ฑ๊ณตํ๋ค๋ฉด "server { ... }"์ ์๋ ์ฝ๋ ์ถ๊ฐ
listen 80;
location / {
proxy_set_header HOST $host;
# proxy_pass "https๋ก ์ ๊ทผ์ด ์ค๋ฉด ๋ณด์ฌ์ค ํฌํธ";
proxy_pass http://127.0.0.1:3000; # ์ฌ๊ธฐ์ ํ์ฌ ์ฌ์ฉํ๋ ํฌํธ ์์ฑ
proxy_redirect off;
# socket.io ( webSocket )์ ์ฌ์ฉํ๋ค๋ฉด ์๋ ์ฝ๋๋ ์์ฑ
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
# ์ด๋ฏธ์ง ๊ฐ์ ํ์ผ์ ์ฒ๋ฆฌํด์ผํด์ ์ ์ก ๋ฐ์ดํฐ๊ฐ ๋ง์ ๊ฒฝ์ฐ http { ... }์ ์๋ ์ฝ๋ ์์ฑ
client_max_body_size 20M; # ์ํ๋ ํฌ๊ธฐ๋ก ์ค์
# nginx.conf๋ฅผ ๋ฐ๊ฟจ๋ค๋ฉด nginx๋ฅผ ๋ค์ ์์ํด์ค์ผ ์ ์ฉ/์๋ฌ๊ฐ ์ ์ฉ๋จ
# ์ธ์ฆ์ ์ฌ๋ฐ๊ธ ( ํ
์คํธ / ์ฌ๋ฐ๊ธ )
sudo certbot renew --dry-run
sudo certbot renew