Live Server
기능: 로컬 호스트 서버를 시작하고, 코드 변경 시 자동으로 브라우저를 새로고침합니다.
특징: 개발 중 실시간으로 변경 사항을 확인할 수 있어 효율적인 개발 환경을 제공합니다.
예시: HTML, CSS, JS 파일을 저장하면 브라우저가 자동으로 새로고침됩니다.
기능: 로컬 호스트 서버를 시작하고, 코드 변경 시 자동으로 브라우저를 새로고침합니다.
특징: 개발 중 실시간으로 변경 사항을 확인할 수 있어 효율적인 개발 환경을 제공합니다.
예시: HTML, CSS, JS 파일을 저장하면 브라우저가 자동으로 새로고침됩니다.
사용법:
1. 프로젝트 폴더 열기: VS Code에서 작업 중인 프로젝트 폴더를 엽니다.
2. HTML 파일 열기: Live Server를 실행할 HTML 파일을 엽니다.
3. Live Server 시작:
- 방법 1: 오른쪽 하단의 "Go Live" 버튼을 클릭합니다.
- 방법 2: HTML 파일에서 마우스 오른쪽 버튼을 클릭하고 "Open with Live Server"를 선택합니다.
- 브라우저 확인: Live Server가 로컬 서버를 시작하고 기본 브라우저에서 페이지를 엽니다. 이때, 코드 변경 사항이 실시간으로 반영됩니다.
Prettier-Code formatter
기능: 코드 스타일을 자동으로 관리하여 일관된 코드 형식을 유지합니다.
특징: 설정을 통해 자신만의 코드 스타일을 커스터마이징할 수 있습니다.
예시: 코드 작성 후 저장할 때 자동으로 코드 형식이 맞춰집니다.
vscode-styled-components
기능: styled-components를 사용할 때 CSS-in-JS 스타일의 자동 완성을 지원합니다.
특징: styled-components를 사용할 때 코드 작성을 도와주고, 스타일 작성 시 편의성을 높입니다=-
예시: styled.div를 입력하면, 스타일 속성의 자동 완성이 지원됩니다.
JavaScript (ES6) code snippets
기능: 자주 사용되는 JavaScript 코드 조각을 제공하여 반복되는 코드를 쉽게 작성할 수 있습니다.
특징: 코드 생산성을 높이기 위해 다양한 ES6+ 스니펫을 포함합니다. 사용자 정의 스니펫도 지원하여 필요에 맞게 설
할 수 있습니다.
예시: log를 입력하면 console.log()로 자동 완성됩니다.
Reactjs code snippets
기능: React 개발에 필요한 다양한 코드 스니펫을 제공하여 코딩 속도를 높입니다.
특징: 클래스형 및 함수형 컴포넌트, Hooks 등의 스니펫을 포함합니다.
예시: rfce를 입력하면 함수형 컴포넌트 템플릿이 자동으로 완성됩니다.
ES7 React/Redux/GraphQL/React-Native snippets
기능: React, Redux, GraphQL, React Native 개발을 위한 코드 스니펫을 제공하여 코딩 속도를 높입니다.
특징: 간단한 키워드를 사용하여 복잡한 코드 구조를 빠르게 생성할 수 있습니다.
예시: rcc를 입력하면 클래스형 컴포넌트 템플릿이 자동으로 완성됩니다.
ESLint
기능: 코드를 검사하여 일관된 코딩 스타일을 유지하고 오류를 방지합니다.
특징: 실시간으로 코드의 오류와 경고 메시지를 표시하며, 자동으로 코드 형식을 맞춰줍니다.
예시: 잘못된 문법을 사용했을 때 경고 메시지를 출력해줍니다.
React Developer Tools
기능: 크롬 브라우저 확장 프로그램으로 React 앱의 컴포넌트 계층을 시각적으로 검사하고, 관련된 상태와 속성을 확할 수 있습니다.
특징: 개발 중 React 앱을 디버깅하거나 성능 최적화에 매우 유용합니다.
예시: 컴포넌트를 클릭하면 해당 컴포넌트의 상태(state)와 속성(props)을 확인할 수 있습니다.
Path Intellisense
기능: 파일 경로를 자동 완성하여 빠르고 정확하게 파일을 불러올 수 있도록 도와줍니다.
특징: 특히 React 프로젝트에서 컴포넌트를 불러올 때 유용합니다.
예시: import ... from '...' 구문에서 파일 경로를 자동으로 추천합니다.
사용법 :
1. 프로젝트 폴더 내에서 파일을 불러올 때 경로를 자동으로 완성합니다.
2. 예를 들어, import ... from '...' 구문을 작성할 때, '...' 부분에서 경로를 입력하기 시작하면 Path Intellisense가 가능한 파일과 폴더 목록을 표시합니다.
