풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2] 대시보드

HTML, CSS, Javascript 대충은 쓸 것 같은데, 실제로 써보면 원하는대로 다루기 어렵습니다. 반응형, 호환성, ES6 등 흩어져 있는 수많은 문법과 기술, 특히나 프론트엔드는 한번 잘 정리하지 않고서는 생각보다 어렵습니다.

웹이든 앱이든 최근 서비스는 구현을 위해, 백엔드, 프론트엔드, 배포 기술이 필요합니다. 이를 풀스택이라고 합니다. 풀스택이 되면 혼자서도 최신 웹서비스를 만들 수 있고, 경쟁력 있는 개발자도 되실 수 있습니다.

이를 가장 효과적으로 실질적으로 진행하려면, 풀스택 강의 Part1 에서 파이썬과 백엔드 기술을 익히고, Part2 에서 프런트엔드 기본기를 닦아야 합니다. 기본기가 잘 갖춰져야! 단순히 강의에서 나온 웹서비스를 그대로 따라 치는 것이 아니라, 제대로 풀스택이 될 수 있습니다. 본 강의는 프런트엔드 기본기를 탄탄히 갖출 수 있도록, HTML5, CSS, Javascript (바닐라 자바스크립트, VanillaJS) + ES6 를 상세히 다릅니다.

전체 가장 빠른 최신 풀스택 로드맵을 유투브 영상으로 요약하여 만들었습니다. 해당 영상을 참고하시면, 본 기술을 넘어서, 혼자서도 짧은 시간에 웹/앱 개발을 할 수 있는 로드맵도 이해하실 수 있습니다.

수없이 많은 문법과 기능들로, 프런트엔드의 출발은 정리라는 키워드부터 시작해야 합니다.
그 많고 다양한 문법과 지식을 다음과 같은 조건 하에 정리하였습니다.

• 최신 웹사이트 개발을 위한 배경지식은 싹 정리하고
• 그럴듯한 웹페이지를 위해 꼭 필요한 CSS 를 꼼꼼히 정리하고
• 최신 웹페이지에서는 쓰지 않는 Jquery 는 다루지 않고
• 모두 표준 Vanila Javascript + 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 를 잘하려면, 체계적으로 익히세요

IT 기술은 연계되어 있고, 기술을 연결하였을 때, 비로소 그럴듯한 서비스나, 데이터 과학 기술이 가능합니다.
연결된 기술 전반을 난이도를 차근차근 올리며, 핵심을 익히시면, 짧은 시간에 효율적으로 깊이있게 익힐 수 있고,
시스템과 데이터 전반이 드디어 이해가 되고, 각 기술에 대한 이해의 깊이도 달라집니다.
이러한 깊이와 눈을 가지면, 비로소 개발자와 데이터 커리어에서 경쟁력을 갖츨 수 있고, 시니어 레벨도 가능합니다.

이를 위해 각 분야의 핵심 기술을 짧은 시간에 정리할 수 있는 로드맵을 만들고 있습니다.

잔재미코딩 개발자, 데이터 분석가/과학자 커리어 로드맵
입문자부터 쉽게 시작해서, 난이도를 조금씩 올리며,
짧은 시간에 웹/앱 전과정과 데이터분석+AI까지 탄탄한 기본기를 쌓을 수 있는 로드맵입니다

데이터 분석/과학 코스: 데이터 분석가/과학자를 위한 탄탄한 기본기 쌓기 

익히는 순서에 따라 번호를 붙여 놓았습니다.

1. 파이썬 입문과 데이터 수집(크롤링) 기본 [파이썬, 웹, 데이터 이해 기본까지]
2. 처음하는 SQL과 데이터베이스(MySQL) 부트캠프 [입문부터 활용까지]
3. 처음하는 MongoDB(몽고DB) 와 NoSQL 데이터베이스 부트캠프 [입문부터 활용까지]
4. 처음하는 파이썬 데이터 분석 (데이터 전처리와 pandas, 최신 시각화) [데이터과학 Part1]
5. 처음하는 파이썬 머신러닝 부트캠프 (쉽게! 실제 문제로 개념/활용 익히기) [데이터과학 Part2]
6. 처음하는 딥러닝과 파이토치 부트캠프 [데이터과학 Part3]

* 현재까지의 데이터 과학 강의 패키지를 할인된 가격으로도 제공합니다 (할인율은 곧 축소 예정입니다)
[입문~초급] 취업을 위한 데이터 과학 기본 기술 쉽게! 꼼꼼하게 익히기  (바로가기)

 

풀스택 코스: 전체 웹/앱 개발을 이해하기 위한 탄탄한 기본기 쌓기

익히는 순서에 따라 번호를 붙여 놓았습니다.

1. 파이썬 입문과 데이터 수집(크롤링) 기본 [파이썬, 웹, 데이터 이해 기본까지]
2. 처음하는 SQL과 데이터베이스(MySQL) 부트캠프 [입문부터 활용까지]
3. 처음하는 MongoDB(몽고DB) 와 NoSQL(빅데이터) 데이터베이스 부트캠프 [입문부터 활용까지]
4. 가장 빠른 풀스택: 파이썬 백엔드와 웹기술 기본 [풀스택 Part1]
5. 견고하게 익히는 프론트엔드 기본: javascript (Vanilla JS 와 ES6+) 와 최신 웹기술 [풀스택 Part2]
6. 도커와 최신 서버 기술(리눅스, nginx, AWS, HTTPS, flask 배포) [풀스택 Part3]
7. 처음하는 풀스택을 위한 Flutter 부트캠프 [풀스택 Part4]

* 현재까지의 풀스택 강의 패키지를 할인된 가격으로도 제공합니다. (할인율은 곧 축소 예정입니다.)
[입문~중급] 가장 쉽고, 가장 최신 기술로 익히는 풀스택 로드맵 (바로가기)