728x90 반응형 전체 글419 [AWS] Transit Gateway Blackhole 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Transit Gateway Blackhole 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [AWS] VPC 피어링 연결하기 [AWS] Transit Gateway 사용하기 Blackhole이란? Transit Gateway에서 Blackhole은 특정 대역을 통신할 수 없게 만들려고 사용됩니다. 예를 들면 Routes 설정에 10.0.1.0/24 대역이 연결 및 전파되도록 설정했는데 10.0.1.184/32 대역에 대해서만 통신을 불가하게 만들고 싶다면 Blackhole을 활용해 볼 수 있습니다. 이처럼 Blackhole을 활용한다면 통신이 가능한 대역들을 하나씩 등록해주지 않고 더 큰 범위의 대역을 등록해줬다가 통신이 불가능해야 하는 대역.. 2023. 7. 25. [AWS] Transit Gateway 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Transit Gateway 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [AWS] VPC 피어링 연결하기 Transit Gateway란? Transit Gateway는 네트워크 중앙 Hub 관리형 서비스로 VPC와 온프레스미 네트워크를 서로 연결하는데 도움을 줍니다. VPC 피어링에 대해 알고 계신 분들은 Transit Gateway의 역할이 유사하다는 것을 느끼실 겁니다. 결론부터 말하면 Transit Gateway는 VPC 피어링의 단점을 보완하는데 도움을 줍니다. VPC 피어링의 단점은 1:1 연결만 가능하기 때문에 n개의 VPC들의 피어링이 서로 필요한 경우 n(n-1)/2개 만큼의 피어링 연결을 해줘야 합니다. Transit Gat.. 2023. 7. 22. [AWS] VPC 피어링 연결하기 안녕하세요. J4J입니다. 이번 포스팅은 VPC 피어링 연결하는 방법에 대해 적어보는 시간을 가져보려고 합니다. VPC 피어링이란? VPC 피어링은 서로 다른 두 개의 VPC들 간에 라우팅을 할 수 있도록 연결해 주는 것을 의미합니다. 일반적으로 VPC 피어링은 Private Subnet 내부에 있는 AWS 자원들을 서로 연결할 때 활용됩니다. 하지만 그렇다고 해서 Public Subnet 내부에 있는 AWS 자원들을 서로 연결할 때 활용할 수 없다고 말할 수는 없습니다. 왜냐하면 VPC 피어링은 외부 인터넷 망을 거치지 않고 다른 VPC 내부에 있는 AWS 자원에 접근하기 때문에 외부 인터넷 망을 사용하는 것보다 더 빠르게 접근할 수 있게 도와주기 때문입니다. VPC 피어링의 특징들은 다음과 같이 있습.. 2023. 7. 20. [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/dna/kT8fV/btskKl5skJt/AAAAAAAAAAAAAAAAAAAAAL6FAuEx02D54p7bCzgDFi5gh40pKwnTnc7pL5fTN79V/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=B3qGyc40KaXKuTB3xCx2WptXgV0%3D 기본 설정 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. 이전 1 ··· 3 4 5 6 7 8 9 ··· 24 다음 728x90 반응형
