중급 레벨의 개발자를 위한 자바스크립트 강좌

시나브로 자바스크립트

자바스크립트와 프레임워크들을 충분히 아는 것 같지만,
실력이 나아지는 느낌이 없고 자신감이 부족하신가요?

Client-side routing, SSR, hydration, CLI, form library 등의 주제를
직접 손으로 바닥부터 만들어 보세요.

시나브로 자바스크립트

시나브로 자바스크립트

"되는데, 이게 왜 되는 걸까요?"

우리는 늘 수많은 다양한 라이브러리와 프레임워크를 사용해 웹 개발을 해요. 그런데 정확히 뭐가 어떻게 돌아가는지 이해 안 될 때가 많아요. 자바스크립트 생태계는 너무 다양한 요소로 복잡하게 얽혀 있고, 어떻게 실타래를 풀지 모르겠거든요. 시나브로 자바스크립트는 주니어에서 미드 레벨로, 미드 레벨에서 시니어로 레벨 업 하기 위한 발판을 마련해 드립니다.

"웹 개발은 너무 복잡해요"

자바스크립트 생태계가 발전해 가면서 쌓인 기술 부채와 서로 얽혀 있는 수많은 요소들 때문에 그래요. 맨땅에 헤딩하며 스스로 배울 수도 있지만, 이미 그걸 겪은 사람과 진득하니 앉아 차분히 배우는 것도 좋은 방법이에요.

"할 수는 있는데, 자신감이 없어요"

사용하고 계시는 프레임워크와 라이브러리들이 어떻게 조화롭게 돌아가는 건지 근본적인 원리를 이해하지 못하면, 사소한 버그에도 패닉 하기 쉬워요. 강좌를 통해 중요한 주제들을 라이브러리 없이 직접 개발해 보면서 작동 원리를 이해해 보세요.

"개발 실력을 레벨 업 하고 싶어요."

비슷한 토이 프로젝트를 반복해서 만들면 손은 빨라질 수 있지만, 깊이 있게 들어가기 위해서는 다른 전략이 필요해요. 핵심 개념들을 깊이 이해하고 나면, 어떤 새로운 프레임워크가 나와도 쉽게 이해할 기초 지식이 생길 거예요.

"새로운 것들이 너무 빠르게 많이 나와요."

자바스크립트, 특히 프론트엔드 진영은 아직 해결해야 할 문제가 많고, 다양한 시도들이 끊임없이 일어나고 있어요. 그래서 새로운 라이브러리, 프레임워크, 개념들이 수없이 쏟아지죠. 하지만 기존에 존재하는 문제들을 새로운 방식으로 풀어보려는 시도가 대부분이에요. 기존의 문제들을 그런 솔루션 없이 직접 해결해 보고 나면, 새로 나오는 것들이 어떻게 다르게 해결하는지 비교해 보며 쉽게 이해할 수 있게 돼요.

후기는 어떨까요

선구매 수강생분들의 이야기를 들어보세요

Amelia

다른 강의와 다르게 자막에 의존하지 않아도 되고, 키포인트랑 설명을 잘 해주셔서 좋았습니다.

그리고 다른 강의에서는 개념을 설명하기 급해서 말을 빠르게 해서 설명하시는데 은재님은 아버지같이 차분하게 설명해 주셔서 마음이 편했습니다.

은재님 강의를 보면서 저는 몰랐던 새로운 걸 알게 되어 유익했어요. 프론트엔드를 준비하는 사람들에게 도움이 꼭 될 거라고 생각해요.

정현

프론트엔드 취준생

개발 공부를 하다 보면 이 부분을 공부하기는 하지만 어떻게 쓰이는 거지? 라는 궁금증이 많이 들었습니다. 그런 부분을 은재님 강의를 통해 많이 해소하게 된 것 같아요.

이 강의는 개념적인 것만을 다루는 강의라기 보다는 원론적인 쓰임에 대해 다루기 때문에 배워갈 수 있는 부분이 굉장히 많다고 생각해요.

강력하게 추천합니다!

레나

프론트개발자 1년차

자바스크립트 간단하게 공부하고 리액트만 파서 취업했다가 눈물의 1년을 보내고 들은 은재님 강의 입니다. 회사에서 리액트로 일을 하다가도 자바스크립트를 모르면 늘 벽을 마주보고 있는 기분이 들었습니다. 다양한 강의를 들었지만, 이 강의 처럼 프론트엔드의 전체적인 흐름과 맥락을 이해하게 된 강의는 처음입니다! 전체적인 흐름을 보고 익힐 수 있을 뿐만 아니라 프론트엔드 개발자로서 가야할 로드맵이나 공부해야 할 방향도 많이 배운 좋은 강의였습니다! 프론트엔드 개발자 혹은 취준생이라면 꼭꼭 들으시길 강력 추천합니다.

