자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ส.ค. 2024
  • Jvascript를 HTML에 링크할때 효율적인 방법 async와 defer의 차이점을 살펴보고 앞으로 공부하기 위한 환경설정을 해보도록 할께요 :) 저는 새로운 언어를 배울때 (C, C++, C#, Java, Kotlin, Swift, Python, Go, Rust 등) 항상 제일 처음으로 "Hello World"를 출력한답니다. 처음으로 C 언어를 배울때 내가 작성한 메시지 "Hello World"가 컴퓨터 화면에 나오는 그 감격으로 어려운 개발 공부를 이겨내온거 같아요. 여러분도 좋은 감격으로 프로그래밍 언어 공부를 시작하셨으면 좋겠어요 🥰
    ___________________________
    🔥2022 새로운 자바스크립트 마스터리 (ES6+ 최신문법) 강의: academy.dream-...
    아카데미에서 조금더 체계적으로 배워보세요 ✨
    📒 강의 노트 & 자주 나오는 질문: github.com/dre...
    💡 풀스택 개발 로드맵 ⇢ academy.dream-...
    🚀 엘리와 더 체계적으로 배우고 싶다면 ⇢ 드림코딩 아카데미:
    academy.dream-c...
    .....................................................
    ☀️ 드림코딩 엘리
    모든 드림코더분들이 개발자로 성장해 나가고 꿈을 이루는 여정에 함께 할 채널입니다 :)
    ❝Don't forget to code your dream
    여러분들의 멋진 꿈을 코딩하세요 ⭐️
    .....................................................
    🌐 프론트엔드 개발자 되기 입문자편 영상 목록:
    • 프론트엔드 강의 - 프론트엔드 개발자 되...
    📒 자바스크립트 기초 강의 영상 목록:
    • 자바스크립트 기초 강의 (ES5+): 같...
    💻 개발자라면 누구나 알고 있으면 좋은 지식 💡
    • 개발자라면 누구나 알고 있으면 좋은 지식 💡
    💰 개발자 경력 관리 영상 목록:
    • 승승장구 커리어 관리 🚀
    📈 IT 트렌드
    • IT 트렌드 📈
    📷 개발자 브이로그
    • 개발자 브이로그 📷
    🤗 생산력 향상 팁
    • Tech & Tools ❤️
    .....................................................
    #자바스크립트#프론트엔드#백엔드

