크롬 익스텐션 보일러 플레이트 및 웹팩 설정과 css 에러 수정

크롬 익스텐션 개발 및 웹팩 설정

현재 진행하는 개인프로젝트에서 크롬 익스텐션을 개발해보고자 여러 아티클을 참고하였습니다.

 

북마크 비스무리하게 만드는 거라 최대한 유사하게 검색해서 진행해봤고 참고할만한 자료들을 많이 읽어봤는데 주로 js로 진행되었고 하나하나 다 배워가면서 진행하면 좋았겠지만 간단한 기능을 개발하기때문에 막히는 부분이 있으면 그때그때 찾아보자라는 생각으로 진행하였습니다.

크롬 익스텐션에서 데이터를 어떻게 다룰 것인가? (피트스탑과제 – 크롬 익스텐션 개발기) | 우

[chrome extension] 현재 탭으로부터 링크를 얻어오자

 

그러던 중 욕심이 생겨서 타입스크립트도 사용해보고 싶고 하다보니 프로젝트 구조가 커지기 시작했고 popup, background,option.. 등등 익스텐션 설정에 맞게 따로 추가해야할 부분이 많아질거같다는 생각이 들어 보일러 플레이트를 찾아보았습니다.

GitHub - chibat/chrome-extension-typescript-starter: Chrome Extension TypeScript Starter

 

리액트 + 타입스크립트 + 웹팩 라이브서버를 사용한 보일러플레이트를 찾을 수 있었고 적용시켰습니다.

웹팩 설정

이 보일러 플레이트에서 기본 css를 사용하기가 조금 꺼려져서 금방 loader를 추가할 수 있었고 설정은 아래와 같습니다.

 

최근에 웹팩에 대한 글을 정리하고 실습해볼 수 있었는데 간단하지만 바로 써먹을 수 있어서 웃으면서 할 수 있었고 그냥 간단하게 sass-loader만 추가하고 설정했습니다.

const webpack = require("webpack");
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const srcDir = path.join(__dirname, "..", "src");

module.exports = {
  entry: {
    popup: path.join(srcDir, "popup.tsx"),
    background: path.join(srcDir, "background.ts"),
    content_script: path.join(srcDir, "content_script.tsx"),
  },
  output: {
    path: path.join(__dirname, "../dist/js"),
    filename: "[name].js",
  },
  optimization: {
    splitChunks: {
      name: "vendor",
      chunks(chunk) {
        return chunk.name !== "background";
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  plugins: [
    new CopyPlugin({
      patterns: [{ from: ".", to: "../", context: "public" }],
      options: {},
    }),
  ],
};

 

CSS 오류 - 부모보다 커지는 현상

에러가 발생한 간단한 코드입니다.

 

body가 350px 300px로 고정되어있는데 자식인 root에서 부모의 크기를 상속받습니다. 그럼에도 불구하고 root가 부모보다 커지는 현상이 발견되었습니다.

body {
  position: relative;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 350px;
  height: 300px;
  background-color: $primaryColor1;
}

#root {
  width: inherit;
  height: inherit;
  padding: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

사실 이 부분은 개발하면서 자주 마주친 상황이긴했는데 볼때마다 삽질을 해서 간단하게 정리하기위해 글을 작성하였습니다.

 

css에 익숙하신 분들이라면 알겠지만 box-sizing: border-box;이 없어 padding의 길이는 고려되지않아 padding 속성을 포함한 root의 크기가 body보다 커지는 현상이었습니다. 위 속성을 넣어 간단하게 해결하였습니다.

 

NestJS 구조에 대해서

 

 

nestJS로 서버를 구현하는 중 간단한 API를 구현하는 부분이지만 구조에 익숙하지가 않아 module - service - controller의 구조만 이해하고 개발하고 있습니다. 그런데 이렇게 구현해도 되나? 싶을 정도로 구조에 대해 고민없이 막 개발을 하는거같아 여러모로 신경쓰이기 시작했습니다.

 

그래도 조금 고민해봤을 때 기능 구현이 우선인거같아 추후에 조금 더 고민하는 걸로 하고 넘어갔다. 그래도 규모에 대해선 한번 고민을 해보는게 좋지 않을까 생각이 나서 주변 사람들에게 정리해서 물어봐야겠다..