Vite로 회사 전용 로깅 모듈 개발하기 A to Z

스카이 24.10.18

2,463 8 0

facebook twitter kakao link

8 0

facebook twitter kakao link

DEVOTEE 요약: 회사의 여러 프로젝트에서 공통으로 사용하는 로깅 모듈을 관리하기 위해 스카이는 npm처럼 모듈을 쉽게 관리할 수 있는 방법을 찾고자 했습니다. Vite 빌드 도구를 사용하여 단순한 설정으로 모듈을 개발, 테스트, 빌드한 후 Git 저장소에 배포하여 다른 프로젝트에서 쉽게 사용하도록 했습니다. 접근 제어가 필요한 환경에서는 access token을 사용해 문제를 해결했습니다.

안녕하세요. 에이닷에서 프론트개발 하고 있는 스카이입니다. 오랜만에 인사드립니다.

업무를 하면서 한 가지 고민이 생겼습니다. 프로젝트의 규모가 커지면서 도메인 별로 저장소와 서버를 분리해서 관리하게 되었습니다.

공통으로 사용되는 로깅 모듈을 개발해야 해야 했는데요. 같은 코드를 모든 프로젝트에 복사/붙여넣기 하는 것은 관리 측면에서 큰 문제가 될 것이라고 생각되었습니다.

이를 해결하기 위해서 npm 처럼 모듈을 개발하고 제공할수 있는 방법이 없을까 고민하게 되었습니다.

npm은 의존성을 쉽게 관리할 수 있는 훌륭한 도구입니다. 쉽게 설치 및 삭제할 수 있고 버전 관리도 간단합니다.

이러한 장점을 그대로 가져가고 싶었습니다. 가장 큰 문제는 회사 전용 모듈이라 모두 공개되는 npmjs 사이트에 등록할 수 없다는 것입니다.

회사 전용 npm 시스템을 구성하는 것도 잠시 생각했으나 얼마나 사용하게 될지 알 수 없는 상황에서 일을 키우는 게 아닌가 싶었습니다.

작고 단순하게 시작해 볼 방법을 찾아봤고 npm 등록하지 않고도 가능한 방법이 있어서 이를 해결한 방법을 소개합니다.

모듈 개발하기

단독 모듈을 만들겠다는 아이디어를 떠올렸을때 빌드 도구로 유명한 Webpack으로 프로젝트 구성을 시도했습니다.

하지만 모든 옵션을 개발자가 이해하고 한땀한땀 설정해줘야 해서 시작부터 쉽지 않았습니다.

어렵게 기본 동작만 가능한 프로젝트를 구성했으나 타입스크립트를 사용하는 프로젝트에서 설치하여 사용하니, 타입 에러 경고가 뜹니다. 타입을 지정해줄 방법을 찾아야했습니다.

다시 Webpack에 기술되어 있는 옵션을 읽고, 이해하고, 테스트해서 정상 동작하는데 확인해야했습니다.

간단한 모듈을 만드는데 이렇게까지 리소스를 들여야 하나 하는 고민이 들었습니다.

그러다가 좀 더 효율적으로 설정할 수 있는 방법을 찾았고 Nuxt 자체에서 이미 Vite를 사용하고 있어서 빌드 도구로 Vite를 도입하게 되었습니다.

Webpack으로 설정하느라 몇 시간이 걸렸는데 Vite로는 1시간 밖에 걸리지 않았습니다.

Vite 빌드 도구인데 이전의 빌드 도구와 차이점, 자세한 내용을 알고 싶다면 사이트에서 알 수 있습니다.

Vite 설치하기

아래 명령어로 Vite가 전역에 설치되어 있는지 먼저 확인합니다.

> npm list -g

없다면 Vite를 먼저 설치해주세요.

> npm install vite -g

Vite 프로젝트 세팅하기

Vite 프로젝트를 설정하는 명령어로 프로젝트를 생성합니다.

> npm create vite

화면이 없는 모듈을 구성하려고 다음과 같이 선택했습니다.

Vite 프로젝트 구성 살펴보기

package.json 파일 열어 보면 다음과 같이 기본 설정이 되어 있습니다.

{
  "name": "logger",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "files": [
    "dist",
    "index.d.ts"
  ],
  "main": "./dist/counter.umd.cjs",
  "module": "./dist/counter.js",
  "types": "./index.d.ts",
  "exports": {
    "types": "./index.d.ts",
    "import": "./dist/counter.js",
    "require": "./dist/counter.umd.cjs"
  },
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build"
  },
  "devDependencies": {
    "typescript": "^5.4.5",
    "vite": "^5.2.10"
  }
}

의존 모듈을 설치하고 로컬에서 실행해 보면 간단한 예제가 잘 동작합니다.

> npm install
> npm run dev

'count is' 영역을 누르면 숫자가 증가합니다.

Vite 프로젝트 개발하기