ความคิดเห็น • 1K

  • @woorimit
    @woorimit 4 ปีที่แล้ว +140

    돈 주고도 못볼 강의네요.. 정말 훌륭한 강의 올려주셔서 감사합니다😢

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +6

      우리밋님 항상 좋은 피드백 남겨 주셔서 감사해요 🙏🏼

    • @solkim262
      @solkim262 4 ปีที่แล้ว +3

      공감합니다! 최고에요 진짜👍🏻

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +5

      감동의 물결이 😭

    • @fishyou3567
      @fishyou3567 3 ปีที่แล้ว +2

      여기 돈으로도 살 수 없는 강의 추가요

    • @user-qi8jy3ht2h
      @user-qi8jy3ht2h 3 ปีที่แล้ว +1

      멋진 강의 감사합니다 ㅎㅎ

  • @nonamelee9933
    @nonamelee9933 4 ปีที่แล้ว +1

    나를 위한 2강 요약.
    ajax = 서버에서 데이터 가져오기
    html 상단부 적는 것 => !+엔터하면 쫙 적힘
    컨트롤+쉬프트+i -> 콘솔로그 확인가능
    공부할때 -> developer.mozilla.org 사이트 방문하기
    효율적인 코드 defer는 파싱(코드읽어내려가는 과정)중 동시에 다운(fetching)받아 실행(execute)해서 좋음.
    ex. (헤드안임)
    순수 자바스크립트로만 코딩시 'use strict'; 상단부에 적기
    엘리님 강의 너무 감사합니다!!!

  • @user-mc6dv5kf8v
    @user-mc6dv5kf8v 4 ปีที่แล้ว +53

    인간, 완벽한 코드 강의엿습니다.

  • @user-ic7nb9jn1g
    @user-ic7nb9jn1g 4 ปีที่แล้ว +50

    ㅠㅠ 너무 좋은 강의를 무료로 들을 수 있는 시대에 살고 있다니 ㅠㅠ 엘리님 좋은 강의 감사드립니다. 귀에 쏙쏙 들어와요.

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +8

      좋은 피드백 정말 감사합니다 🙌 자바스크립트 마지막까지 함께 해주실꺼죠? ❤️

    • @user-hp7uy1sn4v
      @user-hp7uy1sn4v 3 ปีที่แล้ว +2

      얘는 뭐임?

  • @jinlee5201
    @jinlee5201 4 ปีที่แล้ว +29

    엘리님의 명강의 노트 곁에 두고 본격적으로 시작합니다.
    'defer' 와 'use strict' 새롭게 배웠습니다. 정말 고맙습니다.

  • @frahakang6970
    @frahakang6970 4 ปีที่แล้ว +13

    현재 업무에서 사용하고 계시니 전문강사보다 최신의 정보를 실제업무에 쓰이는 위주로 알려주시는 것 같아 참 좋습니다.
    git에 관한 내용도 실무와 연관해서 알려주시면 유익할 것 같아요.
    강의 잘 들었습니다.

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +2

      꺄아 Git 다음에 기회 되면 다뤄볼께요 ❤️

  • @Thedezigner_
    @Thedezigner_ 4 ปีที่แล้ว +15

    돈내고도 듣기 힘든 명강의를 유튜브 무료로 듣네요

  • @professeo
    @professeo 4 ปีที่แล้ว +1

    암것도 모르고 리액트만 뛰어들었는데 다시 하나하나배우니 정리가 되는느낌이네요 ㅎㅎ감사합니당

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +1

      오늘 자주 뵈는거 같아요 :) 항상 코멘트 감사하다구 말씀 드리고 싶어요 ❤️

    • @professeo
      @professeo 4 ปีที่แล้ว

      @@dream-coding 저도 항상 감사합니다 🙇‍♂️

  • @ocoocososococosooooosoococoso
    @ocoocososococosooooosoococoso 4 ปีที่แล้ว +8

    아직 한국분들에게 생소한 자바스크립트를 이렇게 쉽고 섬세하게 배울수 있다는게 정말 감동이네요. 앞으로 이런 콘텐츠 많이 해주시면 너무 좋을 것같습니다.

  • @Nobuhiro15
    @Nobuhiro15 4 ปีที่แล้ว +2

    이번 강의도 너무 유익했습니다!!
    학원에서 배울 때 왜 이렇게 써야 하나요? 하면
    매번 대답은 그냥 그렇게 쓰는거다.
    외워야 하나요?라고 하면 그냥 알고있으면 된다...아무기억도 흔적도 남지 않았는데요...
    왜 인지도 알게 되고 쉽게 배워서 너무 유익한 시간이었습니다. 감사합니다!!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      왜 인지 알게 되셨다니 정말 다행이예요 🙌 이렇게 정성 가득한 코멘트 남겨 주셔서 정말 감사합니다 ❤️

  • @user-my7du4wl7m
    @user-my7du4wl7m 4 ปีที่แล้ว +5

    엘리님을 알게된 뒤론 엘리님의 영상만 기다린답니다!ㅎㅎ 자바스크립트 조금은 공부했어서 초반엔 대부분 아는 내용일거라고 생각했는데 첨부터 처음알게되는 내용이네요! 저렇게 그림으로 쉽게 설명해주셔서 이해가잘되는거같아요ㅋㅋ 역시 엘리님👍🏻 늘 도움주셔서 너무 감사합니다😊

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +1

      그릿님 :) 항상 무한 따뜻 코멘트 감사해요 🤗 조금이라도 배워가는 내용이 있다니 너무 다행이예요 ❤️
      앞으로 진행중에 부족한 부분이 있거나 더 필요한 부분은 언제든지 피드백 부탁드릴께요 🙏🏼

  • @jlee3680
    @jlee3680 4 ปีที่แล้ว +1

    8:32 async
    12:54 defer
    14:59 use strict
    좋은정보 감사합니다~!!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +1

      와 열심히 공부 하시구 정리까지 해주시다니 :) 실전에서 기다리고 있을께요 ❤️

  • @user-sn7nr8fw6j
    @user-sn7nr8fw6j 3 ปีที่แล้ว +5

    조금이 아닌 너무나 도움 되는 강의입니다ㅠㅠㅠ DOM같은 잘 모르는 개념이 있어 중간중간 찾아보며 들었더니 두시간동안 보게 됐는데, 아직도 완전 이해 못한 개념들이 많지만 엘리님 강의 열심히 듣다보면 발전해나가겠죠!!!

  • @yongTube857
    @yongTube857 4 ปีที่แล้ว

    목소리가 너무 공부하기 좋은 목소리고 영어도 쓰시는게 너무 세련된게 너무 잘 가르치십니다 멋지십니다. 감사합니다

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      좋은 칭찬 감사합니다 ❤️

  • @dream-coding
    @dream-coding  4 ปีที่แล้ว +84

    🔥2022년 새로운 자바스크립트 마스터리 (ES6+ 최신문법) 강의가 런칭 되었어요. 유튜브보다 체계적으로 꼼꼼하게 기본&고급 내용 전부 배워보고 싶으시다면 → academy.dream-coding.com/courses/javascript
    📒 강의 노트 & 자주 나오는 질문: github.com/dream-ellie/learn-javascript
    여러분~ 전 월요일에 무사히 발표를 잘 마쳤어요 :)
    Zoom + Snap Camera를 이용해서 중간중간에 얼굴을 바꿔가며 성대모사로 지루하지 않게 재밌게 발표를 끝마쳤답니다.
    발표후 많은 팀들이 회사의 중요한 전략에 대한 인식이 높아지고 그에 맞게 로드맵을 조금씩 변경하니 뿌듯하고
    성공적이였다고 말할 수 있겠네요 🤗 오늘은 본격적인 문법공부 전에 몸풀기 영상입니다.
    영상 보신후 원하시는거나, 부족한 부분이 있으면 꼭 피드백 남겨주세요 ❤️

    • @user-kd8hx3jk9p
      @user-kd8hx3jk9p 4 ปีที่แล้ว +1

      대충알고 썼었는데 이런 꿀팁들을 듣게 되서 너무좋아요!
      강의 내용의 질이 아주 좋은거 같아요!!!

  • @keodeuman
    @keodeuman 4 ปีที่แล้ว +1

    지금껏 퍼블리싱하면서 async와 defer 속성이 있다는 사실을 지금 알았습니다. 소오름~ 늘 올떄마다 새로운걸 하나씩은 알고 갑니다. 감사합니다.

  • @user-og7co5wg4b
    @user-og7co5wg4b 4 ปีที่แล้ว +4

    너무너무너무 좋은 강의 감사드립니다.
    새로운 것들을 많이 알아가게 되네요 ~
    다음 영상도 너무너무 기대됩니다 !!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      긍정적인 피드백 정말 감사드립니다 ❤️ 다음영상에서 뵐께요 :)

  • @user-iu9mp3qo5h
    @user-iu9mp3qo5h 3 ปีที่แล้ว +1

    HTML 강의 들은 후 JS로 넘어온 프론트엔드 개발자 취준생입니다. 3초의 시간이라도 생각할 수 있게 센스있는 편집에 인상 깊었습니다. 친절하고 이해하기 쉬운 표현으로 알려주셔서 소화하는데 어려움이 없었습니다. 감사합니다!

  • @user-ri5kf6xi5u
    @user-ri5kf6xi5u 4 ปีที่แล้ว +3

    좋은 강의 올려주셔서 감사합니다!! 공부를 하면서 기초가 부족하다고 엄청 느꼈는데 엘리님과 함께 공부해서 기초를 다시 차근차근 다져볼게요!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      민종님 화이팅입니다! 으쌰으쌰!

  • @user-ig6ym6ox3z
    @user-ig6ym6ox3z 4 ปีที่แล้ว +1

    정말 훌륭한 강의네요. 프론트엔드로 전향하려고 공부를 시작했는데 HTML에서 JS 연동 시 효과적으로 선언하는 방법과 JS 사용 시 더 효율적으로 사용하는 방법을 알려주는 강의는 이게 처음이네요. 이걸 무료로 알려주시다니 정말 감사합니다. 말씀하시는 것도 발음이 굉장히 좋으셔서 귀에 쏙쏙 들어와요. 현재까지 업로드 된 무료 강의와 추후 유료강의도 있다고 봤는데 기대가 됩니다. 말씀해주신 MDN 사이트와 병행해서 열심히 공부해야겠어요

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      윤경님 정성스러운 코멘트 남겨 주셔서 감사해요 ❤️
      우리 자주 뵈요 🙌

  • @kkangchicken
    @kkangchicken 4 ปีที่แล้ว +3

    최고입니다 진ㅉㅏㅠ

  • @jongyoungkim9877
    @jongyoungkim9877 4 ปีที่แล้ว +1

    지금까지 들은 강좌중 최고!입니다

  • @user-pf9gf5iy4y
    @user-pf9gf5iy4y 4 ปีที่แล้ว +3

    감사합니다ㅠㅠㅠㅠ

  • @where9810
    @where9810 4 ปีที่แล้ว +2

    이렇게 유튜브시대, 온라인 미디어 시대, 웹시대에서 의지만 있다면 배울수 있다는것이 정말 감사합니다.

  • @user-hr4ug8bm8i
    @user-hr4ug8bm8i 4 ปีที่แล้ว +4

    'use strict'; >> 엄한 선생님 같군요 ㅋㅋㅋ 감사합니다!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +2

      하하 그쵸? 어떤 구독자분이 면접에서 저걸 왜 써야 하는지 질문 들어왔대요 :)

  • @do4746
    @do4746 4 ปีที่แล้ว +1

    여기저기 많이 js를 많이 들으러 간것은 아니지만, 이렇게 디테일하고 깔끔하게 설명 잘해주시는 강의는 여기밖에없는듯 합니다. 감사해요~~~

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      옷 좋은 피드백 감사합니다 ❤️

  • @vocalyc
    @vocalyc 4 ปีที่แล้ว +1

    항상 굉장히 오래전에 만들어진 인터넷 강의들을 보다가 엘리님 강의나 콘텐츠들을 보면 축구 중계방송을 보는듯한?^^
    바로 현재의 이슈들을 접할수 있어서 너무 좋아요~~
    감사합니다.
    저는 현재 적지 않은 나이에 3개월전에 오스트리아에 와서 개발자가 되어보겠다고 공부중입니다.
    엘리님 영상들이 많이 도움이 되고 있어요~
    항상 감사합니다.~

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      우와 오스트리아! 저 할슈타트에서 먹었던 오븐에 구은 양파 파스타를 잊지 못하고 있어요 🤣
      너무 이쁘고 사랑스러운 나라라고 (그리고 맛있었던) 기억되고 있는데 그곳에 계시다니 ❤️
      좋은 피드백 남겨 주셔서 감사하구요~ 개발자의 꿈을 이루시길 응원할께요

  • @user-rq1rr4um9w
    @user-rq1rr4um9w 3 ปีที่แล้ว

    개발 전공으로 2년 넘게 공부하면서 여러 언어를 접해왔는데, 문법에만 매달리고 구글에 의존하다 이해가 안 돼서 문서를 찾아보고, 그 문서도 이해가 안 돼서 다른 문서나 영상을 찾다가 결국엔 지칠 때가 많았어요 ㅎ.ㅎ 기초가 탄탄하지 못해서라는 건 알고 있었지만 기초부터 다시 공부하자는 맘 먹기가 쉽지 않더라구요 ㅠㅡㅠ
    어쩌다 유튜브 알고리즘에 선생님 강의 1강이 떠서 보게 됐는데 너무너무 재밌고 이해가 쏙쏙 되는거에요!! 그것도 자바스크립트!! 초심으로 돌아가서 가벼운 마음으로 열심히 듣겠습니다 정말 진심 다해서 좋은 강의 감사드려요👀🔥❣️

  • @jonto102
    @jonto102 2 ปีที่แล้ว

    에러 코드를 해결하려고 이것 저것 찾아보다가 여기까지 왔네요 HTML보다 script가 먼저 읽히는 문제를 해결하는 방법을 찾고있었는데 동영상이 많인 도움이 되었습니다. 게다가 use strict 사용하는 것이 안전한 개발에 도움이 된다는 사실도 얻고 가니 덤을 하나 얻은 것 같이 기분도 좋네요. 좋은 영상 감사합니다 ^^

  • @manordinary2896
    @manordinary2896 3 ปีที่แล้ว +1

    귀에 속속 들어오네요! 양질의 강의를 올려주셔서 정말 감사합니다!!

  • @user-gt8pd1rr8l
    @user-gt8pd1rr8l 4 ปีที่แล้ว +2

    너무 좋습니다. 자바스크립트 정주행하고 유료강의도 듣겠습니다.

    • @postgres2981
      @postgres2981 3 ปีที่แล้ว +1

      아 유료 강의도 따로 운영하셨죠. 이 정도 퀼리티면 그 돈이 하나도 안 아깝겠습니다. 이 강의 시리즈로 이미 증명이 됐으니까요. 나중에 필요한 공부 중에 엘리님이 다루신게 있으면 꼭 엘리님 강의를 들어야겠습니다. 엘리님 강의가 정말 독보적인건 설명을 하면서 시청자가 궁금해하거나 두루뭉실하게 잡히는 부분들을 잘 캐치해서 설명해주신다는 겁니다. 정말... 이런 강의를 그동안 얼마나 원했는지..

  • @pungsan2490
    @pungsan2490 2 ปีที่แล้ว +1

    이런 양질의 강의가 무료라니. 이것은 무척 귀한. 😍

  • @BlackNoise-qu3tj
    @BlackNoise-qu3tj 4 ปีที่แล้ว +2

    이런 강좌 기다리고 있었어요. 앞으로 더 기대가 됩니다. 화이팅!!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      응원의 코멘트 감사합니다 🤗

  • @sso_sso__
    @sso_sso__ 2 ปีที่แล้ว +2

    주니어 3년차 개발자인데, 회사다니며 개발에 급급해 기본적인 지식이 부족해 엘리님의 강의를 들으며 제껄로 만들려고 하는데 너무 좋은 강의 해주셔서 진심으로 감사합니다. 열심히 배워 더 좋은 곳으로 취직하고 싶네요! 다음강의 들으러 가겠습니다

  • @bluevulpe
    @bluevulpe 3 ปีที่แล้ว

    현타오는 시점에 드림엘리언니를 만나서 행복한 주니어개발자는 오늘도 감사합니다🦊💙

  • @user-jv4im2tn2i
    @user-jv4im2tn2i 3 ปีที่แล้ว

    출첵합니다 자바스크립트를 배울 곳이 마땅치 않았는데 엘리님께 이렇게 질좋은 강의를 듣게 되어 영광입니다! 쭉 달리겟습니다

    • @dream-coding
      @dream-coding  3 ปีที่แล้ว

      와우 마지막 강의에서도 꼭 만나요 ☺️

  • @MrPpippi
    @MrPpippi 3 ปีที่แล้ว

    저는 이 Js 강의 지금 처음 시작하는데요, 전에 C 언어를 배울떄, hello World 를 출력하고 얼마나 놀라고 기뻤던 기억이 되살아나서, 가슴이 뿡뿡 뛰어 글을 먼저 남깁니다. 앞으로 진행될 모든 Curriculum 들 기대 됩니다. 감사합니다.

  • @user-yz3et6lx1t
    @user-yz3et6lx1t 3 ปีที่แล้ว

    주니어에 걸쳐있는 개발자로서 강의를 보면서 감탄하면서 봅니다 빈 구멍들을 쏙쏙 매워주는 강의들인 것 같습니다 항상 감사하며 좋아요 누르면서 보고있네요 ㅜㅜ 정말 감사합니다

  • @user-hj9zl1xj3j
    @user-hj9zl1xj3j 4 ปีที่แล้ว +1

    asyn 와 defer을 몰랐을 때, 항상 body 밑 부분에 넣어주는 것이 효과적이라고 생각했는데 아니라는 것을 알게 되었어요! 다른 사람들 코드를 보면서 왜 head 쪽에 작성해줘야 하는지 의문이 있었는데 한번에 해결되었습니다. 좋은 강의 감사합니다!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      코멘트 감사합니다 ❤️

  • @dabeen93
    @dabeen93 3 ปีที่แล้ว +1

    초보자도 쉽게 이해할 수 있게 강의 만들어주셔서 감사합니다.
    밑에분 댓글처럼 script는 보통 head가 아닌 body태그 끝나기 바로 전에 쓰는것을 추천하길래 그렇게만 알고 쓰고 있었는데
    defer가 제일 좋은 방법이었네요 ㅠㅠ 왜 이걸 써야하는지도 자세히알려주시고..역시 최고입니다.

  • @PAI314sgm
    @PAI314sgm 2 ปีที่แล้ว +1

    시작할땐 10시였는데....벌써 12시네...
    밥먹으러 가야지~(시간 진짜 빠르게 가네 ㅋㅋㅋㅋ)

  • @younggiltak7719
    @younggiltak7719 4 ปีที่แล้ว +1

    채널 발견 한 후 부터, 매일 자기 전 혹은 식사할 때 틈나는대로 보고있는데, 강의력도 너무 좋으시고 몰입이 잘 되는 거 같아요. 아무래도 자바스크립트 배우려고 벼르고 있었는데, 학교 공부하다가 쉬고 싶을떄 엘리님 강의보면서 틈틈히 자바스크립트도 배우려고 합니다 :)) 영상 감사합니다 ~

  • @hannah_4281
    @hannah_4281 4 ปีที่แล้ว +1

    자바스크립트의 큰 그림을 못 보고 나무만 보면서 메소드 외우기 급급했는데..ㅎㅎㅎ 엘리님 강의는 전체적으로 지금 배우는 부분이 어디쯤에 위치하고 왜 배워야 하는지 정말 잘 알려줘서 좋네요 ㅠㅠ 자바스크립트 다시 새롭게 배워가는 기분이에요. 정말 감사합니다!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      좋은 피드백 감사합니다 ❤️

  • @jh_LiaLi
    @jh_LiaLi 4 ปีที่แล้ว +1

    nodejs 와 react를 javascript의 기초도 없이 실전으로 배웠는데 한계를 느꼈습니다. 처음부터 javascript를 다시 공부할 생각을 하게 되어서 엘리님 강의를 듣고 희망을 찾은 듯 하네요. 감사합니다

  • @wishdevs
    @wishdevs 4 ปีที่แล้ว +2

    너무 좋아요!!! 많이많이 공유할께요!! 감사합니다

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      공유해주신다니 ❤️❤️

  • @wwoojin
    @wwoojin 4 ปีที่แล้ว +1

    드디어 기다리던 자바스크립트 강의가 시작이네요! 이제 그동안 헷갈리던 자바스크립트를 엘리님 강의 보면서 정리할 수 있겠어요 ㅎㅎ 항상 영상 감사드립니다!!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      우진님 항상 코멘트 감사드려요 🙌

  • @qks7412
    @qks7412 2 ปีที่แล้ว

    명강의입니다 지루하지 않고 귀에 쏙쏙 들어와요. 좋은 영상 올려 주셔서 감사합니다.

  • @user-xd4xu7sl2x
    @user-xd4xu7sl2x 4 ปีที่แล้ว +2

    엘리님 정말 감사합니다! 😂 앞으로의 js영상이 너무 기대 되네요. 제가 지금 C와 java나 간단한 html,css만 알았지 웹이나 js는 무지 그 자체였는데 요새 공부하는 중에 드림코딩 덕에 좋은방향으로 공부하는 것 같아요 ㅎㅎ 전 w3school를 주로 참고하고 있었는데 mdn으로 공부해야 겠어요. script asyn, defer에 대해서도 잘 알게 됐어요 👍👍👍👍👍

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      드림코딩 덕에 좋은 방향으로 공부 하신다니 정말 감사합니다 ❤️ MDN으로 공부 해보시면 개념이 훨씬 정리가 잘된답니다. 도움이 되었다고 자세한 사항까지 요목조목 집어서 피드백 주셔서 정말 감사해요 🙌

  • @user-ch8qm9vk7r
    @user-ch8qm9vk7r 4 ปีที่แล้ว +2

    ㅠㅠ 진짜 좋은 선생님이십니다. 지금 자바스크립트 배우기 시작했는데 너무 감사해요. 더운데 시원한 여름되세요 ! 💙

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      감사합니다 ❤️ 시드니는 이제 겨울이라서 너무 추워요 ❄️ ㅋㅋㅋㅋ

  • @bbuyooo
    @bbuyooo 4 ปีที่แล้ว +2

    자바 1년반 스프링 반년하면서 JS깔짝이다가 왔습니다 깊이가 다른 강의에 매번 감탄하게 되네요 정말 감사합니다 선생님..!

  • @user-rw2bw5gp2i
    @user-rw2bw5gp2i 3 ปีที่แล้ว +1

    정말 책에서는 얻을 수 없는 꿀이 한 가득한 코드 강의입니다 ㅠㅠ

  • @solkim262
    @solkim262 4 ปีที่แล้ว +1

    출첵합니다🥰 앞으로 강의 기대할게요!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      출책 감사합니다 🤗 코멘트 정말 감사드려요~ 하하 아까 무한 동의 코멘트도요!ㅋㅋ

  • @user-yb2yo1cc1s
    @user-yb2yo1cc1s 4 ปีที่แล้ว +1

    유튜브에서 본 프론트엔드 강의 중에 가장 도움되는 것 같아요! 강의 많이 많이 올려주세요😍

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      가장 도움이 된다니 정말 좋은 피드백 감사드려요 🙌 많이 많이 올릴 수 있게 노력해볼께요!ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

  • @sungheemoon5843
    @sungheemoon5843 3 ปีที่แล้ว

    졸면서 들어도 뭔 말인지 알아 듣고 이해 될만큼 강의내용이 매우 좋습니다.

  • @kizueiydypquioe432
    @kizueiydypquioe432 4 ปีที่แล้ว +2

    개발유튜버중에서 가장 세련되신거 같에요 ㄷㄷ

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +1

      좋은 칭찬 감사합니다 🙌 어제 라이브 함께 해주셔서 정말 감사했어요 🤗

  • @user-mv8yf5ju6g
    @user-mv8yf5ju6g ปีที่แล้ว +1

    현직 프론트엔트 개발자고 이직 준비 중인데 엘리님 강의 들으면서 기초부터 탄탄히 정리하면서 공부하고있어요ㅜㅜ 너무 유익합니다 정말!! 감사합니다ㅎㅎ

  • @neighbor_lucy
    @neighbor_lucy 4 ปีที่แล้ว +1

    감사하다는 말밖엔 할말이 없는것같아요. 정말 감사합니다

  • @dh1219
    @dh1219 4 ปีที่แล้ว +1

    꼼꼼하게 알려주는 영상 너무좋아요💕💕길면길수록 행복합니다!!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +1

      길면 길수록 행복하다니 ❤️ 감사해요 현지님 하하

  • @ranja5759
    @ranja5759 4 ปีที่แล้ว +1

    엘과장님.. 너무 재밌습니다. 지금까지 받아쓰기하듯이 공부하며 유투브를 활용했었는데 혼자서 공부할 수 있는 좋은 방향도 제시해주시고 ㅎㅎ 감사합니다.

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      MDN 사이트 너무 좋답니다~ 심심할때마다 읽어보면 너무 좋아요.
      아니면 필요할때마다 MDN에서 검색하셔도 좋구요 ❤️
      코멘트 남겨 주셔서 정말 감사합니다 🙏🏼

  • @naiza2454
    @naiza2454 3 ปีที่แล้ว +2

    와..이렇게 쉽게 원리와 역사까지 섞어서 설명해주셔서 감사해요! 군더더기도 없고 완벽해요

  • @킹유린
    @킹유린 2 ปีที่แล้ว

    자바스크립트 입문자입니다.
    무조건 body 맨 마지막에 script를 써왔는데 async, defer 이러한 것들을 알게 되어서 너무나도 좋은 영상입니다. 감사합니다 😁

  • @ialwayshereforjay
    @ialwayshereforjay 3 ปีที่แล้ว

    진심으로.... 그 어떤 한글번역 책이나 유명사이트의 강의들보다 트렌디하고 논리적이고 실무에 가까운 강의입니다ㅠㅠ 늦게 발견한만큼 열심히 정주행중입니다. 이직에 정말 큰 도움이 될 것 같습니다. 감사합니다♥

    • @dream-coding
      @dream-coding  3 ปีที่แล้ว

      감사합니다 😊 실무에 가깝다라는 칭찬이 제일 좋네요 ❤️

  • @DPJSJS
    @DPJSJS 2 ปีที่แล้ว

    숲을 보시는 분에게 배우니 이해가 정말 깊게 되네요! 감사합니다

  • @user-le2wo6th4v
    @user-le2wo6th4v 9 หลายเดือนก่อน

    출석체크 합니다~^^ 남은 강의도 전부 들으면서 공부하려고 해요! 너무 좋은 강의 감사드려요!!

  • @michaeljjeong
    @michaeljjeong 4 ปีที่แล้ว +1

    Async defer부터 가르치는 강의는 첨봤네요. 제가 봤던 강의중에 젤 좋았던 강의였습니다 ㅎ

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      좋았다니 감사합니다 ❤️

  • @widestar8848
    @widestar8848 8 หลายเดือนก่อน

    감사합니다. 열심히 따라가서 학교 프로젝트에 사용해 보겠습니다.

  • @marcellinusst.6951
    @marcellinusst.6951 3 ปีที่แล้ว

    역시 사람은 간사하고 어리석어서 털려봐야 필요성을 느낍니다.
    이 강의 분명 잘 들어놓고 까먹고 그냥 head에 script만 생짜로 사용하고 지냈습니다. null 에러떠서 코드 확인해봤는데 아무리 파봐도 오타, 문법오류, 코드오류 없어서 뭐지 뭐지 하다가 갑자기 떠올라서 script문을 body 맨 뒤로 넣었더니 해결이 되네요ㅎㅎ 태그 쿼리를 하는데 body 읽기도 전에 js를 돌렸으니 작동이 될 리가... 이제 한번 당해봤으니 defer 잘 챙겨넣겠죠ㅠㅠ
    역시 프로그래밍은 한 번 고생해서 그 필요성을 느껴봐야 잘 배우나봅니다. 그래서 먼저 뛰어들기부터 하라고 많은 현직자들이 조언해주는 것 같기도 하구요ㅎㅎ 잘 복습해갑니다.

  • @user-hs1parkmagic
    @user-hs1parkmagic 3 ปีที่แล้ว

    들어본강의중에 현업에 계셔서 그런지 가장유연하신거 같고
    책에만 있는것이 아닌걸 알려줘서 더 좋은거 같아요~~

    • @dream-coding
      @dream-coding  3 ปีที่แล้ว

      좋게 봐주셔서 감사합니다 🙆‍♀️

  • @JMin54
    @JMin54 4 ปีที่แล้ว +1

    이번에도 좋은 강의 감사드립니다! 강의와 응원 덕분에 다음 강의도 열심히 듣고 공부하겠습니다^_^

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      아하! 자바스크립트 공부 하시는군요 :) 실전편에서 뵐께요 ❤️ 화이팅!

  • @TEST44403
    @TEST44403 4 ปีที่แล้ว +1

    우와.. 이분 강의 퀄리티 장난아니네..
    지금까지 모든 강의중 단연 최고입니다. 다음 강의 기대할게용!!!

  • @bugeonkim4726
    @bugeonkim4726 4 ปีที่แล้ว +1

    저한테 딱 필요한 강의네요.. 보통 다른 글을 보고 따라하면 이건 왜 하는건지 궁금했는데, 세세하게 설명해주셔서 '아~' 이해하면서 듣기 너무 좋았습니다. 강의를 듣는게 아닌 한편의 문학을 읽는 기분이었어요 ㅋㅋㅋ 감사합니다! 남은 강의도 꾸준히 볼게요

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      보시는 영상마다 이렇게 코멘트를 달아 주시다니 ❤️

  • @user-eh5xe5gf3n
    @user-eh5xe5gf3n 4 ปีที่แล้ว +1

    엘리쌤이신가요 이제?! 앞으로 영상 정말 기대 되네용 엘리님의 밝은 에너지와 좋은 목소리, 전달력 너무 좋습니다! 앞으로 엘리님만의 멋진 강좌영상 잘 부탁드려요~!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      하하 쌤인가요? 🤗 너무 좋은 긍정의 피드백 정말 감사합니다 ❤️
      코멘트 정말 감사드려요~ 갑자기 마음이 따뜻해지네요 🙌

  • @user-kt5mu6by8y
    @user-kt5mu6by8y 4 ปีที่แล้ว +1

    엘리님 드림코딩의 강의를 다 샀지만 아직 보지 못했어요 ㅠㅠ.(아주 조금밖에 못 봤답니다 ㅠㅠ..)
    저는 기본을 확실히 하는 걸 아주 중요하게 생각하는 사람인데 아주 기본적인 개념도 없이 시작했어서 조금 해맸지만
    혼자서 그리고 다른 컨텐츠들을 통해 한 달 정도 기본 내용(html, css, JavaScript)을 공부하고 활용해 보는 시간을 가졌어요!
    이제는 드디어 엘리님의 자바스크립트 기초강의를 들을 시간이네요!!❤🙌
    엘리님의 이해하기 쉽게 꼼꼼하고 자세한 설명, 헷갈릴만한 포인트를 정확히 짚어주는 센스, 도움이 될만한 레퍼런스들을 알려주시고, 아주 기초적인 내용까지 빼먹지 않고 설명해주시는 것을 보고 엘리님의 강의를 사지 않을 수 없었어요 하하🙌
    이 기초강의를 끝내면 포트폴리오와 101강의를 들으러 갈 거예요. 빨리 보고싶네요 엘리님 팬이 된 것 같아요! 감사합니다!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      어머 이런 세심하고 좋은 코멘트 정말 감사합니다 ❤️
      우리 곧 아카데미 강의에서도 만나요 :)

  • @HK-qr2fu
    @HK-qr2fu 4 ปีที่แล้ว

    초보자에게,
    이렇게 전문적으로 보이는 내용을(?)
    이렇게 쉽게 알려주셔서 감사합니다.
    그동안 js를 html에 넣는 각각의 다양한 방법을 들어본 적은 있어도 정확히 왜 defer가 가장 나은지를 몰랐는데, 이제야 이해가 되네요. 정말 정통으로 배우는 느낌이에요..! 정통으로 배우는데도 어렵지가 않아.. 유치원생 대하듯 너무나도 친절하고 자상한 강의... 이렇게 쉽게 배워도 되나 싶을 정도예요..!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +1

      배보다 배꼽이큰 것 같은 이런 좋은 피드백 감사합니다 ♥️

  • @user-hg8lw3uo8f
    @user-hg8lw3uo8f 4 ปีที่แล้ว +1

    과제하기 싫을때마다 영상 정주행하러 오는 것 같아요 재밌게 강의해주셔서 너무 감사해요 너무 친절하게 나긋나긋하게 설명해주셔서 저 혼자 막 내적친분 쌓고있어요 ㅋㅋㅋ 오늘도 잘들었습니당♡♡

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      저두 구독자분들과 소통하면서 내적친분 쌓고 있어요ㅋㅋㅋㅋㅋ
      자주 코멘트 주고 받는 분들은 특히 왠지 알고 지내는 느낌 🤣 항상 코멘트 감사드려요~
      과제도 화이팅!

  • @michaeloh3728
    @michaeloh3728 4 ปีที่แล้ว +1

    웹 부라우저에서 html/ script를 실행하는 것에 대한 차이를 지금 알았네요~ async/defer에 차이에 대해서도 이해하게 되었구요~ ㅎㅎ
    엘리 들을 때마다 새로운 것을 배울 것 같다는 기대가 있는 영상이에요 ㅎㅎ

  • @jadekim762
    @jadekim762 4 ปีที่แล้ว +1

    최근 할일이 많아서 라이브도 못보고 이제서야 기다리던 자바스크립트 영상 보네요 ㅠㅠ
    이번에도 소중한 영상 감사합니다 엘리님!!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      많이 바쁘신가봐요 그래도 이렇게 오셔서 공부하시니 정말 대단하십니다 🙌
      라이브는 못보신 분들을 위해 이메일 주시면 링크를 보내드리고 있어요~

  • @namu_13
    @namu_13 2 ปีที่แล้ว

    *1. 를 안에 넣을 경우*
    ㄴjs 다운, 적용 후 html요소가 만들어지기 때문에 사용자가 웹페이지를 보는 속도가 느림
    *2. 를 안에 넣을 경우*
    ㄴhtml 요소가 만들어지고 난 후 js를 다운 적용 하기 때문에 웹페이지를 빠르게 보이지만 페이지가 js에 의존적이면 유저가 빠르게 정상적인 페이지를 보기는 어려울 수 있음
    *3. *
    ㄴhtml 요소가 만들어질때 병렬적으로 다운받을 수 있다는 장점이 있지만, html 요소가 모두 만들어지기 전에 js가 적용되기 때문에 오작동 가능성 있음
    *4. *
    ㄴhtml 요소가 만들어질때 병렬적으로 다운받을 수 있고, 적용은 html이 모두 만들어 진 후 하므로 최적의 방법
    *'use strict'*
    ㄴ오류를 내어 비상식적인 프로그래밍을 막아줌

  • @insangcho8145
    @insangcho8145 4 ปีที่แล้ว +1

    완벽해서 다음 강의 기다리기가 어려울 정도에요 ㅠㅠ 발표 마치신거 축하드려요!!! 성대모사 까지 하시는 여유! 멋있으세요 ㅎㅎ

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      축하해주셔서 정말 감사합니다 🙌 그리고 이렇게 코멘트 남겨 주셔서 정말 감사해요 🙏🏼

  • @curlymoly
    @curlymoly 4 ปีที่แล้ว +1

    엘리님 강의를 들을 때 마다 꼭 엘리님 밑에서 배우면서 일하고싶다는 생각이들어요!!! 엘리님과 함께하는 그날까지 열심히 공부해볼게요! 명강의 감사드려요 ㅜㅜㅜㅜ

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      저 현업에서 기다리고 있겠습니다 ❤️

  • @user-nt5dq2lw4q
    @user-nt5dq2lw4q 4 ปีที่แล้ว +1

    안녕하세요. 자바스크립트 베이직영상 많이 보는게 취미인 수학책으로 말하자면 집합쪽만 책장이 너덜너덜한 그런 사람입니다. 정말 다양한분들의 기초강의를 유튜브나 인프런 등에서 봐왔는데 스크립트 삽입하는 부분에서 async랑 defer 설명하시는분은 처음봤습니다. 정주행하겠습니다. 화이팅!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      async랑 defer 설명으로 레벨링님의 점수를 제가 딴건가요? 하하
      넣어서 설명하길 정말 잘했네요 🙌

  • @user-kv7jo4id2f
    @user-kv7jo4id2f 4 ปีที่แล้ว +1

    저도 코딩 배워 볼려고 하는데,, 엘리님 영상보고,, 순간 '이것보다 더 좋을 수 없다'는 생각이 떠 오르네요..감사합니다..

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      아 정말요~? 꼭 끝까지 함께해 주실꺼죠? ❤️

  • @user-hp1qf9ei5h
    @user-hp1qf9ei5h 4 ปีที่แล้ว +2

    자바스크립트 이제 막 시작하는 단계인데 너무 좋습니다 출첵이요!

  • @user-bf4bb2tr1f
    @user-bf4bb2tr1f 4 ปีที่แล้ว +1

    원래 백엔드개발자 목표로 공부하고 취업했는데 한국 특성상 부득이(?)하게 풀스택으로 하게 되어서 어려움을 많리 격게 되었는데 엘리님을 만나서 다행인것 같습니다. 회사에서vue를 사용하는데 아직 기본 js상식이 모자란것 같아서 도움이 많이 되네요.. 감사합니다.^^

  • @user-jn4jp9un2z
    @user-jn4jp9un2z 4 ปีที่แล้ว

    코딩을 공부하면서 선생님 강의를 접하게 되었읍니다. 정말 감사하게 잘 듣고 있읍니다.

  • @user-dd9od1ec8q
    @user-dd9od1ec8q 3 ปีที่แล้ว

    정말 훌륭하고 실속있는 강의였습니다. 한국에서 Java, Javascript 를 사용하여 4년차 개발을 하고있지만, 매번 반복되는 CC CV의 개발스토리에 지쳐 한발자국 딛어보려고 하는 개발자 입니다. 어디서부터 무엇을 시작해야 할지 잘 모르겠지만, 영상 하나 하나 보면서 길을 찾아보도록 하겠습니다. 감사합니다.

  • @user-xf8wn1xn7f
    @user-xf8wn1xn7f 4 ปีที่แล้ว +1

    출첵 :) 얼른 js를 활용해서 여러가지 기능들을 구현해보고 싶어요

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      와우 의욕 200% 🙌 그 마음으로 끝까지 해주시구 꼭 실전편에서도 만나요 ❤️

  • @Denis-pt8zi
    @Denis-pt8zi 4 ปีที่แล้ว +1

    주로 SPA 프레임워크로 프로젝트 생성하고 필요한 라이브러리들은 module로 설치해서 html에서의 async와 defer의 차이점을 모르고 있었는데 덕분에 좋은 정보 얻어갑니다! 감사합니다.

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +1

      그쵸~ 현업에서 프레임워크랑 npm, yarn등을 이용하면 이렇게 직접 HTML추가할 일이 거의 없죠~ 하지만 이런 개념들이 나중에 모듈을 impoart할때 어떤 시점에서 import할지 생각하게 해주는 좋은 포인트인거 같아요 :)

  • @jooyeunlee7561
    @jooyeunlee7561 3 ปีที่แล้ว

    출첵합니다. 좋은 강의 감사합니다.

  • @user-mu4ri9fg9k
    @user-mu4ri9fg9k 4 ปีที่แล้ว +1

    앨리님 성공적인 발표 축하드립니당!
    오늘 강의도 너무 좋았고 앞으로 더욱 기대됩니다. ^.^
    의견을 말해달라고 하셔서 말씀드리자면, 유튜브나 인터넷에 자주 나오는 개념들을 모두 다루기 보다는 지금처럼 중요하고 큰 틀을 아우루는 개념들 나오는게 너무 좋고 재밌습니다. ㅎ.ㅎ
    바쁘신데 꾸준히 강의 올려주셔서 감사해요~ 참! 편집이 점점 좋아지는게 느껴져요! ㅋㅋㅋ 그럼 다음 강의 올라올 때 또 들어올게요~! 좋은 하루 보내세요!!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      이츠긋님 지금 한참 js 공부하신다고 바쁘시죠? 이렇게 영상도 봐주시고 코멘트도 감사해요~ 🙌
      그리고 의견 나눠 주셔서 정말 감사합니다 :) 제가 초보분들도 따라 오실 수 있고 + 아미 아시는 분들도 배우실 수 있게 중간 접점을 잘 찾아서 만들고 싶은데 어렵네요 😜
      이번엔 기본을 다루면서 중/고급 분들을 위한 최신 기술 및 tech talk을 함께 보는 영상도 생각중인데, please stay tune ❤️

  • @haoldcastle
    @haoldcastle 4 ปีที่แล้ว +1

    너무 유익했습니다 . defer 자주 애용해야겠어요 이번 강의도 감사합니다.

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +1

      자바스크립트 강의로 오셨군요 🎉

  • @jennym3186
    @jennym3186 4 ปีที่แล้ว +1

    출첵. 댓글을 정말 안쓰는데 ㅜㅜ너무 도움이됩니다 정말 감사해요. 엘리님 보고 정말 꿈을 끈기있게 나가게 됩니다!감사해요 :))

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      와 소중한 댓글 정말 감사합니다 ❤️

  • @charlesseo8843
    @charlesseo8843 4 ปีที่แล้ว +1

    강의가 자연스럽게 집중하게 되는 것 같습니다. 덕분에 좀 더 이해하는데 많은 도움이 될 것 같습니다. 마우스가 구독을 향해서 자동으로 이동하네요.

  • @user-it6nh7sv7o
    @user-it6nh7sv7o 4 ปีที่แล้ว +1

    3년차 웹개발자입니다.
    엘리님 강의 들으면서 여태까지 알지 못했던 혹은 알았지만 그냥 넘어갔던
    개발기술들을 알게 되어서 기쁨니다 ㅎㅎ 좋은강의 계속 부탁드립니다~!!
    (p.s 주변 사람들한테도 추천해서 구독자수 늘려드릴께요 !! )

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      홍보해 주신다니 ❤️ 3년차 개발하고 계신데 배워가는 내용이 있어서 정말 다행이예요. 더유익한 영상 만들어 보도록 할께요 🙌

  • @user-jg3xj5nl1t
    @user-jg3xj5nl1t 2 ปีที่แล้ว

    코딩 공부하려고 여러 강의들 보지만 엘리님 강의가 제일 좋습니다. 얼른 자바스크립트 다 듣고 다른 강의도 들어보고 싶네요

  • @user-yb3wo6gb1h
    @user-yb3wo6gb1h 4 ปีที่แล้ว

    원리까지 상세히 알려주시면서 응용력을 높일 수 있게 강의를 해주시니 자신감도 높아지고 마음이 든든해요! 열심히 배워서 질 좋은 깔끔한 코드를 짜보겠습니다~~!

  • @djm05190
    @djm05190 3 ปีที่แล้ว

    최고의 자바스크립트 강의..!!!

  • @NellaFantaJia
    @NellaFantaJia ปีที่แล้ว

    부트캠프 수강중인데 javascript 수업을 들어가면서 정말 이해가 잘안가고, 너무 특정 요소들만 알려줘서 따라가기 급급했는데 기초적인 내용부터 차근차근 알려주시니 더 이해가 되네요 ㅠㅠ 엘리님 덕분에 공부가 좀 더 수월해지고 있어요 감사합니다 💖

  • @deluxetaxi-dogikim
    @deluxetaxi-dogikim 2 ปีที่แล้ว

    1) hello world 화면에 찍기
    2) 자바스크립트에 필요한 환경설정(Preparation)
    3) javascript를 html에 포함할때 어떤방식으로 포함해야 효율적인지(async vs defer)
    console.log는 WebAPIs 종류중 하나이다.
    API : Application Programming Interface
    자바스크립트 언어자체에 포함된게 아니라 브라우저가 제공하는
    브라우저가 이해하는 함수들.
    nodejs 콘솔창, 브라우저 콘솔창에서 둘다 출력됨
    사용자가 html 파일 다운로드했을때
    1. head에 있을때 웹브라우저 실행순서
    parsing HTML -> 중간에 js파일을 다운 및 실행 (fetching js -> executing js) -> parsing Html(다시 파싱)
    단점은? 이렇게되면 js용량이 클경우 html 렌더링이 늦게되어 사용자가 홈페이지를 보기까지 많은시간이 소요된다.
    head에 script를 넣는건 좋지않음
    2. body 맨끝에 있을떄 웹브라우저 실행순서
    parsing HTML(page is ready) -> fetching js -> executing js)
    이미 js를 받기전에 페이지 준비가 완료됨
    단점은? js에 의존적인 웹페이지라면, 서버에 js를 요청하기까지 시간이 오래걸림
    즉, 사용자가 기다리는동안 동적인 컨텐츠들을 이용할수없다.
    3. head + async
    parsing html -> async(병렬, 비동기)로 js를 다운받으면서 parsing을 다시하다가 다운완료되면
    parsing멈추고 executing js 그리고 나머지 html을 parsing한다.
    장점은 body 맨끝에 두는거보다 병렬적으로 js를 다운받으며 parsing하므로
    다운받는시간을 절약할수있으나, 단점은 js가 html이 파싱이 되기전에 실행되므로
    만약, js에서 queryselector로 dom요소를 조작할시, 조작할려고하는 시점에
    html의 요소가 아직 정의되어있지 않을수있음. 따라서, html parsing을 좀더기다려야한다.
    4. head + defer
    parsing html -> fetching js -> parsing 끝까지 -> executing js
    defer : 파싱을 하는동안 head에 선언된 js파일을 다운받으면서 파싱을 끝까지 하고난 후,
    다운이 완료된 js파일을 실행해줌
    async : 비동기적 실행
    defer : 동기적 실행
    * use strict (엄격모드) // typescript는 필요없음
    문법 개선뿐만아니라, 자바스크립트 엔진이 효율적으로 더빠르게 자바스크립트를 분석해줘서
    실행하는데 좀 더 나은 성능개선을 기대할 수 있다.

  • @kshing44
    @kshing44 4 ปีที่แล้ว +1

    엘리님 좋은 강의
    잘 들었습니다!! 지루하지 않고 관심 가질 수 있었습니다!! 👍😊

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      감사합니다~ ❤️ 자바스크립트 끝까지 흥미를 잃지 않고 재밌게 보실 수 있었으면 좋겠어요 🙌