Spring Full-Stack으로 만든 테크 콘텐츠 큐레이션 서비스 Techdot

기술 및 개발 콘텐츠 큐레이션 서비스

 

TechDot, 테크 및 개발 콘텐츠 큐레이션 서비스

TechDot은 테크 및 개발에 관련된 다양한 콘텐츠를 접해볼 수 있고 마음에 드는 콘텐츠를 아카이빙하여 보관할 수 있습니다. 해당 프로젝트 운용 비용은 0원입니다. 

 

사용한 기술 스택

• Back: Java, Spring (Boot, Data JPA, Security), QueryDsl, Mysql, Redis
• Front: Thymeleaf, BootStrap, Ajax, JQuery
• Test: JUnit5, Mockito, ArchUnit, TestContainers
• DevOps: Jenkins, Docker, Nginx, AWS(EC2, RDS, ElasticCache, S3, CodeDeploy, Route 53), Cloudflare

 

프로젝트 주제 선정 이유

무언가를 큐레이팅해서 다시금 새롭게 리스트를 작성하는 취미를 가지고 있습니다. 이전에 유튜브에 음악 플레이리스트를 제작하여 업로드한 경험이 있고 최근에는 매크로 경제에 관심이 많아 주간 경제 뉴스를 블로그에 경제 공부 겸 큐레이팅하여 업로드하고 있습니다. 이러한 취미 생활을 제 블로그의 성질과 연관되면서 전문성도 갖출 수 있는 '기술과 개발에 관련된 글, 영상들을 큐레이팅하는 서비스'를 직접 만들어보기로 하였습니다.

프로젝트 동기

주제 선정과는 별개로 해당 프로젝트를 시작하게 된 동기는 지난 하반기 동안 배우고 학습한 내용을 적용해보기 위함이 가장 컸습니다. 이전 프로젝트 'Loobie'를 하면서 느꼈던 점은 프론트나 백 구현은 할 줄 알지만 본질적인 자바, 스프링, 객체지향과 아직 많이 친하지 않다는 점이었습니다. 그래서 작년 하반기는 그러한 점을 보강해나가며 전공 서적과 여러 세미나를 찾아 공부하였습니다.

• '자바의 정석', '모던 자바 인 액션', '이펙티브 자바', 'Next 자바 웹 프로그래밍'
• '토비 스프링', '자바 ORM 표준 JPA 프로그래밍', '스프링 인 액션'
• '객체지향의 사실과 오해', '오브젝트'
• 그 외 여러 기술 블로그 및 테크 세미나

프로젝트에 임하는 목표

• 지난 하반기 동안 배우고 학습한 내용을 적용해보고 제 스스로도 사용하고 싶은 서비스를 구현할 것입니다.
• 단순하게 동작만 하는 서비스 구현이 아니라 유연하고 확장 가능한 객체지향 프로젝트를 구현하여 계속해서 확장 버전을 배포 및 운영할 것입니다.
• 어느 자극에도 깨지기 쉬운 서비스가 아니라 대용량 트래픽 처리까지 핸들링이 가능한 서비스를 구현할 것입니다.

 

프로젝트 전체 구성도

프로젝트 전체 구성도

 

프로젝트하면서 새롭게 공부한 내용 및 문제 해결 경험

프로젝트를 진행하면서 부딪힌 문제들 뿐만 아니라 새로운 기술을 배우면서 공부한 내용 또한 정리하여 블로그에 업로드하고 있습니다. 최대한 경험을 공유하면서 도움을 주거나 피드백을 받기 위해 꼼꼼하게 작성하고 있습니다. 

Techdot 관련 업로드 게시글

1. [Spring Security + Thymeleaf] logout시 csrf 토큰 관련 에러 해결하기
2. [JPA] @OneToOne 양방향 매핑에서 Lazy가 동작히지 않는 이유
3. [JPA] 관심 카테고리 게시글 + 좋아요 Querydsl로 한방 쿼리 만들기 (N+1 문제 해결)
4. [Database] 캐싱과 캐싱 전략에 대해 알아보자
5. [Database] Redis 고가용성을 위한 Sentinel 모드 직접 다뤄보기
6. [Test] TestContainers로 멱등성있는 MySql 테스트 환경 구축하기
7. [Test] TestContainers로 어디서든 실행 가능한 Redis 통합 테스트 환경 구축하기
8. [Test] LocalStack과 Testcontainers를 활용하여 AWS S3 통합 테스트 환경 구축하기    
9. [Test] ArchUnit로 패키지 및 레이어 아키텍처 검사하기
10. [AWS] Spring으로 ElasticCache for Redis 사용하기
11. [Deploy] Jenkins vs Travis-CI 무엇이 더 좋은가?
12. [AWS/Deploy] AWS EC2 인스턴스 Nginx로 블루-그린 무중단 배포하기
13. [Cloud] CDN에 대해 알아보자 (AWS CloudFront vs Cloudflare 비교)
14. [Cloud] S3와 Cloudflare를 사용하여 웹 성능 개선하기 (CDN, 정적 콘텐츠 웹 호스팅)

 

