
정보처리기사 실기 (2020 개정) 제대로 배우기 Part.2
유용한IT학습
정보처리기사 실기 과목 자격증 대비 강의로, 정보시스템 등의 개발 요구사항을 이해하기 위한 기초 지식을 익힐 수 있습니다. (두 번째 파트)
초급
정보처리기사
React와 Vue 개발을 위한 최적의 학습·개발 환경 구축 능력 습득
VS Code 기본 기능과 설정 활용을 통한 개발 생산성 향상
본 과정은 React.js와 Vue.js 프런트엔드 학습에 필수적인 개발 환경 설정과 VS Code 기초 사용법을 다루는 동영상 강의입니다. 실습 중심으로 환경 구축부터 생산성을 높이는 기본 기능 활용까지 단계별로 안내합니다.
프런트엔드 개발 입문자를 위한 학습 순서와 필수 설치 프로그램 안내
프런트엔드 개발을 처음 시작하는 사람을 위한 학습 로드맵 소개
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 프로젝트 생성 명령어 실행
설치 과정 중 발생할 수 있는 오류와 해결 방법
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 기본 기능과 설정을 익혀 개발 효율을 높이고자 하는 웹 개발 입문자
전체
19개 ∙ (7시간 47분)
해당 강의에서 제공:
2. 강의개요
21:16
15. VS Code 단축키 연습문제
18:37
월 ₩14,960
5개월 할부 시
₩74,800
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!