채널톡 아이콘

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

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

(4.3) 수강평 3개

수강생 28명

난이도 입문

수강기한 12개월

수강 후 이런걸 얻을 수 있어요

  • 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 기본 기능과 설정을 익혀 개발 효율을 높이고자 하는 웹 개발 입문자

안녕하세요
유용한IT학습입니다.

8,280,827

명

수강생

6,646

개

수강평

4.6

점

강의 평점

336

개

강의

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

커리큘럼

전체

19개 ∙ (7시간 47분)

해당 강의에서 제공:

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

수강평

전체

3개

4.3

3개의 수강평

  • 최예솔님의 프로필 이미지
    최예솔

    수강평 2

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    쉽고 자세한 설명 감사합니다

    • 정원기님의 프로필 이미지
      정원기

      수강평 4

      ∙

      평균 평점 5.0

      5

      32% 수강 후 작성

      • 정동현님의 프로필 이미지
        정동현

        수강평 3

        ∙

        평균 평점 4.3

        3

        100% 수강 후 작성

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

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

        비슷한 강의

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

        신규가입 25% 할인

        ₩56,100

        25%

        ₩74,800

        평생교육이용권 지원 강의