프론트엔드 필수 브라우저 101

브라우저 API, 디버깅, 성능분석, 프로젝트 10개

웹개발자라면 꼭 알아야 하는 브라우저의 모든것

브라우저 Web APIs, 디버깅, 성능 분석, 실전 프로젝트 10개

  • 필수 개념 정리

    프론트엔드 개발자라면 필수로 알아야 하는 기본 개념과 현업에서 일하시는 많은 개발자들도 모르는 중요한 핵심 포인트들도 함께 정리합니다. 튼튼한 기본기 강의를 통해 완성 해봅니다.

  • 실전 프로젝트 10개

    순수 자바스크립트를 이용하여 실전 프로젝트 10개를 함께 해보면서 문제해결 능력을 키워봅니다. 배운 개념들을 실전 프로젝트를 통해 활용하면서 내것으로 만들어 봅시다.

  • 코딩 실력 향상

    리팩토링을 통해 코드를 구조적으로 작성해 보아요. 클래스와 모듈을 이용해서 작은 컴포넌트 단위로 나누고, 변수와 함수의 이름을 작성하는 법과 빌더 패턴 등 다양한 코딩 팁을 배워봅니다.

프론트엔드 기본

프론트엔드 기본

기본기 제대로 쌓아 가기

다른, 그냥 평범한 프론트엔드 개발자와 차별화 되고 싶으세요? 단순히 querySelector로 DOM 요소를 조작하는것이 프론트엔드 개발의 다가 아닙니다. 정확하게 브라우저에서 제공하는 APIs들에 대해 이해 하고, 우리가 작성한 페이지가 브라우저에 어떻게 변환되어 표기 되는지 이해 하면서 성능을 바라볼 수 있는 눈을 키워보세요.

문제 해결 능력 키우기

문제 해결 능력 키우기

단순히 따라하기 식의 강의, 지겹지 않나요?

단순히 따라하기 식의 강의 만으로는 실력 향상이 어려워요. 스스로 문제에 대해 정의하고, 찾아보고, 구현해 보고, 🐛 버그를 해결해 나가는 과정을 통해 진정한 실력 향상으로 이어집니다. 모든 수강생들이 사랑해 주셨던 실전프로젝트 챌린지를 통해, 여기서 제대로 한번 연습해 보세요.

자바스크립트 코딩 완성

자바스크립트 코딩 완성

기본 문법은 아는데, 활용이 안된다구요?

순수 자바스크립트로 스스로 게임 하나 정도는 만들어 봐야죠? 챌린지를 통해 기능을 먼저 완성해 보고, 우리의 더러운 코드를 리팩토링을 통해 깨끗하게 ✨ 만들어 보면서 코딩 실력을 향상해 봅니다. 클래스, 빌더 패턴, 등 다양한 테크틱 알려드려요.

다른 수강생들과 함께 🙌

다른 수강생들과 함께 🙌

서로 자극 받고 열심히 달려 봅니다

수강생 대부분 스스로 만들어 보고 연습하면서 강의를 진행하고 있어요. 포기 하지 않고 서로 격려하고 자극하며 열심히 공부해 보아요. ← 수강생들이 열심히 만든 프로젝트예요 🎖

강의 소개 영상

완강하면 어떤 것이 완성 되나요?

강의 리뷰

