[ReactJS]생활코딩 React입문 1️⃣ 개발환경
React
페이스북에서 만든 자바스크립트 UI Library로, 사용자 경험을 향상시키기 위해 만들어 졌다.(이벤트 요청 시 서버에서 코드를 받아 다시 렌더링 해야하는 문제를 해결하기위해 만들어 진 것 이다.)
component(사용자 정의 태그)를 만들 수 있어 가독성을 높여주고, 재사용성을 높여준다. 재사용성이 높다는 것은 유지보수 또한 용이하게 해준다.
React의 특징
-
- Virtual DOM
- 코드가 수정 됐을 때, 화면을 새로고침 하지 않아도 변경된 내용이 반영 되는 것을 확인할 수 있다.
-
- Unidirectional Data Flow
- 데이터가 단방향으로 흐른다. 상위 컴포넌트에서 하위 컴포넌트로만 흐르기때문에 데이터의 흐름을 이해하기 쉽다.
-
- Server Side Rendering
- client단에서만 실행되는 것이 아니라 server단에서의 렌더링을 지원한다. client단 에서만 렌더링을 하면 HTML -> Javascript -> Data -> View 순으로 진행되는 초기 구동 속도가 느리다. React는 server단 렌더링을 지원해 이런 취약점을 보완하고, 자바스크립트의 검색 엔진 최적화(SEO)에 대한 약점도 보완해준다.
1. 개발 환경
- Online Playground : CodeSandbox 같은온라인 IDE를 활용하면 웹에서 코딩하여 그 결과를 바로 확인할 수 있다.
- Add React to a Website: 이미 구현된 웹사이트에 React를 추가하는 것. 시작하기는 쉬우나 갈수록 개발환경을 직접구축해야하는 어려움이 있어서 초급 개발자에게는 까다로울 수 있다.
- Create a New React App: 개발 목표에 맞는Toolchain을 활용해 새 리액트 앱을 만드는 것이다. ( Toolchain이란 리액트로 앱을 개발 하는데 필요한 개발환경, 도구 등을 모아놓은 것으로 Create React App, next.js, Gatsby 등 이 있다.
2. npm을 이용해서 create-react-app 설치하기
명령어
npm install -g create-react-app
(nodejs로 개발하는 회사 소스코드가 같이 있는 놋북이라 global로 하고싶지않았는데, -g를 주지않으면 계속 설치가 안되길래 반강제로 입력해버림…)
3. create-react-app을 이용해서 개발환경 구축
개발환경으로 사용할 디렉토리를 생성하고, Command Line으로
create-react-app 디렉토리경로
명령어를 입력해준다.
실행방법
npm [run] start
을 실행하면 웹브라우저가 자동으로 열린다.
기본 디렉토리구조
public
- 앱이 실행됐을때, 기본적으로 보여지는 html(index.js)파일이 있다.
- 사용자가 만든 컴포넌트들이 적용되는 곳이다.
- ‘<div id="root"></div>’ 안에 컴포넌트가 삽입되고, id값은 변경가능하다.
index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<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"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
src
- html파일에 적용될 컴포넌트들을 생성,구현하고 DOM에 렌더링을 해주는 곳이다.
- css,js 파일들이 모여있다.
- css 파일은 import 를 이용해 js파일에 넣어줌으로써, js가 로드될 때 함께 로드되게 해준다.
App.js(컴포넌트를 구현한 js파일)
import React from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
index.js(엔트리파일. 컴포넌트,css 등을 렌더링 시켜주는 파일)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'; //1. 여기서 import된 App이라는 컴포넌트가
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App /> //2.여기서 사용되는 것.
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
4. 배포
명령어
npm run build
- build 디렉토리가 생성된다.
- 실제 서비스할 때는 build 디렉토리안에 있는 파일을 사용한다.
- 웹서버의 최상위 디렉토리에 build디렉토리의 파일들을 위치시킨다.
개발환경에서는 파일의 무겁다. 위 명령어로 빌드하면 불필요하게 용량을 차지하는 것들을 없애서 용량을 줄여준다.(디자인뿐만아니라 에러메세지,경고 등 포함)
npm install -g serve
npm으로 간단하게 웹서버를 설치할 수 있다.
npx serve -s build
한번만 실행할 웹서버를 다운받아 실행시키는것
(-s build : build 디렉토리를 document root로 하겠다는 뜻.)
Leave a comment