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

코드 자동 완성, 스니펫 기능 끄는 방법 (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 ..

애저(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..

비주얼 스튜디오 코드(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. 비주얼 스튜디오 코드의 왼쪽 카테코리에서 버전 관리를 수행한다.