아델리펭귄

외국 강의 사이트는 컨텐츠는 좋은 것 같은데 양이 방대하고 “돌아가는 무언가”를 만드는 사이클이 긴 편이어서 중간에 듣다가 실패했었음

내가 산 강의들은 개수가 50개가 기본이어서 듣다가 땡뻘땡뻘했는데 이 강의는 구성을 보면 알겠지만 K-전개임

돌아가는 무언가를 만드는 사이클이 빠르다는 거임

내가 생각할 때 은재님의 장점은 (영어를 잘 못하는 사람/영어를 잘해도 특정 진영의 코어 개발진을 모르는 사람)들이 빠르게 접하기 힘든 해외 소식을 한국어로 초보자에게도 쉽게 설명할 수 있는 건데 강의에도 그런 특성이 드러남

원래 개발 쪽에서만 쓰이는 영어가 있어서 익숙하지 않을 수 있는데

(챗지피티는 또 헛소리해서 믿을 수가 없음 누가 챗지져피티라고 하던데)

용어가 쓰이는 맥락을 설명해 주셔서 좋았음

그리고 vitest로 간단한 테스트 짜서 input이 이렇고 output이 이런데 어떻게 짜야 할지 맞춰야 하는 세션도 있는데 TDD 몰라도 스며들 수가 있음 또 초록 글씨 나오면 도파민 잘 나오고

(이건 제 취향입니다)

콘솔 찍을 필요 없이 테스트만 돌리면 돼서 수강자 입장에서 개편함

그리고 여기서 가장 맘에 드는 건 역시 cli 명령어 만들어보기임 ㅋㅋㅋㅋㅋㅋ js로 cli 어떻게 만드냐고요?

그리고 추가로 실무에서 쓰이는 용례를 많이 봐서 좋음

nested array를 Set Map 없이 unique value filter 하기 << 이런 것도 나오니까 참고하셈

일주일 전에 코테 본 거 set을 못쓰게 막아놔서 당황했는데 이런 우회로 알아두면 좋은 듯

Romuru Tempest

자바스크립트와 아직 어색하다고 느낄 때, 서로를 알아가기에 아주 좋은 강의라고 생각합니다.

자스의 사생활이 아닌 작업에 바로 도움이 되는 내용들,

그리고 다양한 포인트에서 JS의 코드 구조를 생각해 볼 수 있는 점에서 추천해 드리고 싶습니다.

만들고자 하는 하나의 큰 목표가 아니라, 배우고자 하는 중간 단계의 여러 목표를 설정 후에,

그것들을 효율적으로 학습할 수 있는 “최선의 예제들”로 구성하려 하신 은재님의 노력이 전해지는 강의입니다.

냠냠이

영국에서 풀스택(오버플로우) 개발자로 일한 지 갓 1년 된 냠냠이라고 합니다 :)

제가 들었던 자바스크립트 강의 중에 저의 니즈를 가장 잘 알아주고, 도움이 되었던 강의!

저는 자바스크립트 기초가 불안정한 상태에서 반강제적으로 바로 리액트로 넘어가는 바람에 깊이 있는 자바스크립트 강의를 늘 갈망해왔는데 대부분은 입문자에게 초점이 맞춰져있어서 늘 그 부분에서 갈증을 느꼈었어요.

많은 사람들이 머리로는 이해하지만 막상 써야 하는 상황이 오게 되면 헷갈리는 array method들 그리고 await과 async 등...

대충은 알고 있지만 누가 간결하게 설명해달라고 하면 버벅거리기 일쑤였고, 그렇다고 강의를 듣자니 제가 이미 알고 있는 기초적인 이론만 설명하고 넘어가지 이걸 언제, 왜, 어떻게 사용하는가는 예시가 거의 없더라고요...

시나브로 자바스크립트 강의는 저 같은 중급과 고급 사이의 자바스크립트 강의를 원하는 분들에게 딱 맞는다고 생각합니다!

특히 unit test를 통과해야 하는 식으로 array method를 학습했던 게 아주 큰 도움이 되었고, 전보다 실무 코드에 더 다양하게 활용할 수 있는 기회가 되어서 1년 차 리뷰에 좋은 피드백을 받았답니다.