강의를 완성하신 드림코더님들 수강평

  • 중간까지들었는데 아주솔직한 평가합니다(수정)

    수강 대상자가 아주 확실한거 같습니다. 솔직히 초보자는 추천하지않아요, 다른책 한권이라도 봤거나 html,css는 기본이고, 자바스크립트 한바퀴 보신분 혹은 얇은책이라도 보신분 추천드립니다. html,css 서너바퀴 돌리고, js는 웹js책한권까지 공부하고, 처음에 직접찍으신 유튜브강의까지 보고듣고있는데요 종종 평소수업보다 엄청어려운 부분이 몇군데 있습니다. 원래같으면 이런부분 나타나면 돈아깝지않다, 좋다고 생각할텐데, 과연 현업자들도 이런걸 알고있을까..? 알고개발할까? 싶을 정도로 과하게 어려운 부분도 이따금씩 보입니다. 이벤트 부분이 특히 어려워서 그럴 수 도있지만 그전 부분까지는 진짜 이런 강사분 없다싶을정도로 너무 좋은 설명으로 가득합니다. ////// 미 쳤 다. 리팩토링전 보충강의까지 듣고 다시 작성합니다. 앞에 생각은 여전히 변함없습니다. 제가 만약 일을시작하거나 더 고급사용자가되면 만족할만한 내용일거같아요, 하지만 그마저도 그 이후 강의듣고 만족했고, 여기까진 아직 어렵거나 나중에 다시들으라고 첨언 한마디만 해주셨으면 그마저도 완벽하다고 생각합니다. 근데 보충강의듣고 진짜 너무좋은강의다라는 생각이 다시한번 들었습니다. 남은강의까지 25%정도 남았는데 빠르게끝내고 다음 리액트강의 들어봐야겟습니다. 한강의에 이렇게 후기 두번이나 쓰게되다니... 그만큼 좋은강의라는 생각이 듭니다.

    flykimjiwun
    flykimjiwun
  • 프로젝트 게임 만들기

    앞에 했던 내용들을 실전 프로젝트에 적용해서 문제를 풀어볼 수 있어서 좋았습니다. 다만 좀 더 실전 프로젝트 부분을 처음부터 좀 깔끔하게 정리하면서 나아갔으면 이해하기 더 수월했을 것 같습니다. 혼자서 할 때는 이렇게 했다가 저렇게 했다가 하면서 하는데 영상으로 볼 때는 정리가 되어 뒤에 코드를 수정하지 않고 나아가는 걸 보는 게 깔끔하고 이해하기 수월하다고 생각됩니다. ㅎㅎ

    myunghun0114
    myunghun0114
  • 돈이 전혀 아깝지 않은 강의입니다. (국비학원 다니는 사람)

    (밤을 새서 글이 두서없을지도 몰라요) 엘리님 저는 어릴때부터 항상 뒷심이 없었어요. 99퍼센트까지 열심히 쭉 하다가도 마지막 1퍼센트즈음 남았을때 질려버리거나해서 포기하거든요 지금 국비학원에 다니고있고, 개발자가 되기 위해서 공부하고 있기 때문에 어찌됐든 포기할 수 없는 상황인 것도 있지만 아마도 거의 인생에서 몇번 해보지 못한 완료를 해본 무언가가 엘리님 강의에요. 생각을 해보니까 그렇더라구요 ㅎㅎ 유익하고, 기대가 되는 강의여서 더 즐겁게 힘내서 할 수 있었어요. 길게 쓰고싶지만 저는 빨리 리액트 강의를 들으러 가야하기때문에.. (사실 이번 학원 프로젝트는 전부 망해버렸어요.. 하하 계속 팀에서 나와서 혼자 진행하게되네요) 어쨋든 저는 국비지원 학원을 다니고 있고, 제가 느끼는 바로는 학원에서 배우는 것들이 내가 이미 알고있는 것이면 너무 기초로 느껴집니다. 하지만 저처럼 뭘 어떻게 시작해야 할지 모르는 사람들은 커리큘럼이 있기때문에 어떤 것을 공부하는구나.. 등등 엘리님 강의도 보고 여러 정보들을 검색하면서 눈이 좀 트이는거같아요 *학원은 지속성과 동기를 주고, 강의로 하는 자습은 효율을 높여줘서 시너지가 있어요* 만약에 본인이 진짜 뚜렷한 목표와 계획이 있다면 국비학원은 딱히 필요 없다고 생각해요 학원 수료해도 뭐 없거든요.. 결국엔 자기가 공부한게 남는거지 자바->스프링 배우시는 분들은 스프링을 집중해서 들으시면 될거같고 이렇게 엘리님 강의처럼 좋은 강의가 제공되는 부분들은 따로 공부를 하시는게 좋을 것 같아요 저는 학원에서 js 들어가기전에 엘리님 유튜브 기초영상을 거의 다 보았고 101 이전 강의를 보았는데 지금도 그렇고 html css js는 제가 제일 잘하는거같아요 학원에서.. 적어도 그정도 자신감은 있어요 학원에서 배우는 것들과 엘리님 강의에서 배운 것들을 비교하면 (html,css,js,등) 압도적으로 엘리님 강의가 유익해요.. ㅇㄱㄹㅇ 진짜루.. 진짜에요 하여튼.. 국비지원학원 다니시는 분들은.. 좋은 강의가 제공되어있는 부분은 따로 공부하시고 학원에서는 필요한것만 취하세요.. 스프링은 조금 복잡하고, 재밌는 강의가 없고.. 혼자하기에는 의욕같은게 별로 생기질 않아서 학원에서 배우는 것이 괜찮은 것 같아요. 스프링이 취업에 꼭 필요한건지도 모르겠구요; 아 죄송합니다 진짜 쓸모없는 글만 길게 써놓은거같아서 ㅜㅜㅜ 어쨋든 엘리님 감사해요, 할 말 있었는데 까먹었어요.. 아.. 엘리님처럼 돈 많이 벌고 능력있는 개발자가 되고싶어요.. 근데 저는 고졸 신입에 면접한번 본 적 없어서 아직 확신이 서질 않아요.. 내가 과연 생각하고 발전할수있는 회사에 들어갈수있을까, 무의미하게 같은것을 반복하는 회사를 들어가게되는건 아닐까 (아직 뭣도 모르고 하는 소리지만) 당장 먹고 살 돈이 급해서 그런건지 ㅜㅠ 그래도 포기하지 않고 계속 노력하겠습니다.. 이말 하려고 했었네요 그냥 편지라고 생각해주세요 ㅜㅜㅋㅋㅋ

    gyals0386
    gyals0386
  • 이곳이 종착지였습니다.

    혼자 독학하면서 유튜브도 참고하고 다른 클론코딩도 듣고 책도 보고 했었는데 브라우저 101 강의가 가장 많이 배우고 뿌듯함과 제가 지금까지 배웠던 것들을 정리하고, 그리고 말씀하셨던 것처럼 문제해결 능력이 생기고 무엇이든 만들 수 있겠다는 자신감이 생긴 것 같습니다. 그리고 좋은코드 깨끗하고 깔끔하게 정리된 코드를 작성하려고 더 노력해야겠습니다. 강의를 들을땐 무조건 스스로 구현을 해보고 듣는게 좋은 것 같습니다. 그리고 내가 힘들게 적었던 코드, 구현이 안됐던 부분을 어떻게 해결해나가야할지 더 명확하게 보이고 알 수 있게 되는것 같습니다. 저도 이 전 강의때는 제 실력이 부족해서 막힐 때마다 아 ‘이부분만 강의 보고 스스로해야지’ 이런 식으로 하나보고 둘 보고 계속 강의만 보고 따라 적고 있었습니다. 그러다 보니 끝나고 제게 남는 게 많이 없었습니다. 혼자 다시 해보라고 해도 못할? 학창시절에 수학문제 풀때 궁금증에 해설지 보는거랑 같은 것 같습니다. 이부분 조금 모른다고 해설지보면 ‘아 이거 생각할 수 있었는데 다음엔 풀겠네’ 싶다가도 또 그 문제 만나면 못풀듯이… 그래서 꼭 스스로 먼저 구현해보고 도저히 못하겠으면(그리고 그런 빈도수가 많으면) 유튜브 (엘리님이 올려주신것들) 강의 보시고 기초를 쌓고 여러 곳에서 기초를 쌓고 다시 돌아오면 더 잘 보이는 것 같습니다! 기초를 탄탄히 하기에 정말 좋은 강의였고 앞으로도 엘리님 강의를 계속 들을 것 같습니다! 다른 클론코딩들보다 많이 배웠습니다! 아 마지막으로 아쉬운 점이 있다면 영상을 플레이 하는 이 플랫폼?에 오류가 적지 않게 있었습니다. 댓글창 수정 문제는 이미 많이들 아시는 것 같고 영상이 끝나고 자동 넘어가기 기능이 있는데 그떄 안누르고 discussion 보려고 하다가 전체 브라우저가 먹통이 되기도 하고(아이패드로 듣는데 터치가 안되고 했습니다.) 그래서 다시 켜고 로그인하고 이랬던 점이 많았습니다. 엘리님이 새로 사이트 만드시는 것 같지만 여러 문제들 때문에 아마도?(더 기대하겠습ㄴ디ㅏ ㅎㅋㅋ) 그리고 너무 존경스러운 부분이 일하시면서 각 학생들 답변달아주시는게 너무 놀랍습니다. 일도 하시고 유튜브도 올리시고 수업도 만드시고 질문 답변도 달아주시고…. 정말 이 일을 사랑하시고 즐거우시니까 힘들지만 즐겁게 하시는 것 같습니다. 아직 개발자의 ㄱ 도 아닌 저가 그 모습을 보고 많이 배우고 저 또한 열정을 갖고 노력하고 즐기는 사람이 되기 위해 더 열심히 공부하겠습니다! 좋은 강의 너무 감사합니다!

    ungun96
    ungun96
  • 자바스크립트 개념의 실전 적용과 리팩토링에 대해서 설명하는 알찬 강의

    그동안 코어 자바스크립트의 개념을 공부하면서 나름 공부를 많이 했다고 자부했지만 막상 실전 프로젝트에 적용시키는 것이 막막하고 쉽지 않았습니다. 강의를 들으며 엘리와 함께 프로젝트를 진행해보고 또 검색을 통해서 스스로 코드를 구현해보는 과정을 거치면서 그동안 공부했던 것들을 진정으로 나의 것으로 만들 수 있는 시간이었던것 같습니다. 리팩토링이라는 개념도 이 강의를 통해서 처음 알게되었고 그 중요성에 대해서는 앨리님이 추천해주신 '리팩토링-마틴 파울러' 책을 읽으며 알아가고 있습니다. 사실 강의를 듣고 그 내용을 나의 것으로 만드는 과정에는 굉장히 많은 노력이 필요하다고 생각합니다. 제가 처음으로 유튜브에서 엘리님의 자바스크립트 개념강의들을 정독하고 배운 개념들을 활용해서 웹 사이트를 하나 구현해보려 했을때 큰 좌절감을 느꼈습니다. 강의에서 들었던 개념들은 아직 제것이 아니었고 그 상태로 뭔가를 만들어보고 싶다는 욕심해 도전했지만 뭘 어떻게 해야할지, 내가 뭘 모르고 있고, 뭐가 필요한지 정말 답답하고 힘들었습니다. 저는 이후 1달이 넘는 시간 내내 코어 자바스크립트에 대해서 개인적으로 학습했고 이해가 되지 않아도 반복해서 보며 눈에 익혔습니다. 다시 엘리님의 강의로 돌아왔을때 확실히 눈에 보이는게 다르더군요. 엘리님이 어떤 개념을 설명하고 있는지 어떤 코드를 짜고 있는지 바로바로 이해가 되었습니다. 또한 모른는 것을 검색해볼때도 내가 어떤 동작이 필요한지 어떤 질문을 하면 내가 원하는 답을 얻을 수 있는지 '감'이 잡히기 시작했습니다. 엘리님의 수업방식인 강의 보기전에 먼저 해보기를 하면서도 예전에는 하루종일 검색하고 또 검색해야 구현할까 말까했던 것들이 이제는 금방금방 구현할 수 있게 되었습니다. 세상에 나의 부족함을 완전히 채워주는 완벽한 강의는 없습니다. 엘리님의 강의가 좋은 이유 중에 하나는 먼저 해봄으로써 좌절감을 느끼게 해줍니다. 누군가에게는 학습의 재미를 떨어지게 하는 높은 벽이 될 수도 있지만 누군가에게는 넘고 싶은 높은 허들처럼 보일 수도 있습니다. 자신에게 부족한 것이 느껴진다면 그 부족함을 채우기 위해 발버둥 처보세요. 정말 신기하게도 그렇게 발버둥 치는 동안에도 많은 의심과 걱정이 들지만 결국에는 내게 익숙한 것이 되어 돌아오네요. 엘리님 강의 너무도 잘들었고 항상 부족함을 느끼고 배우고 갑니다. 좋은 강의 감사합니다^^

    dhchun1203
    dhchun1203
  • 프론트엔드의 족보라고 생각합니다 + 수강 Tip

    정말 많은 고심 끝에 나온 강의라고 생각합니다. 가볍게 수강할 강의가 아닙니다. 기본적인 HTML, CSS, JS를 공부하셨다면 강의 무한루프 빠져나오시고 이 강의 하나로 마무리 하세요. 시간절약 해야됩니다. 강의는 반드시 알아야 할 핵심 개념과 현업에서 꼭 쓰이는 실용적인 기능들에 대해서 전반적으로 다룹니다. 버려도 될 부분이 하나도 없습니다. 많은 분들이 말씀하시는 "이해하며 능동적으로 하자"는 이 강의에서 큰 의미가 없습니다. 다가올 시험에 나오는 고급 족보를 받았다고 생각하시고 전부 외워버린다고 접근해보세요. 정말 새로운 길이 열립니다. 외우면 이해됩니다. 외우면 다음에 내가 쓰고있습니다. 이론설명, 실전 등 전부 개념 하나하나 코드 한줄 한줄 시험에 나온다고 생각하시고 외우세요. 리팩토링 처음 진행할때 따라가기가 너무 벅차서 내 것이 된다는 느낌이 부족했습니다. 그래서 그냥 외웠습니다. 엘리님을 그대로 모방하기 시작했습니다. 곧 어떤 에러메세지를 받을지 알면서도 그냥 똑같이 했습니다. 그리고 엘리님처럼 잠시 당황하고 에러메세지보고 찾아가는 과정까지 모방했어요. 어떤 함수인지 알면서도 MDN에 검색도 똑같이 따라쳤어요. 코드한줄 한줄 자괴감에 절어있던 제가 이제는 다른 코드들 리팩토링도 흥미롭게 어떻게 접근하고 정리해볼지 자신감이 붙었습니다. 그리고 왜 리엑트나 타입스크립트를 공부해야 되는지도 이제서야 알게되었습니다. 어차피 현업에서 자바스크립트만 쓰는 경우는 없다고 보시면 됩니다. 엘리님이 너무 친절하시고 상냥하셔서 "능동적으로 하세요~ 꼭 혼자서 해보세요~" 하고 알려주시는데... 본인이 아직도 코딩에 자신이 없다는 분들은 그냥 외우시면 됩니다. 자격증 시험 하나 본다고 생각하시고 한달이면 한달 시간이 되시면 한 두주내에 전부 외워서 머리에 넣으세요. 코딩이 재밌어졌습니다. 좋은 강의 제공해주신 엘리님 진심으로 감사드려요.

    ThanksEllie
    ThanksEllie
  • 엘리님 믿고 열심히 따라갔습니다.

    비전공자 문과 경영학도로써 웹 프로그래밍에 관심이생겨 독학중입니다. 질 좋은 강의를 찾다 엘리님 유튜브를 접하게 됐고, 여러편의 유튜브 영상을 시청한 후 엘리님의 강의 스타일이 저와 맞아서 자바스크립트 강의를 먼저 신청하게 됐습니다. 브라우저 101 강의를 통해 JS에 대한 몰랐던 기본 배경지식들을 쌓을 수 있었습니다. 다양한 용어들의 정의와 쓰임새 그리고 미니 실습 프로젝트들을 통해 보다 피부에 와닿게 배울 수 있었습니다. 엘리님께선 미니 실습 프로젝트들을 '정말 간. 단. 한 실습' 이라고 말씀하셨지만....저에겐 그렇게 간단하지 않더라구요...😂 그래도 꾸역꾸역 혼자 머리싸매며 만든 덕분에 배운점이 많았습니다. 브라우저 101 강의에서 화룡점정을 꼽자면 라고 할 수 있겠네요. 엘리님께선 일주일정도 시간을 가지고 열심히 만들어보라고 하셔서 일주일간 열심히 투닥투닥 만들었지만 100% 완성하진 못했습니다.... 저의 실력에 굉장히 좌절했지만 부족한 부분은 겸허히 받아들이고 엘리님의 코드들을 보면서 '아, 이렇게도 적용이 가능하구나' 하는 새로운 부분에 대해 눈을 많이 뜨게 됐습니다. 정말 감사드립니다.🙇‍♂️ 실습 프로젝트 이후에도 리펙토링을 통해 코드들을 더 효율적으로 개선하는 모습도 정말 신선했고 배울점이 많았습니다. 이벤트 루프에 관련된 강의도 정말 좋았습니다. 시각적인 자료를 통해 내가 만든 함수 코드들이 작동하는 모습을 알게돼서 이해하는데 더 도움이 많이 됐습니다. 브라우저 101 강의 수강하기를 정말 잘한 것 같고, 이제 다시 한번 복습하면서 새로배운 것들을 제것으로 만들도록 열심히 노력해보겠습니다. 강의 준비해주시느라 고생하신 엘리님 정말 감사드립니다~🤗

    webtree12
    webtree12
  • 말해 뭐합니까 강사가 엘리님인데😀

    이미 엘리님 강의력은 유튜브에서부터 입증됐어서 굳이 언급 안해도 단연 최고인 거 다른 분들 후기를 조금만 읽어보셔도 아실 거예요. 포트폴리오 강의때쯤만 해도 가끔 나오는 자바스크립트가 너무 낯설고 어떻게 하는지 감이 잘 안잡혀서 아 벌써 이렇게 어려워지는 건가.. 하고 살짝 주눅 들었었어요. 근데 이미 시작한 거 끝은 봐야하니깐 자연스럽게 브라우저 101 강의를 결제했고 현재 완강한지 며칠 되었습니다. 수강 후기를 말하자면 중간 중간 퀘스트 형식으로 ~~이렇게 먼저 구현해봐라! 하는 시간이 주워져서 최선을 다해 구글링도 해보고 이렇게 저렇게도 코딩해보고 하는 과정에서 그 상황에 깊이 녹아들 수 있었고 그런 상태에서 해답 강의를 보니깐 더 흡수가 잘되었던 것 같아요. 그렇게 자신 없던 자바스크립트가 이 강의를 듣고 나서는 JS로 자연스럽게 코딩을 할 수 있게 되었고 이전의 불안감, 낯설음이 싹 사라졌어요. 이제는 들었던 것을 꼼꼼히 복습하고 제가 지금껏 만들어왔던 것들을 자바스크립트를 통해 좀 더 기능을 업그레이드 시켜야겠다, 처음부터 내가 기획하는 프로젝트도 하나 만들어보고 다음으로 넘어가야겠다 하는 능동적인 모습도 생기게 되었답니다. 여러모로 프론트엔드를 준비하신다면 많은 수강생들의 극찬을 믿고 들어보시길 바랍니다! 저는 이미 다음 강의인 리엑트를 결제했습니다 ㅎㅎ 취업에 대한 부담감때문에 진도 빼는 것에 마음이 급하지만, 잠시 조금 멈추고 지금까지 배워온 걸 한 단계 더 깊이 있게 체득하는 시간을 저에게 주려고 합니다. 열심히 재정비하고 돌아오도록 하겠습니다! 항상 좋은 강의 감사합니다. 모두 드림코딩하세요💖

    wiostz98kr
    wiostz98kr
  • 눈물과 함께하는 브라우저 101

    이 강의를 볼까? 고민하시는 분들께 정말 정말 추천합니다. 저는 JavaScript 를 공부하면서 본격적으로 DOM에 대해서 공부를 하고 싶어서 이 강의를 수강하게 되었습니다. 엘리님이 항상 하시는 말씀 있으시죠? 강의를 보기 전에 미리 꼭 해보고 보는게 좋다! 이 말을 지키기 위해서 정말 노력했지만, "마지막 당근을 찾아라!" 게임의 경우에는 무수한 버그와 함께 고통의 눈물을 흘리다가 이미 구현한 부분의 강의를 보면서 계속 이어나갔어요. 나름 열심히 고민하고 이렇게 하면 되지 않을까? 하면서 짰던 코드들과 엘리님이 작성하시는 코드들을 비교해보니까 고민을 어떻게 해야하는지 더 잘 보이는 것 같더라구요. 그렇게 부분 강의 듣고 나머지 쭉 작성해보다가 막히면 수없이 고민했다가 다음 강의 들으면서 내 코드 점검해보고... 이런식으로 반복하니까 결국에는 다 완성 후에 남은 강의를 볼 수 있었습니다. 사실, 이제 리팩토링이라는 큰 산이 남아있지만! JavaScript로 아무것도 할 수 없었던 제가 게임을 만들 수 있었다는 사실에 기뻐하면서 남은 강의도 쭉쭉 달려가겠습니다! 이 강의에서 특히, 디버깅 할때 팁은 너무너무 좋았습니다. 엘리님이 직접 코드를 작성하시면서 console.log 등을 이용하시는 모습도 도움이 많이 됐구요! 다른 수강생 분들의 구현한 코드들을 보면서 더더더 열심히 해야겠다고 느끼기도 하지만! 정말 즐겁게 수강할 수 있었습니다. 아마 다음 강의는 리액트를 수강하지 않을까 싶어요! 엘리님을 만나게 된 많은 분들! 기회입니다! 같이 달려요!

    toto006521
    toto006521

