Half Road

개발 환경vite + vue + typescript필요성개발을 하면서 대부분에 파일에서 필요한 모듈들이 있을 것이다.예를들어, 지금은 vue 프로젝트를 하니 vue 관련된 모듈들은 대부분 파일에서 import하고 있다.이러한 import 구문이 많아지면 가독성이 떨어지기도해서, build tool의 도움을 받아 자동으로 import를 하도록 설정하기로 하였다.설치설치 및 적용은 아주 간단하다.공식문서npm i -D unplugin-auto-import적용vite.config.tsimport AutoImport from 'unplugin-auto-import/vite'export default defineConfig({ plugins: [ vue(), AutoImport({ // global impor..

개발 환경vite + vue + typescript왜 사용하나?우리가 Vue 프로젝트를 하다 보면 전역 컴포넌트를 사용하는 일이 생긴다.또 플러그인으로 전역적으로 컴포넌트를 등록하는 일도 있다. (router, vuetify, pinia 등)이러한 전역 컴포넌트 사용 할 때 자동완성 기능의 도움을 받을려면 전역 컴포넌트에 대한 타입을 설정해주어야 한다.이뿐만 아니라 프로젝트내에 생성된 컴포넌트들도 자동으로 전역 컴포넌트를 등록해주는 기능을 한다.전역 컴포넌트 타입 등록 방법components.d.tsRouter를 Plugin 등록하여 사용하면 RouterLink, RouterView를 전역적으로 사용 가능 한데,이 두 Component 타입을 전역적으로 등록하기 위해 아래와 같이 작성한다.// compo..

설치 환경Docker를 통해 nginx를 설치하여 진행 하였으므로, linux 환경에서 진행됨.자세한 사항은 nginx 공식문서를 참조.SPA 빌드 파일 배포빌드 파일 배포vue3 + vite를 이용하여 빌드된 파일이 dist 경로에 생성 되었다.해당 파일을 nginx의 root 경로에다가 위치시켜준다.root 경로는 설정하기 나름이지만 보통 /usr/share/nginx/html/ 경로를 root 경로로 주로 사용하는 것 같다.nginx 설정 파일 작성설정 파일 위치는 /etc/nginx/conf.d 디렉토리 하위에 위치 시킨다.경로는 설치 환경마다 달라질 수 있다. 문서 참조/etc/nginx/conf.d/default.confserver { listen 80; client_max_body..

용도database를 연결해 table들의 model을 생성해주는 library.sequelize 사용 시 model 정보가 필요하므로 꼭 필요한 기능이다.sequelize-auto: https://github.com/sequelize/sequelize-auto실습CLI로도 생성할 수 있지만 js로도 작성 가능하다. 재활용이나 수정 측면에서 용이하므로 js로작성하기로 했다.Programmatic APIhttps://github.com/sequelize/sequelize-auto?tab=readme-ov-file#programmatic-api사전 설치postgres DB에서 가져와야 하므로 아래 패키지를 설치해준다.npm i -D sequelize pg pg-hstore 다른 DB일 경우 각자 DB에 맞게..

도커를 이용해서 gitlab 서버를 관리하였는데 어느날 되지 않아 확인해보니 Disk 사용 공간이 부족 하였다. docker 관련 파일들이 모인 경로에 여유 공간이 부족하였는데, gitlab 컨테이너 volume은 용량이 넉넉한 Disk 쪽으로 mount되어 있는데 이해가 가지 않았다.. 🤔 대체 어떤 데이터가 쌓이고 있었을까? 그건 바로 컨테이너 로그 였다. Container log 확인 1차 적으로 df -h와 du -sh * 등의 명령어를 통해 disk full이 발생한 경로들을 추적한 결과 /var/lib/docker/containers 경로 용량이 컸는데, container 쪽에 왜이렇게 용량이 큰가를 보았더니 아래와 같이 log 파일이 발견 되었다.😲 [root@localhost dd4aa49..

하나의 App을 구성하기 위해 Container를 여러 개 실행해야 할 경우 Docker Compose가 유용하다. 하나의 file로 관련된 Container 설정을 해놓으면 해당 file을 통해 관련 Container를 모두 실행할 수 있기 때문. 간단한 node server(express)와 mysql Container를 Docker Compose로 구성해보겠다. Directory 구성 node 구성 설치 패키지 npm i expree npm i mysql2 파일 server.js, db/index.js 두 개의 파일로 구성한다. db/index.js ✔️ 여기서는 host에 network alias를 사용했다. 이후에 network alias를 mysql로 진행하는 것을 보겠다. // db/inde..

container를 생성하여 일련의 작업을 한 뒤에 image를 만들 필요가 있다. 이럴 때 commit 명령어를 이용한다. node:19-alpine image를 통해 container를 생성하고, 간단한 작업 후 새로운 image를 만들어보겠다. Container 생성 컨테이너 생성 시 shell 접속을 한다. # 이름이 ND인 컨테이너 생성 docker run -it --name ND node:19-alpine sh Container에 파일 생성 shell로 접속 했으면 아무 file을 하나 생성해준다. 나중에 image로 만들고 컨테이너 생성 시에 확인할 file이다. Container -> image docker commit ND test-node # ND Container -> test-nod..

node express를 활용해서 간단한 웹 서버를 띄우는 테스트를 해보겠습니다. Docker 설치는 되어있어야 합니다. 저는 Ubuntu 환경 에서 실습하였습니다. File 준비 Docker image를 build 하기 위한 Dockerfile 과 node 서버 코드가 담긴 server.js를 작성합니다. 현재 환경 현재 경로 : /root/nodetest 필요 파일 : Dockerfile, server.js server.js const express = require('express') const app = express() app.get("/", (req, res) => { res.send("안녕"); }) app.listen("3000",() => { console.log('server is st..