(해당 포스팅은 '2019-06-19' 최종 수정되었습니다.)

 

안녕하세요, 히니입니다 :)

 

오늘은 React 기본 구조와 소스들을 분석해보고,

리액트에서 어떤 프로세스로 웹페이지를 띄워주는지에 대해 알아보겠습니다.

 


 


 

1. 첫번째 프로젝트 만들기

 

create-react-app first_practice

원하는 폴더명으로 프로젝트 생성

여기서 create-react-app은 명령어 하나로 react 개발환경을 설치할 수 있도록 도와주는 툴체인이다.

 

설치가 종료되면 몇 가지 명령들과 react 시작방법을 알려준다.

 

cd first_practice
yarn start

만든 개발폴더로 이동 후 yarn start를 입력하면 쉽게 react를 시작할 수 있다.

 

이러한 코드들이 차례로 나오고

 

웹브라우저에 localhost 서버, 포트 번호는 3000으로 이러한 페이지가 뜨면 개발환경 준비 완료

 


 

2. 구조 살펴보기

이제 개발 폴더의 구조를 한번 살펴봅시다.

  • node_modules 폴더

npm으로부터 다운로드된 라이브러리를 포함한다.

 

  • public 폴더

favicon.ico // 웹페이지 접속 시, 상단 탭에 보여지는 아이콘

index.html // 최종적으로 웹브라우저에 띄워지는 파일*

manifest.json // json 파일로써 나의 APP이 유저의 장치에 설치될 때, 메타정보를 알려줌

<!--
manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->

 

  • src 폴더

App.jsindex.js의 하위 컴포넌트(div className="App") 생성

index.jsindex.html의 컴포넌트(div id="root") 생성

css는 각각의 js파일을 꾸며주는 역할

serviceWorker.js 는 기존 방문자가 App을 빠르게 로딩할 수 있도록 해줌

https://bit.ly/CRA-PWA 참고

logo.svg 는 (Scalable Vector Graphics, SVG)로 logo를 표현한 것

2차원 벡터 그래픽

XML 기반의 파일 형식

 

  • gitignore파일

말그래도 git에서 무시할 파일(git의 버전관리에서 제외할 파일)을 지정하는 파일

 

  • package.json 파일

프로젝트 정보(이름, 설명, 개발자 등)와 의존성을 관리하는 문서

이미 작성된 package.json 문서는 어느 곳에서도 동일한 개발 환경을 구축할 수 있게 해줌

 

  • README.md 파일

사용법 설명

 

  • yarn.lock 파일

package.json에 있는 것보다 많은 정보로 보다 엄격하게 의존성을 관리해줌

[의존성 관리 링크]

 


 

3. 프로세스 분석

index.js

주석을 제외하면 이러한 코드가 나온다.

 

import React from 'react';

React를 사용 가능하도록 해줌

 

import ReactDOM from 'react-dom';

react-dom package는 DOM에 특화된 메소드 제공 / React 모델 외부로 나갈 수 있는 해결책 제공

따라서, index.html로 내보내는 마지막 js파일(React 모델)에 사용한다.

여기서는 index.js 파일에 사용

npm과 ES6를 사용한다면 import ReactDOM from 'react-dom'

npm과 ES5의 경우에는 var ReactDOM = require('react-dom')

 

import './index.css'

css파일 적용

 

import App from './App'

App 이라는 요소를 쓰기 위해서 App.js 파일의 function인 App을 임포트함

App이 class 여도 됨 // 차이는 나중에 나옴

[상태 저장 컴포넌트 / 함수 컴포넌트 링크]

 

import * as serviceWorker from './serviceWorker';

serviceWorker.unregister();

https://w3c.github.io/ServiceWorker

서비스워커 : 브라우저의 백그라운드에서 실행되는 js워커

PWA 생성 시 오프라인에서도 사용가능하고 푸시 알림 기능도 사용할 수 있게 해줌

(서비스워커 설명 링크)

 

ReactDOM.render(<App/>,document.getElementById('root'));

ReactDOM.render(element, container[, callback])

element를 제공된 container의 DOM에 렌더링

여기서는 App.js에서 가져온 App 컴포넌트를 Index.html의 id가 root인 요소에 렌더링


 

저도 아직 배우고 있는 단계이기 때문에 정확하지 않은 정보가 있을 수 있습니다.

여러 블로그를 보시고, 정보가 다르면 서치 후 알려주시면 감사하겠습니다 :>

다음 포스팅은 '컴포넌트 생성 과정' 입니다.

+ Recent posts