REACT 리엑트 개발을 위한 기본설치 및 미리보기 실행

1. nodejs 설치

nodejs.org 접속
Recommended For Most Users 버전 설치

 

2. 프로젝트 생성

C:\>npx create-react-app 만들폴더명

 

만약 "만들폴더명" 을 newsite 라고 정했다면, newsite 폴더가 생기고 아래에 다음과 같은 파일들이 생성될 것이다.

newsite
  >node_modules
  >public
  >src
  .gitignore
  package-lock.json
  package.json
  README.md

이 상태가 되면 사실상 React 를 구동할 수 있는 가장 기본적인 상태가 된다. 리엑트를 실행시켜 브라우저에 띄워보자

 

3. 생성된 폴더명으로 이동

C:\>cd newsite
C:\newsite>

 

4. 미리보기 실행(개발현황을 크롬브라우저로 여는 방법

c:\생성된폴더명>npm start

여기까지 하면 크롬브라우저가 열리면서 사이트가 표시된다. 직접표시되지 않으면, 터미널 화면상에 나타난 주소를 클릭하거나 브라우저의 주소창에 넣어주면 된다. 

You can now view newsite in the browser.

  Local:           http://localhost:3000
  On Your Network: http://175.20.5.80:3000  # IP주소는 사람마다 다를 수 있다
  
  Note that the development build is not optimized.
  To create a production build, use npm run build.

개발중에는 이상태로 진행해도 상관없으나 실제 배포할 때에는 "npm run build" 명령어를 사용해서 실제 배포파일을 만들필요가 있다. 하지만 지금은 중요한 것이 아니므로 패스! (사실 아직 잘은 모른다)

---

추가패키지를 설치한다거나 다른 작업을 해야 하는 경우 미리보기를 끝낼 필요가 있다. 그리고 필요한 패키지를 설치하자. 

 

5. 미리보기 종료

Ctrl + c

일괄 작업을 끝내시겠습니까 (Y/N)? Y
C:\생성된폴더명>

 

6. JQuery 설치(필요하다면)

C:\생성된폴더명> npm install jquery

 

7. shallow-equal 설치(필요하다면)

C:\생성된폴더명> npm install shallow-equal

 

8. reactstrap, bootstrap 설치(필요하다면)

C:\생성폴더명> npm install -save reactstrap
C:\생성폴더명> npm install -save bootstrap

carousel 등 다양한 bootstrap 디자인을 손쉽게 사용할 수 있게 해준다

 

9. sweetalert2 설치(필요하다면)

C:\생성폴더명> npm install sweetalert2

 

10. axios 설치(필요하다면)

C:\생성폴더명 > npm install -save axios

 

11. redux, react-redux 설치

C:\생성폴더명> npm install --save redux
C:\생성폴더명> npm install --save react-redux

 

12. react-cookies save 설치

C:\생성폴더명> npm install react-cookies --save

 

13 react-router-dom 설치

C:\생성폴더명> npm install --save react-router-dom

 

14. classnames 패키지 설치

C:\생성폴더명> npm install classnames

이 패키지는,  css에 해쉬값을 부여하여 클래스명이 충돌하지 않도록 도와준다. 또한, 조건부 형식의 코드 작성 또한 가능해진다. 반드시 xxx.module.css 파일과 함께 사용된다. (기존 css 파일의 이름만 module.css 형식으로 바꾸면 된다). 사용 예제는 다음과 같다

xxx.moduls.css 의 내용

.big { width:1000px; }
.small { width:100px; }
.box { background-color: #ccc; height:100px; }​

 

xxx.js 의 내용

import React from 'react';
import xxx from './xxx.module.css';
import cn from 'classnames';

export default function Xxx(s) {
	const a = s === 'big';
	const name = a ? '큰 상자' : '작은 상자';
	return (
		<div className={cn(xxx.box, xxx,big)}>큰 상자</div> ①
		<div className={cn(xxx.box, xxx,small)}>작은 상자</div> ②
		<div className={cn(xxx.box, { [xxx.big]: a, [xxx.small]: !a})}>{name}</div> ③
	);
}

이렇게 className 의 값 부분을 {cn(모듈.클래스명, 모듈.클래스명)} 이런식으로 작성하는 방식으로 사용하기 때문에 동일한 클래스명이 css 에 있어도 충돌되지 않게 된다. 

 

15. Sass 설치

C:\생성폴더명> npm install node-sass

Sass 란 css 파일에 프로그래밍 언어에서 사용하는 것과 같은 변수 사용을 가능하게 하고 반복되는 것을 줄일 수 있게 돕는 프로그램이라고 보면 된다. 간단하게 변수를 정의하고 사용하는 방식을 살펴보자면 다음과 같다.

xxx.module.css

@import './color.scss';

.big { width:1000px; }
.small { width:100px; }
.box { height:100px; background-color: $color; }​

 

color.scss

$color: #ff00ff;​

이렇게 작성하는 경우 xxx.module.css 파일의 마지막 줄에 있는 $color 부분에 color.scss 안에 정의된 #ff00ff 색이 들어가게 된다. 디자인을 손쉽게 바꾸도록 할 때 사용하면 좋은 방식일 것 같다.

 

16. styled-components 설치

C:\생성폴더명> npm install styled-components

js 코드 내에서 동적 css 를 구현하기 위한 모듈이다. 

 

17. slick-carousel 패키지

C:\생성폴더명> npm install react-slick
C:\생성폴더명> npm install slick-carousel

 

사용방법

import React from 'react';
import Slider from 'react-slick';

// css
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

function App() {
	const settings-slider = {
		dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1
	}
    return(
		<Slider {...settings-slider}>
 			<div><p>1</p></div>
			<div><p>2</p></div>
			<div><p>3</p></div>            
		</Slider>        
	)
}​

settings-slider 안의 dots 는 아래 순서를 보여주는 점, infinite 는 반복이다.

---

생성 폴더 아래 src 폴더 아래에 보면 App.js 파일이 존재한다. 일반적으로 대부분의 코딩은 여기에서 시작한다. 또한 css 는 App.css 에서 정의를 해주면 된다. 

App.js 파일의 구조는 다음과 같이 크게 3부분으로 나눌수 있다

import React from 'react';
import './App.css';

function App() {
	return(
    	<div className="App">
        	<h1>리액트</h1>
        </div>
    );
}

export default App;

 

1. import

먼저 필요한 패키지나 css 와 같은 것들을 페이지 내에서 사용할 수 있도록 불러온다.

 

2. function 또는 class

function(함수) 또는 class(클래스)로 묶여있는 실제적인 코딩 내용을 작성한다.

 

3. export

만들어진 function 이나 class 를 외부에서 가져올 수 있도록 승인한다.

---

그런데, 2번과 3번은 하나로 만들 수도 있다. 하나로 만들면 다음과 같다

export default function App() {
	return (
    	<div className="App">
        	<h1>리액트</h1>
        </div>
	)
}

어차피 export 되는 하나의 함수(function) 의 설정 앞에 export default 를 붙여줌으로서 한줄로 코드를 간소화하는 것이 가능하다. 아직 실전프로젝트를 해본 것은 아니기 때문에 좀 더 확인이 필요할 것 같지만, 파일 하나에 하나의 함수만을 작성하는 경우라면 이와 같이 해버리면 라인을 줄이는데 도움이 될 것같다.

---

배포

C:\생성폴더명> npm run build

위 명령어를 통해 개발한 파일을 빌드버전으로 생성한다(서비스에 필요한 파일이다.)

C:\생성폴더명> npx serve -s build

Node.js 의 serve 를 실행한다. 

이렇게하면, build 폴더의 내용을 서비스할 수 있다.