인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST
개발 · 프로그래밍

/

프론트엔드

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

기본 문법부터 심화 개념까지 학습하면서, 바닐라 자바스크립트로 SPA를 개발해 봅시다🔥

(4.9) 수강평 21개

수강생 429명

Thumbnail

초급자를 위해 준비한
[프론트엔드, JavaScript] 강의입니다.

이런 걸
배워요!

  • 바닐라 자바스크립트 기본 문법

  • 실무 개발에 필요한 자바스크립트 개념

  • Promise 객체와 async/await 을 통한 비동기 프로그래밍

  • 컴포넌트와 모듈화

  • DOM API를 사용한 웹 요소 조작

  • state와 setState를 사용한 상태 관리

  • 라이브러리 없이 SPA 개발

  • history api를 통한 라우팅

  • 자바스크립트를 리액트처럼 사용하기

🍀'웹 프론트엔드를 위한 자바스크립트 첫걸음' 수강생분들은
아래의 링크를 통해 할인 가격으로 강의를 구매하세요!!

-> 할인 쿠폰 링크

🤯 바닐라 자바스크립트
왜 자세하게 배워야할까요?

바닐라 자바스크립트는 기본적으로 라이브러리나 프레임워크 없이
순수한 자바스크립트로 코드를 작성하는 것을 의미합니다.

바닐라 자바스크립트를 배우는 것은 웹 개발의 기초를 다지는 중요한 과정이며,
자바스크립트의 근본 원리작동 방식을 이해할 수 있고
다양한 도구와 기술들을 효율적으로 사용할 수 있게 됩니다.

React.js와 같은 라이브러리를 사용하는 상황에서도 이러한 기술들이 어떻게 작동하는지 이해할 수 있고,
라이브러리에 의존하지 않고 자유롭게 개발할 수 있는 능력을 기를 수 있기 때문에
순수한 자바스크립트 학습은 개발자에게 매우 중요한 과정입니다.

한 번에 끝내는 자바스크립트 강의는..!

자바스크립트의 최신 문법을 다루며, 라이브러리 없이
순수한 자바스크립트만을 사용해 API 호출, DOM 조작, 그리고 상태 관리, 라우팅, SPA 개발까지
2개의 프로젝트를 개발해보며 학습하는 강의입니다.

자바스크립트 최신 문법
ES6+ 버전 학습

API, DOM 조작, 상태 관리, SPA 개발까지 한번에!

총 2개의 프로젝트를 통한
내용 점검 및 반복 학습

깔끔한 강의 자료와 함께 자바스크립트의 개념을 배울 수 있습니다 👍
강의 자료는 전~부 아래와 같은 pdf 파일로 제공됩니다.

섹션1~섹션5 강의 자료 미리보기

섹션6~섹션9 강의자료 미리보기

한 번에 끝내는 자바스크립트를 수강하면
아래와 같은 2개의 프로젝트를 개발할 수 있습니다.

중간 프로젝트

최종 프로젝트

강의를 수강하면서 이해가 잘 가지 않았던 부분을 확인하거나,
강의 수강 이후에도 내용을 복습할 수 있도록
아래 그림과 같이, 강의와 함께 보실 수 있는 핸드북도 제공됩니다!

핸드북(강의 교안 웹사이트)

🙋🏻‍♀️ 이런 분들께 추천해요

기초부터 심화까지 한 번에!
기초 개념부터 심화 개념까지 한 번에 학습하고 싶으신 분.
직접 프로젝트까지 개발해보며 필요한 개념들을 학습해보세요.

프론트엔드 취업 준비중이에요.
프론트엔드 개발자로 취업을 준비하고 있는 취업 준비생.

DOM 조작, 상태 관리, SPA에 대한 개념을 학습해보세요.

바닐라 자바스크립트는 잘 몰라요.
React.js, Next.js 등을 사용중이지만, 자바스크립트는 자신 없는 분.

라이브러리와 프레임워크를 사용하기 전에 필요한 개념들을 다시 한 번 학습해보세요.

