프론트의 .env 사용법
한참 삽질을 했습니다.
vite로 만들어진 프로젝트에는 dotenv가 없어도 되는 모양입니다.
환경 변수명은 접두사 VITE_로 시작해야하며
끌어다 쓸 때에는 import.meta.env. 에 이어서 사용해야합니다.
// 예시
export const App = () => {
const naverClientId = import.meta.env.VITE_NAVER_MAP_CLIENT_ID;
return (
<NavermapsProvider ncpClientId={naverClientId}>
TypeScript
복사
절대경로 ‘~’
vite.config.ts 파일의 설정에 resolve 부분을 추가했습니다.
이렇게 해서 절대 경로를 작성한 이유는 코드의 간결함. ‘../../../assets/….’같은 무시무시한 코드를 없애기 위함입니다.
React + TS 환경에서 path alias 설정하기 ← 아주 훌륭한 레퍼런스// vite config
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'~': path.resolve(__dirname, 'src'), // src를 프로젝트의 실제 소스 코드 루트로 설정합니다.
},
},
});
TypeScript
복사
// tsconfig
"compilerOptions": {
...
// 절대경로
"baseUrl": ".",
"paths": {
"~/*": ["./src/*"]
}
...
}
TypeScript
복사
결과적으로 절대경로는 어떻게 사용하나요?
~ 는 src 디렉토리를 나타냅니다.
src/components/CustomMarker.tsx 파일에서
src/assets/pin.png 이미지를 참조하는 방법을 예로 보여드릴게요.
// src/components/CustomMarker.tsx
// 기존 코드
import pinImage from '../../assets/pin.png';
// 변경 코드
import pinImage from '~/assets/pin.png';
TypeScript
복사
ENV 설정
@이주희 배포버전에서도 네이버 지도를 쓸수있게 해보세용
VITE_NAVER_MAP_CLIENT_ID=6pgkaehbt0
NAVER_CLIENT_SECRET=FP93SxrXn2540UZDS2vlAIfa8Lf2GsN7VYtrszkC
TypeScript
복사
