JNarin Development Story

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

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를 권장하고 있다는 것을 감안하고 이 글을 읽기를 바란다. 그럼 이제 사..

오늘은 노드의 버전관리를 위한 NVM에 대한 내용을 정리해보려고 한다. NVM이란? Node Version Manager의 약자로 여러 버전의 Node.js를 설치 및 버전을 변경하여 관리할 수 있는 도구를 말한다. Window 운영체제를 사용하는 경우에는 Github nvm-windows를 통해 다운로드할 수 있다. Download를 누르게 되면 Releases라는 페이지로 이동하는데 아래 스크롤을 하게 되면 nvm-setup.exe을 확인이 되는데 이를 클릭 후 설치를 진행하면 된다. 실행 시 설치 관련 팝업이 뜬다. 그리고 설치경로를 따로 지정한 경우가 아닌 이상 그냥 그대로 설정 후 install을 한다. 중간에 경고창에서는 기존의 설치되어 있는 node 버전을 nvm을 통해 컨트롤할지 여부를 묻..

vue를 처음 개발하면 몇 가지 에러가 자주 발생한다. 이런 에러는 해결법은 쉬운데 왜 하는지에 대한 설명을 더 추가하고 싶어서 이 글을 쓰게 되었다. 1. PRETTIER 에러 원인 vue를 처음 생성하고 마주한 에러가 있었다. 여기서 생기는 원인은 라인의 끝의 줄바꿈에는 두 가지가 있다. 하나는 \n은 리눅스와 맥에서 발생하고, 또 하나는 \r\n으로 윈도에서 발생하여 운영 체제가 다른 문제로 인하여 생기는 원인이다. Delete `␍` 물론 간단하지만, 노가다가 필요한 방법이 한 가지가 있다. End Line Sequnce를 LF로 변경하는 것이지만 파일이 많으면 이마저도 좋은 방법이 아니라고 한다. 2. 그래서 해결방법은? 그래서 좀 더 수월한 방법은 다음과 같다. 아래 rules라는 코드를 추가..

뷰나, 리액트를 쓰시는 분이라면 스터디나 프로젝트에서 ESLint 세팅에 대해 들어본 경험이 있을 것이다. 개발을 하면서 자주 설치하게 되는 라이브러리로, 실상은 실무에서 활용하기에는 한계가 있다. 그래도 배우면서 활용하기 좋은 것들을 하나씩 정리하고 싶어 이 글을 쓰게 되었다. 1. ESLint란? ESLint란 자바스크립트 코드에서 문제가 되는 패턴을 식별하기 위한 코드 분석 도구이다. 2. 사용방법 2 - 1. 설치 및 활용방법 npm install eslint 설치는 위 명령어를 해도 되지만, 일반적으로 뷰나 리액트를 할 때 일부는 자동으로 설치가 되는 경우도 있다. 그래서 필자는 거의 쓰이는 일은 없었다. 2 - 2. No Console 개발자에게 console이란 매우 유용하게 쓰이는 코드 중..

이번에도 개발을 하면서 강의에서 추천해준 확장자를 정리하고자 이 글을 쓰게 되었다. 1편과 나눈 이유는 크게 없지만, 그래도 다른이도 유용하게 쓰기를 바라면서 이 글을 썼다. 1. Indent-Rainbow 프로젝트가 커지면 커질수록 tab은 더 안으로 들어가게 된다. 그렇다 보니 너무 멀리 있는 탭의 경우 이 탭의 끝은 어디인지 솔직히 분간이 잘 되지 않는 경우도 있다. 그럴 때 유용한 확장자라고 할 수 있다. 위 사진은 간단한 예시로 내가 현재 위치한 커서의 탭이 라고 할 때, 해당 탭의 끝과 끝을 구분해주기 위해 세로로 흰 선이 있어 확인하기가 수월하다. 그리고 js/json의 경우는 조금 다르게 보인다. 필자가 postcss부분에 마우스 커서가 올라갔을 때, 해당 오브젝트의 밑줄과 세로 라인으로 ..

우리밋이라는 노드에 대한 기본적인 개념을 공부하기 위해 강의를 듣다가 깃에서 버전 관리라는 것에 대해 알게 되었다. 그리고 이 버전은 분명 회사에서도 쓸 것 같아 정리를 하게 되었다. 하지만 아쉽게도 현재 근무 중인 회사에서는 쓰이지 않는다. 그래도 언젠간 쓰이길 생각하면서 글을 남겨본다. 태그 리스트 보기 먼저 현재 내가 태그로 만든것이 있는지 리스트를 확인할 수 있다. git tag 이 명령어를 입력시 현재 내가 보유하고 있는 태그를 로컬 태그 생성 그리고 버전을 관리를 위해 태그를 생성할 수 있다. git tag 태그이름 git tag v0.1.0-notDB 로컬에 현재 git에 버전 1.0인 notDB라는 명칭으로 저장을 한다. git log --oneline git log를 한줄로 보여준다. 해..