자바스크립트로 캘린더 웹 애플리케이션 구현하기 - (1) 프로젝트 설정

프로젝트 설명

자바스크립트를 이용하여 앞으로 캘린더 웹 애플리케이션을 구현할 예정입니다.

FrontEnd Framework를 사용하지 않고 자바스크립트를 학습하며 구현할 예정이라 잘못된 부분이 있을 수 있습니다.

잘못된 부분이 있을 경우, 댓글 남겨주시면 감사하겠습니다!! 🙏🙏

---

(1) 프로젝트 설정

프로젝트를 진행하기에 앞서 개발환경을 설정하겠습니다.

브라우저마다 지원하는 자바스크립트 버전이 다를 수 있으므로 하위 버전에서도 프로젝트가 작동되도록 babel을 이용하여 트랜스파일링 하고 Webpack을 통해 번들링 하겠습니다.

우선 제일 먼저 npm프로젝트를 생성합니다.

npm init

다음 명령어를 터미널 창에 입력하여 package.json 파일을 생성해줍니다.

npm install --save-dev @babel/cli @babel/core @babel/preset-env @babel/plugin-proposal-class-properties
npm install --save-dev webpack webpack-cli
npm install --save-dev babel-loader
npm install @babel/polyfill

다시 터미널 창에 위에 명령어들을 사용하여 Webpack과 babel을 설치해줍니다.

설치가 완료가 된 이후 다음과 같이 package.json파일이 변경된 것을 확인 할 수 있습니다.

{
  "name": "calanderApp",
  "version": "1.0.0",
  
  "devDependencies": {
    "@babel/cli": "^7.13.10",
    "@babel/core": "^7.13.10",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/preset-env": "^7.13.12",
    "babel-loader": "^8.2.2",
    "webpack": "^5.27.2",
    "webpack-cli": "^4.5.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1"
  }
}

이제 먼저 .babelrc파일을 만들어 설치한 babel을 적용할 수 있도록 해줍니다.

{
    "presets" : ["@babel/preset-env"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

다음으로 Webpack이 실행될 때 참조할 webpack.config.js파일을 프로젝트를 생성한 폴더에 만들어 줍시다.

const path = require('path');

module.exports = {
  
  // enntry file
  entry: ['@babel/polyfill', './src/js/index.js'],
  
  // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
  output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src/js')
        ],
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  },
  devtool: 'source-map',
  // https://webpack.js.org/concepts/mode/#mode-development
  mode: 'development'
};

생성 후에 webpack.config.js파일을 다음과 같이 수정해줍니다.

{
  "name": "calanderApp",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "@babel/cli": "^7.13.10",
    "@babel/core": "^7.13.10",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/preset-env": "^7.13.12",
    "babel-loader": "^8.2.2",
    "webpack": "^5.27.2",
    "webpack-cli": "^4.5.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1"
  }
}

다시 package.json파일로 돌아와 build 명령어를 이용해 webpack을 사용하도록 scripts를 추가해 줍니다.

이제 npm run build 명령어를 터미널 창에 입력하면 작성할 자바스크립트 파일이 빌드될 것입니다.

확인해보기 위해 webpack.config.js에 entry 파일로 설정된 경로에 index.js를 만들고 명령어를 입력하면 output 경로로 설정된 위치에 bundle.js가 생성된 것을 확인할 수 있습니다.

이외에 추가로 Webpack을 통해 Sass를 컴파일하기 위해 추가로 설치해줍니다.

npm install node-sass style-loader css-loader sass-loader --save-dev

webpack.config.js 파일에 module 부분을 수정해 적용해줍니다.

  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src/js')
        ],
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader",   // translates CSS into CommonJS
          "sass-loader"   // compiles Sass to CSS, using Node Sass by default
        ],
        exclude: /node_modules/
      }
    ]
  },

이제 프로젝트에 기본적인 설정이 완료 되었습니다.

다음 글부터 설정을 토대로 개발을 진행하겠습니다.