'React.js, 스프링 부트, AWS로 배우는 웹 개발 101'을 읽고 정리한 글입니다.
학습 내용
- 브라우저의 동작 원리
- Node.js
- SPA와 React.js
실습 내용
- 브라우저의 개발자 툴
- 프론트엔드 개발 환경 설정(VS Code)
- Node.js 설치
- NPM 실습
- 리액트 애플리케이션 생성 및 실행
3.1.1 Node.js와 NPM 설치
Node.js
과거에 자바스크립트는 브라우저 밖에서는 실행할 수 없었다.
Node.js는 자바스크립트를 내 컴퓨터에서 실행할 수 있게 해주는 프로그램, 즉 자바스크립트 런타임 환경이다.
Node.js는 구글 크롬의 V8 자바스크립트 엔진을 실행한다.
자바스크립트를 브라우저 밖에서 실행할 수 있다는 것은 클라이언트 언어뿐만아니라 서버 언어로도 사용할 수 있다는 뜻이다. 다시 말해 자바스크립트로 서버를 만들 수 있다는 뜻이다. 우리는 이 자바스크립트로 된 node 서버를 이용해 프론트엔드 서버를 개발한다. 이 프론트엔드 서버는 요청이 왔을 때 HTML, CSS, JavaScript를 리턴하는 것 뿐이다.
NPM
NPM(Node Package Manager)은 Node.js의 패키지 관리 시스템이다.
Gradle이 메이븐 리포지터리에서 라이브러리를 다운로드 받는것과 비슷한 개념으로 NPM을 이용해 npmjs에서 Node.js 라이브러리를 설치 할 수 있다. NPM은 Node.js를 설치하면 함께 설치된다.
node 프로젝트를 초기화하려면 npm init을 사용한다.
npm init을 이용해 node 프로젝트를 초기화하면 패키지 이름이나 버전 등 기본적인 정보를 입력해야 한다.
이 정보를 입력하면 프로젝트의 메타데이터가 담긴 pcakage.json 파일을 만들어 준다.
예를 들어 아래와 같이 npm을 이용해 react를 설치했다고 가정하자.
그러면 해당 패키지는 node_modules 디렉터리 아래에 설치된다. 또 package.json에 설치한 패키지가 명시된다.
dependencies에 추가된 라이브러리는 이후 프로덕션 배포에 사용된다.
build.gradle에 디펜던시를 추가하고 빌드하는 경우 gradle이 디펜던시에 나열된 라이브러리를 maven repository에서 설치해 줬다. Node.js의 경우 이 과정이 자동으로 일어나지 않는다. 대신 명령어를 이용해 디펜던시가 있는 라이브러리를 설치할 수 있다.
3.1.2 VS Code 설치
3.1.3 프론트엔드 애플리케이션 생성
// 워크스페이스 디렉터리 생성
mkdir react-workspace
cd react-workspace
npx creat-react-app todo-react-app
cd todo-react-app
npm starttodo-react-app은 3000포트에서 실행되고 있고 localhost:3000에 접속하면 애플리케이션을 확인할 수 있다.
VS Code에서 개발 환경 설정
위에서 설정한 todo-react-app 폴더를 연다.
create-react-app을 이용해 리액트 애플리케이션을 설치하면 기본적으로 생성되는 파일들이 있다.
package.json
이 프로젝트의 메타데이터로 사용할 node.js 패키지 목록 등을 포함한다.
public 디렉터리 아래의 파일
index.html은 가장 처음으로 리턴하는 HTML 파일이다. 서버가 필요한 리소스 파일(html/js/css)을 리턴한다.
이때 처음으로 리턴된 index.html을 브라우저가 사용자에게 보여준다.
리액트에서 html 파일은 index.html 하나 밖에 없다.
다른 페이지들은 React.js를 통해 생성되고 index.html에 있는 root 엘리먼트 아래에 동적으로 렌더링된다.
src 디렉터리 아래의 파일
index.js는 index.html과 함께 가장 처음으로 실행되는 자바스크립트 코드다.
이 자바스크립트 코드가 리액트 컴포넌트를 root 아래에 추가한다.
App.js는 기본으로 생성된 리액트 컴포넌트다.
3.1.4 material-ui 패키지 설치
프론트엔드 애플리케이션을 개발하는 데 material-ui라는 UI 패키지를 사용할 것이다.
material-ui 패키지를 이용하면 우리가 따로 UI를 위한 컴포넌트나 CSS를 작성하지 않아도 된다.
material-ui를 사용하기 위한 material-ui/core 설치
npm install @material-ui/core
아이콘을 사용하기 위해 material-ui/icons 설치
npm install @material-ui/icons
3.1.5 브라우저의 동작 원리
본격적인 개발에 앞서 브라우저의 동작 원리를 간단하게 알아보자.
- 브라우저의 주소창에 https://google.com 같은 웹 주소를 입력하면
- 브라우저가 HTTP GET 요청을 https://google.com의 서버로 전송한다.
- 보통 프론트엔드가 있는 웹 서비스의 경우 HTML 파일을 결과로 반환한다.
- HTML을 받은 브라우저는 그림처럼 두 단계를 거쳐 텍스트로 된 HTML을 브라우저에 보여준다.
파싱과 렌더링이다.
Parsing 파싱
파싱은 쉽게 말하면 렌더링의 전처리 단계다. 파싱 단계에서 브라우저가 하는 일은 크게 세 가지가 있다.
- 브라우저는 HTML을 트리 자료 구조의 형태인 DOM(Domain Object Model) 트리로 변환한다.
- IMAGE, CSS, SCRIPT 등 다운로드해야 하는 리소스를 다운로드 한다.
CSS의 경우 다운로드 한 후 CSS를 CSSOM 트리로 변환한다. - 다운로드받은 자바스크립트를 인터프리트, 컴파일, 파싱 및 실행한다.
Rendering 렌더링
파싱을 마친 후 브라우저는 렌더링에 들어간다.
- DOM 트리와 CSSOM 트리를 합쳐 렌더 트리를 만든다.
- 내용인 DOM과 각 노드가 브라우저의 어디에 배치될지, 어떤 크기로 배치될지를 정하는 것이다.
- 브라우저 스크린에 렌더 트리의 각 노드를 그려준다.
- 사용자는 브라우저상에서 시각화된 HTML 파일을 볼 수 있게 된다.
3.1.6 React.js
프로젝트를 진행하는 데 반드시 필요한 개념과 가장 기본적인 빌딩 블록만을 설명한다.
SPA(Single Page Application)
SPA란 한 번 웹 페이지를 로딩하면 사용자가 임의로 새로 고침하지 않는 이상 페이지를 새로 로딩하지 않는 것을 말한다.
- HTMl이 <body></body>를 렌더링하다 보면 마지막에 bundle.js라는 스크립트를 로딩하게 된다.
- 이 자바스크립트는 npm start를 실행했을 때 만들어진 스크립트인데 index.js를 포함하고 있다.
- 따라서 index.js의 일부로 ReactDom.render() 함수가 실행된다.
- 이 render() 함수가 동적으로 HTML 엘리먼트를 우리 눈에 보이는 리액트 첫 화면으로 바꿔주는 것이다.
다시 말해 페이지를 바꾸고 싶다면 root의 하위 엘리먼트를 다른 HTML로 수정함으로써 가능해진다.
브라우저의 자바스크립트는 fetch, ajax 등의 함수로 서버에 데이터를 요청하고 받은 데이터를 이용해 자바스크립트 내에서 HTML을 재구성한다.
이렇게 서버에게 새 HTML 페이지를 요청하지 않고 자바스크립트가 동적으로 HTML을 재구성해 만드는 클라이언트 애플리케이션을 SPA라고 하고 이 렌더링 과정을 Client-Side Rendering이라고 한다.
React 컴포넌트
import logo from './logo.svg';
import './App.css';
function App() {
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;- 위 코드에서 컴포넌트는 App이다.
- export default App을 통해 App이라는 컴포넌트를 다른 컴포넌트에서 사용할 수 있다.
- 컴포넌트는 자바스크립트 함수 또는 클래스 형태로 생성할 수 있다.
- 위 코드는 자바스크립트 파일 내에서 HTML 코드를 사용하고 있다.
- 이는 React가 한 파일에서 HTML과 자바스크립트를 함께 사용하려고 확장한 자바스크립트 문법인 JSX다.
- App 컴포넌트는 이처럼 렌더링 부분인 HTML과 로직 부분인 자바스크립트를 포함하는 JSX를 포함한다.
- 이 JSX 문법은 Babel이라는 라이브러리가 빌드 시 자바스크립트로 번역해 준다.
App 컴포넌트를 어떻게 사용할까?
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);ReactDom.render() 함수의 매개변수로 <App />을 주면 ReactDom App 컴포넌트를 렌더링한다.
다시 말해 ReactDOM은 매개변수로 넘겨받은 <App /> 컴포넌트를 이용해 DOM 트리를 만드는데 이때 컴포넌트의 render() 함수가 변환한 JSX를 렌더링한다.
- import를 이용해 App 컴포넌트를 불러온다.
- <컴포넌트이름 />을 이용해 컴포넌트를 사용한다.
3.1.7 정리
- 브라우저의 동작 원리
- Node.js 개념, 설치, npm/npx 라이브러리 설치, 리액트 생성
- VS코드 개발 환경 설정
- SPA(Single Page Application) 동작 원리
- JSX
