프론트엔드 기본 개념 정리

HTML, CSS, JavaScript

프론트엔드를 시작할때 필수적으로 알고 있어야 하는 HTML, CSS, JavaScript.

개념만 주구장창 공부하고, HTML 태그와 CSS 속성값만 달달 외운다고 직접 스스로 웹사이트, 웹어플리케이션을 만들 수 있는 자신감이 쌓여지는 것은 아니예요. 단순히 따라하기식의 클론코딩으로는 개발자의 필수 자질인 문제해결 능력을 키우기 힘들어요. JavaScript 문법은 이해 했는데, 막상 작은 프로그램 조차도 만들기 어려워 시작조차 못한적 있으시죠? :) 

새로운것을 배울때 항상 큰 그림을 먼저 이해하고 어떻게 찾아가면서 공부 할 수 있는지, 직접 만들어 보면서, 문제를 해결하면서, 정확하게 개념을 정리 하는것이 좋아요. 

기본기가 없거나, 큰 그림을 아직 보지 못하셨다면 드림코딩 유튜브 채널에 올라온 무료 영상들을 확인해 보세요: 프론트엔드 입문자를 위한 영상 목록 순서


아카데미에서 진행되는 강의는 기본 개념 설명이 아니라, 유튜브에서 배운 내용들을 직접 활용하고 그 이상의 것을 (개발툴, 현업팁, 프로젝트 연습) 합니다. 🚀 각 강의 페이지에 이미 강의를 완료하신 다른 드림코더 분들의 수강평을 보시면 다른 분들은 어떤 점들을 유익하게 배우셨는지 확인 할 수 있어요 :)
쇼핑몰 미니게임 클론코딩 & 코드 리뷰
fetch API를 이용하여 JSON 파일을 동적으로 불러와서 화면에 업데이트 해요. 드림코딩 유튜브를 통해 자바스크립트 기본편을 들으셨다면 좋은 복습용 + 다른 드림코더 24분의 소스코드를 리뷰 하면서 중요한 포인트를 배워가실 수 있어요.
포트폴리오 웹사이트 클론 코딩
자주 쓰이는 CSS를 정리 하고 반응형 웹사이트 전체기획부터 개발, 배포까지 배우면서 나만의 멋진 포트폴리오 웹사이트를 만들고 싶다면 이 강의 추천해요. 자바스크립트를 활용해서 어떻게 필요한 기능을 정의하고 구현할 수 있는지 검색 하는 팁과 브라우저에서 개발툴 활용 및 디버깅 하는 스킬도 배울 수 있어요. 기본도 다지고, 여러가지 현업 팁들도 배우고 또 무엇보다 문제를 해결 할 수 있는 스킬을 쌓는 좋은 강의 입니다.
프론트엔드 필수 브라우저 101

순수 자바스크립트 + 브라우저에 대한 이해를 할 수 있는 정말 좋은 강의 입니다. 앞으로 중급 레벨에서 배울 아이들을 위한 정말 좋은 기본을 쌓을 수 있어요. 브라우저에 대한 이해 뿐만 아니라 우리가 작성하는 코드가 성능과 어떤 관계가 있는지, 성능을 확인 하기 위한 개발툴, 여러가지 유용한 팁들을 알려 드려요. 게임 만들기를 통해 자바스크립트를 직접 활용하고 리팩토링을 함께 하면서 코딩 실력을 향상해 보세요. 요즘 많은 회사에서 순수 자바스크립트로 코딩 테스트를 하는데, 이 강의를 들으시면 도움이 되실거예요 🙌🏼

Q: 포트폴리오 클론코딩과 브라우저 101 어떤것을 먼저 들어야 하나요?

A: 두 강의는 서로 연계가 되어 있지 않기 때문에 어떤 것을 먼저 들으셔도 상관 없어요 :) 그래도 순서를 정해야 한다면 포트폴리오를 먼저 들으시고 브라우저를 들으시면 효과가 더 좋을 것 같아요.

꼭 한가지만 추천해 달라고 한다면 저는 브라우저 101 강의를 추천해 드려요. 브라우저에 대한 이해 뿐만 아니라 순수 자바스크립트를 통해서 프로젝트를 만들기 때문에 코딩 연습 하기에 정말 좋을 것 같다고 생각해요. 

HTML + CSS 기본기를 다지고 나만의 포트폴리오 사이트를 만들고 싶다면 포트폴리오를, 조금더 깊이 있는 브라우저/자바스크립트 공부를 원한다면 브라우저 101을 :)

각 강의 소개 페이지에 있는 자세한 안내 내용을 읽어 보고 본인의 목표에 따라 선택하세요.


Q: 포트폴리오 클론코딩과 브라우저 101 두가지 다 수강할때 추천해주시는 순서가 있을까요?

A: 두개를 동시에 수강 하신다면 아래 순서로 강의를 활용해 보시면 제일 효과적일 것 같아요:

  1. 포트포리오 강의 처음부터 CSS 구현 까지만 듣는다 (챕터 8 CSS: Styling 까지)

  2. 브라우저 101 챕터 7 보충수업까지 듣는다

  3. 다시 포트폴리오 강의로 돌아가서 자바스크립트를 스스로 구현하면서 듣고 완강한다

  4.  다시 브라우저 101으로 돌아와서 게임과 리팩토링 까지 듣고 완강한다.

모든 개발자 기본 소양 강의

나의 토양을 탄탄하게 만들어줄 영양분들 🌱