실무에 도움 되는 강의만큼 주니어 개발자들, 특히 프론트 백엔드 개발자 구분 없이 모두에게 한 단계 더 성장할 수 있는 기회를 주는 최고의 강의가 흔치 않은데 그 어려운 걸 시나브로 자바스크립트가 해냈습니다 👍👍

최재현

네이버 스마트에디터 개발자

프론트엔드 개발에 입문하고, Next Level 로 점프하고자 하는 분들께 좋은 온라인 강의를 추천하고 싶어요. 은재님의 시나브로 자바스크립트는 지루하지 않고 흥미진진하며, 쇼핑몰이라는 실제 실용성 있는 도메인 개념 바탕으로 하고 있어요.

안녕하세요, 이은재입니다. 현재 Storyblok에서 풀스택 개발자로 근무하고 있습니다.

Daum, Kakao, Algolia 등의 회사를 거치며 주로 프론트엔드 개발 업무를 해왔어요.

한 스타트업에서 길게 근무하다 어느 순간 눈을 떠보니 너무 많은 게 변해 있었더라고요. 제가 2014년에서 2017년 말까지 AngularJS 를 썼는데, 2018년이 되어서야 그간 놓쳤던 수많은 것들을 공부하기 시작했어요. ES6, React, Babel, ...에서 시작해서 정말 끝이 없었어요.

2019년 프랑스로 이사하여 Algolia 라는 회사에 입사한 건, 저에게 다양한 개념들을 깊이 있게 이해하며 일할 수 있는 좋은 기회였어요. 직접 부딪히고 주변 사람들에게 물어보기도 하며 전체적인 그림을 그려나갔어요. 한참 시간이 지나고, 이런 내용들이 잘 정리된 컨텐츠가 있었으면 얼마나 좋았을까 하는 생각을 하게 되었고, 결국엔 강좌로 만들게 되었네요.

총 13시간 16분

컨텐츠 목록

각 에피소드는 특정 주제를 별도의 프레임워크나 라이브러리 없이 순수하게 자바스크립트만으로만 직접 구현해 볼 수 있도록 설계되어 있습니다. 강좌를 눈으로만 따라가셔도 좋지만, 시간이 있으시면 직접 따라 개발해 보시는 것도 많은 도움이 될 거예요.

1. DOM API 의 기본 1h 3m

  • innerHTML
  • createElement
  • appendChild
  • addEventListener

기본적인 DOM API 를 배우고 프론트엔드 프레임워크 없이 어떻게 HTML 을 구성하고 이벤트를 붙이는지 연습해 봅니다.

2. 쇼핑몰 만들기 [1/3] 1h 20m

쇼핑몰 상품 리스트와 장바구니 부분을 구현해 봅니다. 목표는 DOM API 를 직접 사용하며 동적인 인터랙션을 구현해 보는 건데요.

상품을 장바구니에 넣었다 뺐다 하는 과정에서 같은 데이터(담긴 수량)를 화면 여기저기(상품 리스트와 장바구니)에 동시에 잘 업데이트하도록 개발합니다. 그리고 이 과정에서 모던 프론트엔드 프레임워크가 왜 필요한지 체감해 봅니다.

2. 쇼핑몰 만들기 [2/3] 52m

지난 강좌에서 구현한 쇼핑몰 상품 리스트와 장바구니를 조금 더 관리하기 좋게, 디자인, 의미, 역할을 고려해서 여러 개의 컴포넌트로 쪼개며 리팩토링해봅니다.

2. 쇼핑몰 만들기 [3/3] 52m

쇼핑몰 만들기 마지막 에피소드로, DOM element 를 일일이 찾아서 수량을 업데이트하던 구현 방식 대신, 데이터를 업데이트하면 그에 맞게 reactive 하게 DOM 이 저절로 업데이트 되도록 구현해 봅니다.

3. 웹서버 기초 45m

Express 를 사용해 보며 웹서버의 기초를 배웁니다. 요즘 Vercel 이나 Netlify 에서 제공해 주는 Serverless Function 이 쉽고 편한데요. 그런 게 있기 전에는 어떻게 백엔드를 구성했는지 Express 를 통해 알아봅니다.

그리고 vite 으로 띄운 프론트엔드가 Express 서버에 요청을 보내 받은 데이터를 렌더링 해보고, 그러는 과정에서 겪는 CORS 라는 이슈에 대해서도 알아봅니다.

4. Array 메소드 1h 18m

