풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2] 대시보드
23%
63,520원
[프론트엔드, 웹 개발] 강의입니다.
현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이를 위한 Part2 강의로 다양한 기술이 존재하는 프런트엔드 기술에서 반응형, 호환성까지 고려한 최신 HTML5, CSS3, 바닐라 자바스크립트 (Javascript) + ES6 를 모두 견고하게 싹 정리하는 강의입니다.
이런 걸
배워요!
네카라쿠배도 사내 강의로 선택하는 공식 강의!
입문자를 위한 프런트엔드 웹기술 기본기를 다져줄
완성도 높은 강의 시리즈 (풀스택 Part2)
본 강의는 풀스택 강의 시리즈 Part2 강의로 파이썬 백엔드(Part1) 강의에 이어서, 풀스택을 위한 탄탄한 프론트엔드 기본을 익히는 강의입니다. 상용화도 가능한 웹서비스 개발을 위한 HTML5, CSS, Javascript (VanillaJS, 바닐라 자바스크립트) + ES6 을 상세히 정리하고 익히는 강의입니다.
일반적인 IT 강의보다는 최대한 수강자 입장을 고민해서 만든 특별한 강의입니다. 다양한 자료, 다양한 예제로 관련 기술을 모른 상태부터 시작해서, 관련 기술을 내 이력서에 기재할 수 있을 정도로 핵심적인 기술을 견고하게 익히는 강의입니다
- 심지어 이미 알고는 있는 듯한데도 실제로 쓰기 어려운 HTML5, CSS, Javascript,
- 반응형, 호환성 등 어디까지 알아야 할지 모를 흩어져 있는 수많은 문법과 기술
- 그리고 매년 나오는 새로운 프레임워크 (React, Vue, Svelte)
오래 전, 강사 본인이 아쉬웠던 부분입니다. 상용화된 웹페이지는 화려하고, 반응형을 지원하고, 호환성을 고려하고 있습니다. 그 안에는 시멘틱 태그(HTML5)부터, 수많은 CSS 기능들과 Javascript 와 다양한 라이브러리, 심지어 React, Vue 등 프레임워크까지 들어가 있습니다. 본 강의는 최신 트렌드에 맞춰서, 최신 웹페이지를 만들 수 있는 표준 기술을 모두 정리해 드립니다.

