🪴 성장일지

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명

Project jaybnb

오늘은 프로젝트 시작에 앞서, 개발 환경을 세팅하고 깃허브 브랜치부터 커밋메세지 convention을 공부했다.<br/> 솔직히 프로젝트 세팅이 뭐 얼마나 복잡할까 생각했는데, 생각보다 깊이 들어가니까 알아두면 좋은 내용들이 정말 많았다.

JavaScript Webpack Babel

# npm으로 폴더관리 시작
npm init -y

# webpack 설치
# -D는 --save-dev와 같으며 개발 의존성을 가지며 패키지가 설치된다.
# 빌드 시 배포용과 개발용을 나누기 위함이다.(굳이 배포용에는 이 패키지가 필요없기 때문!)
npm install -D webpack web-cli

# 바벨과 관련한 패키지 및 플러그인 설치
# babel-loader는 webpack으로 번들링할 때, 동시에 바벨로 트랜스파일링까지 하게 해주는
# 말 그대로 바벨을 불러와주는 녀석!!(웹팩에서 지원하는 다양한 loader들이 있다.)
npm install -D @babel/core @babel/cli @babel/preset-env babel-loader

# css-loader: webpack으로 js파일을 번들링할 때, js파일에 css를 모듈처럼 import하면
# css도 같이 번들링해주는 loader
# style-loader: css-loader로 번들링 후 해당 css 코드를 style 태그에 넣어주는 역할
npm install -D css-loader style-loader

package.json(npm init 시 생성)

{
  "name": "jaybnb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -w" # ⭐ npm run build -> webpack -w가 실행되게 해준다.
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/f-lab-edu/jaybnb.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/f-lab-edu/jaybnb/issues"
  },
  "homepage": "https://github.com/f-lab-edu/jaybnb#readme",
  "devDependencies": {
    "@babel/cli": "^7.18.10",
    "@babel/core": "^7.19.0",
    "@babel/preset-env": "^7.19.0",
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}

webpack.config.js(웹팩 설정 후 따로 만들어줘야한다.)

const path = require('path');

module.exports = {
  entry: './src/js/main.js', // 번들링의 입구(entry)가 되는 파일(이 파일에 여러 자바스크립트 모듈 파일을 import하자)
  output: {
    filename: 'bundle.js', // 번들링 후 생성될 js 파일
    path: path.resolve(__dirname, 'dist'), // __dirname은 nodeJS에서 현재 디렉토리를 나타낸다.
  },
  module: {
    // 번들링 시, 진행할 규칙들
    rules: [
      {
        test: /\.js$/,
        include: [path.resolve(__dirname, 'src/js')],
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  devtool: 'source-map',
  mode: 'development',
};

Git Github

일반적으로 프로젝트 생성 시 main에서는 작업하지 않는다.<br/>

• main: 제품으로 출시 가능한 브랜치. 개발 작업이 아닌 배포 이력을 관리하는 브랜치로 사용한다.
• develop: 개발 작업을 위한 브랜치로 각 기능에 맞는 새로운 branch를 잡고 develop에 merge하면서 진행한다.
  • feature/aaa: aaa라는 기능을 개발하기 위한 브랜치
  • release-1.2: 이번 출시 버전(1.2)을 준비하는 브랜치
  • hotfix-1.2.1: 출시 버전에서 급하게 버그를 잡을 때 사용하는 브랜치(1.2버전을 수정하여 1.2.1로 업그레이드)

커밋 메시지 컨벤션

type: subject

body

footer

type

• feat: 새로운 기능 추가
• fix: 버그 수정
• docs: 문서 수정
• style: 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
• refactor: 코드 리팩토링 한 경우
• test: 테스트 코드, 리펙토링 테스트 코드 추가한 경우
• chore: 빌드 업무 수정, 패키지 매니저 수정 등

subject

제목은 50자를 넘기지 않으며, 첫 글자는 대문자, 마침표는 붙이지 않는다.<br/> 또한, 과거 시제를 사용하지 않고 명령어로 작성한다.

body

선택사항이며 72자 이하, 제목과 구분을 위해 한 줄 띄운다.<br/> 부연설명, 커밋의 이유 등을 적는다.

footer

선택사항이며 주로 issue tracker id를 작성할 때 사용한다.

예시) 사실상 body와 footer는 필수가 아니다.

feat: Add abcdef
chore: Build dev-env

<br/>

개발 환경 세팅은 반드시 공식 문서를 참고하면서 내 프로젝트에 필요한 환경을 생각하여 작성하도록 하자! 시간이 걸려도 기초를 다져놓고 어떻게 프로젝트를 구성하고 설계할지를 고민하고 시작할 수 있도록! 풀리퀘스트, 커밋 컨벤션은 최대한 찾아보면서 익숙해지는 게 좋을 것 같다.

undefined