본문 바로가기
728x90
반응형

전체 글407

[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.
[CSS] linear-gradient에 transition 적용하기 안녕하세요. J4J입니다. 이번 포스팅은 linear-gradient에 transition 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 일반적인 경우 linear-gradient에 transition을 적용한 결과물을 만들기 위해 일반적으로 다음과 같은 형태의 코드를 작성할 것입니다. See the Pen linearGradientTransition-problem by 김 성찬 (@ksccmp) on CodePen. 위의 코드는 버튼을 클릭할 때마다 배경색을 입혀주는 코드입니다. 배경색은 linear-gradient로 입혀주고 transition을 적용했기 때문에 일반적으로 위의 코드에서 결과물이 transition에 적용된 시간 동안 천천히 배경색이 입혀지는 것을 생각할 수 있습니다. 하지.. 2023. 1. 2.
[SpringBoot] encodeURIComponent, decodeURIComponent 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 encodeURIComponent, decodeURIComponent 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 정확히 일치해서 사용하기 먼저 encodeURIComponent와 decodeURIComponent는 자바스크립트에서 문자를 인코딩, 디코딩하기 위해 사용되는 함수로 URI를 구성할 때 일부 문자에 의해 발생되는 문제들을 해결할 때 주로 사용합니다. 그리고 이런 목적으로 사용되는 두 함수와 동일한 결과가 나오는 것을 스프링에서도 사용하고자 하는 상황들이 가끔씩 발생할 수 있습니다. 이런 목적을 달성하기 위해 자바에서는 URLEncoder와 URLDecoder를 제공합니다. 하지만 문제점은 URLEncoder의 결괏값은 encodeURICo.. 2022. 12. 29.
[SpringBoot] AWS Lambda로 배치 만들기 (3) - GitLab으로 자동배포하기 안녕하세요. J4J입니다. 이번 포스팅은 AWS Lambda 배치 만들기 마지막인 GitLab으로 자동 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [SpringBoot] AWS Lambda로 배치 만들기 (1) - Spring 세팅 및 로컬 테스트 [SpringBoot] AWS Lambda로 배치 만들기 (2) - Lambda 생성해서 배포하기 IAM 설정 [ 1. IAM 접속 ] [ 2. 사용자 추가 ] 좌측에서 사용자 메뉴를 선택한 뒤 우측에 있는 사용자 추가 버튼을 클릭합니다. [ 3. 사용자 정보 설정 - 세부 정보 및 액세스 유형 설정 ] 세부 정보 설정에서는 사용하실 사용자 이름을 자유롭게 입력해주면 됩니다. 액세스 유형에서는 액세스 키를 선택해주면 됩니다. [ 4. 사.. 2022. 12. 15.
[SpringBoot] AWS Lambda로 배치 만들기 (2) - Lambda 생성해서 배포하기 안녕하세요. J4J입니다. 이번 포스팅은 AWS Lambda로 배치 만들기 두 번째인 Lambda 생성해서 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [SpringBoot] AWS Lambda로 배치 만들기 (1) - Spring 세팅 및 로컬 테스트 Spring 세팅 이전 글을 참고하면 DB에 로그 데이터를 쌓는 기본적인 비즈니스 로직 구성이 완료되어 있습니다. 이번엔 구성되어 있는 비즈니스 로직들이 Lambda에 배포했을 때 정상적으로 동작될 수 있는 추가 설정들을 해보도록 하겠습니다. [ 1. 의존성 추가 ] org.springframework.cloud spring-cloud-function-adapter-aws 3.2.8 com.amazonaws aws-lambda-jav.. 2022. 12. 12.
[SpringBoot] AWS Lambda로 배치 만들기 (1) - Spring 세팅 및 로컬 테스트 안녕하세요. J4J입니다. 이번 포스팅은 AWS Lambad로 배치 만들기 첫 번째인 Spring 세팅 및 로컬 테스트에 대해 적어보는 시간을 가져보려고 합니다. DB 세팅 이번에 Lambda를 이용해 만들어보려고 하는 것은 배치를 돌려 주기적으로 DB에 로그 데이터를 적재하는 것입니다. 그러므로 로그 데이터 적재를 위해 사용될 테이블을 생성하도록 하겠습니다. 테이블을 생성하기에 앞서 Lambda에 작업한 코드를 배포하기 때문에 로컬에서 사용하는 DB로 해주시면 안 됩니다. [AWS] RDS로 MySQL 사용 환경 구성과 같은 글들을 참고하여 로컬이 아닌 서버에서 DB를 생성해주시면 됩니다. 데이터 적재를 위해 사용될 DB 스키마는 다음과 같습니다. create table lambda_log ( no b.. 2022. 12. 5.
[AWS] ECS 사용하기 (4) - ECS 수정하기 안녕하세요. J4J입니다. 이번 포스팅은 ECS 사용하기 네 번째인 ECS 수정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [AWS] ECS 사용하기 (1) - GitLab으로 ECR에 이미지 push하기 [AWS] ECS 사용하기 (2) - ECS 생성하여 배포하기 (with. EC2) [AWS] ECS 사용하기 (3) - GitLab으로 ECS 인스턴스에 배포하기 ECS 수정하는 방법 ECS를 수정하기 위해 ECS 클러스터에 접속을 했을 때 수정을 위한 기능이 따로 보이지 않는 것을 확인할 수 있습니다. 그리고 ECS를 처음 생성할 때 CloudFormation 이란 것이 함께 생성되는 것도 확인할 수 있습니다. 즉, ECS 클러스터 정보 수정을 위해서는 CloudFormation을.. 2022. 12. 5.
[AWS] ECS 사용하기 (5) - ECS 외부 인스턴스 추가하기 안녕하세요. J4J입니다. 이번 포스팅은 ECS 사용하기 마지막인 ECS 외부 인스턴스 추가하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [AWS] ECS 사용하기 (1) - GitLab으로 ECR에 이미지 push하기 [AWS] ECS 사용하기 (2) - ECS 생성하여 배포하기 (with. EC2) [AWS] ECS 사용하기 (3) - GitLab으로 ECS 인스턴스에 배포하기 [AWS] ECS 사용하기 (4) - ECS 수정하기 ECS 외부 인스턴스 추가하는 방법 [ 1. EC2 접속 ] [ 2. 인스턴스 시작 ] 왼쪽에 있는 인스턴스 메뉴를 선택한 뒤 오른쪽에 있는 인스턴스 시작 버튼을 클릭해줍니다. [ 3. 인스턴스 정보 입력 - 이름 및 태그 ] 먼저 다음과 같이 사용하고자 하.. 2022. 11. 29.
[AWS] ECS 사용하기 (3) - GitLab으로 ECS 인스턴스에 배포하기 안녕하세요. J4J입니다. 이번 포스팅은 ECS 사용하기 세 번째인 GitLab으로 ECS 인스턴스에 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [AWS] ECS 사용하기 (1) - GitLab으로 ECR에 이미지 push하기 [AWS] ECS 사용하기 (2) - ECS 생성하여 배포하기 (with. EC2) GitLab으로 ECS 인스턴스에 배포하는 방법 (1) - IAM 설정 [AWS] ECS 사용하기 (1) - GitLab으로 ECR에 이미지 push하기를 참고하시면 GitLab으로 ECR에 이미지 push하기 위해 기본적은 IAM 설정과 GitLab 설정들이 이루어져 있습니다. 이번 글은 위의 링크 설정에서 이어지는 추가 설정을 할 예정이니 글을 읽을 때 참고 부탁드립니다... 2022. 11. 18.
[AWS] ECS 사용하기 (2) - ECS 생성하여 배포하기 (with. EC2) 안녕하세요. J4J입니다. 이번 포스팅은 ECS 사용하기 두 번째인 ECS 생성하여 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [AWS] ECS 사용하기 (1) - GitLab으로 ECR에 이미지 push하기 ECS란? ECS는 Elastic Container Service의 약어로 AWS에서 제공하는 완전 관리형 컨테이너 오케스트레이션 서비스입니다. ECS는 컨테이너화된 서비스를 간편하게 배포 및 관리할 수 있도록 도와주기 때문에 ECS를 사용한다면 단순하게 EC2 인스턴스를 각각 생성해서 사용하는 것보다 더 효율적으로 서버 관리를 할 수 있습니다. ECS를 사용할 땐 다음과 같이 크게 2가지로 구분하여 사용할 수 있습니다. EC2 인스턴스 Fargate EC2 인스턴스는 다들 .. 2022. 11. 9.
728x90
반응형

티스토리툴바