Half Road

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

상황express로 개발한 backend 서버를 도커 이미지로 만들어 컨테이너로 생성해야 하는 상황이다.관련해서 진행한 내용을 정리해본다.프로젝트 구조Working Directory | dist src Dockerfile package.json package-lock.json빌드 및 실행 환경typescript로 구성하였으므로 build 과정이 필요했다.javascript 프로젝트 인 경우는 빌드 과정은 생략하면 된다.환경express + typescript + esmpackages.json"scripts": { ... "build": "npx ts-node build.ts", "start": "node -r module-alias/register ./dist --env=production"..

[Docker] express 서버 + db 구축하기 이전 포스트에서 express 서버 이미지를 생성하였다.[Docker] express 서버 컨테이너 생성하기이제 해당 서버와 db를 연동하여 마무리를 해보자.express 서버 환경 구성도커로 여러 사이트에 배포시에 사이트 마다 포트 정보가 달라질 수 있다.그러기 위해서는 유연하게 포트 설정을 할 수 있게 해야하는데, 이럴 때 사용하는 것이 환경변수 이다.dotenv 라이브러리를 이용하여 개발 및 운영환경에 사용 할 환경 변수를 설정 해놓는다.development.env## Environment ##NODE_ENV=development## Server ##PORT=8010HOST=localhost## DB ##DB_HOST=localhostDB_POR..

설치 환경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..

들어가며DB 설계를 하면서 PK 데이터 타입을 선정하는데 가지고 있는 기준이 딱히 없어서, 이번 기회를 통하여 나름의 기준을 정립해본다.Auto Increment PK 컬럼을 SEQ, 그 외에 PK 컬럼을 ID로 분류하여 정리해보았다.ID 선택 가능한 상황 SEQ가 아닌 ID를 사용해볼만한 상황을 정리해보자.사용자가 직접 ID를 입력해야하는 경우대표적으로 사용자 계정 정보아래는 Category 테이블의 path정보를 PK로하는 경우이다.Category (path: '/관할구역/서울', ...)Category (path: '/관할구역/대구', ...)Category (path: '/관할구역/대구/1', ...)계정 데이터 아닌 ID 값을 사용자가 입력해야 하는 경우는 사용자에게 표시되는 정보로 활용 할 경..

HTTP Method에서 PUT PATCH는 수정에 사용되는데 명확하게 이해하고 있지 않은듯하여정리해본다. 간단한 개념을 살펴보고 예제로 명확히 알아보자.간단히 살펴보기공식 RFC 문서 에서 PATCH에 대한 정보를 확인해보자.PUT: 전체 필드가 제공되어야 한다. 전체 필드를 수정한다.해당 Entity의 결과 값은 요청값과 항상 같다. (멱등성)PATCH: 부분 필드만 제공한다. 부분 필드를 수정한다.해당 Entity의 결과 값은 다를 수 있다.멱등-성 冪等性 명사 수학 연산을 여러 번 적용하더라도 결괏값이 달라지지 않는 성질.✔️ 여기서 Entity는 조회 대상 테이블에 대한 한 건의 row 데이터를 칭하는 것이다.예제특정 사용자의 나이를 바꾸는 예제를 PUT과 PATCH로 구분해서 알아보자.PUTP..

용도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에 맞게..

용도데이터베이스를 통해 Typescript interface를 생성하기 위해 사용한다.패키지 명은 @rmp135/sql-ts 이다.NPM 주소 : https://www.npmjs.com/package/@rmp135/sql-ts나는 node js 프로젝트에 있는 sequelize model에 타입을 적용하기 위해서 interface가 필요하여적용하였다.실습cli를 통해서 실행할 수 도 있지만, 관리 용이성을 위해 js를 통해서 작업을 진행 하였다.https://rmp135.github.io/sql-ts/#/?id=node-module사전 설치mariadb인 경우에 mysql2 패키지를 설치해준다.npm install mysql2참조: https://knexjs.org/guide/#node-jsgenerat..