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 옵션을 사용하면 패키지가 개발 의존성으로 설치되며, 이 패키지들은 프로젝트를 개발하는 동안에만 필요합니다. 런타임에는..
CSS 프레임워크인 Tailwind CSS와 PurgeCSS를 함께 사용하여 프로젝트의 스타일 시트 크기를 줄이는 방법 Tailwind CSS의 크기가 커질 수 있다 Tailwind CSS는 유틸리티-퍼스트(Utility-first) 방식의 CSS 프레임워크로, 반응형 디자인, 상태 변화, 그리고 커스텀 컴포넌트를 쉽게 구현할 수 있게 해줍니다. 하지만, 많은 유틸리티 클래스로 인해 최종 CSS 파일의 크기가 커질 수 있는 단점이 있습니다. 이를 해결하기 위해 PurgeCSS를 사용할 수 있습니다. PurgeCSS란? PurgeCSS는 사용되지 않는 CSS를 제거해주는 툴입니다. 이를 사용하면 웹사이트의 로딩 시간을 줄이고 성능을 향상시킬 수 있습니다. Tailwind CSS 및 purgeCSS를 공식 ..
"405 Method Not Allowed" Visual Studio Code의 Live Server 확장 기능을 사용할 때, 백엔드 호출 시 이런 오류가 발생하는 이유 중 하나는 Live Server와 Node.js 서버를 혼동하는 경우입니다. 클라이언트(HTML, CSS, JS 파일)는 Live Server를 통해 제공되고, 백엔드 API(server.js)는 Node.js 서버를 통해 제공됩니다. 클라이언트 측 JavaScript에서 API 요청을 할 때, 올바른 서버 주소(예: http://localhost:3000/api/sample)를 사용하면 "405 Method Not Allowed" 오류를 해결할 수 있습니다. Live Server Live Server는 일반적으로 정적 파일(HTML, ..