강의에서 다루는 내용들!

  • WEB APIs

    필수로 알아야 하는 브라우저 Web APIs 친구들과 실습을 통한 체득

  • DOM

    브라우저가 어떻게 우리의 웹페이지를 이해하고 동적으로 제어 하기 위한 개념과 연습

  • Render Tree

    성능이 좋은 웹앱을 만들기 위한 첫시작 Render Tree 순서 이해 하기

  • 쇼핑 목록 앱

    배운 개념들을 활용하여 쇼핑 목록 앱만들기 문제해결 능력 기르기

  • Events

    이벤트 종류와 어떻게 처리 하는것이 좋은지 피해야 하는 방식과 좋은 방식을 알기

  • 게임 만들기

    게임을 만들면서 문제 해결 능력 기르기 리팩토링을 통한 좋은 코딩 방법 획득

  • 이벤트 루프

    동적인 웹앱을 만들때 꼭 알아야 할 개념 추후 다른 프레임워크를 써도 필수 개념

  • 자신감 향상

    브라우저와 자바스크립트에 대한 자신감 향상 프론트엔드 개발자로 필수 지식 완성

내가 들어야 할까?

수업에 적합한지 확인해 보세요

  • HTML, CSS는 간단하게 알고 있다.
  • 순수 자바스크립트 문법은 어느정도 알고 있다.
  • DOM이 뭔지도 모르고, 또는 들어 봤는데 잘 모르겠다.
  • 내가 만든 페이지가 어떻게 브라우저에서 보여지고 더 깊이 있게 공부해보고 싶다.
  • 리액트, Vue와 같은 프레임워크 사용전에 순수자바스크립트 졸업할거다!
  • 11개

    챕터

  • 472분+

    동영상

  • 8시간+

    분량 강의

