API Gateway 설정 시 궁금했던 부분에 대해 알아본 내용을 정리합니다. Stage의 이름 API Gateway에서 Stage의 이름은 여러 환경 또는 버전을 식별하는 데 사용됩니다. 일반적으로 다음과 같은 Stage 이름을 사용합니다: dev (개발 환경): 개발자들이 API를 테스트하고 디버그하는 데 사용되는 환경입니다. 여기서는 잦은 변경 + 실험적인 기능이 포함될 수 있습니다. staging (스테이징 환경): 개발이 완료된 후 QA 또는 프리-프로덕션 테스트를 위해 배포되는 환경입니다. 실제 운영 환경과 매우 유사한 환경입니다. prod (프로덕션 환경): 이 환경은 실제 사용자에게 서비스를 제공하는 운영 환경입니다. 안정성과 성능이 매우 중요하며, 실제 데이터와 연결됩니다. 이는 절대적인..
Lambda Function URL 설정 옵션 중 하나인 AWS_IAM 옵션은 보안과 액세스 제어에 중요한 역할을 한다고 합니다. AWS_IAM과 NONE 중 어떤 옵션으로 진행해야 하는지 정하기 위해 찾아본 정보를 정리했습니다. AWS_IAM 옵션이란? AWS_IAM 옵션을 선택하면 AWS Identity and Access Management (IAM)을 통해 권한을 부여하지 않은 사용자나 역할은 AWS Lambda 함수에 액세스할 수 없습니다. AWS_IAM을 사용하려면 다음과 같은 과정이 필요합니다. 1. IAM 사용자 및 역할 설정 AWS IAM을 사용하여 액세스 권한을 가진 사용자 또는 역할을 생성하고 구성합니다. 이 엔터티들은 Lambda 함수를 호출할 수 있는 권한을 가져야 합니다. 2. ..
Windows에서 아마존 CLI 설치 및 설정하기 아마존 CLI를 Windows 환경에서 이용하려면 msi 파일을 다운로드할 필요가 있습니다. 제 경우에는 주로 VScode에서 bash 터미널을 이용하기에 해당 환경에 맞게 설정했습니다. 명령 프롬프트를 이용하는 경우에는 별도의 설정이 필요하지 않을 것 같습니다. 1. MSI 다운로드 및 설치 아마존 CLI의 최신 버전을 아마존 CLI 다운로드 페이지에서 다운로드한 후, MSI 설치 파일을 실행하여 설치를 진행합니다. 기본 설정을 그대로 사용해도 무방합니다. 2. CLI 버전 확인 Windows 명령 프롬프트를 열고 아마존 CLI 버전을 확인합니다. aws --version 명령 프롬프트를 사용하는 경우에는 이 과정까지만으로도 충분하지만, VScode b..
이전 자료들을 보면 heroku를 사용하여 프로젝트를 배포하는 것이 정석으로 여겨질 정도였으나, heroku 유료화 후 다들 배포 서비스 유목민이 된 것 같아 다른 배포처를 알아보았습니다. fly.io, 렌더, 레일웨이 등 여러 옵션을 고려하던 와중, 디스코드 봇 서버를 AWS Lambda로 배포한 후기글들을 읽고 Lambda로 결정하게 되었습니다. AWS Lambda란? AWS Lambda는 클라우드 컴퓨팅 서비스 중 하나로, 서버리스 컴퓨팅 환경에서 코드를 실행하고 관리하는 데 사용됩니다. 서버를 구축할 필요 없이 단순히 코드를 작성하고, Lambda에 업로드하고, 코드가 실행될 트리거를 설정하기만 하면 됩니다. Lambda는 이 코드를 자동으로 실행하고 필요할 때 스케일링하여 더 많은 요청을 처리합..
이전 글에서 알아보았던 다소 번거로웠던 과정을, GitHub Actions를 사용하여 자동화하는 과정을 정리합니다. Github Page 배포하기 : root에 index.html이 없는 경우 (1) GitHub Pages를 활용하여 프로젝트를 웹에 호스팅할 때, root에 index.html이 없는 경우 404 오류 또는 README.md 파일이 첫 화면으로 뜨게 됩니다. 이런 경우, 기존 프로젝트 구조를 변경하지 않으면서도 gh- energneer.tistory.com GitHub Actions란? GitHub Actions은 GitHub 저장소에 직접 통합된 CI/CD(지속적 통합 및 지속적 배포) 서비스입니다. 코드 변경이 감지될 때마다 자동으로 워크플로우를 실행하여 빌드, 테스트 및 배포 과정을..
GitHub Pages를 활용하여 프로젝트를 웹에 호스팅할 때, root에 index.html이 없는 경우 404 오류 또는 README.md 파일이 첫 화면으로 뜨게 됩니다. 이런 경우, 기존 프로젝트 구조를 변경하지 않으면서도 gh-pages 브랜치를 만들고 public 디렉토리의 내용을 해당 브랜치의 루트로 이동할 수 있습니다. 1. gh-pages 브랜치 생성 로컬 저장소에서 새로운 브랜치를 생성합니다. git checkout -b gh-pages git checkout -b 명령은 Git에서 새로운 브랜치를 생성하고 해당 브랜치로 전환하는 명령입니다. 여기서 -b 옵션은 새로운 브랜치를 생성하겠다는 것을 나타내며, 은 새로운 브랜치의 이름을 지정하는 부분입니다. 따라서 gh-pages 브랜치를 ..
z-index가 높은 요소가 다른 요소 위에 놓이면 해당 요소 위의 요소를 가리게 되므로, display:none으로 설정했더라도 클릭 이벤트가 전달되지 않을 수 있습니다. Super-Sub 관계가 아닌 경우 다음과 같이 z-index값 때문에 btn이 overlay 요소 아래에 위치하는 경우, 클릭하세요 .container { position: relative; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display:none; /* 보이지 않음 */ z-index: 100; /* 다른 요소 위에 위치 */ pointer-events: none; /* 다른 요소에 이벤트 전파 중단 */ } .btn { pos..
const purgecss = require('@fullhuman/postcss-purgecss')({ content: ['./path/to/your/index.html'], // index.html의 경로를 정확히 지정하세요. defaultExtractor: content => content.match(/[\\w-/:]+(? 위와 같이 제대로 PostCSS 설정 파일을 생성했으나, npx postcss ./src/output.css -o ./src/purged-output.css 명령어로 실행하면 아래와 같은 오류가 발생하는 경우가 있습니다. ReferenceError: module is not defined in ES module scope This file is being treated as an ..
npm install -D tailwindcss 에서 -D 옵션이란? -D 옵션은 --save-dev 옵션의 축약형입니다. 이 옵션은 패키지를 프로젝트의 개발 의존성(dependency)으로 설치하도록 지시합니다. 일반적으로 프로젝트에는 런타임(runtime) 의존성과 개발(development) 의존성이 있습니다. 런타임 의존성 : 애플리케이션이 실행될 때 필요한 패키지이며, 이 패키지들은 애플리케이션의 동작에 직접적으로 기여합니다. 개발 의존성 : 개발 중에만 필요한 패키지로, 예를 들어 빌드 도구, 테스트 프레임워크, 코드 분석 도구 등이 여기에 속합니다. D 또는 -save-dev 옵션을 사용하면 패키지가 개발 의존성으로 설치되며, 이 패키지들은 프로젝트를 개발하는 동안에만 필요합니다. 런타임에는..
