리액트 설치 및 기본구성(2) 폐쇄망
리액트 수동설치(폐쇄망)
# 수동설치 결과
blang-front
├── package.json
├── node_modules
├── public
│ ├── index.html # react 의 기본구조 /public/웰컴파일 필수
└── src
└── index.js # react 의 기본구조 /src/리액트트실행파일 필수
폐쇠망환경은 인터넷이 안되기에 npx create-react-app 프로젝트이름 명령어는 사용할 수 없다.
방법은 외부에서 미리 셋팅한 모듈을 가지고 반입하고 환경을 만든뒤에 리액트 프로젝트를 빌드하는 방법으로 진행해야한다. (즉, 수동적으로 구축 해야한다.)
STEP1. npm 프로젝트 초기화
# NPM 프로젝트를 초기화 (package.json 1개의 파일이 생성된다.)
npm init -y
blang-front
└── package.json
STEP2. node_modules 준비
# 외부에서 리액트 모듈을 포함한 node_modules 디렉토리를 준비.
unzip cth-front/node_modules.zip
blang-front
├── package.json
└── node_modules
참고) node_modules의 최소조건은 아래 모듈만 준비하면 된다.
- react 모듈
- react-dom 모듈
- react-scripts 모듈
STEP3. (index.js) 리액트앱 엔트리포인트JS 작성
mkdir blang-front/src # React APP 디폴트 디렉터리 생성
touch blang-front/src/index.js # React APP 엔트리포인트 생성
blang-front
├── package.json
├── node_modules
└── src
└── index.js #작성
- 18버전 이전 작성법
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; ReactDOM.render( // <-- <div> <h1>Hello, React!</h1> <App /> </div>, document.getElementById('root') // <-- ); -
18버전 이후 작성법
import React from 'react'; import ReactDOM from 'react-dom' import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); // <-- root.render( // <-- <div> <h1>Hello, React!</h1> <App /> </div> );레거시 ROOT API 에 대하여)
// 레거시 root API ReactDOM.render (<App/>, document.getElementById("root"))- ReactDOM 객체에서 render() 메소드를 호출한다.
- 첫 번째 매개변수로는 렌더링한 React 컴포넌트(APP)를,
- 두 번째 매개변수로는 컴포넌트를 렌더링한 실제 DOM 요소(container)를 지정하는 형태다.
- 주요 차이는 업데이트(렌더링)의 방식. state나 props 변화가 있을 때, 변수 container가 변경되지 않더라도 계속 렌더링할 때마다 container를 전달하는 형태라고 한다.
// 새로운 root API const root = ReactDOM.createRoot(document.getElementById("root")) root.render(<App/>)- New root API는 React18에서 도입된 새로운 렌더링 API 이다.
- ReactDOM.createRoot() 메서드를 사용하여 루트 렌더러(root renderer)를 생성한다.
- 이 루트 렌더러는 render() 메서드를 사용하여 컴포넌트를 렌더링한다.
- 데이터 구조의 최상위 레벨에 있는 container를 매번 전달하지 않아도 되는 형태라고 한다.
- 필요에 따라 업데이트를 할 수 있다는게 regacy root api와의 가장 큰 차이점이다.
- 그리고 React18에서 새로 도입된 서버 컴포넌트(Server Components)와 같은 새로운 기능을 사용하기 위해서는 꼭 사용해야 한다고 한다.
버전은 package.json 에서 확인하면 알 수 있다.
{ ... "dependencias": { ... "react": "^18.2.0", "react-dom": "^18.2:0" ... }
STEP4. (index.html) 리액트앱 메인HTML 템플릿 작성
mkdir blang-front/public # React APP 디폴트 디렉터리 생성
touch blang-front/publuc/index.html # React APP 메인HTML 생성
blang-front
├── package.json
├── node_modules
├── public
│ ├── index.html
└── src
└── index.js #작성
<!-- (src/index.js) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<h1>innerText(index.html)</h1>
</body>
</html>
STEP5. React 앱 실행스크립트 생성
react-scripts 모듈 명령을 사용하여 실행스크립트를 명명하고, 개발 서버를 실행한다.
# package.json
{
"scripts": {
"start": "react-scripts start"
/* "start": "react-scripts --openssl-legacy-provider start" */
},
/* *"proxy": "http://localhost:8080", */
}
STEP6. 실행
# 일반적인 리액트 개발서버 실행(react-scripts 모듈의 기능)
npx react-scripts start
# 실행 스크립트 생성으로 개발서버 실행
npm start
폐쇄망에서 직접 리액트앱 환경을 만들었다.
개발 서버가 성공적으로 실행되면, 브라우저에서 http://localhost:3000에 접속하여 리액트 앱을 확인할 수 있다. 이렇게 수동으로 리액트 프로젝트를 설치하고 실행 가능하다. 그러나 npx create-react-app 명령어를 사용하는 것이 더 간편하고 권장되는 방법이다.
별첨) 에러 정리
시작시 Error: error:0308010C:digital envelope routines::unsupported
이 내용이 발생한다면 아래와 같이 조치한다.
- react, react-dom, react-scripts 패키지를 하나하나씩 업그레이드해보면서 react-scripts의 버전 문제 이슈가 있다고함.
-
package.json의 scripts에서 start 명령어에 옵션을 주어 임시방편으로 해결하는 방법으로 해결이 안되는 사례도 있다고 한다.
-
- 방법1
- 다음과 같이 환경변수를 설정 하여
npx react-scripts start수행
# 환경변수 추가 # 윈도우 set NODE_OPTIONS=--openssl-legacy-provider echo %NODE_OPTIONS% # 리눅스 export NODE_OPTIONS=--openssl-legacy-provider echo %NODE_OPTIONS% -
- 방법2
- 또는 다음과 같이 실행스크립트에 ssl 관련 환경변수를 설정하여
npm start수행
# package.json { "scripts": { "start": "react-scripts --openssl-lagacy-provider start" } }
Leave a comment