강의

N
챌린지

멘토링

N
클립

커뮤니티

개발 · 프로그래밍

/

프론트엔드

AI시대의 웹개발 : 비동기 프로그래밍과 데이터 통신 최적화(프롱트 특강)

자바스크립트 개발자를 위한 비동기 프로그래밍 개념과 데이터통신 최적화 기법을 다룹니다.

(4.9) 수강평 9개

수강생 475명

  • 프롱트
비동기
프론트엔드
자바스크립트
javascript
frontendJavaScriptpromisefetch-apiasynchronous-programming

수강 후 이런걸 얻을 수 있어요

  • 동시성, 비동기 매커니즘

  • fetch API & 데이터통신 최적화

  • Debounce, Throttle, AbortController

  • Error handling, Cache & Retry전략

  • Stream & Web-Worker

  • AI 를 활용한 바이브코딩과 요구사항 만들기

🤖 AI시대의 웹개발자는 어떤 역량이 중요할까요?

  • 이 강의는 이런 고민에서 시작됐습니다.

  • AI시대에는 다양한 코딩지원도구의 활용도 필요하지만, 더불어 기초지식 역시 더욱더 필요합니다.

  • 프론트엔드, 자바스크립트 개발에서는 그부분중에 대표적인 것이 바로 비동기 프로그래밍입니다.


📟 요즘에, 비동기 프로그래밍이 과연 중요할까?

  • 다양한 AI API를 연결하고 통신하는 서비스들이 증가하고 있습니다.

  • AI 모델의 발전만큼 브라우저, 네트워크의 상황이 발전하지는 못하고 있어요.

  • 따라서 서비스의 변화에 맞춰 '최적화된 데이터통신' 기술이 앞으로 더 중요합니다.

  • 데이터 통신과정의 밑바탕에는 '비동기 프로그래밍'의 이해가 가장 중요하죠.


🧑🏻‍🏫 강의 콘텐츠는 어떤식으로 진행되나요?

  • 개념을 익히고 실제로 동작되는 방식을 볼 수 있어요.

  • 챕터별로 기본설명 - 데모 또는 짧은 미션 방식이며, 미션풀이를 포함합니다.

  • 모든 챕터는 독립적이며 따라서 필요한 부분을 중간부터 들어도 됩니다.


🙆🏻‍♂️ 본 강의를 성공적으로 나의 것으로 만들려면?

  • 크고 작은 미션을 스스로 이해/분석해서 설계하고, 코딩하면서 본인의 지식으로 습득하셔야 합니다.

  • 물론 AI를 활용한 학습도 병행해야 하죠.(모르는것, 배경지식 더 깊이 묻기)

  • 중간에 프로젝트 미션이 하나 있습니다. 이 과정이 없다면 본 강의는 별로 도움이 안될 수 있습니다.



🍦바닐라를 기본으로 다룹니다.

  • 바닐라 프론트엔드를 기본으로 다룹니다.

  • 간단한 React 예시코드가 나오는 예제도 포함되어 있습니다.


📚 다양한 주제의 특강을 포함하고 있어요.

  • 마지막 세션은 '특강' 입니다 ^^

  • 비동기 프로그래밍은 아니지만 유용하고 재밌는 내용을 꾸준히 업데이트 하려고 합니다.

  • 예) AI시대에 어떻게 개발자로 성장할지, 회사에서 안알려주는 회사생활 팁 등

  • 몇 달에 한번씩 추가/업데이트 예정이에요!

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • AI시대에도 꼭 필요한 비동기 개념과 효과적인 데이터통신 방법을 다루고 싶은 분

  • HTML,CSS, JavaScript 초급자

  • 비동기를 제대로 이해하고 프로젝트를 하고 싶은 프론트엔드 또는 자바스크립트 개발자

선수 지식,
필요할까요?

  • HTML 을 통한 간단한 구조화

  • CSS원리와 사용방법에 대한 이해

  • JavaScript 기본 문법과 함수활용

  • 기본적인 디버깅 방법

  • NPM 과 Node.js 에 대한 이해와 활용

  • React가 무엇인지 기초적인 문법에 대한 이해

안녕하세요
입니다.

475

명

수강생

9

개

수강평

4

개

답변

4.9

점

강의 평점

1

개

강의

TmaxSoft, NAVER, NHN NEXT, SK Planet 등에서 일했어요.

우아한테크캠프, NAVER 부스트캠프, 현대소프티어 부트캠프등의 웹프론트엔드 커리큘럼을 설계/진행했어요

