홈 스쿨 커리어 커뮤니티
강의국비지원
무료
코딩테스트 연습MY 스쿨강사되기캠퍼스
코스 이미지

[라이브/19기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)

접수 마감
판매 종료일: ~2023-03-07

프론트엔드 개발을 위한 자바스크립트 라이브 클래스

시니어 프론트엔드 개발자가, 아끼는 주니어에게 알려주고 싶은 클래스

4주간 클래스 리더가 당신의 성장을 위한 미션을 매주 부여합니다.

실무 경험이 풍부한 리더가 당신의 코드를 직접 리뷰하고, 피드백을 나눕니다.

자바스크립트에 영 자신이 없는 모두에게 추천할게요.

🗓 SCHEDULE 19기 일정

  • 일정: 2023. 03 . 07.(화) ~ 2023. 04. 04.(화), 총 4주
  • 온라인 세션: 2회 - 3/7(화), 4/4(화) 오후 8시
  • 라이브 코딩 영상 제공: 매주 미션 종료 하루 전, 리더의 미션 라이브 코딩 영상이 제공됩니다!
  • 준비물 및 사용 프로그램:

  • 개인 노트북

    Windows, MacOS 상관 없음

  • GitHub

    미션 제출 및 코드리뷰

🤷 참여를 위해 필요한 지식

  • JS 기초

    기초라 함은 변수, 함수 선언하기, 조건문과 반복문 작성하기 등 통상적으로 프로그래밍 언어 기초를 배울 때 다루는 모든 영역을 의미합니다. 만약 JS 문법 자체가 생소하거나 새로 배워야 하시는 경우에는 부적절합니다. 또한, 위 내용을 머리로는 알지만 바로 말로 설명할 수 없거나 코드로 구현하지 못하는 경우에도 초반에 난항을 겪을 수 있습니다. 꼭 연습하고 참여하세요.

  • DOM, Ajax에 대한 이해

    본 강의에서는 VanillaJS에 집중하기 위해, 화면을 그리는 코드 대부분 JS로 작성합니다. 이를 위해선 기초 문법도 중요하고 DOM에 대한 이해도 필요합니다. Ajax의 경우 개념 정도는 알고 있어야 도움이 됩니다.

이런 글도 미리 읽어보세요

아래 글을 읽는 것 조차 버겁다면 적절한 참여 대상이 아닙니다. 조금만 더 학습을 진행하신 뒤에 참여해주세요!

내가 아끼는 후배, 그리고 친구에게 추천하고 싶은 클래스

원래 이 분야는 변화가 잦아서 개발자는 평생 공부해야 한다고들 하지만... 프론트엔드는 그 변화의 주기가 더욱 짧습니다.

이것도 배워야 할 것 같고, 저것도 잘 해야 할 것 같은 홍수 속에서도 잘 성장하려면 견고한 기본기가 필요합니다. 우리 클래스는 그 기본, 즉 JavaScript 역량에 집중합니다.

👍 선배 개발자들이 이 클래스를 추천합니다!

  • 개발자 노경모

    프론트엔드 기술은 변화가 너무 잦고, 이런 혼란에 잘 대응하려면 순수 JS 역량이 무척 중요한 것이 사실입니다. 리더 김태희님은 기술을 잘 아는 것을 넘어 서비스에 적용하는 방법에 대한 인사이트가 많은 분입니다. 저도 주니어 개발자로서 도움을 받이 받아왔으니, 여러분도 인사이트를 많이 얻으실거에요.

    노경모 ― 토스 Frontend Engineer, GDG Korea WebTech 오거나이저
  • 개발자 이선협

    좋은 웹 프론트엔드 개발자라면 더 나은 사용자 경험을 일상적으로 생각해야 합니다. 그리고 더 나은 사용자 경험을 위해서 자바스크립트는 선택이 아닌 필수라고 생각합니다. 외부 라이브러리나 프레임워크에 의존하지 않고 JS로 개발해보는 경험은 분명 좋은 자산이 될거에요.

    이선협 ― Cobalt Inc. 풀스택 개발자, Vue.js Korea 운영진

