Tools5 웹스톰(WebStorm)에서 코드 수정 시 실시간 미리보기(Live Server) 설정 방법 WebStorm에서 HTML 파일을 실시간으로 수정하고 브라우저에서 바로 변경 사항을 확인하려면 Visual Studio Code의 'Live Server'와 같은 기능을 구현할 필요가 있습니다. WebStorm에는 해당 기능을 지원하는 공식 플러그인이 없지만, Node.js의 live-server 패키지를 통해 유사한 환경을 만들 수 있습니다. 이 글에서는 WebStorm에서 live-server를 설정하고 사용하는 방법을 단계별로 설명합니다.1. 준비 단계Node.js 설치Node.js 공식 웹사이트에 접속하여 최신 LTS(Long Term Support) 버전을 다운로드합니다.설치 후, 터미널을 열고 다음 명령어를 입력하여 Node.js와 npm(Node Package Manager)이 올바르게 설.. 2025. 1. 21. WebStorm에서 Prettier 설정하는 방법 WebStorm에서 Prettier 설정하는 방법Prettier는 코드 포매팅을 자동화하여 코드 스타일을 일관되게 유지할 수 있는 도구입니다. WebStorm은 Prettier와의 통합을 지원하며, 프로젝트 전반에 걸쳐 쉽게 적용할 수 있습니다. 이번 포스팅에서는 WebStorm에서 Prettier를 설정하는 방법을 단계별로 안내합니다.1. Prettier 설치하기먼저 Prettier를 프로젝트에 설치해야 합니다. Node.js가 설치되어 있어야 하며, 다음 단계를 따릅니다.1.1. 프로젝트에 Prettier 설치터미널에서 다음 명령어를 실행하여 Prettier를 프로젝트에 설치합니다.npm install --save-dev prettier1.2. 글로벌로 Prettier 설치 (선택 사항)Prettie.. 2025. 1. 15. WebStorm에서 HTML 클래스의 스타일을 빠르게 작성하는 방법 HTML에서 class를 선택하고 단축키를 사용하여 관련된 CSS 파일에 스타일을 빠르게 작성하는 방법을 소개합니다.단계별 가이드HTML 파일에서 클래스 선택 HTML 코드에서 스타일을 추가하려는 클래스에 커서를 올립니다. Hello, WebStorm!단축키 사용 커서가 클래스 위에 있는 상태에서 다음 단축키를 누릅니다: Windows/Linux: Alt + Enter macOS: Option + EnterCSS 규칙 생성 선택 단축키를 누르면 WebStorm이 실행 가능한 여러 옵션을 표시합니다. 메뉴에서 "Create CSS rule"을 선택합니다.CSS 파일 선택 또는 생성 WebStorm은 현재 HTML 파일에 연결된 CSS 파일을 자동으로 검색합니다. 연결된 파일이 .. 2025. 1. 15. Vite와 Create-React-App(CRA) 비교 1. Vite란?Vite는 차세대 프론트엔드 빌드 도구로, 빠르고 효율적인 개발 환경을 제공합니다.프랑스어로 "빠름(Fast)"을 뜻하며, 기존의 느리고 무거운 빌드 도구를 개선하기 위해 등장했습니다.주로 ES Modules (ESM)을 활용하여 브라우저 친화적인 개발 환경을 제공합니다.2. CRA란?Create-React-App은 React 팀에서 공식적으로 제공하는 React 프로젝트 템플릿입니다.개발자가 React 설정을 고민하지 않고 바로 코드를 작성할 수 있도록 돕는 도구입니다.Webpack 기반으로 프로젝트를 설정하며, 초기 설정은 자동으로 완료됩니다.3. 주요 차이점 구분Vite CRA 초기 빌드 속도매우 빠름 (ESM 기반)느림 (Webpack 번들링 과정 포함)핫 리로드 (HMR)초고속 .. 2025. 1. 6. NPM이란 무엇인가요? 💡 NPM이란 무엇인가요?NPM은 Node Package Manager의 약자로, 자바스크립트 개발에서 필요한 도구와 라이브러리를 설치하고 관리하는 도구입니다.쉽게 말해, "코드가 더 편하게 작동하도록 도와주는 앱 스토어 같은 것"입니다.🌟 NPM이 왜 필요한가요?만약 우리가 개발을 하면서 매번 모든 기능을 처음부터 끝까지 직접 코딩한다면 너무 시간이 오래 걸립니다.그래서 이미 다른 개발자들이 만들어 놓은 코드를 다운로드해서 사용하는데, 이때 NPM이 그 코드를 편리하게 관리해 줍니다.📂 NPM의 구성 요소 (쉽게 이해하기)구성 요소 설명패키지패키지는 특정 기능을 미리 만들어 둔 자바스크립트 코드라고 생각하면 됩니다.예를 들어, React는 웹사이트 화면을 만들 때 사용하는 도구이고,Lodash는 .. 2024. 11. 13. 이전 1 다음
