티스토리 뷰

프로젝트/나만의 블로그

React & Parcel 개발 환경 구성 [FE]

JEEGOO 2019. 8. 24. 21:03

# 시작

[나만의 블로그]의 FrontEnd는 React-Apollo, Hooks, TypeScript를 사용합니다.

전체적인 Css는 Free Template를 사용하며 디테일한 부분만 Styled Components를 이용합니다.

Free Template 관련 파일은 Github의 MyBlog/frontEnd/src/static/assets, images 디렉터리에 있습니다.

https://github.com/eonnine/MyBlog.git

 

eonnine/MyBlog

Spring Boot, Graphql, PostgreSQL, React-Apollo, Parcel - eonnine/MyBlog

github.com

# 준비

- Visual Studio Code : 개발 IDE

- Node.js 설치 : 패키지 관리 도구. https://nodejs.org/en/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

# 개발 환경 구성

이전 포스팅에서 서버를 구성했던 MyBlog 디렉터리로 이동해서 아래 명령어를 순서대로 입력합니다.

$ mkdir frontEnd & cd frontEnd & npm init

$ code .

실행된 VS Code를 보면 package.json만 덩그러니 있을 텐데요. 다음과 같이 디렉터리를 구성합니다.

이제 필요한 의존성을 설치합니다.

$ npm -g i parcel-bundler
$ npm -S i react react-dom react-router-dom styled-components
$ npm -S i graphql graphql-tag react-apollo react-apollo-hooks apollo-cache-inmemory apollo-client apollo-link-http
$ npm -D i babel-core babel-preset-env babel-preset-react

$ npm -D i typescript @types/react @types/react-dom @types/react-router-dom

설치가 끝난 package.json 파일의 dependencies.

Type Script까지 설치가 되었다면 아래 명령어를 실행하여 tsconfig.json파일을 생성합니다.

$ tsc --init

tsconfig.json파일을 열어보면 각 옵션들이 주석 처리되어 있는 걸 확인할 수 있습니다. 기본적인 옵션들을 정의합니다.

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "allowSyntheticDefaultImports": true,
    "outDir": "./build",
    "jsx": "react",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    "watch": false,
    "strictNullChecks": true,
    "skipLibCheck": true,

    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
     "node_modules" 
  ]
}

기본적인 디렉터리 생성과 패키지 설치가 끝났으니 환경 설정을 시작합니다.

아래처럼 각 파일의 내용을 작성해주세요.

. babelrc

{
  "presets": ["env", "react"]
}

src/App.tsx

import React, { Fragment } from "react";

const App = () => {
  return (
    <Fragment>
      Hello My Blog!
    </Fragment>
  )
}

export default App;

src/index.tsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

src/index.html

<body>
  <!-- Free Template -->
  <link rel="stylesheet" href="static/assets/css/fontawesome-all.min.css" />
  <link rel="stylesheet" href="static/assets/css/main.css" />
  <noscript><link rel="stylesheet" href="static/assets/css/noscript.css" /></noscript>
  
  <script src="static/assets/js/jquery.min.js"></script>
  <script src="static/assets/js/jquery.scrollex.min.js"></script>
  <script src="static/assets/js/jquery.scrolly.min.js"></script>
  <script src="static/assets/js/browser.min.js"></script>
  <script src="static/assets/js/breakpoints.min.js"></script>
  <script src="static/assets/js/util.js"></script>
  <script src="static/assets/js/main.js"></script>
  <!------------------->

  <div id="root"></div>
  <script src="./index.tsx"></script>
</body>

package.json에 scripts 추가

  "scripts": {
    "start": "parcel src/index.html -p 3000 --open",
    "build": "tsc"
  },

@start

-p 3000 : 포트를 3000으로 설정.

--open : 번들링 후 운영 체제의 기본 브라우저로 open.

# 실행

개발 서버를 시작합니다.

$ npm start

브라우저 창이 열리고 Hello My Blog! 가 정상적으로 출력되는지 확인합니다.

# 마치며

다음 포스팅에서는 Apollo Client를 이용해 서버에서 샘플 데이터를 가져와보겠습니다.

# GitHub

https://github.com/eonnine/MyBlog.git

 

eonnine/MyBlog

Spring Boot, Graphql, PostgreSQL, React-Apollo, Parcel - eonnine/MyBlog

github.com

저작자표시 변경금지

'프로젝트 > 나만의 블로그' 카테고리의 다른 글

Spring Boot & Nashorn으로 SSR [BE]  (0) 2019.08.25
React & Apollo [FE]  (0) 2019.08.24
Spring Boot & GraphQL (2) [BE]  (2) 2019.08.18
Spring Boot & GraphQL (1) [BE]  (0) 2019.08.18
Spring Boot & PostgreSQL [BE]  (0) 2019.08.18
댓글