구현하기

lib/main.ts 코드를 추가합니다. 예제 코드는 단순하게 콘솔 로그를 찍는 코드를 추가했습니다.

export default function logger() {
  const sendLog = () => {
    console.log('sendLog', arguments)
  }

  return {
    sendLog
  }
}

타입 파일 수정하기

index.d.ts 파일에 우리가 정의한 모듈의 타입을 아래처럼 정의해 줍니다.

해당 파일에 정의되어 있어야 타입스크립트를 사용하는 곳에서 타입을 찾을 수 없다는 에러가 발생하지 않습니다.

export default function logger(): {
    sendLog: () => void;
};

로컬 환경에서 테스트하기

src/main.ts 파일에 코드가 정상 동작하는지 테스트할 코드를 작성합니다.

import logger from '../lib/main'

const log = logger()
log.sendLog()

index.html 파일에 코드를 정리합니다. lang, title 변경하고 불필요한 코드를 삭제했습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>logger</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

아래 명령어로 로컬 환경을 구동합니다.

> npm run dev

로컬에서 정상 동작하는지 확인합니다.

적절한 이름으로 변경하기

빌드 했을 때 만들어지는 파일 이름을 변경하는 작업입니다.

기본 counter로 되어 있는데 이를 프로젝트 이름에 맞게 logger로 변경합니다.

vite.config.ts 과 package.json 파일에 counter를 logger로 변경합니다.

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: './lib/main.ts',
      name: 'logger',
      fileName: 'logger'
    }
  }
})

{
  "name": "logger",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "files": [
    "dist",
    "index.d.ts"
  ],
  "main": "./dist/logger.umd.cjs",
  "module": "./dist/logger.js",
  "types": "./index.d.ts",
  "exports": {
    "types": "./index.d.ts",
    "import": "./dist/logger.js",
    "require": "./dist/logger.umd.cjs"
  },
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build"
  },
  "devDependencies": {
    "typescript": "^5.4.5",
    "vite": "^5.2.10"
  }
}

불필요한 파일 삭제

프로젝트에 불필요한 css, svg 기본 이미지를 삭제합니다.

Vite 프로젝트 빌드하기

아래 명령어로 빌드합니다.

> npm run build

dist 폴더 하위에 빌드 된 파일이 생성됩니다.

각 파일을 확인해 보면 다음과 같습니다.

// logger.js
function e() {
  return {
    sendLog: () => {
      console.log("sendLog", arguments);
    }
  };
}
export {
  e as default
};

// logger.umd.js
(function(e,n){typeof exports=="object"&&typeof module<"u"?module.exports=n():typeof define=="function"&&define.amd?define(n):(e=typeof globalThis<"u"?globalThis:e||self,e.logger=n())})(this,function(){"use strict";function e(){return{sendLog:()=>{console.log("sendLog",arguments)}}}return e});

모듈 배포하기

.gitignore 파일에 dist를 주석 처리합니다. 빌드 된 결과도 함께 commit 해야 다른 프로젝트에서 사용할 수 있습니다.

Gitlab or Git 저장소에 올려두기

다음 명령어로 git 초기화를 한 후 모든 내용을 commit 합니다.

그리고 저장소에 push 합니다.

> git init
> git remote add origin https://{저장소url}/logger.git
> git push -uf origin main

태그 생성하기

태그를 생성합니다. 태그를 생성하는 이유는 모듈을 사용하는 프로젝트마다 다른 버전을 사용할 수 있도록 지원하기 위해서입니다.

모듈 사용하기

회사 내부에서만 사용 가능한 모듈이기 때문에 직접 가져올 수 있도록 사용할 프로젝트 package.json에 다음과 같이 추가했습니다.

#1.0.0 은 앞서 지정한 태그 버전입니다.

  "dependencies": {
    "logger": "git+https://{저장소url}/logger.git#1.0.0"
  }

모듈에 타입을 설정했기 때문에 타입 추론이 가능하고 import 해서 사용할 수 있습니다.

아래 명령어로 만든 모듈을 설치하고 사용하면 됩니다.

> npm install

버전의 업데이트가 필요하면 아래 명령어로 꼭 업데이트 합니다.

> npm update logger

빌드 에러 해결하기

개인 프로젝트라면 여기 끝이 났겠지만 jenkins 활용해서 배포하는 환경에 문제가 발생했습니다.

회사 내에 보안 정책 때문에 다음과 같은 에러가 발생했습니다.

스크린샷

https://{저장소url}/logger.git#1.0.0 접근하지 못해서 발생하는 에러입니다.

이것을 해결하고자 access token을 발급받고 해당 access token id, password를 다음과 같이 추가해서 에러를 해결했습니다.

  "dependencies": {
    "logger": "git+https://{id}:{password}@{저장소url}/logger.git#1.0.0"
  }

