반응형 react3 React serve 명령어로 배포하기 (+포트변경) VM 을 이용해서 배포를 해야할 일이 생겨서 공부해봤다. 전에 프로젝트를 배포할 때 사용했던 AWS EC2에 접속 후 했던 과정과 비슷했다. 배포과정 VM 접속, node.js 설치 git 레포 clone 리액트 프로젝트 빌드 빌드된 파일을 serve 이용해서 배포 1. VM 접속, node.js 설치 접속은 리눅스에서 ssh 명령어를 이용해서 한다. wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash node.js 를 설치하기 전에 nvm을 설치하기 위해 위 명령어를 실행한다. 설치가 끝나면 잘 설치되었는지 확인하기 위해 nvm --version 위 명령어를 실행한다. nvm의 설치버전이 출력된다면 잘 설치된 .. 2021. 4. 24. react 에서 dotenv로 환경변수 사용하기 구글이나 깃헙의 API를 사용하려고 할 때 발급받은 클라이언트 Id를 깃헙에 유출시키지 않기 위해 dotenv를 이용했었다. 리액트에서는 사용방법이 달라서 기록해봤다. npm install --save dotenv 설치 //.env REACT_APP_MAPS_CLIENTID=clientId 리액트에서는 환경변수를 사용할 때 env 파일에서 반드시 변수명 앞에 REACT_APP 을 붙여야 한다. .gitignore에 .env를 작성하는것을 잊지말자 사용할 때는 환경변수를 사용하고자 하는 파일 상단에서 import나 require를 한 뒤에 환경변수 값을 사용할 위치에서 process.env.환경변수명 으로 사용하면 된다. require("dotenv").config(); // import dotenv fr.. 2021. 4. 15. React 처음 쓸 때 유의할 점 react app 퀵스타트 npx create-react-app my-app //my-app 디렉토리에 React 프로젝트 생성 cd my-app npm start //프로젝트 실행 JSX를 쓰는 이유 JSX는 컴파일링 되면서 최적화되므로 빠르다. Type-safe (어떠한 연산도 정의되지 않은 결과를 내놓지 않는 것. 즉, 예측 불가능한 결과를 나타내지 않는 것) 하며 컴파일링 과정에서 에러를 감지 할 수 있다. HTML에 익숙하다면, JSX를 사용하여 더 쉽고 빠르게 템플릿을 작성 할 수 있다. JSX를 사용하지 않고 React를 사용할 수 있으나 React.createElement()등의 메서드를 사용해야하고, 쓰는 경우보다 번거롭다. createElement()를 사용한 예시 위아래 결과는 같다... 2020. 11. 22. 이전 1 다음 반응형
