IT
IT 및 일상을 공유합니다.
[Nuxt] vuetify custom svg 파일 연결하기
nuxt에서 svg파일을 사용할 때 아래 라이브러리를 활용하여 래핑 해서 사용을 했습니다. 예를 들어서 import CloseIcon from '~/asset/images/icon/icon-close.svg?inline' 이런 식으로 컴포넌트에서 사용했습니다. @nuxtjs/svg: "^0.4.1", 위에 라이브러리를 사용하여 svg파일을 컴포넌트로 사용하는데는 문제가 없었는데 vuetify2에 v-text-field 컴포넌트에서 close 아이콘을 변경하려면 내부적으로 스타일 클래스를 찾아서 css파일로 변경하여 사용해야 하고 이게 생각해 보니 재사용성도 부족하고, 하드코딩으로 되는 거 같아서 svg파일을 vuetify2 icon에 mdi 아이콘을 사용하는 것처럼 등록하여 사용하는 게 더 나을 거 같다..
Nuxt3 Vuetify variables configFile 에러 해결 방법
Nuxt3 Vuetify settings.scss 설정 에러 Nuxt3 v3.9.3 vuetify v3.5.1 Nuxt3에서 vuetify 설치하고 settings.scss로 variables 설정을 아래처럼 진행했는데 //nuxt.config.ts import vuetify from 'vite-plugin-vuetify' import { createResolver } from '@nuxt/kit' const { resolve } = createResolver(import.meta.url) export default defineNuxtConfig({ css: [ 'vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css', ], ..
[Docker] Nginx Certbot으로 SSL 인증서 적용하여 https 적용하기
이번 포스팅에서는 Docker-compose로 Nginx와 CertBot 이미지를 사용해 LetsEncrypt SSL 인증서를 발급하는 방법에 대해서 설명해 볼까 합니다. Cetbot 인증서 Certbot 인증 방법에는 아래 3개 방법 이외에도 방법이 있지만 간단하게 설명드리고 제가 진행할 방법은 와일드카드 방식으로 인증서를 발급해 보겠습니다. webroot : 사이트 디렉터리 내에 인증서 유효성을 확인할 수 있는 파일을 업로드하여 인증서를 발급하는 방법 이 방법의 단점은 하나의 인증 명령에 하나의 도메인 인증서만 발급 가능 Standalone : 사이트 작동을 멈추고 이 사이트의 네크워킹을 이용해 사이트 유효성을 확인해 Let’s Encrypt SSL 인증서를 발급하는 방법 이 방법은 동시에 여러 도메..
[Docker] docker-compose로 portainer 설치하자
이리저리 회사 일이 너무 바빠서 포스팅이 너무 뜸했습니다.. ㅠㅠ 공부하는 게 진짜 쉽.. 지 않네요 ,, 퇴근후면 너무 힘들고 쉬고 싶고... 누워서 유튜브나 보고 싶은데.. 그래도 어쩌겠습니까 개발자를 직업으로 가진 이상 공부는 해야 하는걸 ㅠㅠ 아무튼!! 맘 다잡고 복지포인트 받은 걸로 호스팅 케이알에서 도메인하나 샀습니다. 이 도메인으로 서브도메인 여러 개 늘려가며 하나씩 배포하면서 공부해 볼까 합니다. 그래서 첫 번째로 도커를 사용하여 Portainer를 설치하는 방법에 대해서 설명해 볼까 합니다. Portainer 란? 간단하게 설명하자면 Portainer는 Docker를 Web에서 쉽게 관리할 수 있게 도와주는 툴입니다. Docker 관련된 컨테이너 및 이미지 관리 및 로깅 또는 모니터링 용..
[Library] Swiper 라이브러리에 대해서 알아보자
Swiper.js? 모바일 웹 개발에서 터치 슬라이더는 사용자 경험을 향상하는 핵심 요소 중 하나입니다. 그중에서도 Swiper 라이브러리는 뛰어난 성능과 다양한 기능으로 많은 개발자들에게 사랑받고 있습니다. 이번 포스팅에서는 Swiper 라이브러리의 기본 개념과 사용법에 대해 알아보겠습니다. 그러면 Swiper를 왜 사용하냐?? Swiper를 간단하게 설명해보자면 모바일 터치 슬라이더를 쉽게 구현할 수 있도록 도와주는 자바스크립트 라이브러리입니다. 뛰어난 터치 이벤트 처리와 애니메이션 효과를 지원하여, 다양한 모바일 디바이스에서 자연스러운 슬라이딩 기능을 구현할 수 있습니다. Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern ..
[패키지관리자] yarn 그리고 yarn berry에 대해서 알아보자
yarn yarn은 JavaScript 프로젝트의 종속성을 관리하는 데 사용되는 확립된 오픈 소스 패키지 관리자입니다. 패키지 종속성을 설치, 업데이트, 구성 및 제거하는 프로세스를 지원하여 결과적으로 방해 요소를 줄이고 목표를 더 빠르게 달성할 수 있도록 도와줍니다. Lock 파일: Yarn은 yarn.lock 파일을 사용하여 프로젝트 의존성을 정확하게 관리합니다. 그래서 프로젝트를 다른 환경에서 빌드할 때 버전 충돌을 방지할 수 있습니다. 병렬 설치: Yarn은 의존성을 병렬로 설치하여 더 빠른 설치 속도를 제공합니다. 캐시 기능: Yarn은 이전에 설치한 패키지를 캐시 하여, 같은 패키지를 다시 설치할 필요가 없도록 도와줍니다. yarn berry yarn Berry는 yarn 2.0 버전부터 등장..
[MAC] macOS Sonoma 바탕화면 클릭 시 이동 문제 해결방법
안녕하세요 긴 연휴 동안 집에서 빈둥대면서 이것저것 해봤는데요 그중 하나가 오늘 집에 있는 M1 16인치 맥북을 소노마 OS로 업데이트했습니다. 사실은 조금 이후에 업데이트를 할까 하다가, 저는 맥북 써봐야 개발 말고 뭐 하는 건.. 음악 조금 듣는 거 이외에는 없는 거 같더라고요 그래서 쉬는 김에 업데이트 바로 업데이트했습니다. 소노마 업데이트 이후에 기능을 전부 사용해보지는 못했습니다. 해봐야.. 위젯정도? 아직 출시한지 얼마 안되었기 때문에 심심할때마다 하나씩 설정해볼까합니다. 아무튼 설치하고나서 차근 차근해보려고 하는데 위에 GIF 이미지 보시면 바탕화면 클릭할 때마다 창이 계속 사라지는 게 조금 거슬리더라고요 뭐 위젯이 엄청 많아지면 사용하는데 유용할 수도 있겠지만 잠깐 사용해보고 느낀건 조금 ..
[라이브러리] sanitize-html 사용하여 보안문제 해결하자
Sanitize-html 라이브러리 sanitize-html은 웹 애플리케이션을 개발할 때 사용자 입력 또는 외부 데이터에서 잠재적으로 악성 또는 위험한 HTML을 제거하고 안전한 HTML을 유지하기 위한 도구라고 정의할 수 있습니다. 정확하게 어떤 상황일 때 위험한지 예를 들어서 설명하자면, 사용자들은 텍스트로 게시물을 작성하고, 다른 사용자들은 이 게시글을 볼 수 있는 간단한 기능의 게시판이 있다고 생각해 봅시다. 악의적인 사용자가 아래와 같이 게시글을 작성한다고 하면, 이 게시글을 열람하는 다른 사용자는 글을 열람할 때 본인의 쿠키 정보가 탈취되어 공격자의 서버로 전송됩니다. 이러한 공격을 "XSS" (크로스 사이트 스크립팅)이라고 합니다. 즉 사용자의 데이터를 악의적으로 조작하는 공격 행위입니다...
[Nuxt3] 클래스 기반 useFetch를 활용한 효율적인 API 호출
Nuxt 프로젝트를 진행하시는 분들은 아마도 API 통신을 위해 Axios를 주로 사용했을 것입니다. 그러나 Nuxt 3에서는 새로운 데이터 통신 방식을 권장하며, 이것이 바로 fetch입니다. 이번 글에서는 Nuxt 3에서의 데이터 요청을 위한 fetch 방식에 대해 자세히 알아보겠습니다. Nuxt3에서 useFetch 사용 Nuxt3 공식문서를 보면 useFetch 컴포저블을 사용하여 아래와 같은 형식으로 API 통신을 합니다. import { useFetch } from 'nuxt'; const { data, error } = useFetch('/api/data'); useFetch를 사용하면서 느꼈던 점은 HTTP 메서드(GET, POST, PUT, DELETE)를 분리해서 각각 재사용하면 코드의..
[NestJS] @nest/config 사용하여 환경 변수 구성하자
지난 포스팅에서는 NestJS 프로젝트의 스캐폴딩을 통해 폴더 구조를 설정하고, Module - Controller - Service 구조를 구현했습니다. TypeORM을 사용하여 데이터베이스 설정을 진행하고, 데이터베이스 테이블을 생성하는 과정도 함께 살펴보았습니다. 이번에는 더 유연한 구조를 위해 환경 변수 설정을 통해 환경 변수를 관리하는 방법에 대해 알아보겠습니다. 아래는 이전 포스팅 과정입니다. 참고 부탁드립니다. NestJS와 TypeORM을 활용한 데이터베이스 연동 느린 개발자 stack94.tistory.com 모듈 설치 아래 명령어를 실행하여 "nestjs/config" 모듈을 설치합니다. npm install --save @nestjs/config NODE_ENV 환경 변수를 설정하기 ..
[NestJS] NestJS와 TypeORM을 활용한 데이터베이스 연동 - 2
지난 포스팅에서 TypeORM과 PostgreSQL에 대해서 알아봤습니다. 이번에는 NestJS에서 TypeORM을 활용하여 다루는 방법에 대해서 설명해 볼까 합니다. 혹시 이전 내용에 대해서 모르시다면 아래 링크를 통해 읽어보시면 좋을 거 같습니다. NestJS와 TypeORM을 활용한 데이터베이스 연동 - 1 느린 개발자 stack94.tistory.com 모듈 설치 pg: 8.11.2 typeorm : 0.3.17 @nestjs/typeorm : 10.0.0 class-transformer : 0.5.1 class-validator : 0.14.0 npm install pg typeorm @nestjs/typeorm --save npm install class-validator class-trans..
[NestJS] NestJS와 TypeORM을 활용한 데이터베이스 연동 - 1
이번 포스팅에서는 NestJS에서 TypeORM을 설치하고 활용해서 데이터베이스 연동에 대해서 설명해 볼까 합니다. TypeORM 이란? TypeORM은 TypeScript를 기반으로 한 ORM(Object-Relational Mapping) 라이브러리로, 데이터베이스와의 상호작용을 추상화하여 개발자가 SQL 쿼리 대신 객체 지향적인 방식으로 데이터베이스를 다룰 수 있도록 도와줍니다. ORM은 객체와 데이터베이스 테이블 간의 매핑을 처리하여, 데이터베이스 레코드를 객체로 다룰 수 있게 해 주며, CRUD 작업을 간단하게 처리할 수 있게 해 줍니다. TypeORM은 다양한 데이터베이스 시스템과 호환되며, MySQL, PostgreSQL, SQLite, Microsoft SQL Server 등 다양한 데이터..