Free Learn

문제점 VSCode는 하위 폴더가 하나 있을 경우 트리구조로 보여주지 않고 옆으로 나열해주고 있습니다. 하위 폴더가 2개 이상일 경우에는 트리구조로 보여주고 있어서 가독성이 많이 떨어집니다. 이를 하위 폴더가 하나라도 트리구조로 보여주도록 변경해보겠습니다. 해결방법 1. 설정 메뉴 진입 macOS : ⌘ + , Windows : Ctrl + , Linux : Ctrl + , 2. compact 검색 후 Compact Folders 체크 해제 검색창에서 compact를 검색하면 아래와 같이 Compact Folders라는 메뉴가 보입니다. 이 설정이 기본으로 체크되어 있는데 이 값을 체크 해제합니다. 결과 겹쳐서 보이던 폴더가 트리구조로 변경되었습니다.

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 {등록할 이메일}

업무를 하다보면 간단하게 메모하여 공유하고 싶을 때가 있습니다. 문자만 타이핑 하자니 전달력이 떨어지고, 손으로 그린 이미지도 넣고싶은데 방법이 간단하지 않습니다. 이러한 문제를 간단하게 해결할 수 있는 사이트를 공유합니다. https://excalidraw.com/ Excalidraw — Collaborative whiteboarding made easy Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them. excalidraw.com 메모작성 인터페이스가 직관적이어서 사용하기 쉽습니다.이런식으로 자유롭게 메모를 작성하면 됩니다.영..

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에서 단축키를 실행하시면 정상적으로 동작하..