💯 이 클래스를 거쳐간 사람들은 어떤 사람들?!

  • 수강생 정윤호님

    혼자서 웹 프론트엔드 개발 공부를 할 때는 나태해지거나 질문할 사람이 없어서 힘들었는데 현업 개발자분들이 멘토가 되어 다른 사람들과 함께 VanillaJS를 학습할 수 있는 점에서 망설이지 않고 신청을 하였습니다.제가 작성한 코드를 현업 개발자분들에게 피드백을 받을 수 있는 기회가 흔하지 않은데 디테일하고 꼼꼼하게 피드백을 받아서 많이 배울 수 있었습니다.

    또한 다른 분들의 코드를 보면서 다양한 방식과 새로운 개념들을 알 수 있었고 서로 피드백을 주고받으며 너무 많은 도움이 되었습니다. 개발 관련 외적으로 현업에서의 경험, 노하우, 다양한 꿀팁들도 전수받을 수 있었던 값진 시간들이었습니다. 만약 다음 단계의 클래스가 열린다면 또 참여하고 싶습니다.😆

    정윤호(11기) ― 프론트엔드 개발자
  • 수강생 김준형님

    평소 혼자 일하다 보니 결과물에 대한 피드백은 있어도 과정에 대한 피드백이 거의 없었습니다. 자연스레 ‘내가 제대로 하고 있는건가?’ 끝없는 의구심에 빠지게 되었고, 본질적인 것을 기초부터 다져가고 싶다는 마음이 커져갈 때 마침 이 클래스 만나게 되었습니다.

    이 클래스는 제게 고민하는 힘을 길러주었습니다. 과제를 해결하고 코드 리뷰를 통해 다른 분들과 소통하는 과정에서 '어떻게 코드를 짤 것인지', '이 코드를 더 좋게 만들기 위해 무엇이 필요한지'등 고민했습니다. 이런 고민을 할 수 있는 기회가 아주 귀중한 경험이었던 것 같습니다. 4주간의 과제를 다시 한번 곱씹어 보면, 단순히 JS의 기초만을 다루기 위한 과제는 아니었다고 생각합니다. 프론트엔드 개발자가 무엇을 고민해야 하는지를 제시해 준 과제이지 않았나 생각합니다.

    단순히 기초를 다시 다져보자는 마음으로 신청한 클래스였지만, 프론트엔드 개발자로서 가져야 할 마음가짐에 대해 생각할 수 있는 아주 철학적인 클래스이지 않았나 하는 생각이 드네요.

    김준형(11기) ― 프론트엔드 개발자
  • 수강생 한정원님

    조직 내에 프론트엔드 개발자가 몇 없다 보니 피드백을 자주 받을 수 없는 상황이었습니다. 항상 코드를 짜면서 '내가 제대로 하고 있는게 맞나?'라는 의문이 들었는데 이 클래스를 통해 습관적으로 짜던 코드들을 다시 짚어볼 수 있었습니다. 세 리더들은 어떤 방식으로 개선하면 좋을지 이렇게 짜면 어떤 문제가 있는지 코드 리뷰를 통해 여러 방면에서 리뷰를 해주셨고 같이 클래스를 진행하시는 다른 분들의 코드를 통해서 제가 생각하지 못했던 부분까지 시야를 넓힐 수 있었습니다.

    실시간 세션에서는 리더들의 경험에서 우러나오는 여러 이야기들과 다른 분들의 개인적인 고민이나 질문들 그리고 요즘 대두되는 이슈들에 대한 내용을 재밌게 나눌 수 있었습니다. 스스로 어떻게 성장할 수 있는지 배울 수 있어서 유익한 시간이었고 좋은 기회였습니다! 저도 누군가에게 이런 사람이 되고 싶다는 목표가 생겼습니다. 다들 좋은 곳에서 더 좋은 모습으로 다시 뵈었으면 좋겠습니다!

    한정원(11기) ― 프론트엔드 개발자
  • 수강생 전상인님

    취업을 준비 중이라 현직자에게 직접 코드 리뷰를 받아 볼 수 있다는 점 때문에 클래스에 참여하게 되었습니다. 주어지는 미션 내용은 물론 놓치기 쉬운 것들도 꼼꼼하게 리뷰해 주셨고, 다른 분들의 코드 리뷰도 볼 수 있어 도움이 되었습니다. 또한, 매주 진행되는 온라인 세션에 참여하면서 스스로 문제를 발견하고 해결할 수 있는 힘이 생겼습니다. 취업이나 커리어에 관한 질문에도 항상 아낌없이 조언해 주셔서 좋았습니다. 본인이 열심히 하는 만큼 얻어 갈 수 있는 것이 많은 클래스라고 생각합니다.

    전상인(11기) ― 프론트엔드 개발자
