JNarin Development Story

Vue3에서 Scoped CSS를 사용할 때 스타일의 캡슐화된 컴포넌트 내부 요소에 접근하기 위해 사용하는 ::v-deep 구문이 변화되었습니다. 이 글에서는 변경된 이유와 예제, 마이그레이션 방법을 다룹니다.즉 라이브러리 스타일을 적용할 때 강제 스타일 적용을 위해서 필요한 방법입니다.변경 요약항목내용변경 전::v-deep변경 후:deep()변경 시점Vue 3.2 이후, vue-loader 및 Vite에서 :deep() 지원 강화 변경 이유표준 CSS 문법과의 호환성 강화::v-deep은 비표준 선택자이기 때문에 CSS 파서와의 충돌 위험이 있었습니다.Vite 및 SFC CSS 처리기 호환성 문제 해결:deep()은 PostCSS 및 Vite의 SFC 처리기에서 더욱 일관되게 파싱되고 동작합니다.명확한..

오늘은 구글 애드센스에 대해 정리를 해보려고 한다. 필자의 경우 애드센스 수락에 길은 꽤 오래 걸린 편이었다. 방법을 몰라 그냥 신청하다 보니 안되었던 이유고, 다른 방법을 알려주는 분들의 참고를 통해 통과는 되었지만 다음 난관이 생기게 되었다. 그것은 바로 지급 정보를 작성하는 일이다. 미국 국적이 아닌 사람이라면 아마 이 세금 정보를 제출해야 하는 상황이 오기마련이다. 그렇기에 기록을 위해 이 글을 쓰게 되었다. 먼저, 구글 애드센스 홈페이지에서 왼쪽 카테고리에서 지급 클릭 → 지급 정보 클릭을 한다. 세금 정보 보기 클릭 → 세금 정보 추가 클릭 안내 메시지 내용을 확인하고 양식 시작 클릭 후 본인 인증을 하시면 됩니다. 미국 세금 정보에서 대한민국 거주자에 블로그를 관리하는 자라면, 아래 이미지와..

vite-plugin-vue-layouts은 Vite에서 Vue.js 애플리케이션의 레이아웃을 효과적으로 관리할 수 있도록 도와주는 플러그인이다. 이 플러그인은 각 페이지에 독립적인 레이아웃을 지정하고 중첩하여 사용할 수 있는 강력한 레이아웃 시스템을 제공한다. 크게 핵심 기능을 정리하면 총 4가지로 나뉘게 된다. 1. 동적 레이아웃 각 페이지에 대해 독립적으로 레이아웃을 설정할 수 있다. 2. 중첩된 레이아웃 부모 레이아웃과 자식 레이아웃을 조합하여 복잡한 페이지 구조를 만들 수 있다. 3. 동적 페이지 제목 및 메타 데이터 각 페이지에 대해 동적으로 제목이나 메타데이터를 설정할 수 있다. 4. 동적 레이아웃 전환 런타임에서 동적으로 레이아웃을 변경할 수 있다. 먼저, 플러그인을 설치를 위해서는 해당 ..

프로젝트 규모가 커질수록 Vue나 React에서는 라우트 관리에 대해 번거로움이 생길 수 있다. 이러한 문제에 직면한 개발자들을 위해 등장한 것은 unplugin-vue-router이다. 사실 필자는 아직까지 이러한 문제를 심각하게 경험하지 않아 모르는 부분이지만, 이 패키지는 어떻게 사용되며, 어떤 문제들을 해결해 주는지 자세히 알아보도록 하겠다. 이 패키지를 사용할 때에는 vue router를 최소 4.1.0 버전 이상을 사용하는 것을 권장하며, 실험적인 패키지이기 때문에 사용 시 주의가 필요할 수 있다. 다만, 이 패키지외에 다른 라이브러리인 vite-plugin-pages가 있는데 여기에서는 unplugin-vue-router를 권장하고 있다는 것을 감안하고 이 글을 읽기를 바란다. 그럼 이제 사..