프로젝트 운영시 참고하기 좋은 글

1. [서비스 배포 전략 구상하기] 무중단 배포 3가지 방식 (Rolling, Blue-Green, Canary)
2. [Database] Redis에 대해 알아보자 (Redis 컬렉션, Sentinel, Cluster, 운영시 장애 포인트)
3. 배포한 프로젝트 서버 성능 올리기(처리량, 응답시간) - 최범균 개발자님 자료 내용 정리
4. 코드 리뷰 파라미드

 

TODO - ing

현재 테스트 버전 배포 중입니다. 프로토타입 버전을 배포한 상태에서 여러 기능을 테스트해보며 오류를 해결하고 성능 향상을 위해 새로운 기술들을 공부하여 적용해보고 있습니다. 피드백은 언제나 환영입니다.

현재 처리해야 할 작업

✅ 카테고리 기능 업데이트 (추가, 수정)
✅ 삭제 기능 구현 (회원 탈퇴, 게시글, 카테고리 삭제)
✅ Redis 유저 인증 토큰 캐싱 적용
✅ CDN 적용하여 응답 크기 줄이기 (썸네일 이미지)

• 게시글 당 이미지가 보통 0.4mb 차지한다. 그래서 12개 페이징된 응답 메시지 크기가 평균 4~5mb정도. daturl 이미지 크기가 너무 크다. 이를 s3, cloudflare 사용해서 응답 시간을 줄이자.

✅ 인피니트 스크롤링을 빠르게 응답할 수 있는 방법이 무엇일까?

• CDN을 적용하니 어느정도 해결. CDN 썸네일 이미지 캐싱 TTL 4시간 설정
• CDN을 사용하면 좋은 점은 Cache Warming이 매우 간단해진다. 모든 게시글을 특정 스케줄링으로 조회하기만 하면 CDN에 이미지가 캐싱된다. 캐시 설정은 유료였다...
• 페이징 쿼리 자체를 캐싱? mysql 쿼리 캐싱은 8부터 deprecated됨
• 페이징되어 출력되는 게시글 Dto 12개씩 묶어서 캐싱하면 중복이 발생됨. (ex. post_all:1, post_develop:1 이렇게 캐싱된다고 할 때 최신 게시글 중 절반이 develop 카테고리 관련 글이면 그만큼 중복됨)
• Cache Warming? 각 카테고리별 최신 게시글 최대 100개 캐싱. eviction은 allkeys-lfu로 적용. 그러면 게시글을 1개씩 읽어오는 쿼리로 바꿔야 한다. 만약 캐시에 저장되어있지 않다면 디스크 읽기를 1개씩 계속 읽어옴. jpa batch 적용하면 되나?

✅ Wiki 문서 작성 및 코드 리뷰 후 부족한 부분 보완하기

• 코드 리뷰
• readable, 코드 포맷팅, 주석 설명 보완 
• 로그 기록하기

☐ 기능 확장

• rss 콘텐츠 수집 자동화
• 구독
• 세션 클러스터링

 

프로토타입 운영

단순 프로토타입으로 배포를 한 후 Tistory 링크에 연동을 해놨더니 Tistory에 등록된 구글 SEO가 Techdot 사이트까지 같이 긁어서 검색 엔진에 등록이 되었습니다.

 

6월 14일 기준

 

현재 제기 사용하고 있는 Cloudflare라는 CDN 서비스에서 제공하는 분석 데이터를 보면 한 달간 대략 9천 건 정도 되는 요청이 발생하고 있는 것을 확인할 수 있었습니다. 이는 대역폭 무료라서 비용 걱정은 따로 안해도 될 뿐더러 이렇게 간단한 분석 데이터까지 제공해줍니다. 

 

 

 

게다가 이렇게 어느 지역에서 요청이 들어왔는지 또한 알려주기 때문에 보는 재미가 쏠쏠합니다. 뭔가 광고같지만 단순 실사용 후기입니다. 한국이 가장 많고 그다음으로 미국, 싱가폴, 독일, 호주 등에서도 꽤 많은 요청이 들어옵니다. 국내에서 IP를 우회해서 찍히는 요청이라고 보기에는 너무 각지에서 다양하게 들어오고 있습니다. 이러한 데이터를 보다 보면 지도 전체를 푸르게 서비스를 계속 키워나가고 싶다는 욕구가 생기게 되네요. 현재 이런저런 바쁜 일로 잠시 프로젝트를 멈춘 상태입니다만 실력을 더 올리고 시간이 될 때 프로젝트를 처음부터 다시 시작하여 리빌딩하든지 여기서 더 확장을 하든지 로깅, 배치를 통해 대량 콘텐츠를 큐레이팅하여 이와 함께 추천 및 구독 서비스까지 제공할 예정입니다.