솔직한 후기 더 보기

🤵 LEADER 라이브 클래스 리더

경력이 풍부한 프론트엔드 개발 선배가 이끌어주는 클래스
리더 김태희님
김태희 리더 현) 당근마켓 Front-end Engineer

처음 결제할 때는 누구나 열심히 해보겠다는 결의를 하지만, 중간중간 내가 모르는 것을 새로 배워야하거나 생각대로 되지 않을 때에는 급격히 열기가 죽는 것을 느낍니다. 그런데, 그런 상황에서 조금만 더 용기를 내고 조금만 더 적극적으로 임해보려고 노력해보세요. 성심성의껏 도와드릴게요.

  • 전) WATCHA 프론트엔드 엔지니어
  • ODK Media, Inc. 개발자
  • Streami Inc. 리드 엔지니어
  • SMARTSTUDY, Coupang 소프트웨어 개발자

⚙️ 미션 + 코드리뷰를 4주간 끊임없이!

매주 더 성장하시라고, 주마다 새로운 프론트엔드 개발 미션을 드립니다.

이 클래스는 단순히 책 몇 개를 함께 따라해보거나, 어떤 강의를 순서대로 함께 듣기만 하지 않습니다. 단, 리더가 직접 짠 미션을 매주 수행하며 피드백을 받고, 질문하고, 코드리뷰를 받습니다. 그 과정에서 단기간에 빠르게 성장할 수 있습니다.

  • 1) 매주 클래스에서 진행할 미션을 받고, 학습 자료 소개 받기
  • 2) GitHub에 미션 소스코드를 제출하고, 리더에게 코드리뷰와 피드백 받기
  • 3) 끊임없이 질문하고, 답변을 받으며 나의 부족한 부분 채워 나가기
  • 4) 리더, 기수 동료들과 힘내서 1~3을 4주 내내 반복 훈련하기

🗓 Chapter 1

첫 번째 미션: ES6 문법을 활용해 JS로 한 페이지(SPA)에서 동작하는 TodoApp 만들기

UI 구현 요청사항이 들어왔는데, 내가 직접 만들 줄을 몰라 외부 라이브러리 스펙에 맞춰야만 한다면? 특수한 상황을 제외하고서는 정상적인 개발 프로세스라고 보기 어렵다. 이 미션에서는 SPA 기반의 TodoApp을 제작하고, 화면 구성 컴포넌트를 모두 JS로만 만들어본다.

다룰 내용
  • ✅ JS를 활용해 화면 컴포넌트를 직접 만들기
  • ✅ 헷갈리는 this 제대로 활용하는 법
  • ✅ Closure, Context

[첫 세션] 3/07 20:00~

🗓 Chapter 2

두 번째 미션: TodoApp 기능 강화해주기

1주차 때 구현한 TodoApp은 컴포넌트만 그려진, 기본적인 기능이 없는 상태였다. 여기에 수정, 삭제 기능 등을 통상적인 TodoApp이 가져야 할 기능을 구현해주며, Event 에 대해 자세히 배워본다.

다룰 내용
  • ✅ addEventListner, removeEventListner
  • ✅ 이벤트가 복잡해질 때 꼭 알아야 할 Bubbling, Capturing
  • ✅ Event Deligation
  • ✅ Custom Event

🗓 Chapter 3

세 번째 미션: 비동기적 처리를 위한 공연 검색기 제작

fetch, Promise, await를 중심으로 이디어츠 공연 검색기를 만들어봅니다. 리더가 하고 있는 밴드 이디어츠의 공연을 검색해서 공연 포스터 이미지를 비동기적으로 화면에 뿌려줍니다.

다룰 내용
  • ✅ fetch API를 이용해, 이디어츠 공연 API와 연동하여 각종 포스터 모셔오기
  • ✅ 모셔온 포스터들을 비동기적으로 화면에 그려주기
  • ✅ fetch, Promise, await
  • ✅ callback 방식에 대한 이해

🗓 Chapter 4

마지막 미션: 미니 트렐로(Trello) 만들기