단독 모듈 개발을 고민하고 있다면 Webpack으로 고통받지 말고 Vite 도입해서 깔끔하게 설정을 끝내세요.

설정하는 삽질은 덜하고 코드 구현에만 집중할 수 있게 도와줍니다.

긴 글 읽어 주셔서 감사합니다.

#Vue.js #Node.js #Git #Angular.js #React #A.(에이닷)

등록

DEVOTEE를 활성화 시키면
지금 작성한 댓글에 AI가 댓글을 달아줍니다.

익명

스카이 님의 최신 블로그

제로 클릭 시대, GEO(Generative Engine Optimization) 전략 강좌 리뷰

들어가며 안녕하세요. 에이닷에서 프론트엔드 개발 업무를 하는 스카이입니다. 추석 연휴 시작 전 GEO(Generative Engine Optimization) 관련 세미나가 동아일보 미래 전략연구소에서 열렸습니다. 자세한 정보는 이 링크에서 확인하시면 됩니다. 강의 목차 강의 내용 강좌 크게 미디어별 GEO 대응 방법, GEO 지표 도구, GEO 최적화 컨텐츠 생성 방법 주제를 다룹니다. 이 중에서 2가지 주제에 대해 정리해 봤습니다. 2강 GEO란? 채널별 AI 최적화 운영 가이드 – 김경달 더코어 대표 기존에는 검색할 때 구글 또는 네이버 사이트에 들어가서 검색 키워드를 입력해서 검색 후 결과 내용에 일부 내용을 확인한 후 상세 내용은 클릭을 통해 세부 내용을...
프론트엔드 개발자를 위한 FEConf 2025 간단 후기

🚀 들어가며 안녕하세요. 에이닷에서 프론트엔드 개발 업무를 하고 있는 스카이입니다. 지난 9월 23일 토요일 FEConf 2025가 열렸습니다. 코로나 팬데믹 이후 오프라인 콘퍼런스는 오랜만이었는데 생각보다 사람들이 많아서 놀랐습니다. 다녀온 후기를 간단하게 정리해 보았습니다. FEConf는 매해 열리는 Front-End 콘퍼런스로 FE 기술을 공유하는 콘퍼런스입니다. 이번 콘퍼런스는 세종대학교에서 진행되었습니다. 📚 가장 인상적었던 세션들 30분 단위로 세션이 있었고10분 단위의 Lightning talk 세션이 따로 있었습니다. 세션 중에 가장 기억이 남는 세션들 위주로 정리해 보았습니다. 🔥 스벨트를 통해 리액트 더 잘 이해하기 ＂다른 프레임워크를 배우...
Vue.js 환경에서 페이지 이탈 방지 팝업 구현하기

안녕하세요. 에이닷에서 프론트엔드 개발자로 일하고 있는 스카이입니다. 오늘은 사용자의 편의성을 위해 이탈 방지 팝업을 서비스에 적용하면서 했던 경험을 정리하여 글로 남깁니다. 배경 에이닷 회원 가입 과정에서 사용자가 실수로 페이지를 벗어날 때 입력한 정보가 유실되는 문제가 발견되었습니다. 이 문제는 사용자 경험을 저해하는 중요한 이슈로, 이탈 방지 팝업을 통해 해결하고자 했습니다. 가끔 사이트에서 아래와 같은 팝업을 마주하게 될때가 있습니다. beforeunload 이벤트 앞서 보여드린 팝업을 노출 시키는 방법은 매우 간단합니다. beforeunload 이벤트를 추가하면 됩니다. 해당 이벤트는 페이지를 벗어나려고 할때 이벤트가 트리거 됩니다. 구현 코드 windo...
Vite로 회사 전용 로깅 모듈 개발하기 A to Z

안녕하세요. 에이닷에서 프론트개발 하고 있는 스카이입니다. 오랜만에 인사드립니다. 업무를 하면서 한 가지 고민이 생겼습니다. 프로젝트의 규모가 커지면서 도메인 별로 저장소와 서버를 분리해서 관리하게 되었습니다. 공통으로 사용되는 로깅 모듈을 개발해야 해야 했는데요. 같은 코드를 모든 프로젝트에 복사/붙여넣기 하는 것은 관리 측면에서 큰 문제가 될 것이라고 생각되었습니다. 이를 해결하기 위해서 npm 처럼 모듈을 개발하고 제공할수 있는 방법이 없을까 고민하게 되었습니다. npm은 의존성을 쉽게 관리할 수 있는 훌륭한 도구입니다. 쉽게 설치 및 삭제할 수 있고 버전 관리도 간단합니다. 이러한 장점을 그대로 가져가고 싶었습니다. 가장 큰 문제는 회사 전용 모듈이라 모두...

목록으로

DEVOCEAN

로그인 선택

미리보기

커뮤니티

글 등록

임시저장함

데보션 블로그 게재 요청