React + Vite + JS 프로젝트를 작업하고 Vercel에 배포를 하니 간헐적으로 404에러가 발생했다. 이유가 궁금해서 좀 더 테스트를 진행해보니 랜덤하게 발생하는게 아니고 `navigate`나 ``로 이동하지 않으면 해당 에러가 발생하는 것 같았다. 예를 들어 `/signin` 이라는 path에 접근할 때 버튼 클릭 등으로 이동하는게 아닌, 직접 url에 입력해서 이동하려하면 발생했다. 🚨 404 해결해결은 매우매우 간단하게 해결했다. 프로젝트 루트 경로에 `vercel.json` 이라는 파일을 생성하고 아래 내용을 복붙한다. vercel.json{ "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]}
회원가입할 때 Provider메뉴의 Email - Confirm email 이 활성화 되어 있으면 발생한다. 이게 켜져 있으면 회원가입할 때 실제 이메일로 인증 메일을 보내고, 수락을 해야 회원가입이 완료 된다. 좋아 보이지만 무료 요금제는 하루에 제한이 있으며(시간당 3건인가?) 초과된 경우 발생한다. 🚨 끄는 방법1. Authentication -> Providers메뉴 이동2. Email 선택3. Confirm email 끄기4. save
tailwind.conifng.js에서 추가적인 클래스를 정의할 때 꼭 `theme.extend` 안에 정의해야 한다. 그렇지 않으면 기존 tailwind 클래스들이 `덮어쓰기` 된다. 🚨 예시 theme: { colors: { 'main-color': '#48CFCB', 'sub-color': '#229799', 'light-color': '#F5F5F5', /* 생략 */만약 위의 코드처럼 작성했다면 색상과 관련된 tailwind 클래스는 위에서 커스텀한 3가지를 제외하고는 사용할 수 없다. 즉, 기존의 `colors` 를 덮어쓰게 되는 것이다. 하지만 `extend` 를 사용하게 되면 기존의 속성들은 그대로 두고 확장 하는 개념으로 사용할 수 잇다.
배포 시 프로젝트의 `public` 폴더에 넣은 자료(이미지, 폰트 등)는 자동으로 최상위(루트)경로로 인식이 된다. 예를 들어 사진이 `/public/assets/logo.png` 라는 경로에 존재할 경우 다음과 같이 매핑을 시켜주면 된다.`src="/assets/logo.png"` (`public` 생략)