코스 이미지

[3기][온라인 스터디] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)

소개

스터디 시작일이 8/7 로 조율되었습니다. 기존에 신청하신 분들께는 안내 이메일과 문자를 보내드렸으니 꼭 확인해주시길 부탁드리겠습니다.




프론트엔드 개발을 위한 자바스크립트 온라인 스터디


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




6주간 스터디 리더가 당신의 성장을 위한 미션을 매 주 부여합니다.


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


자바스크립트 실력이 부족한 모든 프론트엔드 초보 개발자에게 추천!






🗓 SCHEDULE 3기 일정



  • 스터디 시작: 2019-08-07(수)

  • 스터디 종료: 2019-09-18(수) 총 6주

  • 총 4개의 챕터로 구성되며, 1~2챕터는 1주씩, 3~4챕터는 2주씩 진행

  • 준비물 및 사용 프로그램:





  • 개인 노트북


    Windows, MacOS 상관 없음




  • Slack


    실시간 채팅 및 Q&A




  • GitHub


    미션 제출 및 코드리뷰




  • Zoom


    웹캠 기반 실시간 Q&A







🤷 TARGET 참여 대상자





  • 초보 프론트엔드 개발자


    HTML, CSS, JS에 대한 기본 지식을 가진 프론트엔드 개발자, 또는 지망생

    아직 '내가 잘 하는 기술' 에 솔직히 자바스크립트는 넣기 민망한 분




  • JS 실력 강화가 필요한 개발자


    이 스터디에서 JS 와 좀 더 친해져보세요.

    회사에 프론트엔드 관련한 피드백 받을 동료, 선배가 없는 경우에는 더더욱 추천합니다.





시니어 프론트엔드 개발자로서, 주니어에게 꼭 알려주고 싶은 내용을 담은 스터디


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


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


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





  • 개발자 노경모


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


    노경모 ― ODK Media 소프트웨어 개발자, GDG Korea WebTech 오거나이저





  • 개발자 이선협


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


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







💯 이 스터디를 거쳐간 사람들은 어떤 사람들?!





  • 수강생 박대성


    자바스크립트 기초가 다져지지 않은 상태에서 리액트 등을 다루려고 하니, 이해가 가지 않거나 해결이 어려운 부분이 많았습니다. 스터디를 통해 기존에 다루던 C, 파이썬 등의 언어와 자바스크립트의 차이점에 대해서 배울 수 있었고 리액트를 사용할 때 겪던 문제점의 원인도 파악 할 수 있게 됐습니다. 코드 리뷰와 주 차별 미션을 통해 실제 현업에서 어떤 식으로 협업이 이루어지는지 체험 할 수 있는 좋은 경험을 얻었습니다.


    박대성 ― 이직 준비 중





  • 수강생 상훈


    디자이너에서 프론트엔드 개발자로 이직을 준비 중입니다. 이를 위해서는 JS 기초 실력이 중요함을 알기에 참여하게 되었습니다. 평소에는 간단한 토이 프로젝트나 인터넷 강의로만 공부했기에 제 실력을 객관적으로 돌아볼 수 없었는데 여기서의 경험으로 인해 나를 객관적으로 돌아볼 수 있었습니다. 사실 제게는 어려운 편이었고 놓친 것도 많았지만, 로토와 에밀리가 DM으로 많이 도와주시려고 해서 엄청 좋았습니다. 다른 스터디원들에 비해 좀 느렸지만, 스터디에서 했던 내용을 복습하면서 노력하려고 합니다.


    상훈 ― 디자이너







🤵 LEADER 스터디 리더


경력이 풍부한 프론트엔드 개발 선배가 이끌어주는 스터디



스터디 리더 김태희님


김태희 리더 현 ODK Media 개발자

지금까지 다양한 팀을 거쳐오면서 후배 개발자들이 어려워하는 것들을 돕고, 조언을 주는 일을 많이 해왔고 그런 일이 무척 뜻깊다고 생각하고 있습니다. 순수 JS 역량에 집중하고자 하는 모든 주니어분들에게 도움이 될게요!



  • 현 ODK Media, Inc. 개발자

  • Streami Inc. 리드 엔지니어

  • SMARTSTUDY, Coupang 소프트웨어 개발자








⚙️ 온라인 + 미션 + 코드리뷰를 6주간 끊임없이!


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

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





  • 1) 매주 스터디에서 진행할 미션을 받고, 학습 자료 소개 받기




  • 2) GitHub에 미션 소스코드를 제출하고, 리더에게 코드리뷰와 피드백 받기




  • 3) 끊임없이 질문하고, 답변을 받으며 나의 부족한 부분 채워 나가기




  • 4) 스터디 리더, 스터디원들과 힘내서 1~3을 6주 내내 반복 훈련하기






🗓 Chapter 1


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

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


다룰 내용


  • ✅ JS를 활용해 화면 컴포넌트를 직접 만들기

  • ✅ 헷갈리는 this 제대로 활용하는 법

  • ✅ Closure, Context