강의를 수강한 후에는..

  • 바닐라 자바스크립트 기본 문법과, 기초부터 심화 개념을 이해할 수 있습니다.

  • 실무에 자주 사용되는 배열 메서드, 비동기 처리, 컴포넌트와 모듈화 등의 개념들을 이해할 수 있습니다.

  • DOM 조작, API 호출, 상태 관리, SPA 개발 등을 자바스크립트만으로 개발할 수 있습니다.


  • React.js, Next.js를 보다 수월하게 학습할 수 있습니다.

💥 다른 강의들과는 이러한 점이 달라요

한 번에 끝내는 자바스크립트 강의는 다음과 같은 차별점이 있습니다.

강의 자료를 통한 상세한 개념 설명

애니메이션이 적용된 깔끔하고 직관적인 자료, 그리고 예제 코드를 통해 기초 문법 및 개념부터, 심화 개념까지 꼼꼼하게 학습합니다.

함께 작성하는 예제 코드

배운 개념들을, VSCode에 직접 작성해봅니다.
라이브 코딩으로 함께 자바스크립트 코드를 작성하며 실습을 해봅니다.

중간 프로젝트 개발 및 추가 개념 학습

중간 프로젝트를 개발해보며 배운 내용들을 잘 이해했는지 확인할 수 있습니다. 이후, 개발한 프로젝트의 문제점을 파악하고, 더 좋은 프로젝트를 만들기 위해 필요한 개념들을 추가로 학습합니다.

최종 프로젝트 개발을 통한 전체 내용 복습

강의에서 배운 모든 내용을 사용해 최종 프로젝트를 함께 개발합니다. 프로젝트를 개발하며 내용들을 다시 한 번 복습할 수 있습니다.

모든 자료 제공

수강생 분들에게는 강의 교안을 웹 페이지 형식(핸드북)으로,
프로젝트 코드와 강의에 사용된 자료는 각각 github, pdf로 제공해드립니다.

🔎 자세한 커리큘럼이 궁금해요

한 번에 끝내는 자바스크립트 강의의 커리큘럼은 다음과 같습니다.

📌 섹션1. 자바스크립트 기초 ~ 섹션2. 비동기와 API

기본 문법과 심화 개념들을 먼저 강의자료(ppt)로 학습한 다음,
배운 내용을 적용해 직접 예제 코드를 작성하며 개념을 탄탄하게 다집니다.

📌 섹션3. DOM과 DOM API

DOM에 대해 자세하게 학습한 후, DOM을 조작할 수 있는 여러가지 DOM API에 대해 학습합니다.

자주 사용되는 폼 요소들을 조작하는 방법에 대해 배우면서, 이후 DOM API를 사용해 직접 DOM을 조작해봅니다.

📌 섹션4. this와 화살표 함수

자바스크립트의 this 키워드에 대해 배우고
실습을 통해 상황에 따라 this에 어떤 값이 바인딩이 되는지 확인해봅니다.

이후 this와 화살표 함수, 그리고 this와 일반 함수의 관계에 대해서도 살펴봅니다.

📌 섹션5. 중간 프로젝트

지금까지 배운 내용들을 활용해 간단한 웹 사이트를 개발합니다.
웹 사이트를 개발하고, 제작 과정에서 발생했던 문제점들을 하나씩 파악해봅니다.

📌 섹션6. 컴포넌트와 모듈 시스템

중간 프로젝트를 개발하며 발생했던 문제들을 해결하기 위해 컴포넌트와 모듈 시스템에 대해 학습합니다.
먼저 강의 자료와 예제 코드를 통해 학습한 다음, 배운 내용을 중간 프로젝트에 적용시켜 문제점을 해결합니다.

📌 섹션7. 상태 관리와 SPA

중간 프로젝트에서 발생한 문제점을 해결하기 위해 배워야하는 개념인 상태 관리와 SPA에 대해 배웁니다.
상태 관리란 무엇이고, 어떻게 개발할 수 있는지 배우면서, SPA와 MPA 그리고 CSR과 SSR에 대한 개념에 대해서도 살펴봅니다. 최종적으로, 배운 내용들을 적용해서 중간 프로젝트 코드를 수정합니다.