강의 커리큘럼

아래 커리큘럼과 미리보기를 보시고 신중하게 결정해 주세요

  1. 1.1 강의 소개
    05:57
  2. 1.2 개발자 실력 향상을 위한 공부법
    06:24
  3. 1.3 시작전 보면 좋은 영상들
  4. 1.4 슬랙 가입하기 (중요!)
  5. 1.5 저작권 관련 안내사항 (중요!)
  6. 1.6 🚨 토론창 이용 공지사항 (꼭 읽어보고 토론창 이용하세요)
  7. 1.7 수강생 작품들 구경하세요 ✨
  1. 3.1 실습4: 좌표 찾아 007 ❓
    01:09
  2. 3.2 실습4: 좌표 찾아 007: 프로젝트 파일 다운로드 (이미지 포함)
  3. 3.3 실습4: 좌표 찾아 007 💡
    13:25
  4. 3.4 실습5: 토끼를 찾아라 ❓
    00:38
  5. 3.5. 실습5: 토끼를 찾아라: 프로젝트 파일 다운로드 (이미지 포함)
  6. 3.6 실습5: 토끼를 찾아라 💡
    08:19
  1. 5.1 실습7. 쇼핑 목록앱 만들기 ❓
    02:28
  2. 5.2 실습7. HTML 마크업
    06:59
  3. 5.3 실습7. CSS 스타일링 (유용한 사이트 두개 🔖)
    13:30
  4. 5.4 실습7. 자바스크립트로 동적으로 🕹
    17:08
  5. 5.5 실습7. 디버깅 하는 법 (주석 작성 시 유의사항)
    07:41
  1. 8.1 실전 10. 우리가 만들 게임 소개
    04:31
  2. 8.2 시작 프로젝트 다운로드: 여기부터 시작하세요 🙌
  3. 8.3 게임 HTML 마크업 하기 ❓
    02:09
  4. 8.4 게임 HTML 마크업 하기 💡
    03:59
  5. 8.5 게임 CSS 스타일링 하기 ❓
    00:27
  6. 8.6 게임 CSS 스타일링 하기 💡
    14:32
  7. 8.7 게임 필드 만들기 (당근과 벌레 랜덤 배치)❓
    01:31
  8. 8.8 게임 필드 만들기 (당근과 벌레 랜덤 배치) 💡
    13:38
  9. 8.9 게임 시작 하기 ❓
    00:50
  10. 8.10 게임 시작 하기 💡
    07:41
  11. 8.11 게임 타이머 시작하기 ❓
    00:47
  12. 8.12 게임 타이머 시작하기 💡
    06:15
  13. 8.13 게임 정지하기 ❓
    00:38
  14. 8.14 게임 정지하기 💡
    04:11
  15. 8.15 게임 마무리 하기 ❓
    00:45
  16. 8.16 게임 마무리 하기 💡
    11:51
  17. 8.17 재밌는 사운드 추가 📢
    07:32
  18. 8.18 최종 마무리 🎉
    02:59
  19. 작은 부탁 💕
  1. 10.1 우리가 이번에 배우게 될 아이들
    03:31
  2. 10.2 프로세스와 쓰레드란? 개념정리
    05:14
  3. 10.3 자바스크립트 런타임 환경 (엔진 이해, 스택 개념 정리)
    09:55
  4. 10.4 브라우저 런타임 환경 이해 (대박 중요 또 중요 💵, 큐 개념정리 )
    07:10
  5. 10.5 드디어 전반적인 큰 그림 이해 ⭐️ (Microtask queue)
    12:37
  6. 10.6 데모. 나선임 반박하는 법
    04:02
  7. 10.7 데모: 후배에게 가르쳐 주기
    03:11
  8. 10.8 데모. 브라우저 죽이기
    02:27
  9. 10.9 데모. setTimeout의 비밀
    04:31
  10. 10.10 데모. Promise의 비밀
    04:36
  11. 10.11 데모. RAF의 비밀
    08:31

