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, ..
ChatGPT API란? ChatGPT API는 OpenAI의 GPT-3.5 모델을 기반으로 한 API 서비스입니다. 이를 통해 다음과 같은 일을 수행할 수 있습니다: 텍스트 기반 대화: 사용자가 입력한 텍스트에 대한 응답을 생성합니다. 질문 응답: 사용자의 질문에 대한 답변을 생성하고 지식을 공유합니다. 텍스트 생성: 특정 주제나 스타일의 텍스트를 생성하거나 문장을 완성합니다. ChatGPT API를 사용하는 방법 1. API Key 획득 먼저 OpenAI의 ChatGPT API를 사용하기 위해 API 키를 획득해야 합니다. API 키는 인증에 사용되며, OpenAI 웹사이트에서 발급받을 수 있습니다. 2. API 요청 및 응답 처리 API 키를 획득한 후, API를 호출하여 대화나 질문에 대한 응답을..
Windows 환경에서 VSCode의 Bash 터미널을 사용하는 경우, .bashrc 파일을 활용하여 Git 명령어를 자동화하는 방법을 정리했습니다. 1. .bashrc 파일 열기 터미널을 열고 다음 명령어를 입력하여 .bashrc 파일을 편집합니다. 이때 nano라는 텍스트 에디터를 사용하여 파일을 엽니다. nano ~/.bashrc 2. 별칭(alias) 설정 추가 .bashrc 파일을 열었다면, 원하는 Git 명령어에 대한 별칭(alias)을 추가합니다. "ac"라는 별칭을 만들어서 모든 파일을 add한 후 커밋을 수행하도록 설정해보겠습니다. alias ac='git add -A && git commit -m' 위의 내용은 "ac"라는 별칭을 만들어주는 것입니다. 이 별칭은 "git add -A" ..
AJAX(Asynchronous JavaScript and XML)란? 웹 개발 분야에서 AJAX는 매우 중요한 역할을 하는 기술 중 하나입니다. AJAX는 "비동기적 자바스크립트와 XML(Asynchronous JavaScript and XML)"의 약자로, 웹 페이지를 새로 고치지 않고도 서버와 데이터를 비동기적으로 주고받을 수 있게 해주는 기술입니다. 이것은 웹 애플리케이션의 사용자 경험을 향상시키고 더 나은 성능을 제공하는 데 핵심 역할을 합니다. 왜 AJAX가 필요한가? 과거의 웹 페이지는 사용자와 상호작용할 때마다 전체 페이지를 다시 렌더링하여 새로고침하는 방식이었습니다. 이러한 방식은 사용자 경험을 저하시키며 대역폭을 낭비하는 문제가 있었습니다. AJAX의 등장으로 웹 애플리케이션은 필요한 ..
