1.React 프로젝트 시작하기

티스토리 뷰

웹 프로그래밍/React

1.React 프로젝트 시작하기

소림파워 2019. 1. 21. 15:29

안녕하세요~

오늘부터 리액트로 프로젝트를 진행하려 합니다

블로그 포스팅은 제가 리액트를 처음으로 접해보며 알게된 것을 기록하겠습니다.(혹시 제가 잘못 알고 작성한 부분이 있으면 댓글로 수정 부탁드립니다)

우선 몇개의 예제 프로젝트를 만들어 보고 개인 프로젝트를 진행하겠습니다.

첫 번째로 아무것도 없는 빈 프로젝트에서 기본적인 프로젝트 구조를 잡고 리액트 개발환경 세팅하는 과정입니다. (Windows 환경)

1.리액트 환경 세팅

1-1 nodejs 설치

https://nodejs.org 에서 다운 받아 설치

1-2 babel, webpack, webpack-dev-server 설치(왜 글로벌 옵션을 줘야하지?)

npm install -g babel webpack webpack-dev-server

babel : es6 문법을 지원하지 않는 브라우저를 위해 es6 문법을 컴파일 해주는 모듈

webpack : 작성한 js 소스들을 하나의 파일로 묶어주는 모듈

webpack-dev-server : 별도의 서버를 구축하지 않고 localhost에서 바로바로 테스트를 할 수 있게 해주는 모듈

1-3 프로젝트용 폴더생성

개인 PC에 프로젝트 폴더 생성

1-4 package.json 생성

npm init 으로 만들 프로젝트의 기본적인 설정들을 입력해 주면 package.json이 생성됨

Tip. package.json은 내 프로젝트에서 사용될 npm 모듈들의 의존성을 관리해주는 파일인데 내가 프로젝트를 진행하다보면 사용할 모듈이 추가되거나 수정될 수 있다. 그럴 경우 npm install로 모듈을 설치할 때 --save 옵션을 주면 package.json에 자동으로 업데이트가 된다.

그리고 npm install 시에 --save-dev 옵션도 존재하는데 해당 옵션은 package.json의 devDependencies 부분에 추가되면서 테스트 환경에서만 사용되는 모듈을 추가하는 옵션이다. 나중에 프로젝트 빌드 시에 개발용 빌드가 아닌 배포용 빌드에서는 --production 옵션으로 빌드하게 되는데 그럴 경우 devDependencies 안에있는 모듈들은 빌드되지 않는다.

1-5 react, react-dom, bael에서 사용되는 모듈들 설치(해당 모듈들은 개발환경에서만 사용되므로 --save-dev 옵션 줌)

npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015 webpack webpack-dev-server

Tip. react-dom : 브라우저 DOM 메서드를 제공

react-prop-types : props 타입을 체크함

react-router-dom:routing 기능 제공

babel-core : Babel 핵심 모듈

babel-loader : babel과 webpack을 사용해 자바스크립트 컴파일 해주는 로더

babel-preset-env : es2015,es2016,es2017 버전을 지정하지 않아도 바벨이 자동으로 탐지해 컴파일

babel-preset-react : 리액트를 사용한다는 것을 바벨에게 말해줌

css-loader : import/require() 처럼 @import/url()을 해석함

html-webpack-plugin : 애플리케이션을 위한 html 파일을 생성하거나 템플릿을 제공

style-loader : <style>태그를 삽입하여 css에 dom을 추가한다.

webpack-cli : webpack 4.0.1이상에서 필요한 커맨드라인 인터페이스

webpack-dev-server : 로컬 개발서버 제공

1-6 디렉토리 구조 및 파일 생성

내가 앞으로 만들 디렉토리 구조와 파일을 생성하면됨 구조를 잡아놨으면 미리 생성해도 되고 프로젝트 진행하면서 하나하나 생성해도 됨

1-7 webpack.config.js 설정하기

webpack으로 프로젝트를 빌드할 때 참고되는 config 파일임

ex)

module.exports ={
    //entry : webpack에서 제일 처음 접근하는 파일
    entry: "./jsx/app.js", 

    //output : webpack 빌드 후 생성될 경로와 파일명
    output : {
        path : __dirname + '/js',
        filename : "bundle.js" //생성될 파일 이름은 bundle.js
    },

    //devserver : 개발 환경에서 테스트하기위한 로컬 서버 설정
    devServer : {
        inline : true,
        port : 7777, //http://localhost:7777
        contentBase: __dirname + '/public/'


    },

    //module : 별도의 loader 를 사용하기위해 설정
    module : {
        
        //loaders 전에 실행되어야 하는 로더들을 선언하는 부분.
        preLoader : [
            {
                test : /\.js$/,
                exclude : /(node_modules)/,
                //babel-loader를 사용하기 전 lint하겠다. eslint는 소스들의 자바스크립트 문법 에러를 점검해주고 
 //하나의 코딩 스타일을 적용시켜준다. JSHint, JSLint 등도 있다.
                //eslint에 대한 자세한 사항 
 //(참고 : https://www.zerocho.com/category/JavaScript/post/583231719a87ec001834a0f2 )
                loader : 'eslint', 
            }
        ],

        loader : [
            {
                test : /\.js$/, //해당 정규식에 해당되는 파일들
                exclude : /(node_modules)/, //node_modules에 있는 파일들은 제외
                loader : 'babel-loader' //babel-loader를 사용하여 컴파일 하겠다.
            }
        ]
    }
}