BUMANG ROUTE53
이 블로그 풀스택으로 만들었어요.
프로젝트 요약
시작일
2024.12. -
포지션
풀스택
테크스택
Next.js
Tailwind
Next-intl(i18n)
Gsap
Shadcn/ui
Nest.js
TypeORM
Postgresql
Docker/DockerCompose
AWS EC2
AWS S3
팀 구성
풀스택
1
관련링크
테스트용 계정
이메일
blog_user
@gmail.com
비밀번호
****************
버망's 인터랙티브 포트폴리오 & 블로그
버망의 아티클과 그림 기록용 블로그입니다. ROUTE53인 이유가 혹시 궁금하신가요? 제 닉네임 옆에 길이가 비슷한 IT용어(특히 네트워크 용어)를 붙이고 싶었는데, 아마존의 도메인 서비스인 ROUTE53을 가져오기로 했습니다. 뭔가 있어보여서요. 테스트 아이디로 로그인한다면 직접 글을 써보실수도 있어요. 어차피 어드민(버망) 계정이 쓴 글이 아니면 24시간 안에 삭제될거지만요. 임시 아이디가 어딨냐구요?? 좌측 하단에 테스트용 아이디 있을테니 그걸로 로그인 해보세요.
맡은 역할
블로그 백엔드 개발
Nest.js 개발부터 배포까지
- • 블로그 CRUD 기능 구현
- Postgresql을 활용한 관계형 DB 내 유저 - 포스트 - 카테고리 - 그룹 관계 설정
- 점수 기반 관련성 알고리즘을 기반으로 관련 게시물 추천 API 개발
- 블로그 편집 중 이미지를 삽입하거나, 썸네일 이미지로 등록하는 과정 구현. 버퍼가 큰 이미지는 클라이언트가 직접 S3로 업로드하도록 presigned URL을 제공.
- • Docker 및 AWS EC2 배포를 위한 CI/CD 최적화
- Docker Compose를 사용하여 Nest.js 앱과 PostgreSQL 데이터베이스를 컨테이너화하고 Docker 이미지를 통해 배포
- GitHub Actions으로 자동 배포: EC2에 SSH 접속, 최신 Docker 이미지 pull, 컨테이너 재시작 등을 자동화
- 배포 시 오래된 Docker 이미지 캐시 제거, 최신 3개 이미지만 유지하도록 설정
역할 기반 접근 제어
역할을 차등하여 CRUD 권한 차별화
- • 퍼블릭, 유저, 어드민 등의 역할 분리
- 운영자인 '어드민', 포스트 올리기 체험 및 일부 비공개글을 읽을 수 있는 '유저', 비로그인 상태인 '퍼블릭', 이렇게 3개의 권한이 존재
- 퍼블릭 권한은 '유저Only' 포스트를 조회할 수 없고, 유저 권한은 '어드민Only' 포스트를 볼 수 없음.
- cron 스케줄링 작업으로 '어드민'이 올리지 않은 포스트는 24시간에 한 번 꼴로 삭제 정리됨.
- Guards와 커스텀 Decorators를 사용하여 인증 및 권한 부여 추상화
React 서버/클라 컴포넌트 전략
SEO에 따른 서버/클라 패칭 분기
- • 인증/인가에 따라 서버컴포넌트와 클라이언트 컴포넌트의 관심사 분리
- SEO가 중요한 데이터(포스트 리스트, 내용 등)면서 public한 데이터는 서버 컴포넌트에서 처리.
- 인증/인가가 필요한 데이터면 되도록 클라이언트 컴포넌트 내에서 httpOnly 쿠키와 함께 패칭하도록 유도.
- 만약 비공개 글일 경우, 서버컴포넌트에서 토큰없이 호출 후 일차적으로 401에러가 반환되면, 클라이언트 컴포넌트에서 인증정보를 가지고 다시 패칭을 하는 구조 설정
- JWT 전략 상 엑세스토큰 주기를 짧게 설정하기 때문에, 토큰 만료 시 재발급 받아오는 과정이 필연적으로 필요함.
- 그러나 서버컴포넌트에서 재발급 처리 시 httpOnly쿠키가 브라우저에 자동으로 심어지지 않음. (요청자가 브라우저가 아니기 때문) 그래서 서버사이드에서 다시 브라우저에 심어주는 과정이 필요.
- 서버사이드에서 인증 관리 시 위와 같은 번거로움이 발생하므로 인증 관리는 클라이언트 컴포넌트에 일임. 관심사 분리 결정
Headless UI 커스텀 컴포넌트
신속하게 고품질 컴포넌트 구축
- • Shadcn/ui, React-bits 등 여러 headless UI 활용
- 풍부한 테일윈드 기반 HeadlessUI 생태계 활용
- 기본적인 컬러, borderRadius, fontSize 규칙을 정해 디자인 통일성을 유지
- 이 서비스에 필요한 복합적인 기능 컴포넌트도 헤드리스 UI들을 조합하여 합성하여 생성
i18n 및 다크모드
여러가지 유틸 기능 구현 및 실험
- • i18n 및 다크모드 등 여러 유틸 기능들을 실험
- Next-intl으로 i18n 국제화 지원. 패스 라우팅 자체를 분기
- [다크모드 지원 예정]
Thanks for Reading목록으로 돌아가기