📌 섹션8. 최종 프로젝트

지금까지 배운 내용들을 전부 활용해 최종 프로젝트를 개발합니다.

웹 사이트에 필요한 기능을 살펴보고, 함께 기능별로 컴포넌트화 해본 다음, VSCode를 사용해 직접 웹 사이트를 개발합니다.

검색 기능, 필터링 기능, 페이지 이동 등의 기능을 개발합니다.

💬 자주 묻는 질문

Q. 비전공자도 들을 수 있나요?

기초 개념부터 다루고 있고, 강의 자료도 제공되기 때문에, 개발을 처음 시작하시는 분들도 수강할 수 있습니다

강의를 미리 들어보고 싶어요!

8개의 강의를 무료로 공개해드리고 있습니다.

강의를 미리 들어보고 싶은 분들은,
'미리 보기'가 적힌 강의를 수강해보세요.

Q. 강의가 도움이 될지 잘 모르겠어요..

자바스크립트를 어느 정도 알고 있다면,
아래의 체크 리스트를 통해 자가진단을 해보세요!

10개의 항목 중 8개 이상의 항목에 해당된다면
강의를 수강하지 않아도 괜찮습니다 😄

  • 스코프호이스팅에 대해 잘 알고 있다.

  • Promise 객체 비동기에 대해 알고, API를 호출해 데이터를 받아올 수 있다.

  • 자바스크립트로 DOM을 조작할 수 있다.

  • 자바스크립트의 this에 대해 잘 알고 있다.

  • SPASPA 동작 방식를 알고 있다.

  • 라이브러리 없이 상태 관리를 구현할 수 있다.

  • 웹 사이트를 기능별로 컴포넌트화 할 수 있다.

  • 파일을 모듈화 하고 import, export를 사용해 개발할 수 있다.

  • history api를 활용해 페이지 라우팅을 구현할 수 있다.

  • 자바스크립트로 SPA를 구현할 수 있다.


📣 수강 전 참고 사항

실습 환경

  • Chrome 브라우저를 사용합니다.

  • VSCode를 사용해 코드를 작성합니다. (설치방법 및 사용 방법은 강의에 포함되어 있습니다.)

학습 자료

  • 강의에 사용된 자료는 pdf 형식으로 제공됩니다.

  • 강의에 사용된 내용은 웹 페이지 형식으로 제공됩니다.

  • 프로젝트 코드는 github 링크를 통해 확인할 수 있습니다.

선수 지식 및 유의사항

  • 선수 지식 : HTML, CSS

    • HTML에서 자주 사용되는 태그들은 강의에서 설명하고 있습니다.

    • CSS 코드는 별도로 제공해드립니다.

  • 유의사항

    • Chrome 브라우저와 VSCode를 사용해 학습해주세요.

    • 질문에 대한 답변은 24시간 내에 작성해드립니다.


띠배너

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 프론트엔드 개발자로 취업하고 싶은 분들

  • 프로젝트를 개발하며 여러 개념을 학습하고 싶은 분들

  • 바닐라 자바스크립트를 배워보고 싶은 분들

  • 강의 자료와 함께 수강하고 싶은 분들

  • 스터디를 통해, 여러 사람들과 함께 학습하고 싶은 분들

선수 지식,
필요할까요?

  • HTML

  • CSS

안녕하세요
효빈 Hyobin입니다.

수강생 수

1,208

수강평 수

79

강의 평점

4.9

강의 수

2

안녕하세요 김효빈 입니다 😊
프론트엔드를 희망하는 분들을 위해 쉽고 친절한 강의를 제공합니다.

(현) 프론트엔드 개발자 | 교육자

(전) 스타트업 프론트엔드 리드 개발자


웹 페이지

https://hyobb.com/

온라인 강의

도서

커리큘럼

전체

54개 ∙ (9시간 42분)

수업 자료

가 제공되는 강의입니다.

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

수강평

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