Web
-
[FE] Vite + React + TypeScript + tailwindcss 개발환경 세팅 방법Web 2025. 4. 14. 11:27
원래는 주로 Vue.js를 사용해서 개발을 했었는데, 이제 다시 React와 TypeScript를 사용해서 프로젝트를 진행하는 일이 많아졌다. 그런데 오랜만에 새로운 프로젝트를 하기 위해서 tailwindcss를 설치하는데분명 전에 tailwindcss를 사용하기 위해 설치를 할 때는 발생하지 않았던 오류들이 발생했다.tailwindcss가 적용이 안 되는 문제도 있었고, 기본적으로 제공하는 CSS는 적용이 되지만 커스텀한 내용이 적용이 안 되는 일도 있었다. 앞으로 Vite + React + TypeScript + tailwindcss를 사용하여 프로젝트나 공부를 할 경우가 많아질 거 같으니,나중에 또 삽질을 하지 않고 개발환경 세팅을 해낼 수 있도록 기록을 해보아요 ㅎuㅎ일단 나는 npm을 사용할 것..
-
[FE] Vite + React + TypeScript + tailwind 프로젝트 AWS에 배포Web 2025. 2. 14. 22:33
그동안 프로젝트를 진행하면서 배포를 직접해본 적이 없었는데, 드디어 이번에 해봤다.배포 방법은 AWS S3와 CloudFront를 사용해서 배포를 했다:D 1️⃣ 프로젝트 빌드먼저 Vite로 프로젝트를 배포할 수 있는 정적 파일로 빌드해야 한다.npm run build 콘솔을 열어서 위와 같은 명령어를 입력하면 빌드가 완료되면서 dist 폴더에 정적 파일들이 생성된다.이렇게 말이다! 2️⃣ S3 버킷 생성 및 설정일단 AWS에 로그인을하고 AWS S3 콘솔로 이동한다.그리고 버킷 만들기를 클릭하여 버킷 이름을 설정하고, 정적 사이트 배포를 위해 퍼블릭으로 액세스를 설정한다. 버킷 생성 후, 속성 > 정적 웹사이트 호스팅에서 다음과 같이 설정해 준다. 3️⃣ S3에 빌드 파일 업로드아까 생성된 dist 폴..