Vanilla Javascript
총 5개의 작품 만들기
한 작품을 만들어 보는데에 1 정도가 소요됩니다.
모던 바닐라 자바스크립트 (ES6) 기초 학습하기
바닐라 자바스크립트로 퍼즐게임 만들기
바닐라 자바스크립트로 타자게임 만들기
라이브러리 없이, 순수 자바스크립트로 투두 앱 만들기
오픈 API를 활용해서 날씨 검색 앱 만들기
프론트엔드 개발자의 입지가 커졌다?!
📍늘어나는 프론트엔드 수요
과거에 프론트엔드 개발자는 클라이언트(사용자) 화면의 작은 부분만을 담당했습니다. 하지만 지금은 그들이 웹 개발에서 점점 중요한 역할로 확장되고 있으며, 이에 따라 프론트엔드 개발자 수요는 늘어나고 있습니다.
많은 영역으로 확장이 가능한 자바스크립트(JS)!
📍확장성이 좋다는 것은, 가성비가 좋다는 것.
웹은 물론이고, 모바일 애플리케이션, 데스크톱 응용프로그램까지 확장된 자바스크립트를 배우고, 프론트엔드를 학습하면 많은 기회가 여러분 앞에 펼쳐질 것입니다.
Javascript는 ES6 (자바스크립트 표준) 발표 시점과 더불어 상당히 매력적인 언어로 탈바꿈하였습니다.
과거 웹 화면에만 머물렀던 것에서 더 나아가, 웹 개발에서 상당히 중요한 역할을 차지하게 되었고, 심지어 서버의 역할도 할 수 있게 되었습니다.
또, 여러분들이 잘 알고 계시는 인스타그램, 디스코드, 스카이프, Visual Studio Code 등이 모두 자바스크립트로 만들어졌다는 사실 알고 계신나요? 이처럼 자바스크립트는 다양한 영역으로 확장되고 있습니다.
하지만 확장된 만큼 난이도 또한 필연적으로 높아지고 있죠. 우리는 어떻게 프론트엔드와 자바스크립트를 정복해야 할까요?
이론말고, 실전으로 익히세요.
📍퍼즐게임과 타자 연습게임 등을 같이 만들어보며, 쉽게 학습합시다.
저는 프론트엔드에 필요한 지식과 필수적인 ES6의 모던 자바스크립트를 통한 클래스를 진행하고자 합니다. 최대한 실전에 가깝게, 재미있게 학습하게 도와드릴게요.
이론만이 아닌 실습, 실전으로 다져진 노하우는 잊고 싶어도 잊을 수가 없게 됩니다. 이 클래스를 들으면 자연스럽게 HTML, CSS, JS의 단순한 코딩을 벗어날 수 있고, 최신 개발 흐름도 따라갈 수 있게 될 거예요.
프론트엔드 개발, 구체적으로 뭘 배우게 될까요?
📍1챕터: HTML, CSS가 무엇인지 아주 간단하게 요약하기
HTML5의 기본기, CSS3의 기본기를 각각 배우고, 생산성을 좌우하는 Grid와 Flex에 대해 알아보겠습니다.
그 후 부트스트랩, 머티리얼 디자인, CSS 프레임워크 등에 대해 알아보고, 요즘 트렌드에 맞는 개발자가 되기 위해 SASS를 활용한 레이아웃 잡기를 학습할 겁니다.
📍2챕터: 자바스크립트(ES6)를 실습으로 배워보기
오늘날 자바스크립트가 갖는 중요성과 비전에 대해, 그리고 자바스크립트 표준이라고 불리는 ES6에 대해 알려 드릴게요.
그 이후부터는 계속 실습할 겁니다. 변수&데이터 타입, Object&Array, 조건문&연산, 메소드 함수, 객체지향 프로그래밍, DOM 다루기 등을 차례차례 실전으로 배워봅시다.
📍3챕터: 라이브러리 없이, 순수 자바스크립트만으로 투두 앱 만들기
퍼블리싱, DOM, Storage 저장하기 순서로 정말 라이브러리 없이 순수한 앱을 만들어볼거예요!
📍4챕터: 오픈 API를 이용한 날씨 검색 앱 만들기
axios 사용법을 알아보고, Postman을 활용한 RESTful 테스트를 해볼 예정입니다. 그 후에는 퍼블리싱과 프로그래밍을 실습합니다.
📍5챕터: 타자게임 만들기
아까 말씀드렸던 부트스트랩, 플렉스, 그리드를 이용한 퍼블리싱을 배웁니다. 그리고 상태 관리 메소드를 만들고, 인터벌과 DOM, toast 라이브러리 추가해보기 등을 해볼게요. 내친김에 랜덤 단어 API도 적용시켜 봅시다.
📍6챕터: 퍼즐게임 만들기
이번에는 백그라운드 어태치먼트, 트랜지션 고급 CSS 등을 이용해 퍼블리싱 해봅시다. 그리고 내장 객체 사용하는 법과 drag 이벤트를 직접 만드는 법도 배울 거예요. 마지막으로 리팩토링을 이용해 코드를 더욱 깔끔하게 만들고, 마무리 프로그램을 만듭니다.
프론트엔드 첫걸음을 알려드릴 개발자 Scalper 입니다.
📍풀스택 개발자에서 프론트엔드 개발자가 되다.
반갑습니다, 개발자 Scalper 입니다. 저는 풀스택 개발자로 일을 해오다가 프론트엔드에 관심을 가져 프론트엔드 개발자로 전향했습니다.
이후 한화, 공항공사, 유로스타 관광 플랫폼 등 다양한 프로젝트들을 진행해 왔습니다.
- 한화솔루션 공장안전시스템
- 한국공항공사 유동인구 모니터링 시스템
- 유로스타 스마트관광플랫폼 : 스위스업체 컨소시엄
- 대구테크노파크 스마트팩토리 사업
- 담양군청 포탈사이트 웹표준, 접근성 작업
- 구미시청 통합사이트 관리
- 연세대학교 뇌인지과학연구소 실험 솔루션
- 여주대학교 간호성과 관리 시스템
- 한동대학교 스마트마일리지 어플리케이션
최근에 자바스크립트, 프론트엔드를 강의했던 것이 제게는 의미있는 경험이 되었고, 더욱 본격적으로 클래스를 진행하는 크리에이터가 되어 가고 있네요.
과거의 레거시 코드가 아닌,
모던하고 깔끔한 ES6 자바스크립트를 배우는 것
📍프론트엔드 개발자로 성장할 수 있는 기반을 마련하는 클래스
인터넷에 떠돌아다니는 정보들을 봐도 무슨 말인지 모르겠다는 그 심정을 이해합니다. 당최 무슨 말인지, 어떻게 시작해야 하는지 막막했던 분들에게는 최적의 클래스가 될 거예요.
한 챕터씩 배울 때마다, 실제로 이것이 어떻게 활용되고 작동하는지 실습으로 터득하게 돕겠습니다. 이제 단순한 코딩에서 벗어나, 진정한 모던 개발자로 거듭나세요.
모던 바닐라 자바스크립트로 배우는 프론트엔드 첫걸음!
그럼, 클래스에서 뵙겠습니다.
클래스 실습 환경 안내
📍기본 프로그램
- chrome
- visual studio code
👨🏻💻실습 프로그램
- postman
- node.js
- git
- soucetree
👨🏻💻Scalper가 직접 알려주는 1:1 프론트엔드 코칭(2회)
📍모던한 프론트엔드 개발자가 되기 위한 1:1 코칭!
- 1회 코칭권 당 총 2가지의 질문을 하실 수 있습니다.
- 1개의 질문 당 250자 내외의 답변을 작성해서 보내 드립니다. (화상 미팅을 원하실 경우 20분 내외로 진행합니다.)
- 첫 번째, 바닐라 자바스크립트 실습을 따라 하면서, 이해되지 않는 부분이나 추가 질문에 대해 자세히 코칭 해드립니다.
- 두 번째, 실행이 되지 않거나, 실습환경을 구성하는데 막히는 부분들을 코칭 해드립니다.
- 세 번째, 프로그램 응용과 라이브러리 연동 등 수업 내의 내용을 발전시킬 때 어려운 점들을 해결할 수 있도록 코칭 해드립니다.
- 이외의 클래스와 관련된 질문은 답변 한도 내에서 성심껏 코칭 해드립니다.
- 코칭은 질문 접수일 기준으로 차주 순차적으로 답변됩니다. 최소 7일~10일 정도 걸릴 수 있습니다.
- 코칭권은 구매일로부터 20주간 사용하실 수 있습니다.
- 기간 내 미사용 시 환불되지 않습니다.
📩 패키지는 일부 변동될 수 있으며, 변동될 시 충분히 안내됩니다.
커리큘럼
크리에이터
Scalper
프론트엔드 첫걸음을 알려드릴 개발자 Scalper 입니다.
📍풀스택 개발자에서 프론트엔드 개발자가 되다.
반갑습니다, 개발자 Scalper 입니다. 저는 풀스택 개발자로 일을 해오다가 프론트엔드에 관심을 가져 프론트엔드 개발자로 전향했습니다.
이후 한화, 공항공사, 유로스타 관광 플랫폼 등 다양한 프로젝트들을 진행해 왔습니다.
- 한화솔루션 공장안전시스템
- 한국공항공사 유동인구 모니터링 시스템
- 유로스타 스마트관광플랫폼 : 스위스업체 컨소시엄
- 대구테크노파크 스마트팩토리 사업
- 담양군청 포탈사이트 웹표준, 접근성 작업
- 구미시청 통합사이트 관리
- 연세대학교 뇌인지과학연구소 실험 솔루션
- 여주대학교 간호성과 관리 시스템
- 한동대학교 스마트마일리지 어플리케이션
그러다 기회가 되어 자바스크립트, 프론트엔드 수업을 진행할 기회가 있었고, 아는 것을 나누는 것에 보람을 느껴 아예 강좌를 본격으로 시작하게 되었습니다.
자바스크립트는 어떤 언어를 다루는 개발자라도 요즘에는 기본 소양으로 알고 있기를 권장되고 있습니다. 여러분들도 매력적인 자바스크립트의 세계로 들어와 함께 성장하는 기회를 맞이하길 바랍니다.
모던 개발자로 거듭나는 클래스,
바닐라 자바스크립트를 통한 프론트엔드 입문 클래스에서 뵙겠습니다!