
웹 프론트엔드를 위한 자바스크립트 첫걸음
효빈 Hyobin
웹 프론트엔드 개발자를 희망한다면? 재미있는 자바스크립트 강의로 첫걸음을 내딛어보세요✨
입문
JavaScript, DOM
기본 문법부터 심화 개념까지 학습하면서, 바닐라 자바스크립트로 SPA를 개발해 봅시다🔥







IBM
임직원들도 이 강의를 듣고 있어요!





IBM
임직원들도 이 강의를 듣고 있어요!
먼저 경험한 수강생들의 후기
5.0
Chan
자바스크립트 강의는 이미 한두 번 들어본 적이 있었습니다. 하지만 이상하게 항상 아는 것 같지만 막상 쓰려면 잘 안 되는 상태가 계속 됐었는데, 이 강의는 그 애매했던 부분들을 하나씩 정리해준 느낌이었습니다. 문법만 설명하고 끝나는 게 아니라 왜 이 개념이 필요한지, 이게 나중에 SPA에서 어떻게 쓰이는지까지 계속 연결해서 설명해주셔서 좋았습니다. 특히 좋았던 건 프로젝트 부분이었습니다. 보통은 따라 치고 끝나는 경우가 많은데, 이 강의는 중간 프로젝트 → 문제점 인식 → 개념 보완 → 최종 프로젝트 이 흐름이 있어서 생각을 안 할 수가 없었습니다. 솔직히 쉽진 않았는데, 그만큼 남는 게 많았습니다. 강의 자료(핸드북)도 정리가 잘 되어 있어서 강의 들을 때뿐만 아니라 복습할 때 계속 참고하게 됩니다. 자바스크립트를 다시 한 번 제대로 정리하고 싶은 분들께 추천하고 싶은 강의입니다.
5.0
산독기
완강했습니다! 완강하면서 느낀 점은 합리적인 가격에 정말 꼼꼼히 준비한 강의를 들을 수 있어서 기뻤어요. 개발 강의는 가격도 천차만별인데 저는 지금도 여러 강의를 함께 듣고 있지만, 가격이 비싸다고 강사가 질문 응답을 제대로 해준다든지 코드 업데이트가 있다든지 그러진 않더라고요. 그래서 어느 강사한테 굉장히 실망한 상태였는데 효빈 님 강의를 들으니까 진짜 확실히 다르네요. 다른 분과 비교해서 말하긴 좀 그렇지만 효빈 님 같은 교육자가 더욱 더 잘 되셨으면 좋겠어요. 자바스크립트 외에도 리액트나 next.js 이 쪽으로 강의를 확장하시면 너무나 좋을 것 같습니다! 인프런 n년차로서 가장 가성비 있으면서 유익했던 강의였습니다. 물론 마지막 파이널 프로젝트는 어려웠지만, 어려운만큼 겸손하게 다시 복습하라는 의미인 것 같아 자극이 되었어요. 이렇게 길게 수강평을 남긴 적은 없는데 효빈 님 팬이 되어서 다른 분들께 추천드리고자 수강평을 남깁니다! 상세한 핸드북, 명확한 딕션, 깔끔한 예제, 빠른 질의응답 등 뭐 하나 아쉬운 점 없었습니다. 인프런이나 교육계에서 더욱 유명해지시길 바랍니다! 잘 들었습니다!
5.0
kimday365
제가 이직을 준비하며 거의 5년만에 다시 FE로 돌아오게 되었습니다. 다시 시작하려니 어디서부터 공부해야할지 막막했는데요, 이 강의를 들으며 이전에 가볍게 알고있던 부분에 대한 복습부터, 새로운 문법 구조, 그리고 객체 / 프로퍼티 / 컴포넌트 단위 등 심화과정까지 아주 알차게 배울 수 있어 너무 좋았습니다. 특히 프로젝트를 진행한게 정말 유익한 시간이었습니다. 단순히 기초 지식 & 문법만 배우는 것이 아니라 실무에서 어떻게 사용하면 좋을지에 대해 배웠으며, 매번 만들던 todo리스트가 아닌 새로운 프로젝트를 진행해서 더욱 흥미로운 시간이었습니다! 다음 강의도 너무 기대됩니다! 좋은 강의 감사합니다 :)
바닐라 자바스크립트 기본 문법
실무 개발에 필요한 자바스크립트 개념
Promise 객체와 async/await 을 통한 비동기 프로그래밍
컴포넌트와 모듈화
DOM API를 사용한 웹 요소 조작
state와 setState를 사용한 상태 관리
라이브러리 없이 SPA 개발
history api를 통한 라우팅
자바스크립트를 리액트처럼 사용하기
🍀 '웹 프론트엔드를 위한 자바스크립트 첫걸음' 수강생분들은
아래의 링크를 통해 할인 가격(35%할인)으로 강의를 구매하세요!!
-> 할인 쿠폰 링크
바닐라 자바스크립트는 기본적으로 라이브러리나 프레임워크 없이
순수한 자바스크립트로 코드를 작성하는 것을 의미합니다.
바닐라 자바스크립트를 배우는 것은 웹 개발의 기초를 다지는 중요한 과정이며,
자바스크립트의 근본 원리와 작동 방식을 이해할 수 있고
다양한 도구와 기술들을 효율적으로 사용할 수 있게 됩니다.
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로 제공해드립니다.
한 번에 끝내는 자바스크립트 강의의 커리큘럼은 다음과 같습니다.
기본 문법과 심화 개념들을 먼저 강의자료(ppt)로 학습한 다음,
배운 내용을 적용해 직접 예제 코드를 작성하며 개념을 탄탄하게 다집니다.
DOM에 대해 자세하게 학습한 후, DOM을 조작할 수 있는 여러가지 DOM API에 대해 학습합니다.
자주 사용되는 폼 요소들을 조작하는 방법에 대해 배우면서, 이후 DOM API를 사용해 직접 DOM을 조작해봅니다.
자바스크립트의this 키워드에 대해 배우고
실습을 통해 상황에 따라 this에 어떤 값이 바인딩이 되는지 확인해봅니다.
이후 this와 화살표 함수, 그리고 this와 일반 함수의 관계에 대해서도 살펴봅니다.
지금까지 배운 내용들을 활용해 간단한 웹 사이트를 개발합니다.
웹 사이트를 개발하고, 제작 과정에서 발생했던 문제점들을 하나씩 파악해봅니다.
중간 프로젝트를 개발하며 발생했던 문제들을 해결하기 위해 컴포넌트와 모듈 시스템에 대해 학습합니다.
먼저 강의 자료와 예제 코드를 통해 학습한 다음, 배운 내용을 중간 프로젝트에 적용시켜 문제점을 해결합니다.
중간 프로젝트에서 발생한 문제점을 해결하기 위해 배워야하는 개념인 상태 관리와 SPA에 대해 배웁니다.
상태 관리란 무엇이고, 어떻게 개발할 수 있는지 배우면서, SPA와 MPA 그리고 CSR과 SSR에 대한 개념에 대해서도 살펴봅니다. 최종적으로, 배운 내용들을 적용해서 중간 프로젝트 코드를 수정합니다.
지금까지 배운 내용들을 전부 활용해 최종 프로젝트를 개발합니다.
웹 사이트에 필요한 기능을 살펴보고, 함께 기능별로 컴포넌트화 해본 다음, VSCode를 사용해 직접 웹 사이트를 개발합니다.
검색 기능, 필터링 기능,페이지 이동 등의 기능을 개발합니다.
Q. 비전공자도 들을 수 있나요?
기초 개념부터 다루고 있고, 강의 자료도 제공되기 때문에, 개발을 처음 시작하시는 분들도 수강할 수 있습니다. 대신 여러번 반복 학습해주세요!
강의를 미리 들어보고 싶어요!
8개의 강의를 무료로 공개해드리고 있습니다.
강의를 미리 들어보고 싶은 분들은,
'미리 보기'가 적힌 강의를 수강해보세요.
Q. 강의가 도움이 될지 잘 모르겠어요..
자바스크립트를 어느 정도 알고 있다면,
아래의 체크 리스트를 통해 자가진단을 해보세요!
10개의 항목 중 8개 이상의 항목에 해당된다면
강의를 수강하지 않아도 괜찮습니다 😄
스코프와 호이스팅에 대해 잘 알고 있다.
Promise 객체와 비동기에 대해 알고, API를 호출해 데이터를 받아올 수 있다.
자바스크립트로 DOM을 조작할 수 있다.
자바스크립트의 this에 대해 잘 알고 있다.
SPA와 SPA 동작 방식를 알고 있다.
라이브러리 없이 상태 관리를 구현할 수 있다.
웹 사이트를 기능별로 컴포넌트화 할 수 있다.
파일을 모듈화 하고 import, export를 사용해 개발할 수 있다.
history api를 활용해 페이지 라우팅을 구현할 수 있다.
자바스크립트로 SPA를 구현할 수 있다.
Chrome 브라우저를 사용합니다.
VSCode를 사용해 코드를 작성합니다. (설치방법 및 사용 방법은 강의에 포함되어 있습니다.)
강의에 사용된 자료는 pdf 형식으로 제공됩니다.
강의에 사용된 내용은 웹 페이지 형식으로 제공됩니다.
프로젝트 코드는 github 링크를 통해 확인할 수 있습니다.
선수 지식 : HTML, CSS
HTML에서 자주 사용되는 태그들은 강의에서 설명하고 있습니다.
CSS 코드는 별도로 제공해드립니다.
유의사항
Chrome 브라우저와 VSCode를 사용해 학습해주세요.
질문에 대한 답변은 24시간 내에 작성해드립니다.
학습 대상은
누구일까요?
프론트엔드 개발자로 취업하고 싶은 분들
프로젝트를 개발하며 여러 개념을 학습하고 싶은 분들
바닐라 자바스크립트를 배워보고 싶은 분들
강의 자료와 함께 수강하고 싶은 분들
스터디를 통해, 여러 사람들과 함께 학습하고 싶은 분들
선수 지식,
필요할까요?
HTML
CSS
인프런인증
커리어인증
13,405
명
수강생
535
개
수강평
137
개
답변
4.9
점
강의 평점
24
개
강의
전체
56개 ∙ (9시간 40분)
해당 강의에서 제공:
5. 자바스크립트의 실행 환경
12:43
6. 변수와 상수
09:22
7. 자료형과 형 변환
19:18
8. 연산자
20:43
9. 조건문
11:39
10. 함수
15:01
11. 스코프
13:34
12. 호이스팅
08:00
13. 함수 표현식과 화살표 함수
11:09
14. 객체
15:45
15. 배열
13:47
16. 생성자 함수
03:50
17. 반복문
18:13
18. 배열 메서드-1
20:30
19. 배열 메서드-2
15:11
20. 배열과 객체 구조 분해 할당
12:10
21. spread와 rest
14:22
22. 비동기 처리
10:59
23. 2. 프로미스 객체
15:32
24. async와 await
11:06
25. API 호출
12:01
전체
160개
4.8
160개의 수강평
수강평 5
∙
평균 평점 5.0
5
웹 프론트엔드를 위한 자바스크립트 첫걸음 강좌를 듣은 다음, 이 강좌를 수강을 하니까 이해가 잘 되어서 좋았습니다. 샘플 강좌를 청취하신 후 이 강좌를 조금 부담스럽다고 하신 분들은 웹 프론트엔드를 위한 자바스크립트 첫걸을 강좌를 추천합니다. 그리고 기회가 되신다면 만들고 따라 하면서 배우는 쇼핑몰 사이트를 강좌를 기획해서 만들어 주셨으면 합니다. 인프런, 기타 등등 쇼핑몰 사이트 관련 강좌는 별로 없는 것 같습니다. 알뜰 강좌가 많은 도움이 되었습니다. 감사합니다.
pasw9님 완강 축하드립니다 👏 한 번에 끝내는 자바스크립트 강의는, 첫걸음 강의를 수강하신 다음에 수강하면 더 좋은 강의입니다!! 추후에 쇼핑몰 사이트 강좌도, 기회가 된다면 준비해보겠습니다! 좋은 수강평 감사합니다 😊
수강평 1
∙
평균 평점 5.0
5
시각자료도 깔끔하고 무엇보다 라이브 코딩으로 천천히 하나하나 알려주셔서 좋았습니다. 꾸준히 수강 후 완강해보겠습니다! 좋은 강의 감사합니다.
좋은 수강평 감사합니다😀 꼭 완강하셨으면 좋겠습니다!!
수강평 13
∙
평균 평점 5.0
수정됨
5
이정환님 강의를 보고 한입 커뮤니티에 가입하여 해당 강의를 알게되었습니다. SPA 를 이용만 해봤지 직접 만드는건 안해본거 같아서 이미 결제 버튼을 누르고 있더라구요 ㅋㅋ 하고있는게 있어서 한입 챌린지는 참여하지 못했지만 매우 만족하는 강의 입니다. 아는 부분은 넘겨가며, 핸드북으로 복습 하면서 강의 후반부만 들었는데 매우 만족하는 강의 입니다. 이정환님도 딕션이 좋아 듣기 편했는데 효빈님도 딕션이 남다르게 좋네요. 감사합니다.
SK님! 좋은 수강평 감사드립니다 😊 추후에 다시 한 번 복습용으로 한입 챌린지에 참여해보시는 것도 좋을 것 같습니다 :) 다시 한 번 좋은 수강평 감사드립니다 👍
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!