본문 바로가기
728x90
반응형

전체 글416

[React] Cypress로 내부 DOM 테스트하기 안녕하세요. J4J입니다. 이번 포스팅은 cypress로 내부 dom 테스트하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Cypress로 내부 DOM 테스트할 때 발생되는 문제 예를 들어 다음과 같은 코드를 테스트한다고 가정해 보겠습니다. import React from 'react'; const App = () => { return ( 첫번째 타이틀 첫번째 아이템1 첫번째 아이템2 두번째 타이틀 두번째 아이템1 두번째 아이템2 ); }; export default App; 테스트하고자 하는 것은 두 번째 wrapper의 내부에 있는 [data-cy=item]의 첫 번째 요소를 확인했을 때 요소가 가지고 있는 텍스트 값이 "두번째 아이템1" 인지 검증하는 것입니다. 해당 요소를 검증하는 것은 cy.. 2023. 4. 16.
[React] Cypress로 E2E테스트하기 안녕하세요. J4J입니다. 이번 포스팅은 cypress를 이용하여 e2e 테스트하는 방법에 대해 적어보는 시간을 가져보려고 합니다. E2E 테스트란? E2E는 End to End의 약자로 사용자의 관점에서 테스트를 진행하는 것을 의미합니다. 말 그대로 사용자가 서비스에 접속했을 때 하는 행동들과 그 행동들에 의해 동작되는 여러 액션들을 테스트할 수 있기 때문에 사용자가 사용하는 관점에서 발생될 수 있는 문제들을 파악하는데 도움을 줍니다. E2E 테스트를 포함하여 React에서 진행되는 테스트들은 다음과 같이 있습니다. 단위 테스트 통합 테스트 E2E 테스트 E2E 테스트는 브라우저를 통해 실제 사용자가 서비스를 사용하는 부분을 테스트하기 때문에 위의 테스트들 중 가장 큰 리소스를 필요로 합니다. 즉, 테.. 2023. 4. 12.
[SpringBoot] MockMVC를 이용하여 API 테스트하기 안녕하세요. J4J입니다. 이번 포스팅은 mock mvc를 이용하여 api 테스트하는 방법에 대해 적어보는 시간을 가져보려고 합니다. MockMVC란? mock mvc는 스프링을 이용하여 api 테스트를 할 수 있게 도와주는 것 중 하나로 다음과 같은 특징들을 가집니다. 서버를 구동시키지 않아도 테스트 가능 api 테스트를 하는 것이기 때문에 controller에 구성된 코드들을 테스트 client가 api를 요청하는 것처럼 api 경로를 입력하여 테스트하는 방식 스프링 api를 테스트 하는 방법으로 MockMVC를 제외하고도 WebTestClient, TestRestTemplate 등이 있습니다. 모두 api를 테스트한다는 공통점을 가지지만 MockMVC는 가상 서버를 동작시키고 WebTestClien.. 2023. 4. 9.
[Next] Naver 로그인 Spring을 활용하여 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 naver 로그인 spring을 활용하여 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 동일한 방식의 다른 서비스 로그인을 활용하는 방법에 대해 궁금하신 분들은 다음을 참고해 주시면 됩니다. [Next] Kakao 로그인 Spring을 활용하여 구현하기 [Next] Apple 로그인 Spring을 활용하여 구현하기 Next만을 이용하여 naver 로그인을 구현하는 방법에 대해 궁금하신 분들은 다음을 참고해 주시면 됩니다. [Next] 네이버 로그인 구현하기 애플리케이션 등록 naver를 이용하여 로그인을 구현하기 위해서는 먼저 사용하려는 서비스 애플리케이션 정보를 등록해줘야 합니다. 다음 절차들을 통해 애플리케이션을 등록해보겠습니다. [.. 2023. 4. 2.
[Next] Kakao 로그인 Spring을 활용하여 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 kakao 로그인 spring을 활용하여 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 동일한 방식의 다른 서비스 로그인을 활용하는 방법에 대해 궁금하신 분들은 다음을 참고해 주시면 됩니다. [Next] Naver 로그인 Spring을 활용하여 구현하기 [Next] Apple 로그인 Spring을 활용하여 구현하기 Next만을 이용하여 kakao 로그인을 구현하는 방법에 대해 궁금하신 분들은 다음을 참고해주시면 됩니다. [Next] 카카오 로그인 구현하기 애플리케이션 등록 kakao를 이용하여 로그인을 구현하기 위해서는 먼저 사용하려는 서비스 애플리케이션 정보를 등록해줘야 합니다. 다음 절차들을 통해 설정해보도록 하겠습니다. [ 1. k.. 2023. 3. 26.
[Next] Apple 로그인 Spring을 활용하여 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 apple 로그인 spring 활용하여 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 동일한 방식의 다른 서비스 로그인을 활용하는 방법에 대해 궁금하신 분들은 다음을 참고해 주시면 됩니다. [Next] Kakao 로그인 Spring을 활용하여 구현하기 [Next] Naver 로그인 Spring을 활용하여 구현하기 Apple Developer 등록 [ 1. App Identifiers 추가하기 ] Apple 로그인을 구현하기 위해서는 먼저 서비스로 사용될 App을 등록해줘야 합니다. Apple Developer Identifiers에 접속한 뒤 + 버튼을 클릭해 줍니다. [ 2. Identifiers 유형 선택 ] 어떤 유형을 등록할지 다.. 2023. 3. 20.
[SpringBoot] WebClient를 이용하여 외부 API 호출하기 안녕하세요. J4J입니다. 이번 포스팅은 webClient를 이용하여 외부 api 호출하는 방법에 대해 적어보는 시간을 가져보려고 합니다. WebClient란? webClient는 spring 5에서 부터 등장한 HTTP 클라이언트 라이브러리입니다. 여기서 말하는 HTTP 클라이언트라고 하는 것은 HTTP 프로토콜을 이용하여 서버와 통신하는 것을 의미하며 다른 말로는 서버에 API 요청을 보내는 주체라고도 말할 수 있습니다. webClient가 등장하기 이전까지는 spring에서 자주 사용되던 HTTP 클라이언트로 restTemplate이 존재했었습니다. 그래서 spring에서 다른 서버와 통신을 하기 위해서는 restTemplate를 사용하고는 했는데 webClient가 등장한 이후로는 webClien.. 2023. 3. 15.
[CSS] Carousel 정리하기 (2) - Overlap 안녕하세요. J4J입니다. 이번 포스팅은 Carousel 정리하기 마지막인 Overlap에 대해 적어보는 시간을 가져보려고 합니다. Overlap Carousel 원리 overlap carousel의 원리는 일반적인 carousel의 원리에서 조금 더 생각해봐야 할 부분이 있습니다. 기본적인 부분은 일반 carousel과 동일하지만 주목해야 할 차이점은 carousel에 보일 아이템들의 위치가 항상 사용자에게 보이는 화면에 위치한다는 것입니다. 그림으로 예를들면 다음과 같습니다. 위의 그림을 보면 사용자가 처음 화면에 접속했을 때나 오른쪽으로 리스트를 넘겼을 때나 동일하게 아이템들의 위치는 항상 사용자에게 보이는 화면에 위치하고 있습니다. 하지만 그와 달리 아이템을 덮고 있는 컨테이너들은 좌우 이동되는 .. 2023. 3. 12.
[CSS] Carousel 정리하기 (1) - Drag 안녕하세요. J4J입니다. 이번 포스팅은 Carousel 정리하기 첫 번째인 Drag에 대해 적어보는 시간을 가져보려고 합니다. Carousel 원리 제가 생각하는 Carousel의 원리를 그림으로 표현하면 다음과 같습니다. 그림에 대해 설명을 해보면 기본적으로 carousel에는 보이고 싶은 아이템들을 일렬로 나열해 둡니다. 사용자가 페이지에 접근했을 때 carousel에 있는 여러 아이템들 중 하나만 보이도록 하고 나머지 아이템들은 화면에 보이지 않도록 해줍니다. 그리고 아이템을 선택하여 좌우로 드래그를 하게 되면 아이템을 담고 있는 목록의 X좌표를 움직이게 하여 옆에 있는 아이템들을 확인할 수 있는 애니메이션을 제공해 줄 수 있습니다. carousel을 구현하는 방법으로는 정말 다양하게 있습니다. .. 2023. 3. 8.
[Next] Data Fetching에 대해 알아보기 (4) - useQuery 안녕하세요. J4J입니다. 이번 포스팅은 Data Fetching의 마지막인 useQuery에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR [Next] Data Fetching에 대해 알아보기 (2) - SSG / Dynamic Routing [Next] Data Fetching에 대해 알아보기 (3) - ISR 들어가기에 앞서 Next 공식문서에 따르면 Next의 Data Fetching의 종류는 다음과 같이 있습니다. SSR SSG CSR Dynamic Routes ISR 공식문서에서 소개하고 있는 위의 Data Fetching들은 이전 글들에서 모두 다룬 상태입니다. 그리고 이번 글은 useQuery와 관련되어서.. 2023. 3. 5.
[Next] Data Fetching에 대해 알아보기 (3) - ISR 안녕하세요. J4J입니다. 이번 포스팅은 Data Fetching의 세 번째인 ISR에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR [Next] Data Fetching에 대해 알아보기 (2) - SSG / Dynamic Routing 들어가기에 앞서 Next 공식문서에 따르면 Next의 Data Fetching의 종류에는 다음과 같이 있습니다. SSR SSG CSR Dynamic Routing ISR 그리고 이번 글에서는 ISR에 대해 알아보도록 하겠습니다. ISR - 기본 ISR은 Incremental Static Regeneration의 약자로 Dynamic Routing의 이점을 가져가며 단점을 보완하기 위해 .. 2023. 2. 20.
[Next] Data Fetching에 대해 알아보기 (2) - SSG / Dynamic Routing 안녕하세요. J4J입니다. 이번 포스팅은 Data Fetching의 두 번째인 SSG와 Dynamic Routing에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR 들어가기에 앞서 Next 공식문서에 따르면 Next의 Data Fetching의 종류에는 다음과 같이 있습니다. SSR SSG CSR Dynamic Routing ISR 그리고 이번 글에서는 SSG와 Dynamic Routing에 대해 알아보도록 하겠습니다. SSG SSG는 Static-site generation의 약자로 특정 페이지에서 fetching이 이루어져야 할 데이터들을 build 단계 때 prerendering 하여 props로 사용함으로 써 페.. 2023. 2. 17.
[Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR 안녕하세요. J4J입니다. 이번 포스팅은 Data Fetching의 첫 번째인 CSR과 SSR에 대해 적어보는 시간을 가져보려고 합니다. Data Fetching에 대해 알아야 하는 이유 최근 Next에 대해 하나, 둘 배워가면서 Next를 제대로 활용하지 못하고 있었다는 것을 깨닫게 되었습니다. 그중 하나가 Data Fetching에 관련된 것입니다. React대신 Next를 사용하는 개발자분들의 95% 이상은 SSR 때문일 것이라고 생각합니다. 그리고 저 또한 어떤 사람이 "React대신 Next를 왜 사용하냐?"라고 묻는다면 당연히 "SSR 때문에 사용합니다."라고 말할 것입니다. 그런데 만약, 다음 질문으로 "API를 통해 서버로부터 가져온 데이터들은 어떻게 SSR에 활용될 수 있냐?" 라고 묻는.. 2023. 2. 12.
[Next] next-sitemap 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 next-sitemap 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. sitemap이란? sitemap은 구글, 네이버와 같은 검색 사이트들의 크롤링 봇들에게 우리 서비스에서 사용할 수 있는 사이트 주소를 알려주기 위해 활용합니다. 그러면 검색 사이트들의 크롤링 봇들에게 사이트 주소를 알려주는 이유에 대해 궁금증이 생길 수 있습니다. 이 질문에 대한 이유는 우리가 운영하는 서비스가 사용자들의 검색어에 많이 노출되어 더 많은 사용자가 유입될 수 있도록 도와주기 때문입니다. 하지만 상황에 따라서 우리 서비스의 특정 사이트 주소는 외부에 노출되면 안 되는 것이 존재할 수 있습니다. 즉, 검색 사이트의 크롤링 봇들이 특정 사이트에 대한 정보를 크롤링하는것을 막.. 2023. 2. 8.
[React] react-hook-form에서 Cannot read properties of undefined (reading '_f') 발생되는 경우 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form Cannot read properties of undefined (reading '_f') 에러에 대해 적어보는 시간을 가져보려고 합니다. 발생되는 경우 먼저 다음의 간단한 코드를 봐보도록 하겠습니다. import React, { useEffect } from 'react'; import { useForm } from 'react-hook-form'; import * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; interface UseForm { firstPhone: string; secondPhone: string; thirdPhone: strin.. 2023. 2. 1.
[SpringBoot] QueryDSL where절에 1=1 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 QueryDSL where절에 1=1 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. where절에 1=1 사용이 필요한 경우 QueryDSL에서 where절에 1=1 사용이 필요한 경우는 동적으로 사용되는 조건절에 대응하기 위해 주로 활용합니다. 이 부분은 QueryDSL뿐만 아니라 Native JPA나 Mybatis에서도 충분히 사용될 수 있는 요소입니다. 해당 상황을 알아보기 위해 다음과 같은 테이블 및 클래스 파일들이 있다고 가정해 보겠습니다. // table create table school ( no int primary key auto_increment, name varchar(50), address varchar(50) ) // entity.. 2023. 1. 25.
[SpringBoot] 엑셀 파일 생성하여 다운로드하기 안녕하세요. J4J입니다. 이번 포스팅은 엑셀 파일 생성하여 다운로드하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 엑셀 파일 생성 및 다운로드 방법 [ 1. 의존성 추가 ] org.apache.poi poi 5.2.2 org.apache.poi poi-ooxml 5.2.2 [ 2. Controller 작성 ] package com.excel.controller; import org.apache.poi.ss.usermodel.*; import org.apache.poi.xssf.usermodel.XSSFCellStyle; import org.apache.poi.xssf.usermodel.XSSFColor; import org.apache.poi.xssf.usermodel.XSSFFont; impor.. 2023. 1. 18.
[SpringBoot] 이메일 발신하기 안녕하세요. J4J입니다. 이번 포스팅은 이메일 발신하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 구글 계정 2단계 인증하기 해당 글은 이메일을 발신할 때 구글 계정을 활용하여 상대방에게 메일을 전달하는 방법을 작성하려고 합니다. 구글 계정을 활용하지 않는 케이스에서는 다른 상황들이 존재할 수 있으니 참고 부탁드립니다. 먼저, 구글 계정으로 이메일을 발신할 때 구글 계정 2단계 인증을 통한 앱 비밀번호를 취득해야 합니다. 앱 비밀번호를 생성하지 않을 경우 올바르게 구현하더라도 동작이 정상적으로 수행되지 않을 수 있습니다. 다음 단계를 거쳐 구글 계정 2단계 인증을 통한 앱 비밀번호를 생성해 보겠습니다. [ 1. 구글 계정 로그인 ] [ 2. Google 계정 접속 ] [ 3. 2단계 인증하기 ] .. 2023. 1. 16.
728x90
반응형

티스토리툴바