웹이든 앱이든 최근 서비스는 구현을 위해, 백엔드, 프론트엔드, 배포 기술이 필요합니다. 이를 풀스택이라고 합니다.
풀스택이 되면 혼자서도 최신 웹서비스를 만들 수 있고, 경쟁력 있는 개발자도 되실 수 있습니다.
이를 가장 효과적으로 실질적으로 진행하려면, 풀스택 강의 Part1 에서 파이썬과 백엔드 기술을 익히고, Part2 에서 프런트엔드 기본기를 닦아야 합니다. 기본기가 잘 갖춰져야! 단순히 강의에서 나온 웹서비스를 그대로 따라 치는 것이 아니라, 제대로 풀스택이 될 수 있습니다. 본 강의는 프런트엔드 기본기를 탄탄히 갖출 수 있도록, HTML5, CSS, Javascript (바닐라 자바스크립트, VanillaJS) + ES6 를 상세히 다릅니다.
프런트엔드 기술은 예전에는 홈페이지를 만드는 간단한 작업처럼 여겨졌었습니다.
그런데 최근에는 가장 다양한 기술을 사용하는 분야입니다.
그런데 이 수없이 많은 기술 사이에서 깔끔하게 무엇이 표준이고, 실제 사용이 가능하고, 어디까지 익혀야 하는지를 알기가 어렵습니다.
본 강의는 호환성, 반응형, 최신 트렌드까지 고려해 꼭 갖춰야 할 프런트엔드 기술의 기본기를 정리한 강의입니다.
수없이 많은 문법과 기능들로, 프런트엔드의 출발은 정리라는 키워드부터 시작해야 합니다.
그 많고 다양한 문법과 지식을 다음과 같은 조건 하에 정리하였습니다.
- 최신 웹페이지 개발 전 꼭 알아야할 배경지식은 싹 다 정리하고
- 실제 웹페이지를 만들때, 꼭 필요한 기능은 싹 다 정리하고
- 표준이어야 하고,
- 반응형을 지원해야 하고,
- 최신 트렌드에 맞춰야하고,
- 호환성까지도 고려합니다.
HTML 태그는 가볍게 시멘틱 태그까지 꼭 필요한 태그만을 중심으로 정리하고,
그럴듯한 웹페이지 구현에 꼭 필요한 반응형, 호환성까지 고려해 상세한 CSS 기능을 다루고,
VanillaJS (바닐라 자바스크립트) 라고 불리우 듯이, 최근 트렌드는 jQuery 를 사용하지 않으므로, 호환성까지 고려한 Javascript + ES6 문법만으로 웹페이지를 구현합니다.
각 기능별로, 호환성 이슈로 쓸 수 없는 극최신 문법, 대체 가능한 기술은 제외하고, 핵심 기술에 집중합니다.
시간을 낭비하지 마세요!
우리는 정보가 없어서 못하는 것이 아닙니다!
검증된 강의로 익히세요!
풀스택 개발에 있어 가장 큰 병목점은 CSS입니다. HTML, CSS는 중학생도 안다고 이야기합니다.
그러나 웬만한 프런트엔드 개발자가 아니고서는 반응형, 호환성 그리고 그럴듯한 최신 웹페이지를 만들 수는 없습니다.
수없이 많은 세부적인 CSS 기능을 정리해야 합니다. HTML도 표준에 맞춰서 한번은 정리해야 합니다.
또 국내에는 퍼블리셔라는 직업이 있지만, 국외에는 프런트엔드 또는 풀스택 개발자가 CSS까지 모두 다룹니다.
경쟁력 있는 프런트엔드/풀스택 개발자가 되기 위해, 상세히 CSS 기능을 정리하는 것은 필수입니다.
해당 프레임워크는 Javascript의 아쉬운 점을 개선해서, Javascript로 작성된 프레임워크입니다. 해당 프레임워크들을 쓸 때에도 Javascript를 쓰기 때문에, 어떤 프레임워크라도 Javascript 기본 문법을 잘 정리해서 익혀놓아야 합니다. 매년 달라지는 프레임워크 속에서 빠르게 새로운 기술을 익히고 활용하려면, Javascript 기본기가 잘 갖춰져야 합니다.
그래서 본 강의는 프런트엔드 기본기에 집중하는 강의입니다. 본 강의는 탄탄한 기본기를 쌓기 위해, 관련 기술중 꼭 필요한 기술을 싹 정리하고 연습합니다. 추후 이를 기반으로 이후 강의에서 최신 트렌드에 맞춘 프레임워크도 다룹니다.
입문자도 들으실 수 있도록, 상세히 차근차근 설명드리는 강의입니다.
IT강의에서 가장 어려운 강의는 프로그래밍을 전혀 모르는 분들께 프로그래밍을 가르치는 것입니다. 이런 분들도 제가 오픈한 파이썬입문과 크롤링기초 부트캠프 강의를 통해 프로그래밍뿐만 아니라 크롤링 기술을 익히셨습니다. 합리적이고 서로 배려할 수 있는 분들이라면, 충분히 가능합니다.
프런트엔드 기술만 빨리 정리하고 싶으시다면, 본 강의만을 수강하셔도 좋습니다. 다만, 프로그래밍을 한번도 다뤄보지 않은 완전 입문자시라면, 파이썬입문과 크롤링 부트캠프 강의와 함께 풀스택 강의를 로드맵을 통해, 차근차근 익혀보시기를 추천드립니다. 보다 차근차근 필요한 역량을 쌓으실 수 있습니다.
입문자도 이해할 수 있도록
간결하면서도, 꼼꼼히 작성된 자료를 기반으로,
강의 중, 각자 테스트도 해볼 수 있도록
기능별 샘플코드와 테스트까지 바로 하실 수 있습니다
• 각 기능별 샘플코드를 프로젝트로 작성하여 제공해드리며, 실전 웹페이지 코드파일을 제공해드립니다.
• 강의 자료는 온라인에서 언제든 확인하실 수 있도록 제공해드립니다. (단, 복사 및 다운로드는 저작권 이슈로 제한하였습니다.)
입문자에서 시작해서, 풀스택이 되기까지 전 과정을 조금씩 난이도를 높여가며, 상세하고, 체계적으로 익힐 수 있도록 강의를 만들고 있습니다. 해당 문법과 지식 이해를 돕기 위해, 간결한 코드와 충분한 설명을 하되, 이해가 필요한 부분은 그때그때 컴퓨터 공학까지 설명드려서, 좋은 개발자가 될 수 있는 기본기를 닦으실 수 있습니다.
본 강의는 전체 풀스택 강의 시리즈 Part2로, 본 강의 안에서는 다음 서비스 개발을 위한 특정 웹페이지를 선택하여 어떤 프레임워크와 라이브러리도 쓰지 않고, 빈 파일부터 시작하여 HTML, CSS, Javascript + ES6 를 사용해서 한땀한땀 코드 완성까지 함께 해봅니다.
전체 강의 시리즈에서 최종 구현할 웹서비스 예
'아! 진짜 다르구나!' 라고 느낄 수 있도록 고민고민해서 만드는 IT강의 시리즈입니다
합리적이고 서로 배려하고 좋은 인연을 맺을 수 있는 분들만 수강 부탁드립니다!
인프런에 오픈 중 또는 오픈 예정인 강의 코스
풀스택 코스: 최신 웹/앱 서비스를 A to Z 로 혼자서도 만들 수 있는 테크트리
익히는 순서에 따라 번호를 붙여 놓았습니다.
1. 파이썬과 데이터 수집(크롤링) 기본 (파이썬과 웹, 데이터 이해 기본)
2. MySQL과 데이터 저장/분석 기본 (SQL 익히고, 데이터 저장/분석하기)
3. NoSQL(mongodb) 빅데이터 기본 (NoSQL 익히고, 빅데이터 저장/분석하기)
4. 가장 빠른 풀스택: 파이썬 백엔드와 웹기술 기본 [풀스택 Part1]
5. 풀스택을 위한 탄탄한 프론트엔드 기본: javascript (Vanilla JS 와 ES6+) 와 최신 웹기술 [풀스택 Part2]
6. 풀스택을 위한 도커와 최신 서버 기술(리눅스, nginx, AWS, HTTPS, flask 배포) [풀스택 Part3]
7. 풀스택 앱 개발을 위한 flutter 기본 (풀스택 Part4, 23' 상반기 오픈 예정)
8. 풀스택 웹, PC프로그램, 앱 개발 클론코딩 시리즈 (풀스택 Part5, 23' 하반기 예정)
9. 풀스택을 위한 강력한 최신 백엔드 Go 언어 (23' 하반기 예정)
앱, 웹 기술이 급격히 변화 중이어서, React, Vue 강의를 보다 최신 기술을 선점하기 위해,
웹, PC프로그램, 앱 모두를 지원하는 가장 최신 기술인 flutter 로 진행합니다.
* 현재까지의 풀스택 강의 패키지를 할인된 가격으로도 제공합니다. (할인율은 곧 축소 예정입니다.)
[입문~중급] 가장 쉽고, 가장 최신 기술로 익히는 풀스택 로드맵 (바로가기)
데이터 분석/과학 코스: 데이터 분석가/과학자를 위한 탄탄한 기본기 쌓기
익히는 순서에 따라 번호를 붙여 놓았습니다.
- 파이썬 입문과 데이터 수집(크롤링) 기본 (파이썬과 웹, 데이터 이해 기본)
- 쉽게 처음하는 파이썬 고급 크롤링 (현존 최강 크롤링 고급 기술 및 관련 IT 지식)
- SQL과 데이터 저장/분석 기본 (SQL 익히고, 데이터 저장/분석하기)
- NoSQL(mongodb) 빅데이터 기본 (NoSQL 익히고, 빅데이터 저장/분석하기)
- 처음하는 파이썬 데이터 분석 (데이터 전처리와 pandas, 최신 시각화) [데이터과학 Part1]
- 처음하는 파이썬 머신러닝 부트캠프 (쉽게! 실제 문제로 개념/활용 익히기) [데이터과학 Part2]
- 처음하는 딥러닝과 파이토치 부트캠프 [데이터과학 Part3]
* 현재까지의 데이터 과학 강의 패키지를 할인된 가격으로도 제공합니다 (할인율은 곧 축소 예정입니다)
[입문~초급] 취업을 위한 데이터 과학 기본 기술 쉽게! 꼼꼼하게 익히기 (바로가기)
강의 수강 꿀팁!
이런 분들께
추천드려요!
선수 지식,
필요한가요?
잔재미코딩 입니다.

- About 잔재미코딩 소개 블로그 [클릭]
- 주요 경력: 쿠팡 수석 개발 매니저/Principle Product Manager, 삼성전자 개발 매니저 (경력 약 15년)
- 학력: 고려대 일어일문 / 연세대 컴퓨터공학 석사 (완전 짬뽕)
- 주요 개발 이력: 삼성페이, 이커머스 검색 서비스, RTOS 컴파일러, Linux Kernel Patch for NAS
- 저서: 리눅스 커널 프로그래밍, 리눅스 운영 체제의 이해와 개발, 누구나 쓱 읽고 싹 이해하는 IT 핵심 기술, 왕초보를 위한 파이썬 프로그래밍 입문서
- 운영 사이트: 잔재미코딩 (http://www.fun-coding.org) [클릭]
-
- 풀스택/데이터과학 관련 무료 자료를 공유하는 사이트입니다.
- 기타: 잔재미코딩 유투브 채널 [클릭[
- IT 학습에 도움이 되는 팁/ 짧은 무료 강의를 공유하고자, 조금씩 시작하고 있습니다~



