본문 바로가기

전체 글

 (42)
[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 권한 설정 권한 -> 버킷 정책 -> 편집 정책 생성기를 클릭해줍니다...
Vue router 이동 시, 페이지 최상단으로 이동 1. 문제 정의 Vue.js 를 이용하여 프로젝트를 진행하고 있습니다. 이와 같이 모집안내, 지원하기를 클릭 시 vue router를 이용하여 페이지 이동을 진행하고 있는데, 여기서 문제점이 있습니다. 바로 페이지를 이동하면 그 카테고리에 해당하는 최상단을 보여주는 것이 아닌, 현재 스크롤 위치 그대로 페이지를 랜더링 한다는 점입니다. 이번 포스팅에서는 이러한 문제를 해결해보도록 하겠습니다. 2. Scroll Behavior Vue3를 이용한 현재 프로젝트는, 페이지간 이동을 Vue Router를 이용해서 진행하고 있습니다. src/router/index.js 에서 스크롤 설정을 추가해주도록 하겠습니다. import { createRouter, createWebHistory } from 'vue-..

티스토리툴바