Web
-
[FE] Vite + TypeScript + tailwindcss + React 프로젝트에서 tailwindcss 오류Web 2025. 2. 20. 01:34
Swift로 개발을 최근까지 하다가 오랜만에 웹으로 새로운 프로젝트를 진행하게 되었다.오랜만에 초기 세팅을 하는데 tailwindcss 세팅이 잘 안 된 거 같다. 보통 tailwindcss는 다음과 형태로 쓰인다. 원래 css를 사용하려면 .css 파일에 클래스명과 함께 css 속성을 적고, 태그에 className을 추가해서 css를 적용한다.하지만 클래스명을 계속 짓는 것은 매우 귀찮다. 히히이런 귀찮음을 tailwindcss가 덜어주니까 사용하게 됐는데, 위와 같이 tailwindcss에서 기본적으로 제공하는 속성만 적용이 되고 아래처럼 커스텀하는 건 적용이 안 됐다. 원래는 tailwind.config.cjs 파일에 커스텀할 내용을 적고 사용해야 하는데, 빠르게 개발하는 상황에선 선언하고 사용하..
-
[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 폴..