공식 수강 기간: 3주 + 추가 무료 복습 기간 제공!

프론트엔드 필수 브라우저 101

지금 엘리와 함께 시작하세요!

  • 엘리의 시그니처 강의

  • 평생 수강가능

  • Q&A 토론창 지원

  • 완강시 수료증 발급

  • 한국어 강의

  • 슬랙 커뮤니티 지원

여러분 미래에 투자하세요🎖

₩110,000

취소 및 환불정책 대해 알아보세요

강사 소개

  • 엘리 | 드림 코더

    엘리 | 드림 코더

    Full-Stack(+mobile) Engineer | Engineering Manager

    뛰어난 강의력! 강의 맛집!으로 인정받은 15만+ 구독자 '드림코딩' 유튜브 채널 운영자 엘리! 삼성전자 임베디드/안드로이드 연구원으로 4년 근무 후, 해외에서 10년+ 현업에서 일한 경험까지 겸비! 안드로이드, 아이폰, 백엔드, 프론트엔드 개발자로 일했으며, 테크리더부터 팀장, 그룹장(엔지니어링 매니저)까지 리더쉽 포지션에서도 활동했습니다.탄탄하게 쌓아온 실무 경험과 성장했던 비법까지 여러분께 모두 전수해 드리고 싶습니다! 진정한 개발자란 현재 가지고 있는 지식과 경험, 노하우에 만족하고 멈춰 있는 것이 아니라 끊임없이 배움을 추구하며 열정적으로 살아 가야 한다고 믿고 있습니다. 그 열정, 강의를 통해 나눠드리고 싶어요! 함께 달려봅시다! 🎖

    자주 묻는 질문들