'프롱트' 유튜브 웹개발 채널 운영 (https://www.youtube.com/@frongt)중입니다.

커리큘럼

전체

56개 ∙ (7시간 57분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

9개

4.9

9개의 수강평

  • yujin1.kim님의 프로필 이미지
    yujin1.kim

    수강평 6

    ∙

    평균 평점 4.7

    4

    100% 수강 후 작성

    • 관태님의 프로필 이미지
      관태

      수강평 5

      ∙

      평균 평점 5.0

      수정됨

      5

      100% 수강 후 작성

      정말 훌륭한 강의입니다. 각 섹션마다 알고 있다고 생각했던 개념들을 다시 돌아보면서 실제로는 제대로 이해하지 못했던 부분들이 많다는 걸 깨달았고 덕분에 한층 더 깊이 있게 배울 수 있었습니다. 특히 마지막 섹션에서는 AI 시대를 살아가는 주니어 개발자로서 어떤 관점과 태도를 가져야 하는지 많은 인사이트를 얻을 수 있었습니다. 다음 주제 강의가 언제 나올지는 모르겠지만 개인적으로 꼭 이어졌으면 하는 마음입니다.

      • 프롱트
        지식공유자

        강의를 만들면서 생각했던 의도를 잘 느껴주셔서 살짝 놀랐습니다. ^^; 수강 감사해요.

    • wonseok.chang님의 프로필 이미지
      wonseok.chang

      수강평 2

      ∙

      평균 평점 5.0

      5

      100% 수강 후 작성

      • 프롱트
        지식공유자

        수강&평 감사해요 💯

    • 김종원님의 프로필 이미지
      김종원

      수강평 1

      ∙

      평균 평점 5.0

      5

      30% 수강 후 작성

      • 프롱트
        지식공유자

        수강평 감사해요~!

    • nin2348님의 프로필 이미지
      nin2348

      수강평 1

      ∙

      평균 평점 5.0

      5

      30% 수강 후 작성

      • 프롱트
        지식공유자

        수강평 감사함다.

    ₩44,000

    비슷한 강의

    같은 분야의 다른 강의를 만나보세요!

    한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지Course Thumbnail

    한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

    이정환 Winterlood

    개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!

    Basic

    Basic

    JavaScript, React, Node.js

    한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지Course Thumbnail

    한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

    이정환 Winterlood

    Cursor AI로 만들면서 배우는 Web & JavascriptCourse Thumbnail

    Cursor AI로 만들면서 배우는 Web & Javascript

    주말코딩

    나만의 기술을 가지고 싶으신 분, 웹 개발을 차근차근 배워보고 싶으신 분에게 추천드립니다. 웹 브라우저와 언어의 역사부터 가르쳐드립니다.

    Beginner

    Beginner

    HTML/CSS, JavaScript, LLM

    Cursor AI로 만들면서 배우는 Web & JavascriptCourse Thumbnail

    Cursor AI로 만들면서 배우는 Web & Javascript

    주말코딩

    웹프로그래밍의 꽃! 자바스크립트 기초Course Thumbnail

    웹프로그래밍의 꽃! 자바스크립트 기초

    이지웹

    javascript를 통해 HTML의 요소를 선택하고 다양한 이벤트에 따라 요소의 스타일을 변경하거나 애니메이션 효과를 구현합니다. javascript의 기분문법에서 스타일 변경, 이벤트 설정 및 웹페이지 구현시 자주 사용되는 효과를 구현합니다.

    Basic

    Basic

    HTML/CSS, JavaScript, vanilla-javascript

    웹프로그래밍의 꽃! 자바스크립트 기초Course Thumbnail

    웹프로그래밍의 꽃! 자바스크립트 기초

    이지웹

    JavaScript 비동기 프로그래밍 완벽 가이드 - Promise, await, asyncCourse Thumbnail

    JavaScript 비동기 프로그래밍 완벽 가이드 - Promise, await, async

    드라진

    비동기 프로그래밍은 자바스크립트(JavaScript)의 핵심 개념입니다. 이 강의를 통해 비동기 프로그래밍을 완벽히 이해하고 사용할 수 있도록 도와줄 것입니다.

    Basic

    Basic

    JavaScript, Node.js, promise

    JavaScript 비동기 프로그래밍 완벽 가이드 - Promise, await, asyncCourse Thumbnail

    JavaScript 비동기 프로그래밍 완벽 가이드 - Promise, await, async

    드라진

    제대로 파는 자바스크립트(JavaScript) - by 얄코(Yalco)Course Thumbnail

    제대로 파는 자바스크립트(JavaScript) - by 얄코(Yalco)

    얄팍한 코딩사전

    코알못도 따라올 수 있는 친절한 강좌! 현업 개발자는 자바스크립트 박사로 들어주는 끝판왕 강좌!

    Basic

    Basic

    JavaScript

    제대로 파는 자바스크립트(JavaScript) - by 얄코(Yalco)Course Thumbnail

    제대로 파는 자바스크립트(JavaScript) - by 얄코(Yalco)

    얄팍한 코딩사전

    누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기Course Thumbnail

    누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기

    Neo

    누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기 Springboot 로 CRUD 서버를 개발하고 ReactNative로 나만의 게시판을 만들어보세요!

    Basic

    Basic

    JavaScript, React Native, Kotlin

    누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기Course Thumbnail

    누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기

    Neo

    copilot과 함께 파이썬 찍어먹기 (크롤링 , 데이터시각화 )Course Thumbnail

    copilot과 함께 파이썬 찍어먹기 (크롤링 , 데이터시각화 )

    개발크리에이터

    코파일럿 (copilot) 과 함께 개발에 입문을 해봐요. AI와 함께라면 초등학생도 따라할 수 있어요!

    Beginner

    Beginner

    인공지능(AI), Microsoft Copilot, Python

    copilot과 함께 파이썬 찍어먹기 (크롤링 , 데이터시각화 )Course Thumbnail

    copilot과 함께 파이썬 찍어먹기 (크롤링 , 데이터시각화 )

    개발크리에이터

    비동기 프로그래밍: Promise, async/await 끝장내기Course Thumbnail

    비동기 프로그래밍: Promise, async/await 끝장내기

    짐코딩

    이 강의는 자바스크립트 비동기 프로그래밍에서 Promise와 async/await의 개념과 작동 원리를 명확히 설명하며, 실무에서 비동기 처리를 능숙하게 다룰 수 있도록 돕습니다.

    Basic

    Basic

    promise, async-await, asynchronous-programming

    비동기 프로그래밍: Promise, async/await 끝장내기Course Thumbnail

    비동기 프로그래밍: Promise, async/await 끝장내기

    짐코딩

    자바스크립트 입문자를 위한 강의Course Thumbnail

    자바스크립트 입문자를 위한 강의

    JeongTaeHyun

    자바스크립트 입문을 하시고 싶으신가요? 그럼 저의 강의를 선택해 주세요.

    Basic

    Basic

    JavaScript

    자바스크립트 입문자를 위한 강의Course Thumbnail

    자바스크립트 입문자를 위한 강의

    JeongTaeHyun

    바이브 코딩 With Claude Code로 웹 서비스 만들기Course Thumbnail

    바이브 코딩 With Claude Code로 웹 서비스 만들기

    개발 까마귀

    현직 스타트업 CTO가 실제 서비스와 여러 외주를 통해서 얻은 바이브코딩 지식 전수해드립니다.

    Beginner

    Beginner

    HTML/CSS, JavaScript, Next.js

    바이브 코딩 With Claude Code로 웹 서비스 만들기Course Thumbnail

    바이브 코딩 With Claude Code로 웹 서비스 만들기

    개발 까마귀

    타입스크립트 입문 - 기초부터 실전까지Course Thumbnail

    타입스크립트 입문 - 기초부터 실전까지

    장기효(캡틴판교)

    타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관점에서 쉽고 재밌게 배워보겠습니다 😄

    Basic

    Basic

    TypeScript, ES6, JavaScript

    타입스크립트 입문 - 기초부터 실전까지Course Thumbnail

    타입스크립트 입문 - 기초부터 실전까지

    장기효(캡틴판교)

    비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지Course Thumbnail

    비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

    Jiwoon Jeong

    내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

    Basic

    Basic

    HTML/CSS, JavaScript, REST API

    비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지Course Thumbnail

    비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

    Jiwoon Jeong

    [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스Course Thumbnail

    [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

    코드캠프

    코딩과 사랑에 빠져버린 8년차 풀스택 개발자 Captain의 사심이 가득 담긴 커리큘럼이에요. 백엔드의 모든 것을 다 알려주고 싶은 Captain의 마음이 녹아있죠! 이 강의를 듣다보면 '이렇게까지 알려준다고?' 하는 생각을 떨칠 수 없을 거예요. 모두가 어려워하는 부분까지 꼭꼭 씹어 떠먹여주는 이 강의로 시작해 볼까요?

    Beginner

    Beginner

    NestJS, Node.js, JavaScript

    [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스Course Thumbnail

    [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

    코드캠프

    비전공자를 위한 진짜 입문 올인원 개발 부트캠프Course Thumbnail

    비전공자를 위한 진짜 입문 올인원 개발 부트캠프

    그랩

    왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

    Beginner

    Beginner

    JavaScript, React, Node.js

    비전공자를 위한 진짜 입문 올인원 개발 부트캠프Course Thumbnail

    비전공자를 위한 진짜 입문 올인원 개발 부트캠프

    그랩

    웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

    깡코딩

    웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

    Basic

    Basic

    인터랙티브 웹, JavaScript, HTML/CSS

    웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

    깡코딩

    클린업 JavaScript: 베이스 빌드업!Course Thumbnail

    클린업 JavaScript: 베이스 빌드업!

    김영보

    생각을 다룹니다. 자바스크립트 핵심과 근본을 논리적으로 정리할 수 있습니다. 자바스크립트 경험, 생각을 스스로 정리할 수 있습니다. 자바스크립트 기술 논리를 정립할 수 있습니다. 자바스크립트 전체를 보는 시야를 넓힐 수 있습니다. 자바스크립트 기술 면접 문제에 대비할 수 있습니다.

    Basic

    Basic

    JavaScript, 면접, 기술면접

    클린업 JavaScript: 베이스 빌드업!Course Thumbnail

    클린업 JavaScript: 베이스 빌드업!

    김영보

    Do it! Node.js 프로그래밍 입문Course Thumbnail

    Do it! Node.js 프로그래밍 입문

    이지스퍼블리싱

    Node.js+자바스크립트+익스프레스+몽고DB로 서버의 핵심을 향해 한눈팔지 않고 달린다!

    Basic

    Basic

    Node.js, JavaScript, Express

    Do it! Node.js 프로그래밍 입문Course Thumbnail

    Do it! Node.js 프로그래밍 입문

    이지스퍼블리싱

    웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)Course Thumbnail

    웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)

    코딩웍스(Coding Works)

    웹 퍼블리셔를 위한 JS 핵심이론 및 실전예제 교재 및 완성본은 PDF로 제작된 강의 교재입니다. 해당 교재는 웹 퍼블리셔가 꼭 알아야 하는 자바스크립트와 제이쿼리 기본기를 충실히 갖출 수 있는 역할을 합니다. 해당 교재 특징으로는 이론과 연결된 스몰미션(Small Mission)을 통해서 이론을 더욱 탄탄히 할 수 있습니다. 특히 배운 모든 이론을 활용한 실전 예제 역시 충실히 준비된 교재입니다. 해당 PDF 전체 페이지는 순수 자바스크립트(Vanlila JavaScript)와 제이쿼리(jQuery) 페이지 수는 320페이지 이상으로 코딩웍스가 쉽게 이해할 수 있도록 충분한 설명을 덧붙여 놓았습니다. 특히, 퍼블리셔가 웹사이트 제작을 위해 필수적인 제이쿼리 상호작용 실전 예제를 학습하실 수 있습니다.

    Basic

    Basic

    JavaScript, jQuery, HTML/CSS

    웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)Course Thumbnail

    웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)

    코딩웍스(Coding Works)

    모바일, 태블릿, pc 반응형 인스타그램 클론코딩Course Thumbnail

    모바일, 태블릿, pc 반응형 인스타그램 클론코딩

    더코딩클럽

    이 강의를 통해 수강생은 HTML, CSS, JS로 인스타그램과 비슷한 웹서비스를 만들 수있습니다. ( 프론트만 구현했습니다! 백엔드 서버 구축은 차후 강의 촬영 예정입니다.)

    Basic

    Basic

    HTML/CSS, JavaScript, 클론코딩

    모바일, 태블릿, pc 반응형 인스타그램 클론코딩Course Thumbnail

    모바일, 태블릿, pc 반응형 인스타그램 클론코딩

    더코딩클럽

    JavaScript 서버 프로그래밍 기초Course Thumbnail

    JavaScript 서버 프로그래밍 기초

    zdpk

    JavaScript 기반의 웹 프레임워크 Express.js를 사용하여 서버 코드를 작성해보며 기초적인 사용법 및 서버의 동작 원리를 이해합니다. 프론트엔드 역시 본질적으로는 서버가 필요하며, static serving, dynamic rendering 등의 다양한 기법이 생겨나는 과정을 공부하며 이해도를 높입니다.

    Beginner

    Beginner

    JavaScript

    JavaScript 서버 프로그래밍 기초Course Thumbnail

    JavaScript 서버 프로그래밍 기초

    zdpk