Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
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

  • usefulit
react.js
Vue.js
VSCode

What you will learn!

  • 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,256,009

Learners

6,086

Reviews

4.6

Rating

244

Courses

유용한 IT 강의를 통해 여러분의 성장을 돕겠습니다.

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!