Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
개발 · 프로그래밍

/

프로그래밍 언어

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

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

2명 이 수강하고 있어요.

  • 유용한IT학습

이런 걸 배울 수 있어요

  • React와 Vue 개발을 위한 최적의 학습·개발 환경 구축 능력 습득

  • VS Code 기본 기능과 설정 활용을 통한 개발 생산성 향상

리액트, 뷰 학습을 위한 필수 지식 - 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

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • React.js·Vue.js를 처음 배우거나 학습 환경을 제대로 갖추고 싶은 초급 개발자

  • VS Code 기본 기능과 설정을 익혀 개발 효율을 높이고자 하는 웹 개발 입문자

안녕하세요
입니다.

8,256,007

수강생

6,085

수강평

4.6

강의 평점

244

강의

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

커리큘럼

전체

19개 ∙ (7시간 47분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

월 ₩14,960

5개월 할부 시

₩74,800

유용한IT학습님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!