다양한 예제를 통해 대표적인 Array methods 인 filter, map, reduce 를 연습해 봅니다. 기본적인 문법은 숙지하셨다는 가정하에 체력 단련 느낌으로 진행합니다.

5. npm 라이브러리의 기초 27m

npm 라이브러리는 어떤 구조를 가져야 하는지 살펴보고, Common JS 와 ES Module 에 얽힌 복잡한 이슈를 천천히 이해해 봅니다. 그리고 작업한 라이브러리를 npm 에 직접 배포해 봅니다.

6. mini query 만들기 1h 7m

jQuery 의 아주 작은 subset 을 만들어봅니다.

yarn workspace 를 통해 monorepo 를 구성하는 방법을 익히고, 그 안에 라이브러리, 예제 앱, 문서 사이트까지 작업해 봄으로써 라이브러리 개발을 위한 전반적인 워크플로우를 체험해 봅니다.

vitest 를 사용하여 unit test 를 작성해 보기도 하며, 라이브러리 빌드 프로세스를 거치면서 생기는 개발 시 어려움을 체험하고, Tree-shake 에 대해서도 살펴봅니다.

7. 영화 정보 사이트 [1/2] 45m

영화 검색 사이트를 만들어봅니다. 결과물은 아주 간단하지만, 이 에피소드에서 매우 중요한 개념들을 다루게 됩니다.

브라우저의 History API 를 배우고, 이를 이용하여 React Router 와 같은 Client-Side Routing 을 직접 구현해 봅니다.

7. 영화 정보 사이트 [2/2] 1h 14m

지난 에피소드에 이어 Server-Side Rendering 을 Express 서버로 직접 구현합니다.

그리고 클라이언트에서 이를 Hydration 하는 부분까지 구현합니다.

여기까지 마치고 나면 Next.js 의 SSR + Hydration 의 과정을 꽤 상세하게 이해할 수 있게 됩니다.

8. 비동기 연습하기 38m

Array 메소드 연습 에피소드와 비슷하게 비동기를 더 잘 다루기 위해 callback, Promise, async, await 을 연습해 봅니다.

9. 정적 블로그 만들기 1h 3m

Jekyll, Gatsby, Next.js 등을 써서 정적 웹사이트를 많이 만드는데요. 그런 툴들이 어떤 식으로 정적 웹사이트를 만들어주는지 살펴보고, 그 빌드 프로세스를 흉내 내봅니다.

그 과정에서 아무 프레임워크나 툴 없이 Node.js 로 작성한 스크립트가 마크다운으로 쓰여진 포스트들을 정적 블로그로 빌드 하게 해주고 Vercel 에 배포까지 해봅니다.

10. CLI 만들기 48m

CLI 용 npm 라이브러리의 구조는 어떤지 살펴보고, 직접 CLI 를 직접 만들고 NPM 에 배포해 봅니다. 그 후에는 npm install -g <package-name> 으로 설치해 사용할 수 있게 됩니다.

11. Form 라이브러리 만들기 1h 4m

<form action="/save" method="post">

예전엔 위와 같은 형식으로 form 을 작성하곤 했는데요. 저게 어떻게 작동하는 건지 실제로 예전 방식으로 구현해 봅니다. 그리고 지금은 왜 저렇게 안 하는 건지 이해합니다.

요즘은 react-hook-form 과 같은 라이브러리를 많이 사용하는데 이런 라이브러리의 이점을 이해하고, 우리도 비슷한 걸 만들어봅니다.

가격

여러분에게 맞는 패키지를 선택하세요

강좌를 구매하신 분들은 패키지에 상관없이 구매자 전용 Discord 채널에 초대받게 됩니다. 강좌를 듣다 생기는 질문을 올려보세요. 다른 사람이 올린 질문으로부터 배울 수도 있고요.

뭐든 몰라도 괜찮은 공간에서 자유롭게 질문하고 토론하면서 같이 배워갈 수 있으면 좋겠어요. 여러분의 자바스크립트 자신감 향상이 결국 가장 중요한 목표니까요.

학생 할인

학생 혹은 취업 준비 중이신 분들에게는 할인을 해드립니다.

€100 €65

  • 구성은 기본 패키지와 동일합니다.
인증하기

기본 패키지

€100

  • 11 에피소드 (총 13시간 16분)
  • 수강생 전용 Discord 채널
  • 강좌에서 작성되는 예제들의 소스 코드
구매하기

그룹 할인 (10명)

회사, 동아리, 친구, 종류에 상관없이 10명이 모이면 할인을 받으실 수 있어요.