1~3주차에 배운 내용들을 전반적으로 활용하여 트렐로의 기본 기능을 그대로 구현해보자. 리더가 주어주는 API를 활용해 dummy Todo 목록을 화면에 그리고 시작. 보너스 미션도 놓치지 말자!

다룰 내용
  • ✅ 드래그를 통한 상태 변경, 투두 내용 추가/수정/삭제 등 트렐로 기본 기능 구현
  • ✅ 1주차에 배운 JS로 컴포넌트 그리기, 2주차의 비동기 처리, 3주차의 Event 처리 기법 등을 모두 활용한다.
  • ✅ 보너스 미션! 직접 서버에 Todo 내용을 전달하는 기능 구현하기

🗓 Chapter 5

클로징 세션

공식적으로 종료되는 4/4(화) 저녁에, 전반적인 클래스를 돌아보는 세션을 가집니다.

다룰 내용
  • ✅ 어려웠던 문제들 마지막으로 함께 풀어보기
  • ✅ 프론트엔드 취업과 관련한 자유로운 질문
  • ✅ 다시 한 번 같이 풀어봤으면 하는 문제 등 공유하며 마무리

[세션] 4/4 20:00~

*세션이 뭐에요?: 더 많은 내용을 알려드리기 위해, 일주일에 한 시간 정도는 모두 동시 접속하여 미션 설명도 듣고, 질문 답변을 진행하는 시간입니다. 웨비나(Webinar)를 생각하면 됩니다. 이 시간에는 질문답변도 진행하지만 미션에 대한 리더의 자세한 설명도 진행될 수 있고, 평소 궁금하던 프론트엔드 관련 이슈에 대해 자유롭게 발언할 수도 있습니다.

🖊 진행 방식

코드리뷰 중심의 100% 온라인 과정. 4주간 제대로 집중하면, 그 다음 4개월과 4년이 달라집니다. 아래의 흐름대로 열심히 따라오세요.
    • 리더와 모든 수강생들이 참여하는 온라인 라이브 세션에 반드시! 최대한! 참여합니다.
    • 다음주까지 미션을 성실히 수행하고, Pull Request 를 보내 리더에게 내가 작성한 소스코드 리뷰를 요청합니다.
    • 여기서 중요한 점! 미션을 모두 완성했다고 생각해야만 Pull Request 를 보내는 것이 아닙니다. 리뷰를 요청하고 싶다는 생각이 든 그 시점에 보내야 합니다.
    • 코드에 대한 피드백을 주고받으며 조금씩 나의 부족한 면을 고쳐나가고, 몰랐던 것들은 알아갑니다.
    • 이후 리더가 당신이 제출한 코드를 merge 승인하면, 미션 제출 완료!

😘 선배 개발자들이 이 클래스를 두 번 추천합니다!

  • 개발자 문윤기

    React, Vue, Angular.. 훌륭한 프레임워크와 라이브러리가 많고, 하루가 멀다하고 새로운 것들이 등장하고 있습니다. 그런데 이런 트렌드 중심에는 결국, 항상, 늘 자바스크립트가 있습니다. 언어로서의 자바스크립트와 DOM을 기초로 하는 브라우저에 대한 이해가 뒷받침된다면 학습의 러닝커브를 확 줄일 수 있습니다. 그런 의미에서 이 클래스를 추천합니다.

    문윤기 ― 슬로워크 스티비팀 프론트엔드 개발자, Vue.js로 데일리리포트 앱 만들기 강의 강사
  • 개발자 진유림

    구글독스, 페이스북 등 요즈음의 웹 앱을 보면 프론트엔드 개발의 역할이 점점 더 커지고 있음을 실감할 수 있습니다. 자바스크립트는 동적인 화면을 그릴 수 있는 유일한 기술입니다. 물론 혼자서 공부할 수 있는 분야지만, 훌륭한 클래스 리더와 함께라면 시간을 반으로 줄이고 깊이는 배로 늘릴 수 있을 것입니다.

    진유림 ― toss 프론트엔드 개발자, Facebook Developer Circles:Seoul, 9XD 리더

💳 참여비

4주, JS 코어 집중 라이브 클래스

2023. 03 .07.(화) ~ 2023. 04. 04.(화)

리더 로토(김태희, 당근마켓 Front-end Engineer)

온라인 카드결제(할부), 무통장 입금 모두 가능합니다.

💵

400,000원

질문 & 답변

질문을 작성하세요.