리액트 - 배포하기

브라우저가 JSX 코드를 해석하지 못하기때문에 순수 자바스크립트로 변환이 필요하다 = 빌드 

 

개발모드를 종료하고 (ctrl+ c)

터미널에 npm run build 명령어를 시행하면 build 폴더가 자동으로 생성된다.

이 파일들을 웹서버로 제공하면 배포하게 됨 

---

로컬 환경에서 웹서버 실행

npx serve build 입력 

 

나는 여기서 오류가 났다 

https://velog.io/@hn04147/npm-install-%ED%95%A0-%EB%95%8C-tar-ENOENT-no-such-file-or-directory-lstat-%EC%97%90%EB%9F%AC%EB%82%A0-%EA%B2%BD%EC%9A%B0

npm install 할 때 tar ENOENT: no such file or directory, lstat ~ 에러날 경우

여기서 알려준 방법으로 해도 실패.. 똑같은 오류가 발생한다. 

 

지피티 도움으로 아래와 같이 했다.

 

npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\Users\예리밍\AppData\Roaming\npm npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\예리밍\AppData\Roaming\npm' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: C:\Users\예리밍\AppData\Local\npm-cache\_logs\2024-08-02T07_29_50_080Z-debug-0.log PS C:\Users\예리밍\Desktop\dicegame>

 

오류 메시지에서 C:\Users\예리밍\AppData\Roaming\npm 디렉토리를 찾지 못했다고 나와 있습니다.

npm 디렉토리 생성: 해당 디렉토리가 존재하지 않는다면 직접 생성해 볼 수 있습니다.

mkdir C:\Users\예리밍\AppData\Roaming\npm 

 

명령어를 통해 디렉토리를 만들어줬더니 이후에 npx serve build 가 잘 실행된다;

 

 

같은 와이파이를 사용하는 장치에서 Network 주소로 접속해볼 수 있다~

---

참조

AWS S3 사용하기 

---

우리가 배포한 리액트 코드가 실행되는 과정

transpiling

웹브라우저에서는 JSX를 쓸 수 없다. 

JSX 는 순수 자바스크립트로 변환되어야한다. 

https://babeljs.io/

Babel · Babel

= transpiler

Try it out 메뉴에서 변환 내용을 확인해볼 수 있다. 

번들링 Bundling

자바스크립트 파일들을 압축해서 하나의 파일로 만들어둔 것

---

트랜스파일러를 통해 코드를 번역하고,

번역된 코드들은 번들링을 통해 웹브라우저가 다운받기 좋도록 묶음으로 만들어진다. 

웹브라우저는 번들 파일을 실행한다.