분류 전체보기 (42) 썸네일형 리스트형 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 을 설치해줍.. 디미터의 법칙 디미터의 법칙은 객체에게 자료를 숨기는 대신 함수를 공개하도록 하는 것입니다. 즉, 디미터의 법칙은 다른 객체가 어떠한 자료를 가지고 있는지 몰라야 한다는 것을 의미합니다. 이는 직관적으로 이해하기 위해 여러개의 점(.)을 사용하지 말아야 한다는 법칙으로도 유명합니다. TDD, Clean Code With Java 17기 과정을 들으면서 많은 것을 배우고 있습니다. 특히, 어떻게 클린 코드를 작성할 수 있을까를 많이 배우면서 지저분한 코드를 리팩토링 하고 테스트 코드를 작성하고 있습니다. 이번 미션을 진행하던 중 그동안 작성해왔던 코드의 큰 문제점을 발견하게 되었습니다. 문제점 디미터 법칙을 위반하는 코드 List cars = new ArrayList(); for (int i = 0; i < names... Spring Boot CustomResponse 1. CustomResponse Provide the parametrized type for this generic. Raw use of parameterized class 'CustomResponse' @Getter @AllArgsConstructor public class CustomResponse { private static final String HTTP_STATUS_SUCCESS = "success"; private String status; private int code; private String message; private T data; public CustomResponse(String status, int code, String message) { this.status.. 안전하게 비밀번호 생성하기 - HOTP 1. 문제 정의 업브렐라 보관함은 네트워크 통신이 없는 상태에서 비밀번호를 생성해야 합니다. 이에 대한 해결책으로 HOTP를 사용하여 비밀번호를 생성하기로 결정하였습니다. 2. OTP (One - Time - Password) OTP는 무작위 번호 약속 알고리즘에 따라 (시간 혹은 카운터에 따라) 변경되는 추정할 수 없는 비밀번호 생성을 이용하는 보안 시스템입니다. 비밀번호가 1회용이라 노출되어도 재사용이 불가능하며, 비밀번호를 숨겨진 알고리즘을 이용하여 생성해내므로 서버와의 접속 없이도 생성이 가능하여 중간 과정에서 패킷이 유출되는 위험을 없앨 수 있습니다. OTP는 크게 HMAC을 기반으로 하는 HOTP와 시간을 기반으로 하는 TOTP로 나뉘게 됩니다. 2 - 1 TOTP (Time Based - O.. Spring Test - H2 적용하기 1. 문제 정의 지난 프로젝트에선 모킹에 대한 학습을 위해 테스트 코드는 DB 연동을 하지 않았습니다. 따라서 이번 프로젝트에선 Classist 입장에서 테스트를 진행해보기 위해 DB를 연동한 테스트를 진행하려 합니다. 하지만 테스트를 실제 서비스중인 DB로 진행하게 된다면 예측할 수 없는 에러가 생길 수 있기에, H2 DB를 사용하여 테스트를 진행해보고자 합니다. 2. H2 설정 우선 build.gradle에 의존성을 추가해줍니다. testImplementation group: 'com.h2database', name: 'h2', version: '1.4.200'다음으로 test - resources - application-test.yml 파일을 생성해줍니다.. 코드 개선기 - 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.. [JUnit5] @ParameterizedTest 1. 문제 정의 테스트 코드를 작성하다 보면 반복되는 코드들이 쌓이는 것을 알 수 있습니다. Set Collection 의 학습 테스트를 예시로 들어보겠습니다. @Test void numbersTest() { // given Set numbers = Set.of(1, 2, 3); // when, then assertThat(numbers).contains(1); assertThat(numbers).contains(2); assertThat(numbers).contains(3); } 위 테스트 코드의 문제점은 assertThat().contains(); 가 반복된다는 것입니다. 이러한 코드의 중복을 어떻게 줄일 수 있을까요? 2. @ParameterizedTest 위와 같은 문제를 해결하기 위해 @Para.. 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 2 3 4 5 다음