프로그래밍/Frontend 4

Next.js app 폴더(13, 14 버전)에서 GA(gtag.js) 설정 방법

Next.js 13, 14 버전에서 GA(gtag.js) 설정하는 방법을 알아보겠습니다. 문제점 ga를 설정하려면 아래와 같은 가이드대로 GA_TRACKING_ID만 변경해서 코드에 추가하면 됩니다. 하지만 Next.js 13버전 부터는 app 폴더를 사용하게 되고 app 폴더는 SSR(Server Side Rendering)이 기본값이라 기존에 하던대로 추가하면 동작이 되지 않습니다. 설정방법 1. GA(gtag.js) 설정 코드 분리 개인마다 프로젝트 구조를 잡는 방식이 다르겠지만 저는 /src/context 폴더 안에 설정 파일을 모아놓습니다. 그래서 GA용으로 설정파일(GoogleAnalytics.tsx)을 추가했습니다. 그리고 파일 안에 아래와 같이 코딩했습니다. import Script fro..

[Yarn] warning package.json: No license field 해결

언제부터인지 yarn dev로 프로젝트 실행 시 warning이 발생했습니다. 해결방법을 찾아봤습니다. Warning 발생 프로젝트를 실행하면 위와 같이 warning ../../../../../package.json: No license field 라는 warning이 발생했습니다. 원인 해당 경로의 package.json 파일에 license field가 없다는 내용인데요. 에러 로그만 보고는 정확히 어떤 문제인지 알기 어려웠습니다. 해결방안 log에 나오는 폴더 경로로 가서 파일 조회를 해봤습니다. 분명 사용하고 있는 workspace root폴더인데 저도 모르는 package.json파일이 있었습니다. 아마도 console에서 직접 프로젝트를 추가하는 과정에서 root의 하위 폴더가 아닌 root..

자바스크립트 for, for in, for of 등 반복문 정리

자바스크립트 반복문 종류 for forEach for in for of for 가장 많이 알고 있는 반복문입니다. 대부분의 언어에서 형태가 비슷합니다. // 숫자 0 ~ 10까지 출력하는 예제 for (let i = 0; i { // 현재 값 console.log(item); // 현재 반복문 index console.log(index); // 반복시킨 원래 값 console.log(original); }); for in Object(객체) 반복문 실행 시 사용합니다. let product = { id: 12345, name: "판매상품 이름", price: 32000, creator: "abc1234", }; for (const item in product) { console.log(item, prod..

JQuery checkbox

checkbox checked 여부 id인 경우 $('input:checkbox[id="checkbox_id"]').is(":checked") == true name인 경우 $('input:checkbox[name="checkbox_name"]').is(":checked") == true checkbox 전체 갯수(이 경우는 name인 경우만 가능) $('input:checkbox[name="checkbox_name"]').length; checkbox 선택된 갯수(이 경우는 name인 경우만 가능) $('input:checkbox[name="checkbox_name"]:checked').length; checkbox 전체 순회하며 처리(동일한 name으로 여러 개인 경우) $('input:checkbo..