코스 이미지

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

3월 11일에 개강하는 기수는 모집 마감되었습니다. 1개월 내로 모집을 재개할 예정이니, 다음 기수 대기 신청 을 통해 미리 자리를 선점해두세요. 이번 기수에 결원이 난 경우, 대기 신청 순서대로 연락을 드리겠습니다.




폭풍성장! 온라인 스터디: 프론트엔드 개발편


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




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


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


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






🗓 SCHEDULE 일정



  • 스터디 시작: 2019-03-11(월)

  • 스터디 종료: 2019-04-08(월) 총 4주

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





  • 개인 노트북


    Windows, MacOS 상관 없음




  • Slack


    실시간 채팅 및 Q&A




  • GitHub


    미션 제출 및 코드리뷰




  • Zoom


    웹캠 기반 실시간 Q&A







🤷 TARGET 참여 대상자





  • 초보 프론트엔드 개발자


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

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




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


    이 스터디에서 JS 와 좀 더 친해지며, 채용/이직 시 조금 더 경쟁력을 갖출 수 있습니다.

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





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


이 스터디는 스터디 리더가 프론트엔드 개발자 채용 프로세스에 직접 참여하며 수많은 지원자들을 지켜보고,


그들의 취약점을 분석하여 '좋은 프론트엔드 개발자' 에 가까워지려면 어떤 지식이 필요한지 고민한 결과가 반영되어 있습니다.


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






  • 개발자 이선협




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


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







  • 개발자 문윤기




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


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









🤵 LEADER 스터디 리더


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



멘토 김석준님(ProtoPie 프론트엔드 개발자)


김석준 리더 ProtoPie 프론트엔드 개발자

숱한 프론트엔드 개발자 면접을 직접 진행하면서, 지원자분들이 어떤 부분에서 가장 취약한가 돌이켜보면 단언컨대 자바스크립트 스킬이었습니다. 그 경험을 토대로, 이 스터디의 네 개 미션은 '이런 내용을 잘 이해하는 프론트엔드 개발자라면 꼭 뽑고싶겠다' 는 생각이 드는 내용들로 구성했습니다. 여러분이 노력하는 만큼, 저도 함께 노력할 수 있습니다. 차갑게 참여하지 마시고 아주 뜨겁게 참여해주세요. 분명히 얻어가는 것이 많을겁니다.



  • 현 ProtoPie(Studio XID) 프론트엔드 개발자

  • Streami Inc. 시니어 프론트엔드 개발자

  • SOCAR 웹 개발자








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


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

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





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




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




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




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






🗓 1주차


1주차 미션: 자바스크립트로 모달(Modal)과 폼(Form) 구현

UI 구현 요청사항이 들어왔는데, 내가 직접 만들 줄을 몰라 외부 라이브러리 스펙에 맞춰야만 한다면? 특수한 상황을 제외하고서는 정상적인 개발 프로세스라고 보기 어렵다. 이 미션에서는 브라우저 호환성을 고려하여 모달과 폼을 구현하되, 순수하게 자바스크립트만 쓰고 jQuery 등의 도움을 받지 않는다.


습득할 기술


  • ✅ DOM API를 활용한 화면 렌더링

  • ✅ JS로 애니메이션 구현

  • ✅ 복붙해온 UI가 아닌, 직접 UI를 구현하는 능력


[1주차 동시접속 Q&A] 2019-03-11(월) 20:00 ~ 21:00. 1주차는 간단한 스터디 소개도 진행합니다.




🗓 2주차


2주차 미션: 폼 유효성 검사(Form Validation)

1주차에서 열심히 만든 폼에 내가 의도하지 않은 입력값이 들어온다면?! 입력값을 제어하지 못해 서버에 적절하지 않은 데이터가 전달되어서는 안된다. 이를 위해 폼 유효성 체크를 구현하고, 화면에 체크 결과가 표시되어 유저가 적절한 값을 입력할 수 있도록 해준다.


습득할 기술


  • ✅ HTML form 요소에 대한 심층 이해

  • ✅ form 요소와 입력값을 JS로 제어하는 법

  • ✅ 입력값의 유효성을 검사하는 함수 작성


[2주차 동시접속 Q&A] 2019-03-18(월) 20:00 ~ 21:00




🗓 3주차


3주차 미션: 지연 로딩(Lazy Loading)

유저에게 대량의 이미지를 보여주어야 할 때, 필요한 이미지를 한 번에 모두 로드하게 되면 부하가 걸림은 물론 사용자도 이용하기 싫어지는 '느린 사이트' 가 된다. 이 미션에서는 유저가 스크롤을 내림에 따라 필요한 이미지들을 그 때 그 때 로드해오는 방식을 구현해본다.


습득할 기술


  • ✅ CDN 비용을 절약하기 위한 테크닉

  • ✅ 스크롤 이벤트에 따른 이미지 호출 방법

  • ✅ 무한 스크롤(Infinite Scroll)에 대한 이해

  • ✅ 응용 예제: Pinterest, 리더가 직접 구현한 짤봇



[3주차 동시접속 Q&A] 2019-03-25(월) 20:00 ~ 21:00




🗓 4주차


4주차 미션: 하이엔드 프론트엔드 테크닉을 위한 Mouse Event 처리

유저가 웹 페이지 내의 UI 요소들을 조작할 일이 많은 서비스를 개발해야 한다고 쳐보자. 예를들어 네이버 스마트에디터나, 구글 닥스 같은 것들. 이런 서비스 구현에 기본적으로 필요한 기술인 마우스 이벤트 제어 방법을 배워본다.


습득할 기술


  • ✅ 사용자 마우스 조작 이벤트 제어 및 활용

  • ✅ 마우스 이벤트에 따라 UI에 변화를 주는 방법

  • ✅ 네이버 스마트에디터와 같은 고급 프론트엔드 개발 기술의 기초

  • ✅ 기술 응용 예시: 귀여운 라이언 로그인 폼(개발자 김태곤님 블로그), CSSConf.Asia 2016 발표 내용(43:30 부터 참고)



[4주차 동시접속 Q&A] 2019-04-01(월) 20:00 ~ 21:00



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





🖊 교육 진행 방식


온라인의 강점을 최대로 살린 교육방식. 4주간 제대로 집중하면, 그 다음 4개월과 4년이 달라집니다. 아래의 흐름대로 열심히 따라오세요.





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




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




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




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




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




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








💳 스터디 참여비


4주, JS 집중 스터디


2019-03-11(월) ~ 2019-04-08(월)

스터디 리더 김석준(ProtoPie)




최고의 성장 기회를 놓치지 마세요.


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




현재 마감되었습니다. 다음 기수 대기 신청 을 해주세요.





💵


조기마감



정가 300,000원



질문 & 답변