Per ardua ad astra.

코드 자동 완성, 스니펫 기능 끄는 방법 (settings.json)들어가며비주얼 스튜디오 코드(VS Code)에서 코드 자동 완성, 스니펫(Snippet) 기능을 끄는 방법을 정리해본다.로컬에서 코딩 테스트나 빅데이터분석기사 실기 시험을 준비할 때 이 방법을 사용하면 유용하다. 방법설명settings.json 파일에 아래의 내용을 추가해준다.[Ctrl/Cmd] + [Shift] + [P]를 눌러서 명령 팔레트(Command Pallette) 열기settings 검색하기[Preferences: Open User Settings (JSON)] 항목 클릭하기   만약 로컬 프로젝트에만 적용시키고 싶다면, 프로젝트 최상단 경로에 .vscode 폴더 생성 후, settings.json..

vscode-icons : 리액트 아이콘 적용하는 방법들어가며비주얼 스튜디오 코드(VS Code)의 vscode-icons확장의 .jsx 확장자의 아이콘이 .js 아이콘으로 표시될 때, 수동으로 리액트 아이콘으로 표시되게 하는 방법을 정리해본다. 방법[Ctrl] + [Shift] + [P]를 누른 후, Command Pallette를 실행한다.settings 를 타이핑 한 후, Preferences: Open User Settings (JSON)을 클릭한다.아래의 코드를 추가해준다.settings.json{ "vsicons.associations.files": [ { "icon": "reactjs", "extensions"..

검색 시, 특정 폴더를 검색 범위에서 제외시키는 방법들어가며VS Code에서 검색을 할 때 node_modules 등 특정 폴더를 검색 범위에서 제외하고 싶을 때가 있다.전역적으로 설정하는 방법과 프로젝트 별로 특정 폴더를 검색 범위에서 제외시키는 방법이 존재한다. 방법VS Code 설정 파일인 settings.json 파일에 search.exclude키와 값을 설정해주면 된다. ① 전역적으로 특정 폴더를 검색 범위에서 제외시키기VS Code를 이용하여 검색을 할 때, 프로젝트에 관계 없이 전역적으로 특정 폴더를 검색 범위에서 제외시키는 방법이다.[Ctrl] + [Shift] + [P]를 눌러 명령 팔레트(Command Palette)를 실행한다.Preferences: Open U..

Cannot find module 'next/babel' 오류 해결하기 (Next.js)들어가며VS Code에서 Next.js 프로젝트를 작업할 때 아래와 같이 오류가 발생할 경우 해결하는 방법을 정리해본다. 방법프로젝트의 최상위 경로에 .babelrc 파일을 생성하고, 파일 안의 내용을 다음과 같이 작성한다. /.babelrc{ "presets": ["next/babel"], "plugins": []} 그리고 프로젝트의 최상위 경로에 있는 .eslintrc.json 파일을 열고 다음과 같이 내용을 수정해준다. /.eslintrc.jsonextends의 값(Value)을 배열(Array) 형태로 만들어주고, "next/babel" 값을 배열에 넣어준다.{ "extends": ["nex..

JavaScript 탭 기본 들여쓰기(Indent) 간격 설정 방법 (settings.json)들어가며JavaScript 코드를 VS Code에서 작성할 때, 기본 탭 들여쓰기(Indent)를 지정하는 방법을 알아보자. 방법VS Code에서 [Ctrl]([Cmd]) + [Shift] + [P]를 눌러서 Settings을 검색하여 [Preferences: Open User Settings (JSON)] 항목을 클릭한다. Settings.json 파일 안의 내용이 에디터에 표시되는데, 아래의 내용을 추가해준다.{ // ... // I want my default to be 4, but JavaScript/JSON to be 2 "editor.tabSize": 4, "[javasc..

비주얼 스튜디오 코드(VS Code)에서 JSX 자동 완성 기능 켜는 방법들어가며비주얼 스튜디오 코드(VS Code)에서 return 문 안에 JSX를 작성할 때, 자동 완성 기능(Auto Complete)을 사용하는 방법을 알아보자. 방법이 방법을 위해서는 VS Code 설정을 따로 해줘야 한다.우선, Ctrl(Cmd) + ,를 눌러서 VS Code 설정 페이지를 연다. 그리고 상단의 [Open Settings (JSON)] 아이콘을 클릭한다.그리고 아래의 코드를 settings.json 코드 안에 넣어준다.{ ... "emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.syntaxProfiles"..

VS Code 화면 오른쪽에 Live Server 띄우기 들어가며 비주얼 스튜디오 코드(Visual Studio Code) 화면 오른쪽에 라이브 서버(Live Server)를 띄우는 방법을 정리해본다. 방법 방법 ① [Ctrl] + [Shift] + [P]를 눌러 명령 팔레트(Command Palette)를 실행한 후, Simple Browser: Preview를 클릭한다. 방법 ② VS Code에서 공식적으로 지원하는 방법이다. 이 방법은 편집기에 .html 파일 또는 .md 파일을 열었을 때 가능한 방법이다. 우측 상단의 [Show Preview] 아이콘을 클릭한다. 참고 사이트 Can I use Live Server inside Vscode editor? I know live ..