🥬🍖프론트를 Firebase에 싸서 드셔보세요 | 2 - 코드 작성과 webpack 설치

Dongjun Kim·2022년 12월 4일

Baas Firebase 백엔드 프론트엔드

🔥Firebase로 백엔드 만들기

목록 보기

2/4

1편을 놓쳤다면 꼭 보고 오자!

기본 파일들 작성

원하는 곳에 프로젝트 폴더를 만든 후 dist/index.html, src/index.js를 하나씩 만들어준다.

파일 구조는 다음과 같다.

.
├── dist          
│   └── index.html       
├── src
│   └── index.js          
└── README.md

index.js는 나중에 수정하고, 일단 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>Firebase-9-Demo</title>
    <script src="bundle.js" defer></script>
  </head>
  <body>
    <h1>Firebase🔥<h1>
  </body>
</html>

<script>태그 안의 bundle.js라는 파일은 나중에 설정할 webpack이 생성해준다.
특정 주소로 들어갔을 때, 이 html 페이지를 보는게 우리의 목표다.

npm 초기화

Node.js가 설치되어 있단 가정 하에 npm command를 쓸 수 있다.

npm init

실행하면, package.json가 생성된다.

앞으로 npm run build로 webpack을 실행할 예정이므로 package.json을 수정해줘야 한다.

scripts라고 되어 있는 부분에 “build”: “webpack”을 추가해주자.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

Webpack 설치

npm i webpack webpack-cli -D

-D 옵션: Development Dependency에 추가

윗 코드를 실행해 webpack을 설치한다. Firebase 라이브러리 안에서 우리가 import해서 쓰는 모듈만 output file에 번들링 해주는 역할을 할 거다.

Webpack.config.js

설치 후, 프로젝트의 root folder에 webpack.config.js란 파일을 만든다.

안에는 다음과 같이 적어준다.

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  watch: true,
};

자세한 설명은 생략하겠지만, entry의 파일을 통해 연결된 모든 파일들을 ouput에 따라 우리가 HTML에 추가했던 bundle.js를 만들어준다는 뜻이다. npm, webpack 등에 대해서는 또 정리를 해서 올릴 생각이다.

참고로 watch: true는 webpack이 지켜보고 있다가 파일에 변경이 생기면 다시 번들링해준다는 뜻이다.

🔥다음에는 firebase를 설치하고 deploy까지 해보자!

Dongjun Kim

중요한 것은 꺾이지 않는 마음☕️

이전 포스트

🥬🍖프론트를 Firebase에 싸서 드셔보세요 | 1 - 프로젝트 시작하기

다음 포스트