Free Learn

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

코드를 자동정렬 해줘서 깔끔하고 가독성을 높여주기에 프로젝트 셋팅 시 Prettier를 항상 사용합니다. VSCode에서 Prettier 설정 방법과 적용 안될 때 해결 방법을 알아보겠습니다. Prettier 설치 Extensions에서 검색하여 Prettier - Code formatter를 설치해줍니다. VSCode에 적용 Settings에 들어가서(cmd + ,) prettier를 검색합니다. Default Formatter를 Prettier - Code formatter로 선택합니다. format on save를 검색합니다. Format On Save 설정을 활성화 합니다. (저장할 때마다 Format 적용시키는 옵션) 적용 안될 때 해결방법 보통은 설정만 해주면 잘 돌아가겠지만 특수한 경우 안될..

자바스크립트 반복문 종류 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..

설정된 계정 확인 터미널에서 Git을 사용하려면 계정을 셋팅해야 하는 경우가 있습니다. 먼저 아래 명령어를 통해 현재 셋팅되어있는 계정을 확인합니다. # 설정된 계정 이름 확인 git config user.name # 설정된 계정 이메일 확인 git config user.email 계정 설정 설정된 계정이 없다면 아래 명령어를 통해 계정을 설정합니다. # 이름 설정 git config user.name {등록할 이름} # 이메일 설정 git config user.email {등록할 이메일}

IntelliJ계열 IDE에서 js파일을 개발하다보면 console.log()를 많이 사용하게 됩니다. 하지만 기본으로 설정된 shortcut이 없어 로그를 찍으려면 번거롭습니다. IntelliJ계열 IDE에는 shortcut을 커스터마이징 하는 기능을 제공하기 있기에 자주 사용하는 문자열을 등록할 수 있습니다 shortcut등록 메뉴 Preferences > Editor > Live Templates 등록 방법을 알아보겠습니다. 사용할 단축어와 설명, 텍스트를 입력합니다. Abbreviation: 사용할 단축어(저는 console, log의 앞글자를 따서 cl로 정했습니다) Description: 설명 Template text: 사용할 텍스트 console.log(); 등록이 완료됐습니다. 실제 에디터..

자바로 문자열을 담을 때 주로 String을 사용한다. 하지만 상황에 따라 String, StringBuilder, StringBuffer를 구분해서 사용할 일이 생긴다. 1. String 가장 많이 사용하고 일반적인 자료형이다. 하나의 문자를 사용하는데는 문제 없지만 concat연산 시(+) 기존의 String 문자열을 수정하지 않고 각각의 String 변수를 합쳐 새로운 인스턴스를 생성한다. 왜냐하면 String은 byte배열이고 final이기 때문에 변할 수 없다.(immutable) public final class String implements java.io.Serializable, Comparable, CharSequence { /** * The value is used for charact..

IntelliJ에서 option + cmd + a 단축키는 Actions를 검색하는 단축키로 자주 사용하는 단축키 중 하나입니다. 증상 하지만 단축키를 실행하면 아래와 같이 다른 창이 뜨면서 오른쪽 하단에 단축키가 충돌된다는 알림창이 뜹니다. Modify shortcuts에 들어가면 저 단축키가 충돌난다고 친절하게 알려주네요. 원인 Mac 시스템에서 사용중인 단축키와 겹쳐서 나타나는 현상입니다. IntelliJ입장에서는 시스템 단축키가 우선순위가 높으니 정상적으로 실행되지 않습니다. 해결방법 1. 시스템 환경설정 -> 키보드 메뉴로 들어갑니다. 2. 단축키 탭의 서비스 메뉴에서 '터미널에서 man 페이지 인덱스 검색' 설정을 체크 해제합니다. 다시 IntelliJ에서 단축키를 실행하시면 정상적으로 동작하..

Lombok을 사용하다보니 너무 편해서 Lombok없이는 개발이 너무 힘들것 같습니다. 이제는 필수가 되어버린 Lombok. IntelliJ에서 어떻게 설정하는지 정리하고자 합니다. 1. Lombok Plugin 설치 Preferences -> Editor -> Plugins 아래 메뉴에서 Lombok을 Install합니다. 저는 이미 설치해서 Installed로 나오는데요. Install 버튼을 누룬 후 IntelliJ를 재시작합니다. 2. Enable annotation procession 이게 안되어 있으면 똑똑한 IntelliJ에서 우측 하단에 친절하게 안되어 있으니 Enable할거냐고 물어봅니다. 여기서 Enable 누르셔도 됩니다. 수동으로 설정하는 방법은 Preferences -> Build..

증상 PC를 새로 구매하여 기존 프로젝트를 새로 셋팅하는 중이었습니다. build도 정상적으로 됐는데 프로젝트를 실행하려고 하니 Execution failed for task ':compileJava'. 에러가 나네요. 원인 결론은 한참 헤멨는데 결론은 JDK 버전이 맞지 않아서 나는 에러였습니다. 새 PC에는 최신버전인 OpenJDK 13을 설치했는데 기존 프로젝트는 아직 1.8을 사용중이었습니다. 아래 Git log를 보고 Gradle버전이 변경된 걸 보고 힌트를 얻었습니다. 해결 최신 버전에 맞춰 프로젝트를 다시 셋팅하면 좋겠지만 이것 저것 호환성 확인해야 할 부분이 많습니다. 당장의 목적은 내 로컬에서 정상적으로 프로젝트를 돌려서 개발하는 것이므로 JDK 1.8 설치 후 해결했습니다. Intell..