오랜만에 글을 작성한다. 요즘은 휴대폰의 알림은 모두 꺼두고 오직 개발에 대한 선택과 집중을 하고 있다. 우선 나중을 위한 포트폴리오 사이트가 필요할 거 같아 오늘부터 시작하게 되었다.
초기 세팅
Webpack
const CopyPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.jsx",
output: {
path: path.join(__dirname, "/dist"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
{ test: /\.css$/, use: ["style-loader", "css-loader", "sass-loader"] },
{
test: /\.png$/,
use: [{ loader: "file-loader", options: { name: "[name].[ext]" } }],
},
],
},
devtool: "source-map",
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
}),
new CopyPlugin({
patterns: [{ from: "static" }],
}),
],
devServer: {
host: "localhost",
port: 3000,
open: true,
},
};작성하는데 얼마나 많은 시간을 투자한지 모른다. 기초적인 webpack 설정하는 법조차 모르는 나녀석...
CRA를 사용하지 않고 도화지부터 하자니 시작부터 막막했다...
CopyPlugin
이번 포트폴리오 프로젝트에선 정적 파일의 이미지들이 많이 쓰일 거 같아 CopyPlugin을 사용하여 출력 디렉토리로 올바르게 내보내질 수 있도록 하였다.
index.js
import React from "react";
import App from "./App.jsx";
import * as ReactDOMClient from "react-dom/client";
const root = ReactDOMClient.createRoot(document.getElementById("app"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);우여곡절 끝에 index.js를 만들어냈다. ReactDOM이 그려지는 방식을 어느정도 이해한 것 같다.
//처음엔 아래 코드처럼 render를 해주었는데 에러는 아니지만 경고문이 하나 발생했다.
ReactDOM.render(<App />, document.getElementById("app"));
링크에 들어가보니 요약하자면 구식의 렌더방식이란다. 자세한 내용은 여기
친절하게도 콘솔에 React 깃허브링크가 나와있어 손쉽게 해결하였다.
하지만 다음 에러를 바로 만났다.
import App from "./App"아니 평소에는 확장자를 안붙여도 잘만 읽던 녀석이 자꾸 에러를 뱉어냈다.
1시간 동안 찾아낸 결과 CRA로 만든 React App은 구성요소를 가져올 때 .js / .jsx를 자동으로 인식하지만
Webpack으로 만든 React는 구성요소를 가져올 때 .js만 인식하여 발생하는 에러였다.
두 가지 방법이 있다.
import App from "./App.jsx"와 확장자를 명확하게 작성할 것.- webpack.config.js에
resolve: {
extensions: [".js", ".jsx"],
},라는 옵션을 추가할 것.
나는 후자를 선택하여 보다 import문을 조금이나마 깔끔하게 하였다.
Git Commit
이번 프로젝트에선 혼자 진행하는만큼 전엔 하지 않았던 것들을 해보고 싶었다.
그 중 하나가 깃모지를 이용한 커밋이였다. 깃모지를 열심히 찾아다니면서
Git Commit template란 걸 알게 되었고, 바로 실행에 옮겼다.
# <타입>: <제목>
##### 제목은 최대 50 글자까지만 입력 ############## -> |
# 본문은 위에 작성
######## 본문은 한 줄에 최대 72 글자까지만 입력 ########################### -> |
# 꼬릿말은 아래에 작성: ex) #이슈 번호
# --- COMMIT END ---
# <타입> 리스트
# 🎉 :tada: : 초기 커밋
# ✨ :sparkles: : 기능 추가
# 🐛 :bug: : 버그 수정
# 🔨 :hammer: : 리팩토링 (함수 분리/이름수정 등 실행 결과의 변경 없이 코드 구조를 재조정)
# 🔥 :fire: : 코드/파일 제거
# 🚚 :truck: : 파일/폴더 경로 수정 및 이름 수정
# 🎨 :art: : CSS 추가/수정
# ⚡ :zap: : 일반 코드 수정
# 🚑 :ambulance: : 핫픽스
# 👷 :construction_worker: : 스크립트 수정
# ------------------
# 제목 첫 글자를 대문자로
# 제목은 명령문으로
# 제목 끝에 마침표(.) 금지
# 제목과 본문을 한 줄 띄워 분리하기
# 본문은 "어떻게" 보다 "무엇을", "왜"를 설명한다.
# 본문에 여러줄의 메시지를 작성할 땐 "-"로 구분
# ------------------루트 디렉토리에 .gitmessage.txt를 만들고 위 텍스트들을 넣어주었다.
그러고 난 후 git config --global commit.template .gitmessage.txt을 터미널에 작성해주면 template이 저장되어 git commit을 입력하면 위와 같은 틀이 불러와진다.
그래서 이번엔 깃모지와 템플릿을 사용하여 보다 상세한 내용들도 커밋할 계획이다.
🤦1일차 회고
회의감이 엄청나게 드는 하루였다. 취업을 하기 위해 만드는 포트폴리오지만, 기초 세팅하는 것 마저 버거워하는 자신을 보며 취업은 아직 한참 멀었다는 생각이 수시로 들었다. 하지만 한편으로는 뚜드려 맞아가며 배우는거라며 지금이라도 알아가는게 어떻게든 어제보단 나아지는 거라고 생각하고 있다. 분명 전에 부트캠프에서 배운것들인데 기억 못하는 내가 한심하기도 하면서 한편으로는 잊었던 정보를 다시 알아가는게 너무 재밌다. 내일은 디자인을 어느정도 틀을 잡아야 하는데 조금 앞이 캄캄하다.
