본문 바로가기
728x90
반응형

전체 글416

[AWS] Session Manager를 이용하여 EC2 인스턴스에 접근하기 안녕하세요. J4J입니다. 이번 포스팅은 Session Manager를 이용하여 EC2 인스턴스에 접근하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Session Manager란 ? Session Manager는 종합 관리형 AWS System Manager 기능으로 SSH를 사용하는 것 없어 EC2 인스턴스에 접근할 수 있도록 도와줍니다. AWS에서 Session Manager의 장점들로 얘기하는 것들은 다음의 것들이 있습니다. 인스턴스에 접속하기 위한 인바운드 설정이 필요 없음 Bastion 호스트를 유지할 필요 없음 SSH 키 관리를 할 필요 없음 Session 활동에 대한 로깅 처리 즉, 그동안 인스턴스에 접근할 때 해왔던 불필요한 작업들을 단순하게 AWS에 접속하여 AWS CLI 클릭 한.. 2023. 7. 17.
[React] Vite 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 vite 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Vite란? vite는 webpack, rollup 등과 같이 모듈 번들링을 수행할 때 사용되는 번들러 중 하나입니다. vite가 처음 등장하면서 개발자들에게 알려지기 시작할 때 봤었던 "리액트가 10배가 빨라집니다" 라는 글이 아직도 생각이 납니다. 이런 글의 내용처럼 vite의 가장 큰 특징 중 하나는 속도가 빠르다는 겁니다. ESM, HMR, ESBuild 등을 활용하여 서버 구동되는 시간, 번들링 속도, 코드 갱신 속도 등 다양한 방면에서 빠른 속도를 자랑하기 때문에 프로젝트의 규모가 커질수록 느낄 수 있었던 답답했던 번들링 속도 문제들을 개선하는데 도움을 줍니다. 번들링 속도 문제들을 개선.. 2023. 7. 11.
[React] Zustand 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Zustand 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Zustand란? zustand는 react에서 사용할 수 있는 상태 관리 라이브러리 중 하나로 redux와 같이 flux 패턴을 활용하는 기술 중 하나입니다. react에서 활용되는 상태 관리 라이브러리들은 여러 개가 있는데 대표적으로 redux, zustand, jotai, recoil 등이 존재하며 최근 npm 트렌드를 확인해 보면 redux 다음으로 가장 많이 활용되는 라이브러리라고 볼 수 있습니다. react를 처음 배울 때 최초로 사용해봤던 상태 관리 라이브러리는 redux인데 전역으로 데이터를 관리하기 위해 이렇게 까지 코드가 장황해야 하는 생각이 들었던 기억이 있습니다. 그래서 .. 2023. 6. 29.
[Next] Next13의 새로운 기능 알아보기 (5) - Metadata 안녕하세요. J4J입니다. 이번 포스팅은 Next13의 새로운 기능 알아보기 마지막인 Metadata에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 Opengraph 이미지 적용을 위해 아래 이미지를 활용할 예정입니다. 테스트가 필요하신 분은 해당 경로를 이용하여 동일하게 사용해 보셔도 무방합니다. https://blog.kakaocdn.net/dn/kT8fV/btskKl5skJt/XcqUQY5A7DDGcqU4iIY9P0/img.png 기본 설정 next13 이전에 metadata 설정을 위해 일반적으로 _document 파일을 활용하거나 layout을 이용하여 적용해 볼 수 있었습니다. 간단한 예시로 다음과 같이 코드를 작성해볼 수 있습니다. // src/layouts/metadata/la.. 2023. 6. 21.
[Next] Next13의 새로운 기능 알아보기 (4) - Link 안녕하세요. J4J입니다. 이번 포스팅은 Next13의 새로운 기능 알아보기 네 번째인 Link에 대해 적어보는 시간을 가져보려고 합니다. a태그 사용 제거 next13 이전에 Link를 이용하여 페이지 이동을 위한 화면을 구성할 때 Link 아래에 a태그를 사용하신 경험이 있을 겁니다. 일반적인 상황에서는 next13 이전에도 a태그를 사용하지 않아도 문제 될 것은 없습니다. 하지만 Link 아래에 추가적인 다른 태그를 사용하거나 styledComponents, emotion 등을 이용한 커스텀 컴포넌트를 넣는 경우 페이지 이동은 가능하지만 a태그가 사라지는 문제를 발생시킵니다 Link의 사용 목적은 페이지 이동을 하기 위해 활용하기 때문에 전혀 문제 없는 것 아닌가? 라고 생각할 수 있지만 a태그가 .. 2023. 6. 11.
[Next] Next13의 새로운 기능 알아보기 (3) - Font 안녕하세요. J4J입니다. 이번 포스팅은 Next13의 새로운 기능 알아보기 세 번째인 Font에 대해 적어보는 시간을 가져보려고 합니다. Google Font next를 이용하여 웹 페이지를 개발할 때 원하는 형태의 font를 적용시키기 위해 가장 많이 사용하는 방법으로 google font를 생각할 수 있습니다. next13 이전에 google font를 적용시키기 위해서는 Google Fonts에 접속하여 원하는 스타일의 폰트를 선택한 뒤 다음과 같이 google에서 하라는 대로 적용시켜 주면 됩니다. import Head from 'next/head'; const FontGoogle = () => { return ( Font Google Page ); }; export default FontGoo.. 2023. 6. 7.
[Next] Next13의 새로운 기능 알아보기 (2) - Data Fetching 안녕하세요. J4J입니다. 이번 포스팅은 Next13의 새로운 기능 알아보기 두 번째인 Data Fetching에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 next의 data fetching이 무엇인지에 대해 궁금하신 분들은 다음 글들을 참고하시면 됩니다. [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR [Next] Data Fetching에 대해 알아보기 (2) - SSG / Dynamic Routing [Next] Data Fetching에 대해 알아보기 (3) - ISR SSR (Server Side Rendering) next13으로 넘어오면서 SSR을 포함한 여러 fetching 방법이 간소해지며 비슷한 유형으로 처리될 수 있도록 변경되었습니다... 2023. 6. 4.
[Next] Next13의 새로운 기능 알아보기 (1) - Routing과 RSC 안녕하세요. J4J입니다. 이번 포스팅은 Next13의 새로운 기능 알아보기 첫 번째인 Routing과 RSC에 대해 적어보는 시간을 가져보려고 합니다. Routing 기본 방법 next13 이전에는 routing 처리를 위해 pages폴더의 하위 경로에 원하는 경로를 구성하는 방법을 사용했습니다. next13에서도 해당 방식을 지속적으로 지원을 하고 있기에 동일하게 사용해도 문제없지만 pages대신 app을 이용한 새로운 routing 처리 방식이 등장했습니다. pages를 이용하여 routing 경로를 구성했던 것과 유사하게 app 하위 경로에 입력한 폴더 명을 기준으로 routing 경로가 구성되기 때문에 pages를 이용하여 환경을 구성했던 것과 비슷한 개발 경험을 제공해주고 있습니다. Page와.. 2023. 5. 29.
[React] Tailwind 사용하기 (3) - 커스텀(Custom) 하기 안녕하세요. J4J입니다. 이번 포스팅은 tailwind 사용하기 마지막인 커스텀하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] Tailwind 사용하기 (1) - 개념 및 설정 [React] Tailwind 사용하기 (2) - StyledComponents와 CSS 적용 비교하기 Theme 커스텀 theme 커스텀은 기본적으로 tailwind에서 제공해 주는 theme을 사용자의 스타일에 맞게 재 정의하는 것으로 tailwind.config.js에서 적용할 수 있습니다. 색상, 글자 크기, 너비 등 tailwind를 이용하여 적용하고 싶은 css 들을 원하는 데로 추가해 줄 수 있으며 다음과 같이 설정하여 적용해 볼 수 있습니다. // tailwind.config.js /*.. 2023. 5. 24.
[React] Tailwind 사용하기 (2) - StyledComponents와 CSS 적용 비교하기 안녕하세요. J4J입니다. 이번 포스팅은 tailwind 사용하기 두 번째인 styledComponents와 CSS 적용 비교하기에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] Tailwind 사용하기 (1) - 개념 및 설정 들어가기에 앞서 이전 글에서도 간단하게 확인해 볼 수 있는 것처럼 tailwind에 css를 적용할 땐 tailwind에서 기본적으로 정의해 둔 class 명을 이용해야 합니다. 색상, 크기, 여백 등의 모든 css들이 기본적인 css 구조에서 스타일을 적용하기 위해 사용하던 방식과 모두 상이하기에 처음 tailwind를 사용하시는 분들이라면 tailwind 공식 문서를 당분간 필수적으로 참고하시는 것을 추천드립니다. 그리고 이번 글에서는 일반적으로 자주 사용되.. 2023. 5. 22.
[React] Tailwind 사용하기 (1) - 개념 및 설정 안녕하세요. J4J입니다. 이번 포스팅은 tailwind 사용하기 중 첫 번째인 개념 및 설정에 대해 적어보는 시간을 가져보려고 합니다. Tailwind란? tailwind는 유틸리티 우선(Utility-First) css 프레임워크로 불립니다. 여기서 말하는 유틸리티 클래스는 버튼, 모달 등과 같이 주변을 구성하기 위한 css가 아닌 빨간색 글자 색상, xl 사이즈의 글자 크기 등과 같이 하나의 css에 정의된 속성과 값을 가지는 걸 의미합니다. 즉, 유틸리티 우선이라고 하는 것은 bootstrap처럼 기존에 정의된 값을 가져와 사용하는 것이 아닌 사용자가 원하는 데로 각각의 속성값을 적용하는 방식이라고 말할 수 있습니다. // css .container { border: 2px solid black;.. 2023. 5. 17.
[React] Cypress Custom Command 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Cypress Custom Command 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Custom Command란? Custom Command는 테스트 코드를 작성할 때 Cypress에서 제공해 주는 명령어가 아닌 사용자가 원하는 의도대로 동작될 수 있는 명령어를 자체적으로 구현한 것을 의미합니다. Custom Command를 사용하는 대표적인 이유는 재사용성을 높이기 위함이라고 생각합니다. 테스트 코드를 작성하다 보면 중복되는 코드들이 수 없이 발생될 수 있습니다. 그럴 때마다 각 파일들에 중복 코드들을 매번 작성해주는 것은 비효율적이며 유지보수하기 어렵게 만들기 때문에 Custom Command를 생성한 뒤 단순 호출하는 방식을 선택하여 코드 개선.. 2023. 5. 14.
[SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (4) - GitLab으로 Lambda 자동배포하기 안녕하세요. J4J입니다. 이번 포스팅은 AWS Lambda와 API Gateway로 Serverless 구성하기 마지막인 GitLab으로 Lambda 자동배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (1) - Spring 세팅 및 로컬 테스트 [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (2) - Lambda 생성해서 배포하기 [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (3) - API Gateway에 Lambda 연결하기 IAM 설정 [ 1. IAM 접속 ] [ 2. 사용자 추가 .. 2023. 5. 10.
[SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (3) - API Gateway에 Lambda 연결하기 안녕하세요. J4J입니다. 이번 포스팅은 AWS Lambda와 API Gateway로 Serverless 구성하기 세 번째인 API Gateway에 Lambda 연결하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (1) - Spring 세팅 및 로컬 테스트 [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (2) - Lambda 생성해서 배포하기 API Gateway 세팅 [ 1. API Gateway 접속 ] [ 2. REST API 구축 ] [ 3. API Gateway 상세 설정 ] 상세 설정은 다음과 같이 해주시면 됩니다. 그리고 여기서 설정.. 2023. 5. 5.
[SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (2) - Lambda 생성해서 배포하기 안녕하세요. J4J입니다. 이번 포스팅은 AWS Lambda와 API Gateway로 Serverless 구성하기 두 번째인 Lambda 생성해서 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (1) - Spring 세팅 및 로컬 테스트 Spring 세팅 이전 글을 확인해보시면 로컬에서 Lambda에 배포할 Spring 코드를 작성하여 테스트한 것을 확인해 볼 수 있습니다. 해당 설정을 기반으로 Lambda에 배포하기 위한 추가 설정을 다음과 같이 진행해보겠습니다. [ 1. 의존성 추가 ] // Lambda Deploy import com.github.jengelman.gradle.plug.. 2023. 4. 30.
[SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (1) - Spring 세팅 및 로컬 테스트 안녕하세요. J4J입니다. 이번 포스팅은 AWS Lambda와 API Gateway로 Serverless 구성하기의 첫 번째인 Spring 세팅 및 로컬 테스트에 대해 적어보는 시간을 가져보려고 합니다. Serverless 란? Serverless는 개발자가 서버를 직접 관리하지 않아도 애플리케이션을 배포하여 사용자에게 서비스를 제공해 주는 개발 모델을 의미합니다. Serverless의 특징들은 다음과 같이 있습니다. 개발자는 배포를 위한 부분만 신경쓰도록 도와줌 배포를 제외한 유지 관리 및 스케일링 등을 자체적으로 관리해 줌 사용자가 없으면 활성화되어 있지 않음 사용자가 생기면 활성화되었다가 모든 요청이 처리되면 대기 상태로 전환 서버가 동작되는 시간이 아니라 활성화되어 있는 시간에 비례하여 비용을 계.. 2023. 4. 28.
[AWS] ALB에 CloudFront 적용하기 안녕하세요. J4J입니다. 이번 포스팅은 ALB에 CloudFront 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글들을 통해 ALB 설정 방법과 Route53에 도메인을 등록하는 방법을 참고하시면 글을 읽는데 이해를 도울 수 있습니다. [AWS] ALB(Application Load Balancer) 사용하기 (Feat, SSL 설정) [AWS] Cafe24 도메인 AWS EC2에 연결하기 (Feat. Route53) CloudFront란? CloudFront는 AWS에서 제공해주는 CDN (Content Delivery Network) 서비스로 이미지 파일, 정적 및 동적 콘텐츠를 사용자들에게 더 빨리 제공하도록 도와줍니다. CDN이 사용자들에게 콘텐츠를 더 빨리 제.. 2023. 4. 25.
[React] Cypress API 요청 기다리기 안녕하세요. J4J입니다. 이번 포스팅은 cypress에서 api 요청 기다리는 방법에 대해 적어보는 시간을 가져보려고 합니다. API 요청을 기다려야 하는 경우 cypress를 사용하면서 api 요청을 기다려야 하는 경우는 정말 단순하게 api 요청 처리가 오래 걸리는 작업들이라고 얘기할 수 있습니다. 대부분의 api를 처리할 때 시간이 오래걸리지 않겠지만 시간이 오래 걸리는 일부 api들에 대해서 cypress 테스트를 진행하려고 하면 api가 응답되는 시간을 모두 기다리지 않고 이후 처리를 진행하기 때문에 생각하던 것과 다른 결과를 얻게 됩니다. 이와 같은 상황을 테스트를 위해 다음과 같은 api를 이용하여 데이터를 호출한 뒤 화면에 그려주는 코드를 작성해 볼 수 있습니다. import axios .. 2023. 4. 23.
728x90
반응형

티스토리툴바