Hazellog

react와 vite를 사용하여 프런트엔드 코드를 구현했다. 문제 node.js 에서 사용하듯이 아래와 같은 코드로 작성했다. require("dotenv").config(); console.log(process.env.KEY); 위의 코드의 출력 결과는 undefined ! 또는 아래의 오류가 발생한다. ReferenceError: process is not defined 우선, VITE에서는 process를 사용하지 않는다. 그럼 자동으로 파일을 읽어오는 건가? 했지만, dotenv 파일을 자동으로 읽어오지 않는다. 해결 방법 우선 env 파일의 경로를 설정한다. 기본적으로 root로 설정되어 있다. //vite.config.ts export default defineConfig({ plugins: ..

history.push 로 페이지 이동시 렌더링이 되지 않는 문제가 확인했다. 새로운 게임 방을 만들어 입장하고, 방을 바로 나왔을 때, 게임방에 아무도 없기에 방이 삭제된다. exit 버튼으로 “/game” 경로로 이동할 때, history.push("/game"); 위의 코드를 사용하여 이동했다. 해당 페이지로 이동했을 때, 게임방이 남아있는 것을 확인할 수 있지만, 새로고침을 하고 나면 방이 없어지는 것을 알 수 있다. 따라서, 해당 페이지에서 새로고침이 되지 않는 문제가 있다는 것을 알 수 있었다. 1. window.location.reload() 사용하기 window.location.reload(); “hitory.push” 함수를 실행한 후, 위의 코드를 실행하여 새로고침을 하는 방법이 있다...

package.json 파일 생성 npm init --y​ tsconfig.json 파일 생성 tsc --init​ 필요한 모듈 설치하기 npm i express dotenv​ dev dependencies npm i --save-dev @types/node @types/express typescript ts-node nodemon​ dotenv, gitignore 파일 생성 touch .env touch .gitignore //gitignore //node_modules //.env​ tsconfig.json 설정 Typescript 컴파일시 세부설정 (tsconfig.json) Typescript 컴파일시 세부설정 (tsconfig.json) - 코딩애플 온라인 강좌 tsconfig 파일 생성하기 여..