프론트엔드 개발환경 구축 - VScode + React
프로젝트/마이에디터 : 나만의 에디터

프론트엔드 개발환경 구축 - VScode + React

설치 작업

| VScode

먼저 VScode를 설치하고 몇 가지 Extension을 설치했습니다. 코드 뒤에 남는 불필요한 공백을 삭제해주거나, 괄호가 제대로 짝지어져 있는지 색상을 표시해주는 기능 등 편의성을 위한 것부터, 디버깅 기능까지 추가할 수 있습니다.

 

디버깅을할 수 있게 해준다

 

| node.js, npm, yarn

node.js, npm, yarn을 설치했습니다. 각각의 역할은 다음과 같습니다.

  • node.js : Jabascript 런타임. Babel, Webpack 등의 모듈을 가지고 있음
  • npm : Node Package Manager. Node.js의 패키지를 관리
  • yarn : npm에 비해 속도가 향상된 패키지 매니저

 

 

React 개발환경 구축

| create-react-app (CRA)로 개발환경 구축하기

아래와 같이 create-react-app으로 프로젝트를 생성하면 Babel이나 Webpack 등이 자동으로 설정됩니다. 하지만 이번에는 create-react-app이 구체적으로 어떤 작업을 대신해주는지 알아보기 위해 직접 개발환경을 구축해보겠습니다.

npm install -g create-react-app
create-react-app 프로젝트이름

 

create-react-app으로 생성한 todolist 프로젝트

 

| 직접 React 프로젝트 개발환경 구축하기

(1) yarn 초기화

우선 yarn을 초기화하여, 프로젝트 폴더에 package.json 파일을 생성하겠습니다.

//프로젝트 폴더로 이동 후
yarn init -y

생성된 package.json

 

(2) 폴더 생성

당장 리덕스를 사용할 계획은 없지만, 이후 도입할 가능성을 염두에 두고 디렉토리를 다음과 같이 구성했습니다.

생성된 폴더

  • dist : webpack의 번들링 결과가 위치할 폴더
  • node_modules : react, react-dom, babel 등 노드 모듈이 위치할 폴더
  • public : index.html, favicon.ico 등 정적 파일이 위치할 폴더
  • src: 작업을 진행할 폴더
    - action : 액션 메소드가 위치할 폴더(애플리케이션에서 사용하는 명령어, API 통신 등)
    - component : React 컴포넌트가 위치할 폴더.
    - reducer : state를 변경시키는 reducer가 위치할 폴더.

 

(3) 설치

  • React
    리액트 핵심 패키지를 설치합니다
yarn add react //react 핵심 패키지
yarn add react-dom //react와 dom을 연결

 

  • Babel
    최신 ES6+문법을 구 버전인 ES5로 transpiling 해주는 컴파일러입니다. 최신 문법은 브라우저가 이해하지 못하는 경우도 있기 때문에, Babel을 활용하여 변환하는 것이 편리합니다.
yarn add @babel/core //바벨 설치
yarn add @babel/preset-react //React JSX를 트랜스파일링
yarn add @babel/preset-env //ES6+를 ES5로 트랜스파일링

 

  • Webpack
    node.js의 모듈 중 하나로, Javascript/HTML/CSS/Image/Font 등 여러 개의 리소스를 기능별로 모듈화 해주는 모듈 번들러입니다. 여러 개의 파일이 하나로 줄게 되므로, 웹 페이지 로딩 속도가 올라가는 등의 장점이 있습니다.
yarn add webpack //웹팩 설치
yarn add webpack-cli //cmd에서 웹팩 사용
yarn add webpack-dev-server //실시간 리로딩을 하는 개발 서버(변경된 소스 파일만 새로 번들링)

yarn add babel-loader //JSX 및 ES6+ 문법을 트랜스파일링
yarn add css-loader //전처리기. CSS 파일을 자바스크립트가 이해할 수 있도록 변환
yarn add style-loader //변환된 CSS 파일을 <style> 태그로 감싸서 삽입
yarn add file-loader //이미지, 폰트 등의 파일 로딩

