뚝딱뚝딱 코딩 기록_

[Vite_ env variables] 1. .env 파일 생성 ❔ 환경변수 파일은 반드시 root directory (최상위 폴더)에 위치해야한다. ❗ 그렇지 않으면 인식하지 못하므로 주의해야함! 2. 환경변수 설정 ❔ 환경변수는 [ VITE_ ]으로 시작해야 읽을 수 있다. 3. 환경변수 사용 ❔ Vite에서는 [ import.meta.env ] 를 사용해야한다. ❗자바스크립트에서 환경변수를 사용할 때 보통 [ process.env ] 를 사용하기 때문에 헷갈리기 쉬움 Vue로 프로젝트를 진행하면서 환경변수를 쓸 일이 생겼다. process.env로 불러오면 되는 줄 알았는데 Vite에서는 import.meta.env로 불러와야해서 잠시 헤맸다. 이번 일을 참고하여 다음부터는 헷갈리지말고 제대로 사용..

[React_ react-pdf] 리액트로 PDF 프리뷰어 만드는 방법에 대해 알아보자 1. react-pdf 설치 npm install react-pdf 2. 필요한 컴포넌트 임포트 + pdf.worker.js 활성화 import { Document, Page, pdfjs } from 'react-pdf'; // pdf.worker.js 활성화 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; 📜 pdf.worker.js를 활성화하지 않으면 pdf 파일이 보이지 않으니 유의해 주세요! 3. 코드 추가 import React from 'react'; imp..

[React+Vite_proxy] React + Vite 에서 proxy 설정하는 방법에 대해 알아보자 🐾 proxy 설정 // vite.config.ts import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], server: { // 추가하기 proxy: { '/api': { target: 'url', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') }, } } }) - vite.config.ts 파일에 server 부분을 추가해 주면 된다 🐾 axios axios...

[React, Vite_ Proxy] Vite을 이용하여 React를 시작하는 방법에 대해 알아보자 RCA(react-create app)을 사용하여 개발을 하던 중 Type Script를 도입하였더니 컴파일 시간이 조금 느려졌다는 느낌을 받았다. 그래서 찾아보니 Vite 이라는 빌드툴을 사용하면 시간이 매우 많이 단축된다는 정보를 알게되었다. ❓ Vite 원래 Vite은 Vue.js를 위한 빌드 툴이었으나 현재는 Vue 뿐만 아니라 React, Svelte, VanilaJS 등 여러 프레임워크들과 사용 가능하다. Vite을 이용하면 얼마나 속도가 빨라지는지 궁금하기도 했고, 무엇보다 rca를 이용하여 개발하는 과정에서, 특히 첫 빌드 시간이 오래걸려 답답했던 시기에 시도해 보게 되었다. Vite은 es..