전체 글
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 버전부터 등장..
[티스토리] 구글 애드센스 광고를 위한 블로그 로딩 화면 구현
요즘 티스토리 광고 수익이 많이 내려가서.. 여러가지 시도를 해봤습니다. 그중에 블로그 이동간에 로딩화면에 대해서 포스팅 해볼까 합니다. 구글 애드센스 광고가 송출되기 까지 시간을 벌어주거나 포스팅 이동간에 로딩으로 표시해 보고자 합니다. (그나저나.. 추석 여파인지? 아니면 무슨 문제인지 광고수익이 줄어서 화가나네요.. ) 1. 로딩 이미지 업로드 티스토리 블로그관리 -> 스킨 편집 -> 파일 업로드로 가보시면 아래 추가 버튼으로 로딩 이미지를 업로드 해야합니다. 저는 포스팅 하단에 링크해둔 참고블로그에서 loading.gif 파일을 받아서 사용했습니다. 그래도 파일은 첨부해둘게요! 다운로드 받으셔서 업로드하시면 됩니다. 2. 로딩 이미지 HTML & CSS 코드 작성 티스토리 블로그관리 -> 스킨 편..
[MAC] macOS Sonoma 바탕화면 클릭 시 이동 문제 해결방법
안녕하세요 긴 연휴 동안 집에서 빈둥대면서 이것저것 해봤는데요 그중 하나가 오늘 집에 있는 M1 16인치 맥북을 소노마 OS로 업데이트했습니다. 사실은 조금 이후에 업데이트를 할까 하다가, 저는 맥북 써봐야 개발 말고 뭐 하는 건.. 음악 조금 듣는 거 이외에는 없는 거 같더라고요 그래서 쉬는 김에 업데이트 바로 업데이트했습니다. 소노마 업데이트 이후에 기능을 전부 사용해보지는 못했습니다. 해봐야.. 위젯정도? 아직 출시한지 얼마 안되었기 때문에 심심할때마다 하나씩 설정해볼까합니다. 아무튼 설치하고나서 차근 차근해보려고 하는데 위에 GIF 이미지 보시면 바탕화면 클릭할 때마다 창이 계속 사라지는 게 조금 거슬리더라고요 뭐 위젯이 엄청 많아지면 사용하는데 유용할 수도 있겠지만 잠깐 사용해보고 느낀건 조금 ..
[라이브러리] sanitize-html 사용하여 보안문제 해결하자
Sanitize-html 라이브러리 sanitize-html은 웹 애플리케이션을 개발할 때 사용자 입력 또는 외부 데이터에서 잠재적으로 악성 또는 위험한 HTML을 제거하고 안전한 HTML을 유지하기 위한 도구라고 정의할 수 있습니다. 정확하게 어떤 상황일 때 위험한지 예를 들어서 설명하자면, 사용자들은 텍스트로 게시물을 작성하고, 다른 사용자들은 이 게시글을 볼 수 있는 간단한 기능의 게시판이 있다고 생각해 봅시다. 악의적인 사용자가 아래와 같이 게시글을 작성한다고 하면, 이 게시글을 열람하는 다른 사용자는 글을 열람할 때 본인의 쿠키 정보가 탈취되어 공격자의 서버로 전송됩니다. 이러한 공격을 "XSS" (크로스 사이트 스크립팅)이라고 합니다. 즉 사용자의 데이터를 악의적으로 조작하는 공격 행위입니다...
[맛리뷰] 육회 맛집 경주 황리단길 여미온 후기 및 꿀팁
안녕하세요. 몇주전에 경주 여행갔을때 너무 더웠던 생각이 나는데 요즘 날이 점점 풀려가는거 보니 좋은거 같습니다. 경주 여행 마지막날에 점심으로 먹었던 육회물비빔면이 생각이나 알려드릴까 합니다. 황리단길 "여미온"으로 방문했습니다. 여미온 경북 경주시 첨성로 81번길 22-12 월 - 일 11:00 ~ 21:00 브레이크 타임 15:30 ~ 17:00 라스트 오더 20:30 (휴무일은 따로 공지 한답니다) 0507 - 1398 - 4916 (주차 X) HTML 삽입 미리보기할 수 없는 소스 경주 황리단길을 아시는분들은 숙소에 차를 주차하고 나오시는 분들이 많으실겁니다. 그런데 저같이 숙소 체크인 시간이 안되어 바로 점심먹으러 가시는 분들은 주차하실거면 조금 걸어가는거 감수하고 "황남공영주차장" 이곳에 주..
[맛리뷰] 찜갈비 맛집 대구 여원찜갈비 (풍자 또간집 후기)
안녕하세요 이제 여름이 다 끝나갑니다. 저는 이번에 8월 중순경 막바지 여름휴가로 대구-경주를 가게 되었습니다. 대구에 하루일정으로 도착하자마자 점심을 먹기 위해 알아보던 중 찜갈비 맛집이 있다고 하여 대구 북구 복현로에 위치한 여원찜갈비에 수요일 점심에 방문하였습니다. 여원찜갈비 대구 북구 복현로 187-27 월 - 토 11:30 ~ 22:00 브레이크 타임 14:30 ~ 17:30 일요일 11:30 ~ 15:00 라스트 오더 14:00 0507 - 1406 - 1135 (주차 가능) HTML 삽입 미리보기할 수 없는 소스 가장 중요한 주차 먼저 알려 드리자면 가게 앞쪽에 주차 자리 3대가 있습니다. 그런데 평일인데도 사람들이 꽤 많아서.. (저는 주차를 못했어요ㅠ) 그래서 저는 도로에서 여원찜갈비로 ..
[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)를 분리해서 각각 재사용하면 코드의..