강의

멘토링

커뮤니티

Programming

/

Programming Language

React and Vue Learning Essentials - FrontEnd Development Environment Setup and VS Code Basic Usage

This course is a video lecture that covers essential development environment setup and basic VS Code usage for React.js and Vue.js frontend learning. It provides step-by-step guidance from environment setup to utilizing basic features that enhance productivity, with a focus on hands-on practice.

2 learners are taking this course

Level Beginner

Course period 12 months

  • usefulit
react.js
react.js
Vue.js
Vue.js
VSCode
VSCode
react.js
react.js
Vue.js
Vue.js
VSCode
VSCode

What you will gain after the course

  • Acquiring the ability to build optimal learning and development environments for React and Vue development

  • Improving Development Productivity Through VS Code Basic Features and Settings Utilization

리액트, 뷰 학습을 위한 필수 지식 - FrontEnd 학습 환경설정 및 VS Code 기초 사용법

본 과정은 React.js와 Vue.js 프런트엔드 학습에 필수적인 개발 환경 설정VS Code 기초 사용법을 다루는 동영상 강의입니다. 실습 중심으로 환경 구축부터 생산성을 높이는 기본 기능 활용까지 단계별로 안내합니다.

강의 내용

리액트, 뷰 학습을 위한 필수 지식 - FrontEnd 학습 환경설정 및 VS Code 기초 사용법 Part.1

  • 프런트엔드 개발 입문자를 위한 학습 순서와 필수 설치 프로그램 안내

    • 프런트엔드 개발을 처음 시작하는 사람을 위한 학습 로드맵 소개

    • HTML, CSS, JavaScript, 프레임워크(React 등) 학습 순서 안내

    • 개발 환경 구축을 위해 필요한 필수 프로그램(Node.js, VS Code 등) 소개

  • Node.js 및 npm 삭제·재설치 방법 실습

    • 기존 Node.js와 npm 버전 확인 방법

    • 설치된 Node.js와 npm 제거 절차

    • 최신 버전으로 재설치하는 과정 실습

  • VS Code 설치 후 필수 기능과 설정 익히기

    • VS Code 다운로드 및 설치

    • 테마, 글꼴, 자동 저장, 코드 포맷터 등 필수 설정

    • 확장 프로그램(Extensions) 설치 및 관리 방법

  • React 설치를 위한 배경 지식과 핵심 용어 이해

    • React가 무엇인지와 특징 설명

    • 컴포넌트, JSX, Virtual DOM, SPA 등 핵심 용어와 개념 이해

    • React 설치 전 알아두면 좋은 개발 환경 관련 용어 정리

  • React 프로젝트 설치 및 메인 화면 실행 실습

    • create-react-app 또는 최신 설치 방식으로 프로젝트 생성

    • 프로젝트 구조와 주요 폴더/파일 설명

    • 개발 서버 실행 후 브라우저에서 메인 화면 확인

  • VS Code 터미널을 활용한 React 설치 방법

    • VS Code 내장 터미널 열기 및 기본 명령어 사용

    • React 프로젝트 생성 명령어 실행

    • 설치 과정 중 발생할 수 있는 오류와 해결 방법

리액트, 뷰 학습을 위한 필수 지식 - FrontEnd 학습 환경설정 및 VS Code 기초 사용법 Part.2

  • Live Server 설치와 기본 사용법 익히기

    • VS Code 확장 프로그램 Live Server 설치 방법 안내

    • HTML/CSS/JavaScript 파일을 브라우저에서 실시간으로 미리보기

    • 저장 시 자동 새로고침 기능 활용법

  • VS Code에서 JavaScript 코드 실행 방법 실습

    • 내장 터미널을 활용한 Node.js 기반 JS 코드 실행

    • VS Code 확장 프로그램을 이용한 브라우저 환경 실행 방법

    • 간단한 예제 코드를 작성하고 실행 결과 확인

  • 필수 기능 학습: 멀티 선택, 스틱키(Sticky), 행 관련 기능, 기타 유용 기능

    • 멀티 선택(Multi-cursor): 여러 위치를 동시에 수정하는 방법

    • Sticky Scroll(스틱키): 스크롤 시 상단에 코드 구조(함수명, 클래스명 등) 고정 표시

    • 행 관련 기능: 행 복사, 이동, 삭제, 위/아래 삽입 등의 단축키 사용

    • 기타 생산성을 높여주는 VS Code 편집 기능 소개

  • 단축키 실습을 통한 작업 속도 향상

    • VS Code 기본 단축키와 자주 쓰이는 명령어 연습

    • 코드 편집, 파일 탐색, 검색/바꾸기 등 주요 작업 단축키 적용

    • 단축키 숙달을 위한 실습 문제 진행

  • 커스텀 HTML 템플릿 만들기 및 실습

수강 전 참고 사항

이 강의는 지식공유자의 질문/답변을 제공하지 않습니다.

학습 자료

part 1 - 강의자료_PDF

part 2 - 강의자료_PDF

Recommended for
these people

Who is this course right for?

  • Beginner developers who are learning React.js·Vue.js for the first time or want to properly set up their learning environment

  • Web development beginners who want to learn VS Code's basic features and settings to improve development efficiency

Hello
This is

8,278,676

Learners

6,372

Reviews

4.6

Rating

309

Courses

I will help you grow through useful IT lectures.

Curriculum

All

19 lectures ∙ (7hr 47min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

$58.30

usefulit's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!