Per ardua ad astra.

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.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 화면 오른쪽에 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를..

비주얼 스튜디오 코드(Visual Studio Code)와 깃허브(GitHub) 연동하기들어가며다음과 같이 간단하게 비주얼 스튜디오 코드(Visual Studio Code)와 깃허브(GitHub)를 연동할 수 있다.  방법1. 비주얼 스튜디오 코드(Visual Studio Code) 프로그램 실행 후, [F1] 버튼을 누른다. 2. "git clone"을 검색한다. 3. 연동할 깃 레포지토리(Git Repository)를 선택한다. 4. 연동할 로컬 저장소를 선택한다. 5. .git 디렉터리가 생성되며 연동이 된다. 6. git remote -v 명령을 입력하여 성공적으로 연동 되었는지 확인한다.> git remote -v 7. 비주얼 스튜디오 코드의 왼쪽 카테코리에서 버전 관리를 수행한다.