💁‍♂️ blegram v 3.0.0

👉 blegram 작명 이유

접두사인 ble는 GitHub의 닉네임( 1-blue )에서 가져왔습니다.
그냥 blue는 너무 유명한 단어라 많은 사람들이 이미 도메인으로 사용하고 있어서 blue 중에 조합해서 ble만 추출해서 모든 프로젝트의 접두사로 사용 중입니다.
그리고 gram은 instargram에서 가져와서 ble와 gram을 합쳐서 프로젝트명으로 작명했습니다.

• blegram
• trello ( v1.0.0 ~ v3.0.0까지 합쳐서 하나의 board로 수정할 예정 )
• GitHub
• youtube ( 전체 영상 찍어서 업로드할 예정 )

현재 프론트용과 백엔드용으로 두 개를 사용 중이라 한 달 내내 사용하면 과금이 발생하기 때문에 매달 1일 ~ 15일까지만 페이지를 열어둘 수도 있습니다.

🛠️ 프론트에서 사용한 라이브러리

1. Next.js

SNS인 만큼 검색엔진에 의해 크롤링 되도록 처리해줘야 하므로 SSR과 SSG를 쉽게 사용할 수 있는 Next.js를 선택했습니다.

또한 페이지 라우팅, 이미지 최적화 등등 많은 기능을 쉽게 사용할 수 있도록 지원해주기 때문에 사용했습니다.
( + Next.js 사용법 공부를 위해서 )

2. Redux + Redux-saga

상태 관리를 위해서 Redux를 사용하고 비동기 처리와 각종 유용한 이펙트를 사용하기 위해 redux-saga를 선택했습니다.

Flux 패턴에 대해 이해하고 사용하기 위해 노력했고, Next.js에 Redux를 적용하기 위해서 구글링과 인프런 - nodebird를 보고 학습했습니다.

Redux-Toolkit 사용으로 수정했습니다.

Flux 패턴이란 action을 dispatch해서 reducer에서 처리를 통해 새로운 state를 만드는 방식을 말합니다.
단방향으로만 데이터가 흐르고, 특정 방법을 통해서만 state를 변경할 수 있기 때문에 데이터의 흐름이 꼬이지 않습니다.

3. styled-components

유명한 라이브러리기도 하고 theme이나 globalStyle같은 좋은 기능도 제공해주기 때문에 styled-components를 선택했습니다.

처음에 사용할 때는 정말 편하고 좋았는데 사용할수록 JS 코드가 많아져서 불편함이 느껴졌습니다.
( 최근에 tailwindCSS를 공부하고 사용해봤는데 너무 좋아서 styled-components 사용하면서 너무 불편하다고 생각했음 )

4. TypeScript

이전까지는 전부 JavaScript로 개발했지만, 최근에 TypeScript를 공부하기도 했고, 4개월 정도 지나서 정리를 위해 다시 코드를 봤을 때 너무 코드 읽기가 힘들어서 이전 코드는 전부 버리고 TypeScript를 적용해서 다시 만들었습니다. ( 다시 만들 때 대부분 TypeScript를 적용해서 재사용 했음 )

TypeScript로 개발하게 되면 자동완성을 지원해주기도 하고 데이터의 형태를 쉽게 알 수 있어서 이번에 적용하면 다음에 읽을 때도 많이 도움 될 거라고 판단했습니다.

5. 나머지 라이브러리들

1. react-toastify: 토스트 메시지를 사용하기 위해서 선택
2. react-slick, slick-carousel: carousel를 사용하기 위해 선택
3. react-hook-form: form 관련 처리를 쉽게 하기 위해서 선택
4. socket.io-client: DM을 위해서 선택

⚒️ 벡엔드에서 사용한 라이브러리

1. express

서버를 더욱 쉽게 구현하기 위해 선택했습니다.

2. sequelize

ORM으로 데이터베이스를 쉽게 사용하기 위해서 선택했습니다.
JavaScript만을 이용해서 DB를 처리할 수 있고 모델링, 관계, 헬퍼 함수 등의 많은 기능을 제공해줘서 사용법만 익히면 정말 유용합니다.

최근에 prisma를 사용해봤는데 prisma studio가 너무 유용하고 모델링도 더 편하다고 생각하고 typescript와 같이 사용하면 정말 편해서 앞으로는 sequelize는 사용하지 않을 생각입니다.

3. passport

복잡한 인증 절차를 쉽게 해결하기 위해 선택했습니다.
여러 가지 전략들이 있지만 일단 완성부터 하고 이후에 외부 서비스를 통해서 인증을 처리하고 싶어서 현재는 로컬전략만 적용했습니다.

4. multer, multer-s3, aws-sdk, AWS-S3

인스타그램 클론인 만큼 가장 중요한 이미지를 처리하기 위해 선택했습니다.
multer를 이용해서 브라우저에서 보낸 이미지를 받고 multer-s3, aws-sdk를 통해서 정적인 이미지를 AWS-S3에 저장하고 사용합니다.

5. socket.io

DM 기능 즉 채팅을 구현하기 위해서 선택했습니다.
아직 webSocket을 제대로 이해하려고 공부하지 않아서 단순한 1 : 1 채팅 기능(텍스트)만 구현했습니다.
이후에 추가로 작업할 때 이미지 첨부 및 다수의 채팅방에 대한 기능을 구현해볼 생각입니다.

👀 구현한 기능

나중에 각각 gif로 만들어서 업로드할 예정

1. 유저 CRUD
2. 게시글 CRD
3. 댓글/답글 CRD
4. 게시글/댓글/답글 좋아요 CRD
5. 북마크 CRD
6. 해시태그 CR
7. 팔로우 CRD
8. 채팅방 CRD
9. 채팅 CR

🚀 배포

무료로 사용할 수 있는 AWS-EC2를 이용해서 배포했습니다.
ubuntu 20.04를 선택했고, Git/GitHub과 Node/NPM을 이용해서 코드를 가져왔고, nginx와 certbot을 이용해서 HTTPS를 적용하고, Mysql을 사용했습니다.

1. node 설치 ( 참고 )

curl -sL https://deb.nodesource.com/setup_16.x | sudo bash -E -
sudo apt install -y nodejs

2. mysql 설치 ( 참고 )

sudo apt install mysql-server

3. nginx 설치 ( 참고 )

sudo apt-get install nginx

4. certbot 설치 ( 참고 )

sudo snap install certbot --classic

5. https 적용 ( 참고 )

sudo certbot --nginx

6. nginx 설정

• https 적용을 위한 nginx 설정 변경 ( 인프런 - nodebird )

# 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

• socket.io + nginx 설정 참고
• nginx 데이터 전송 사이즈 설정 참고