Yonsei Golf (9) 썸네일형 리스트형 쿠폰 발급 동시성 제어 1. 문제 정의 연세대학교 골프동아리 웹사이트는 회원들의 참여 유도를 위해 무료 커피 쿠폰 , 스크린 골프 할인 쿠폰등을 지급하고 있습니다. 이러한 선착순 쿠폰 이벤트의 경우 순간적으로 사용자가 몰려 쿠폰 발급의 동시성을 제어하는 것이 관건이라고 할 수 있습니다. 동시성을 고려하지 않은 채 코드를 작성한 후 어떤 것이 문제가 되는지 살펴보겠습니다. public void createCoupon(Long couponId, Long userId, Long quantity) { Coupon coupon = couponRepository.findById(couponId).orElseThrow(); coupon.decrease(quantity); couponRepository.save(coupon); userCou.. Spring 처리율 제한 장치 (Rate Limiter) 1. 문제 정의 현제 연세대학교 골프동아리 웹사이트는 t2.micro에서 운영되고 있습니다. 사용할 수 있는 CPU는 한정적이기 때문에, 동아리 지원자가 몰리는 지원 마지막날에 대비해야 할 필요가 있습니다. 이번 포스팅에서는 t2.micro 에서 현재 웹 사이트가 버틸 수 있는 vUser의 지원서 작성 한계에 대해 알아보고, 어떻게 문제를 해결할 수 있는지 알아보도록 하겠습니다. 2. 트래픽 한계점 평균 동아리 지원자 200여명을 기준으로, vUser 200을 기준으로 테스트를 해보겠습니다. CPU 사용률이 50%에 이르며, 218번의 트랜잭션이 발생했지만, 이 중 성공한 트랜잭션은 70개에 불과합니다. 즉 트래픽이 몰릴 경우 테스트의 30%만이 성공하는 것을 확인할 수 있습니다. 이러한 에러가 발생할 .. Email 성능 개선기 1. 문제 정의 현재 연세골프 서비스는, 싱글 스레드로 지원 대기자, 합격 불합격 메일을 전송하고 있습니다. 대기자 명단이나, 지원자 수가 적을 경우 문제가 되지 않지만, 매 학기 100여명이 지원하는 동아리를 운영하기에는 큰 부담이 될 수 있습니다. 이번 포스팅에서는 이러한 문제를 해결하는 방법에 대해서 알아보도록 하겠습니다. 2. 해결 방법 2 - 1 멀티 스레드 가장 먼저 생각한 방법은 멀티 스레드로 메일을 전송하는 것이었습니다. Java에서 스레드 풀을 사용하여 이메일 전송을 빠르게 처리하려면 ExecutorService를 사용하여 병렬 처리를 구현할 수 있습니다. private ExecutorService emailExecutorService = Executors.newFixedThreadPoo.. 모니터링 with Docker 1. 문제 정의 컨테이너로 어플리케이션을 관리하면 다음과 같은 장점이 있습니다. 게시글 링크하기 “전투에서 실패한 지휘관은 용서할 수 있지만 경계에서 실패하는 지휘관은 용서할 수 없다”는 말이 있습니다. 이 말을 서비스를 운영하는 개발자에게 비춰 보면 장애는 언제든지 발생할 수 있더라도 그만큼 모니터링을 잘 해야 한다는 뜻입니다. 김영한님 스프링 강의 중 기존에는 EC2에 직접 Grafana와 Loki를 설치하였으나, 이번 포스팅에서는 컨테이너로 Loki, Grafana, Promtail을 관리하는 방법을 알아보도록 하겠습니다. 2. 로그 관리 현재 프로젝트에서 스프링 설정은 application.yml로 관리하고 있습니다. yml 설정에서 로그를 어디에 저장할 지 설정해보도록 하겠습니다. logging.. JWT Token + Refresh Token 1. 문제 정의 기존의 세션 로그인 방식에서 벗어나서, JWT를 활용한 로그인 방식으로 변경하였습니다. 변경하게 된 이유로는, refresh token을 사용한 자동 로그인을 학습해보기 위해서 도입하였습니다. 2. JWT 로그인 플로우 JWT와 카카오 OAuth2.0 로그인의 플로우를 시퀀스 다이어그램으로 살펴보도록 하겠습니다. refresh token이 있는지 확인합니다. refresh token이 만료됐거나 없는 경우, 카카오 로그인을 진행합니다. 카카오 서버로부터, 사용자 정보에 대한 access token을 발급받습니다. access token 내부에 있는 사용자의 카카오 ID가 연세골프 DB에 저장되었는지 확인합니다. DB에 없을 경우 401 에러를 반환하고, 로그인 페이지로 리다이렉트 합니다... CloudFront, S3 배포 자동화 1. 문제 정의 지난 포스팅(링크)를 통해 CloudFront, S3, Route53을 통한 Vue 프로젝트를 배포하는 방법에 대해서 알아보았습니다. 하지만, 프로젝트를 진행할 수록 배포해야 하는 횟수가 늘어나게 되었고, 수동으로 배포하는 방식은 개발 시간 지연에 큰 영향을 미치고 있습니다. 이번 포스팅에서는 GitHub Action을 활용한 프로젝트 배포 자동화에 대해 알아보도록 하겠습니다. 2. GitHub Actions 우선 배포 코드부터 알아보도록 하겠습니다. name: Deploy to CloudFront // dev 브랜치에 push될 경우 github action이 실행됩니다. on: push: branches: [ "dev" ] jobs: deploy: runs-on: ubuntu-late.. Alert 개선기 1. 문제 정의 연세대학교 골프동아리 웹 페이지 프로젝트를 진행하며, 다양한 예외 케이스에 대한 알림으로 ‘alert’ 을 사용하여 개발하였습니다. 초기에는 모바일에 대한 고려 없이 개발을 진행하였기에 문제가 없었으나, 점차 프로젝트가 완성되어 가면서 모바일에 대한 테스트를 진행하던 도중, 모바일의 경우 alert이 제대로 동작하지 않을 수 있다는 것을 인지하게 되었습니다. 2. 해결책 - SweetAlert alert을 모바일에서도 표현하기 위해 다양한 방법을 찾아보았습니다. 커스텀 토스트 vue3-toastify SweetAlert 세 가지의 방법을 도전해보았지만, 공식문서의 친절함 + 다양한 예제를 고려하여 SweetAlert을 도입하기로 결정하였습니다. 3. 도입기 sweetalert 을 설치해줍.. 코드 개선기 - YonseiGolf Email API 1. 문제 정의 연세대학교 골프동아리는 지원자의 합격 결과를 이메일로 공지하고 있습니다. 그런데 기존 API는 합격, 불합격자의 api uri를 다르게 사용하고 있어서 불필요한 코드의 중복이 발생하였습니다. @PostMapping("/admin/forms/documentPassEmail") public ResponseEntity sendDocumentPassEmail() { applicationService.sendDocumentPassEmail(); return ResponseEntity .ok() .body(new CustomResponse( "success", 200, "연세골프 지원서 서류 합격자 이메일 전송 성공" )); } @PostMapping("/admin/forms/finalPassEma.. CloudFront , S3 , Route 53 을 통한 Vue 프로젝트 배포 1. 시작하며 그동안 프로젝트를 진행할 땐 CSR, SSR에 대한 고민 없이 프론트엔드 배포는 모두 EC2에서 진행을 했습니다. 이번 프로젝트에서는 CloudFront 학습 겸, CSR이 왜 CloudFront에서 좋은 점이 있는지 공부해가며 적용해보려 합니다. 2. S3 생성 CloudFront로 배포하기 위해서는 S3에 프로젝트가 업로드되어 있어야 합니다. 우선 프로젝트를 빌드해줍니다. yarn build프로젝트가 빌드되면 dist 폴더가 생성됩니다. 이제 S3를 생성하고 파일을 업로드 해보겠습니다. S3를 생성한 후 파일을 업로드해보겠습니다. 주의 dist 폴더가 아닌 dist 폴더 내부의 파일들을 업로드해야 합니다. 3. S3 권한 설정 권한 -> 버킷 정책 -> 편집 정책 생성기를 클릭해줍니다... 이전 1 다음