//plugin
yarn add html-webpack-plugin //HTML 파일에 번들링된 자바스크립트 파일을 삽입
yarn add clean-webpack-plugin //새로 번들링을 할 때 이전 번들링 결과를 제거
yarn add mini-css-extract-plugin //css 파일로 변환해주는 플러그인

설치 후 package.json

 

(4) Babel 전역 설정 파일 생성

babel.config.js

const presets = ['@babel/preset-react', '@babel/preset-env']
module.exports = {presets};

간단하게 preset만 설정하고 plugin은 추가하지 않았습니다.

 

 

(5) Webpack 전역 설정 파일 생성

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: "./src/index.js", // 번들링 시작 지점
  output: {
    path: path.resolve(__dirname, "dist"), // 번들링 된 결과를 저장할 경로
    filename: "bundle.js" // 번들링 된 파일 명
  },
  module: {
    rules: [
		{ test: /\.(js|jsx)$/, exclude: '/node_modules/', use: "babel-loader" },
		{ test: /\.css$/, use: [{loader: "style-loader"}, {loader: "css-loader"}] },
		{ test: /\.jfif$/, use: "file-loader" }
	]
  },
  plugins: [	//아까 설치한 플러그인
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    new MiniCssExtractPlugin({ filename: 'app.css' }),
  ]
};

 

(6) package.json 설정

다음 script를 추가합니다. yarn run dev 명령어로 개발 모드를 사용할 수 있습니다.

"scripts": {
    "dev": "webpack serve --progress --mode development",
    "build": "webpack --progress --mode production"
 }

 

(7) 리액트 컴포넌트 생성

  • src/App.js
import React from 'react';
import './App.css';

function App() {
  return (
    <div class="App">
    	Hello My Editor!
    </div>
  );
}

export default App;
  • src/App.css
body {
  font-size: 24px;
  background: #e5e5e5;
}
  • src/index.js

index.js에서 'ReactDOM.render()'으로 컴포넌트를 렌더링 합니다.

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

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
  • public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="my editor"
      content="Web site for edit text"
    />
    <title>My Editor</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

 

(8) 실행

드디어 React 환경 구축이 끝났습니다.

yarn run dev

 

create-react-app을 사용하지 않고 직접 프로젝트를 생성하는 과정을 알아보았습니다. 직접 프로젝트 환경을 설정할 경우 여러 가지를 커스텀할 수 있다는 장점은 있지만, 굉장히 시간이 오래 걸리고 설정해야 할 것이 많았습니다.

 

직접 생성한 프로젝트에서는 Webpack과 Babel정도만 간단히 설정하였는데, create-react-app을 사용할 경우 eslint나 browserlist같은 더 많은 것들이 기본적으로 설정되기 때문에 편리하고, 현재 해당 설정에서 딱히 변경해야 할 부분은 없을 것으로 예상됩니다.

 

따라서 이번 프로젝트에서는 create-react-app을 활용하여 프로젝트를 생성하고, 필요에 따라 eject 등을 활용하여 수정하는 방식으로 진행할 계획입니다.

 

 

Debugger 설정

마지막으로 VScode의 디버그 환경 설정을 진행하여, Chrome을 기본 구성으로 추가하였습니다.

실행 및 디버그 - Chrom 선택

 

 

 

 

저작자표시 동일조건

'프로젝트 > 마이에디터 : 나만의 에디터' 카테고리의 다른 글

프론트엔드 개발환경 구축 - React vs Vue  (0) 2021.07.14
프론트엔드 개발환경 구축 - 프레임워크란? 바닐라 JS vs 프레임워크  (0) 2021.07.13
프론트엔드 개발환경 구축 - IDE/편집기 조사 및 장단점 비교  (0) 2021.07.12

    티스토리툴바