현재 제 커스텀 스킨 카테고리에 마우스 오버 시 줄이 생기는 이벤트에 대한 포스팅 요청을 받아 작성합니다. 티스토리 클래스의 구조 우선 카테고리를 커스터마이징 하려면 카테고리의 클래스 구조를 이해해야 합니다. 아래 이미지처럼 상위 카테고리에는 .link-item 클래스가 적용되어 있으며, 하위 카테고리에는 .link-sub-item 클래스가 적용되어 있습니다. 이는 hELLO스킨 기준이며, 다를 수도 있으므로 개발자 도구를 열어 정확한 클래스를 확인해보면 됩니다. 기본 CSS 설정 #sidebar #category .tt_category ul li::after { width: 0%; height: 2px; position: absolute; transition: width 0.4s; background-..
프로젝트 모듈화 과정에서 발생한 문제를 해결한방법과 보안에 대해 고민한 부분을 정리했습니다. 모듈화란? 모듈화는 소프트웨어 개발에서 중요한 단계 중 하나로, 코드를 작은 모듈로 분리하여 관리 및 유지보수를 용이하게 합니다. 1. 파일경로 문제 해결 : import file not found 문제 상황 이전에는 모두 동일한 파일에 있었는데 모듈화를 하며 다른 파일로 나눠지게 되었습니다. project/ ├── server/ │ ├── processChatGPTRequest.js │ └── lambda/ │ └── handler.js └── public/ └── index.html 이 상황에서 lambda 디렉토리 내의 handler.js가 processRequest.js 모듈을 import 해와야 하는 구..
CORS(Cross-Origin Resource Sharing) 오류 메시지 Access to XMLHttpRequest at 'URL' from origin 'origin' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. CORS 오류는 웹 애플리케이션이 다른 출처(origin)의 리소스에 접근하려 할 때 발생하는 오류입니다. 보안상의 이유로 브라우저는 다른 출처의 리소스에 대한 요청을 차단하는데, 이때 서버 측에서 CORS 정책을 설정해야 합니다. 1. AWS Lambda 콘솔에서 CORS 설정 CORS 오류를 해결하기 위해서는 우선 서버 측에서 Acc..
Bash 스크립트에서 숨겨진 특수 문자 문제 해결하기 Bash 스크립트를 실행할 때, 올바른 파일 경로를 입력했음에도 다음과 같은 오류 메시지가 나타났습니다. rm: cannot remove ''$'\342\200\252''파일경로': No such file or directory 이 메시지는 파일 경로에 유효하지 않은 문자가 포함되어 있음을 나타냅니다. 위 메시지를 보면 파일 경로 외에도 '$'\342\200\252'' 라는 문자가 포함되어 있는 점을 확인할 수 있습니다. 즉, 파일 경로에 숨겨진 특수 문자가 포함되어 있던 것입니다.. 복사-붙여넣기 시 발생할 수 있는 문제라고 합니다. 해결 방법 경로 문자열 확인: 경로 내의 숨겨진 특수 문자나 공백을 찾아내고 제거합니다. 텍스트 편집기에서 이러한 숨..
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(지속적 통합 및 지속적 배포) 서비스입니다. 코드 변경이 감지될 때마다 자동으로 워크플로우를 실행하여 빌드, 테스트 및 배포 과정을..
