차근차근

아이폰으로 사파리 브라우저에서 웹 사이트를 테스트 하던 중,전화번호, 팩스번호, 사업자번호 항목이 자동으로 링크로 인식되는 문제가 있어 이 글을 작성하게 되었다. 이런 문제가 생긴 이유는 iOS에서 해당 번호들을 자동으로 인식하여 a 태그로 바꿔주었기 때문이며,간단한 해결방법은 아래와 같다.  meta 태그 추가 nuxt3 인 경우export default defineNuxtConfig({ app: { head: { meta: [{ name: "format-detection", content: "telephone=no" }], }, }, ...}

현재 대시보드를 개발하면서 기록하고 싶은 이슈가 있어 이 글을 작성하게 되었다. 개발 중인 대시보드에는 여러 개의 영역이 있고 각 영역마다 드래그&드롭 하여 위치를 변경할 수 있다. 일반적인 영역의 경우 아무 문제 없이 동작하지만, 차트를 포함한 영역의 경우 드래그 중일 때 차트가 사라지고 드롭 후에 차트가 다시 생기는 문제가 있었다. 나는 드래그는 vue-draggable-next 라이브러리를 사용하였고, 차트는 vue-chartjs를 사용하여 개발하였는데, 처음에는 라이브러리의 문제인 줄 알고 차트와 드래그 기능을 직접 만들어보았지만 여전히 같은 문제가 발생하였다. 원인은 아직 파악하지 못하였고, 드래그 시작 할 때 차트의 canvas 부분을 이미지로 만들어서 그 이미지를 보여주는 방식으로 해결하였다..

Vue3에서 브라우저에서 뒤로가기를 했을 때의 이벤트를 제어해야 할 때 onBeforeRouteLeave를 사용하면 된다. onBeforeRouteLeave((to, from, next) => { if (조건 추가) { next(false); // 실행시킬 함수 추가 } else { next(); } });

Vite 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. node.js(버전 18+ 또는 20+을 요구) 기반의 Vue 개발을 위한 스캐폴딩 도구이다. Vue 뿐만 아니라 대부분의 프론트엔드 프레임워크를 지원한다. Native ES Module, HMR(Hot Module Replacement)등을 제공한다. .vue를 이용하여 만든 애플리케이션을 .html로 변경하기 위한 빌드 도구로 사용된다. 프로젝트 생성 $ npm create vite@latest # Vite + Vue 프로젝트 생성 $ npm create vite@latest my-app -- --template vue 프로젝트 실행 후 브라우저로 접속 시 화면 출력 $ cd my-app $ npm install..

Setup setup()을 통해 Composition API를 사용할 수 있다. 변수 선언은 ref 함수를 사용하고, 변수를 사용하기 위해서는 return 해야한다. 변수 값에 접근하기 위해서는 value 속성에 접근해야 한다. {{ message }} 함수 setup() 안에 사용할 함수를 작성한다. 클릭 {{ message }} 라이프사이클 라이프사이클을 제어하려면 hook을 import 해야한다. mounted -> onMounted unmounted -> onUnmounted updated -> onUpdated Computed import 하여 사용할 수 있다. {{ message }} {{ reverseMessage }} Watch import 하여 사용할 수 있다. {{ message }} ..

Composition API Vue2에서는 Options API를 사용한다. Options API는 개발자에게 코드의 직관성, 가독성을 높이지만 프로젝트의 규모가 커질수록 유지보수가 어려워진다. 이를 보완하기 위해 Vue3에서는 Composition API를 사용한다. https://hjkang.tistory.com/73 Vue2 Vue3 Fragments Vue2에서는 컴포넌트의 루트 노드가 한 개였어야 했지만, Vue3에서는 여러 개의 루트 노드를 지정할 수 있다. Vue2 ... ... ... Vue3 ... ... ... CSS 변수 Vue3에서는 template에서 정의한 변수를 그대로 style에서 사용할 수 있다. hello world v-if Vue2에서는 v-if를 사용할 때 key 사용..

useEffect 훅이란? 클래스 컴포넌트의 라이프사이클 함수와 비슷한 역할 한 컴포넌트 안에서 여러 번 정의하여 사용 가능 useEffect 훅의 첫 번째 매개 변수에는 콜백 함수를 설정할 수 있으며, 이 콜백 함수는 useEffect 훅의 역할을 정의 두 번째 매개 변수에는 배열 전달 첫 번째 매개 변수로 함수를 반환하는 경우 useEffect(() => { ... return () => { ... }; }); 클래스 컴포넌트의 componentWillUnmount 라이프사이클 함수와 같은 역할을 수행 즉, 컴포넌트가 화면에서 사라진 이후에 이 함수가 호출 라이브러리의 연동을 해제하거나 타이머를 해제하는 데에 주로 사용 두 번째 매개 변수로 빈 배열 전달하는 경우 useEffect(() => { ....

URL localhost:3000/api/v1/user?emails=test1&emails=test2 Controller import { Controller, Get, Query, } from '@nestjs/common'; import { UserService } from '@/v1/user/user.service'; import { SearchUserDto, } from '@/v1/user/dto'; @Controller('user') export class UserController { constructor(private readonly userService: UserService) {} @Get() async find(@Query() dto: SearchUserDto) { return this.u..

js-cookie 라이브러리를 이용하여 Next.js의 클라이언트 사이드에서 쿠키를 저장하는 방법을 알아보자. 개발 환경 next.js - v13.4.12 js-cookie - v3.0.5 설치 npm install js-cookie 저장 import Cookies from 'js-cookie'; Cookies.set('key', 'value'); // 7일 뒤 쿠키 만료 Cookies.set('key', 'value', { expires: 7, }); // 1시간 뒤 쿠키 만료 Cookies.set('key', 'value', { expires: 1 / 24, }); // 7일 뒤 쿠키 만료, 현재 경로에서 쿠키 확인 가능 Cookies.set('key', 'value', { expires: 7, pa..

Sass(Scss)란? Sass는 CSS 전처리기로서 CSS의 한계와 단점을 보완하여 보다 가독성이 좋고 코드 재사용에 있어서 유리하다. CSS 문법과 유사하지만 선택자의 중첩이나 조건문, 반복문, 연산 등 여러 기능을 사용해서 더 편리하게 작성할 수 있다. 2006년부터 시작하여 가장 오래된 css 확장 언어이며 그만큼 많은 커뮤니티를 가지고 있다. Sass와 Scss의 차이 Scss는 Sass의 세 번째 버전에서 추가되었고 Sass의 모든 기능을 지원하면서 Css와 거의 같은 문법을 사용한다. Scss는 Css처럼 중괄호와 세미콜론을 사용하지만 Sass는 들여쓰기만 사용한다. Mixins(재사용 가능한 기능)을 사용하는 경우 Sass는 =와 + 기호로 기능을 사용하지만 Scss는 @mixin과 @in..