Per ardua ad astra.

사이드바 워크스페이스 폴더 목록이 사라지는 문제 해결 방법들어가며비주얼 스튜디오 코드(VSCode)의 사이드바에서 갑자기 현재 워크스페이스의 폴더 목록이 사라져서 보이지 않는 문제를 해결하는 방법을 간단하게 정리해본다. 방법@[Ctrl/Cmd] + [Shift] + [P]@ 단축키를 눌러 명령 팔레트(Command Pallette)를 실행한 후, @View: Reset View Locations@를 실행한다. 참고 사이트 How can I find and restore a missing View, View subsection, or Panel in VS Code?My desired behavior for the Explorer View in VS Code is that, when I open a fold..

TailwindCSS IntelliSense 활성화하기 (VS Code)들어가며VS Code에서 리액트 네이티브(React Native)를 이용하여 애플리케이션을 만들 때, TailwindCSS IntelliSense를 활성화 시키는 방법을 정리해본다. 방법(1) Tailwind CSS IntelliSense 확장 설치하기VS Code에서 Tailwind CSS IntelliSense 확장을 설치한다. Tailwind CSS IntelliSense - Visual Studio MarketplaceExtension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Codemarketplace.visualstudio.com (2) Tailwi..

VS Code에서 명령어로 안드로이드 에뮬레이터 실행 방법들어가며안드로이드 에뮬레이터를 실행하려면 안드로이드 스튜디오를 실행한 후, 직접 가상 에뮬레이터를 실행시켜줘야 한다.안드로이드 스튜디오를 실행시킬 필요 없이, 비주얼 스튜디오 코드(VS Code) 터미널에서 명령어로 안드로이드 에뮬레이터를 실행시킬 수 있는 방법을 정리해본다. 방법Windows@[환경 변수]@의 @[시스템 변수]@에서 @Path@ 항목을 선택하고 아래의 경로를 추가해준다.C:\Users\\AppData\Local\Android\Sdk\emulator 설치된 가상 장치 목록을 확인한다.$ emulator -list-avds 에뮬레이터를 실행한다.$ emulator -avd  @AVD_NAME@에 실행시키고자 하는 가상 장치 이름을 넣..

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

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"..

리액트 스니펫(Snippet) 정리들어가며비주얼 스튜디오 코드(VS Code)의 리액트(React.js) 스니펫 확장(ES7+ React/Redux/React-Native snippets)을 설치한 후 사용할 수 있는 스니펫들을 정리해본다.  스니펫(Snippet)프로그래밍에서 자주 사용되는 코드 조각이나 템플릿일반적으로 반복적으로 작성해야 하는 코드를 빠르고 효율적으로 생성할 수 있도록 도와주는 기능 VS Code 확장 설치리액트 스니펫을 VS Code에서 사용하려면, 아래의 확장 프로그램을 설치해줘야 한다.ES7+ React/Redux/React-Native snippets ES7+ React/Redux/React-Native snippets - Visual Studio MarketplaceExten..

검색 시, 특정 폴더를 검색 범위에서 제외시키는 방법들어가며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.json@extends@의 값(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 ..

비주얼 스튜디오 코드(VS Code)와 애저(Azur) 연동하기 들어가며 비주얼 스튜디오 코드(VS COde)와 Azure을 연동해보자. 방법 ① VS Code에서 Azure Tools 확장 설치하기 VS Code 스토어에서 @Azure Tools@를 검색하여 설치한다. 설치를 하면 @Azure CLI Tools@를 설치해야 한다는 경고창이 뜰 수 있다. @Azure CLI Tools@ 확장 또한 설치해준다. ② 테넌트(Tenant ID) 등록하기 @Azure Tools@를 설치하면 @Azure Account@ 확장 또한 자동으로 설치된다. Azure Account 확장 설치 페이지에 들어간 후, [설정 아이콘] → [Extension Settings]를 클릭한다. Azure 테넌트(Tenant) ID를..

애저(Azure) 테넌트(Tenant) ID 찾는 방법 들어가며 VS Code로 Azure Tools 확장을 설치한 후, 원격으로 로그인 하려고 했으나 계속 로그인이 되지 않았다. 그래서 테넌트(Tenant) ID를 직접 입력하여 로그인할 수 있다는 방법을 알게 되었다. 방법 Azure 포털에 로그인한 후, @[Azure Active Directory]@ 페이지에 들어가면 본인의 테넌트 ID를 확인할 수 있다. 결과 참고 사이트 Visual Studio Code does not connect to my Azure account - Microsoft Q&A Hello. So this problem, I have the latest Visual Studio Code version, I need to conn..