[첫 세션] 7/31(수) 20:00~




🗓 Chapter 2


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

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


다룰 내용


  • ✅ addEventListner, removeEventListner

  • ✅ 이벤트가 복잡해질 때 꼭 알아야 할 Bubbling, Capturing

  • ✅ Event Deligation

  • ✅ Custom Event


[두 번째 세션] 8/7(수) 20:00~



🗓 Chapter 3


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

fetch, Promise, await를 중심으로 움짤(GIF) 검색기를 만들어봅니다. 요즘 소셜미디어에 많이 붙어있는 GIF 검색 기능을 떠올리면 됩니다. 이미지를 비동기적으로 화면에 뿌려줍니다.


다룰 내용


  • ✅ fetch API를 이용해, 짤봇 API와 연동하여 각종 움짤 모셔오기

  • ✅ 모셔온 움짤들을 비동기적으로 화면에 그려주기

  • ✅ fetch, Promise, await

  • ✅ callback 방식에 대한 이해


[세 번째 세션] 8/21(수) 20:00~



🗓 Chapter 4


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

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


다룰 내용


  • ✅ 드래그를 통한 상태 변경, 투두 내용 추가/수정/삭제 등 트렐로 기본 기능 구현

  • ✅ 1주차에 배운 JS로 컴포넌트 그리기, 2주차의 비동기 처리, 3주차의 Event 처리 기법 등을 모두 활용한다.

  • ✅ 보너스 미션! 직접 서버에 Todo 내용을 전달하는 기능 구현하기


[네 번째 세션] 9/4(수) 20:00~


[클로징 세션] 9/18(수) 20:00~



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





🖊 진행 방식


코드리뷰 중심의 100% 온라인 과정. 4주간 제대로 집중하면, 그 다음 4개월과 4년이 달라집니다. 아래의 흐름대로 열심히 따라오세요.





    • 매 주, 멘토와 교육 매니저 그리고 모든 수강생들이 참여하는 온라인 라이브 세션에 반드시! 최대한! 참여합니다. (활용 프로그램: Zoom)




    • 라이브 세션에서 주차별 미션에 대한 소개와, 미션을 수행하며 배우게 될 자세한 내용에 대한 설명을 듣고 의욕을 불태워봅니다.




    • 다음 주 까지 미션을 성실히 수행하고, Pull Request 를 보내 멘토님에게 내가 작성한 소스코드 리뷰를 요청합니다.




    • 여기서 중요한 점! 미션을 모두 완성했다고 생각해야만 Pull Request 를 보내는 것이 아닙니다. 리뷰를 요청하고 싶다는 생각이 든 그 시점에 보내야 합니다.




    • 멘토와 코드에 대한 피드백을 주고받으며 조금씩 나의 부족한 면을 고쳐나가고, 몰랐던 것들은 알아갑니다.




    • 이후 멘토님이 당신이 제출한 코드를 merge 승인하면, 미션 제출 완료!






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





  • 개발자 문윤기


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


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





  • 개발자 진유림


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


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







💯 이전 스터디원들의 후기도 확인하세요!





  • 수강생


    최근 맡은 프로젝트 대부분이 프레임워크, 라이브러리(주로 React) 의존성이 높아서, VanillaJS 감을 잃지 않기 위해 참여했었습니다. 제게 가장 크게 남은 것은 코드리뷰와 스터디 전반적인 분위기였습니다. 내 코드에 대해 여러 피드백을 받을 수 있어서 생각의 전환에 도움이 되었고, 제가 다른 스터디원들의 코드를 리뷰할 때는 어떻게 피드백을 주는게 좋을지 고민할 수 있는 기회도 외었습니다. 순수하게 JS로만 요구사항을 구현하면서 다시 한 번 JS의 원리와 기본을 리마인드할 수 있었습니다.


    김나영 ― 케어랩스(굿닥) 개발자





  • 수강생 이희찬


    멘토, 코드리뷰, 피드백, 모두 같은 과제를 풀어나가며 생각을 공유할 수 있는 스터디라는 점에서 많이 배울 수 있겠다는 생각이 들어 참여하게 되었습니다. 함께 코드리뷰를 통해 피드백을 주고받으며 내 코드를 개선하는 데에 도움을 많이 받았고, 다른 분들의 PR을 보면 동기부여도 되었습니다. 이런 스터디를 계속 지속해 나가면 빠르게 성장 할 수 있을 것 같다고 스스로 느껴서 좋았습니다. 또 코드리뷰 외적으로도 같은 개발 직군에서의 고민이나 방향성에 대해서 나눌 수 있는 좋은 커뮤니티의 장이 되었다는 부분도 좋았습니다.


    이희찬 ― 프론트엔드 개발자








💳 스터디 참여비


6주, JS 코어 집중 스터디


2019-08-07(수) ~ 2019-09-18(수)

스터디 리더 김태희(ODK Media)


6주간 이어지는 풍부한 코드리뷰와 미션을 놓치지 마세요.


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






💵


300,000원(~7/31)



정가 400,000원



질문 & 답변