지수의 블로그

3 분 소요

Project

React 개인 프로젝트 - 기획 마무리 및 개발 환경 설정

React 개인 프로젝트

기획

앱

매일매일 먹어야 할 약 및 영양제를 나타내주는 웹 어플리케이션

페이지

  • 로그인
  • 홈(메인 타임라인)
  • 약/영양제 추가 페이지 (with modal)
  • my info
  • data (지금까지 먹은 것들 데이터 시각화) → 가능하면 / 일단 제외하고 시작

기능

  • 복용하는 약 혹은 영양제를 리스트에 추가, 삭제, 수정할 수 있음
  • Timeline에 오늘 먹어야 할 약 혹은 영양제를 설정한 시간에 표시
  • 모바일 화면을 기준으로 먼저 구현하고 다 하고 나서 큰 화면으로 media query 적용할 것

와이어 프레임

이미지

이미지

이미지


개발 환경 설정

CRA 없이 개발 환경 구축

init

Terminal에서 package init

yarn init

이후

package.json 설정

react 설치

React를 사용할 것이기 때문에 React를 일단 설치해야한다.

yarn add react react-dom

package.json dependency에 추가 확인

babel 설치

  • babel이란? babel은 최신 자바스크립트 문법을 구형 브라우저에서도 동작하도록 또는 리액트의 jsx 문법을 자바스크립트 문법으로 변환시켜주는 자바스크립트 트랜스파일러이다.

yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader

-D를 써주어 개발모드 (devDependency)에 추가

core: 바벨의 코어 preset-env: 최신 문법을 구형 브라우저에서도 동작할 수 있도록 변환 preset-react: jsx 문법을 변환 babel-loader: webpack 로더 중 하나로 바벨과 연동, jsx 파일과 최신 자바스크립트 문법을 변환

webpack 설치

  • webpack이란? webpack은 수 많은 모듈(클래스 하나로 된 파일, 여러 개의 함수로 이루어진 라이브러리 등등)을 하나로 묶어서 제공하는 번들러(bundler) 중 하나이다.

yarn add -D webpack webpack-cli html-webpack-plugin webpack-dev-server clean-webpack-plugin

webpack: webpack의 코어 webpack-cli: webpack을 커맨드라인에서 사용 html-webpack-plugin: html 파일에 번들링 된 JS 파일을 삽입해주는 플러그인 webpack-dev-server: webpack을 메모리 상에 빌드하여 개발 서버를 구동시킴 clean-webpack-plugin: 번들링할 때마다 이전 번들링 결과를 제거해줌

webpack 설정

가장 상위 폴더에 webpack.config.js 파일 생성

entry, output, devServer, module, plugins 설정

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const devMode = process.env.NODE_NEV !== "production";

module.exports = {
  // entry: 모듈의 의존성이 시작되는 부분, 이름을 지정하고 여러개를 만들 수 있다.
  // entry를 기준으로 연관된 모든 파일들을 번들링
  entry: "./src/index.js",
  // 번들링 될 파일 확장자 등록
  // 웹팩이 모듈을 처리하는 방식을 정의
  // 확장자를 생략해도 인식할 수 있도록 한다.
  resolve: {
    extensions: [".js", ".jsx"],
  },
  // 빌드 설정
  output: {
    path: path.resolve(__dirname, "dist"), // 빌드되는 파일들이 만들어지는 위치, __dirname: 현재 디렉토리
    filename: "bundle.js", // 번들파일 이름
    publicPath: "/",
    clean: true,
  },
  // source-map을 설정하는 부분
  // 에러가 발생했을 때 번들링된 파일 어느 부분에서 에러가 났는지 쉽게 확인할 수 있게 도와주는 도구
  devtool: devMode ? "eval-source-map" : false,
  // webpack 서버 설정
  devServer: {
    open: true,
    hot: true, // 모듈의 변화된 부분만 자동으로 리로딩(HMR/Hot Module Replacement)
    client: {
      overlay: true, // 에러 발생했을 때 브라우저에 띄우기
      progress: true,
    },
    host: "localhost",
    port: 3000,
    historyApiFallback: true,
  },
  // 로더 등록 (바벨 로더, CSS 로더, style 로더 등)
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        exclude: ["/node_modules/"],
        loader: "babel-loader",
        options: {
          presets: [
            ["@babel/preset-react", { runtime: "automatic" }],
            "@babel/preset-env",
          ],
        },
      },
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10000,
          },
        },
      },
      {
        type: "asset/resource",
        exclude: [/\.(js|jsx)$/, /\.html$/, /\.json$/, /^$/],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: `./public/index.html`,
    }),
  ],
};

package.json에 script 추가

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

폴더 및 파일 생성

상위 폴더에 public, src 폴더 생성

src안에 index.js, App.jsx 생성

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

ReactDOM.render(<App />, document.getElementById("root"));
  • App.jsx
import React from "react";

const App = () => {
  return <div>App Component</div>;
};

export default App;

public안에 index.html 생성

  • index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pillsAlarm</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

id를 root로 한 div를 생성한다.

실행

yarn run dev로 실행

yarn lock도 git으로 관리해야한다. yarn 대신 npm을 쓸 때에도 문제없이 의존성 관리를 도와주기 때문이다.

할 것

prettier와 ESlint 설정

컴포넌트 구조 짜기

댓글남기기

참고