[React]기초용어 + build

생활코딩: 리액트를 보고 작성된 게시글입니다.

 

구성요소

OPEN FOLDER를 이용해서 개발환경 폴더를 VS Code에 불러온 모습

 

 

public folder

index.html

npm run start시 연결되는 local host화면

code

React로 만들어낸 사용자 설정 tag (a.k.a Component )들이 위치하는 장소

id는 root가 기본이지만 수정이 가능하다.

 

src(소스) folder

개발 작업시 대부분의 작업물(코드)들은 이 폴더에 생성하게됨

index.js

'root'라는 id의 값을 변경하려면 index.js에서도 변경해주어야 함!

 

App.js

*주의 

function type을 class type으로 변경 시켜 줄 것!

import React from 'react';

function App(){ 


// into

import React, { Component } from 'react';

class App extends Component{

 

실제 확인해볼 수 있음 

localhost:3000의 개발자 모드 (cmd + alt + i )

element부분

실제 코드의 내용과 동일함을 알 수 있음!

 

 

+)

내용을 수정하면 반영된 모습을 볼 수 있음!

App tag를 지우면 오류가 남

 

 

App.css

App Component(태그)에 적용될 css

App.js에 import './App.css' 가 있기때문에 함께 실행되어 사용가능하다

 

실습을 위해 App.css / index.css를 다 지워줌

 

배포방법 

react는 개발의 편의성을 위해 여러 기능을 추가해 두었기 때문에 create react app의 개발환경은 크기가 큼

즉, 배포에 적합하지 않음

 

배포를 위해 여러가지 불필요한 에러메세지, 공백 등을 제거하여 사이즈를 줄여주는 작업이 필요

 

CTRL + C로 종료해 준 뒤

terminal에서 해당 폴더의 위치로 이동 한 후

npm run build

 

build라는 폴더가 생성된 것을 확인 가능 

index.html도 함께 생성되는데 동작하는 모습은 똑같지만 공백이 모두 제거되어 사이즈가 줄어든 모습 확인 가능 

실제로 서비스할 때는 build한 후의 파일을 사용해야함 

웹서버의 다큐먼트 루트에 이 파일을 위치시키면 실서버 환경을 완성할 수 있음 

 

실서버 환경만들기

*npm로 설치할 수 있는 웹서버

npm install -g serve

serve명령으로 컴퓨터 어디에서나 서버를 설치할 수 있음

 

npx serve 

1회만 실행할 수 있는 서버를 설치할 수 있음

 

-s build 

//사용 예

//1회만 사용하는 서버로 빌드하는 경우
npx serve -s build

//npm으로 serve를 설치한 경우
serve -s build

서버를 생성하는 동시에 지금 만든 파일을 다큐먼트의 루트로 만들어 빌드한다는 뜻

 

참고영상

생활코딩 : 리액트

• React - 6. 샘플 웹앱 실행
• React - 7. JS코딩하는 법
• React - 8. CSS코딩하는 법
• React - 9. 배포하는 법

youtu.be/O58tOX0CtoY