€1000 €800

  • 구성은 기본 패키지와 동일합니다.
문의하기

강좌가 마음에 들지 않으시다면, 구입일로부터 30일 이내에 어떠한 이유든 상관없이 전액 환불해 드립니다.

자주 묻는 질문

강좌에서 Tailwind CSS 를 사용하나요?

딱 한 에피소드, "쇼핑몰 만들기"에서 Tailwind CSS 를 사용해 디자인을 합니다. Tailwind CSS 를 모르시면 직접 원하는 방식으로 CSS 를 작성하셔도 됩니다. 혹, 관심이 있으시면 제가 만든 영상을 참고하셔도 좋습니다.

제가 들어도 되는 실력인가요?

콕 집어 말하긴 어렵지만, 다음 항목들에 해당되신다면 수강하셔도 좋을 것 같습니다.

  • let 과 const 의 차이를 이해한다.
  • import / export 로 모듈을 다룰 수 있다.
  • import 와 require 의 차이를 어느 정도는 안다.
  • const { name, address } = person 이 문법을 이해한다.
  • React 나 Vue.js 를 써서 간단한 기능의 TODO 앱을 만들 수 있다 (데이터베이스 없이 변수에 todo 를 저장하는 방식으로).
  • React 를 사용하는 경우 useEffect 와 useMemo 를 어떻게 사용하는지 대충 안다.
  • TODO 앱을 만들라고 하면 대충 컴포넌트를 어떻게 쪼개볼지 상상이 된다.

다른 강좌와 어떻게 다른가요?

특정 프로젝트를 만드는 걸 목표로 하는 강좌들이 많은데요. 그런 강좌의 경우 다양한 기술, 라이브러리, 서비스 등을 조합해서 점차 쌓아가는 과정을 보여주게 됩니다. 다양한 것들(what)과 그걸 어떻게(how) 조합하는지를 배운다는 점에서 유용하지만, 그런 강좌 특성상 why 까지 다루기는 쉽지 않아요.

시나브로 자바스크립트에서는 특정 주제에 대해서 예전에 어떻게 하던 걸 지금은 왜 이렇게 하게 되었는지 변천사를 배우면서 각 접근법의 장단점을 이해하게 됩니다. 그리고 프레임워크들이 우리 눈에 보이지 않게 해주는 기능들을 직접 구현해 보면서 왜 그런 걸 하게 되는지 알 수 있죠.

what 과 how 를 아는 건 정말 중요하지만, 거기에 why 가 빠진다면 멀리 가기 힘들어요. 개발을 하면서 자신감이 부족한 이유는 대개 why 의 결핍 때문인데요. 버그가 생겼을 때 상황을 정확히 이해하지 못하니까 어떻게 해결해야 할지 모르겠고, 구글링해서 얻은 결과를 적용했더니 버그가 해결되었는데 그게 왜 해결된건지 이해를 못하니까 찜찜하고 다음에 같은 상황이 또 벌어지면 어떡하나 걱정이 되죠.

그래서 why 를 정확히 배우는 건 다음 레벨로 업그레이드 하기 위해 필수적인 과정이에요. 직접 부딪히며 배워가는 방법도 있지만, 이미 그 과정을 겪은 사람이 자세히 풀어 설명해주는 걸로 배우는 것 또한 효율적인 방법이죠. 사실 이런 미드레벨을 겨냥하는 강좌는 입문자를 위한 강좌에 비해 수요가 적을 수 밖에 없어서, 이런 타게팅의 강좌 자체가 드물다고 생각합니다.

환불이 되나요?

강좌 구입 후 내용, 난이도 등이 기대하셨던 것과 다르다면 이메일을 주세요. 구매일로부터 30일 내에 이유와 상관없이 전액 환불해 드립니다.

맛보기 강좌가 있나요?

있습니다! 본 강좌를 보기에 앞서 미리 보면 좋을 법한 준비 운동 같은 내용들을 짧은 무료 영상으로 만들어 놓았어요. 이 링크에서 확인해 보세요.

또 다른 질문이 있어요!

그러시다면 트위터 DM을 주시거나, 이메일을 주시면 답변드리겠습니다. 제가 프랑스에 살고 있어 시차 때문에 답변이 조금 늦을 수 있는 점 미리 양해 부탁드려요.

어떠신가요?

이 강좌를 들으며 모르는 사이에 조금씩 조금씩 코어를 다지고 자신감을 쌓아가실 준비가 되었나요?