JavaScript 입문과 웹 UI개발
실제 웹 UI를 여러개 만들어보며 배워보는 JavaScript 기초 수업입니다.
문법만 쭉 나열하면서 가르치면 재미없어서 강의 끄고 유튜브 보러갈 것이 뻔하니
실무 예제 중심의 수업으로 재밌게 진행해보도록 합시다.
다른 강의들과 차이점을 자주 물어봐서 조금 적자면
일반 프론트엔드 강의들은 코딩 기술만 가르칩니다.
"빨리 멋진 포트폴리오 만들어줄테니 월 180받는 웹에이전시 취직해서 취업률 80% 통계에 기여하라" 이건데 단점이 뭐겠습니까.
배웠던 기술 그대로 복사하는 행위밖에 못합니다. 그건 개발자가 아니라 기술자임
새로운거 만들라고 시키면 "여기서 function 문법 쓰면 될까요?" 이런 이상한 질문을 하게 되며
응용능력도 없이 평생 자바스크립트 강의만 찾아다니게 되는 것임
수많은 JavaScript 책을 읽고 강의를 들어도 처음 보는 기능은 코드 한 줄 못짜는 이유는
문법을 대체 언제 어디서 써야할지도 모르고 그냥 코드만 그대로 따라쳤기 때문입니다.
그래서 코딩애플에선 기술을 혼자서도 구현해낼 수 있는 원리를 중점적으로 가르칩니다.
여기서 문법과 웹 동작 원리를 배워 혼자서도 이것저것 만들어낼 수 있는 진짜 개발자가 되어보십시오.
[권장대상]
- 웹개발자가 기본으로 갖춰야할 자바스크립트 지식이 필요하다
- 문법만 하는 것 보다 실제로 쓸모있는 UI를 만들어보며 배우고 싶다
- 어디서 코딩 배우긴 했는데 아직도 혼자 코드를 못짠다
- 변수, for, if, function, array, object 배워야한다
[필요한 사전지식]
HTML/CSS 기초 지식이 필요합니다.
(혹은 HTML/CSS 강의 기초모듈까지 수강완료하신 분)
[커리큘럼 요약]
자바스크립트 기초 문법 (변수, for, if, function, array, object)
모달창, 탭 등 기본 웹 UI 만드는 법
애니메이션
이메일 형식 검사와 간단한 정규식
생산성향상을 위한 jQuery 함수들
직접 만드는 캐러셀
form기능
Ajax로 서버와 통신하는법
슬라이드 터치 & 스와이프기능
타이머
로컬스토리지
클라이언트 사이드 렌더링
개발자가 코드 짜는 법
npm nodejs 등 요즘 웹개발은 왜 이렇게 하는가
[업데이트사항]
- 신버전으로 업데이트 완료
- dataset, 쇼핑몰 상품정렬, localStorage 등 강의 추가
- 웹개발 기능대회 문제 추가
커리큘럼
| Level 1 | |||
| 자바스크립트 기초강의인데 이걸 어디다 쓰냐면 | 무료 | 00:12:00 | |
| 동적 UI 만드는 스텝 (Alert 박스 만들기) | 무료 | 00:11:00 | |
| 자바스크립트 function 문법 사용법 | 무료 | 00:10:00 | |
| function의 파라미터 문법 | 무료 | 00:11:00 | |
| 자바스크립트 이벤트리스너 | 무료 | 00:13:00 | |
| 서브메뉴 만들어보기와 classList 다루기 | 무료 | 00:13:00 | |
| jQuery 사용법 간단정리 | 무료 | 00:11:00 | |
| 모달창만들기와 간단한 애니메이션 | 00:11:00 | ||
| 폼만들며 배워보는 if else | 00:12:00 | ||
| 공백검사 숙제와 else if 문법 | 00:12:00 | ||
| input, change 이벤트와 and, or 연산자 | 00:10:00 | ||
| if/else, function 실력향상 과제 | 00:05:00 | ||
| 변수문법과 Dark mode 버튼만들기 | 00:12:00 | ||
| 변수 심화학습시간 & 저번시간 숙제 | 00:11:00 | ||
| Level 2 | |||
| 변수, 사칙연산 실력향상 과제 | 00:05:00 | ||
| setTimeout 타이머주는 법 | 00:09:00 | ||
| 정규식으로 이메일형식 검증해보기 | 00:11:00 | ||
| 코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 | 00:11:00 | ||
| 코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 2 | 00:10:00 | ||
| 함수의 return 문법 & 소수 다루기 | 00:11:00 | ||
| 스크롤 이벤트로 만드는 재밌는 기능들 | 00:16:00 | ||
| 스크롤 이벤트 숙제 해설 & 페이지 스크롤 응용 | 00:10:00 | ||
| 탭기능 만들며 배우는 for 반복문 | 00:10:00 | ||
| 탭기능 만들며 배우는 for 반복문 2 | 00:12:00 | ||
| 이벤트 버블링과 이벤트관련 함수들 | 00:13:00 | ||
| 이벤트 버블링 응용과 dataset | 00:12:00 | ||
| 쓸만한 자바스크립트 라이브러리들 | 00:05:00 | ||
| Level 3 | |||
| Array 와 Object 자료형 | 00:13:00 | ||
| 약간 복잡하게 생긴 Array & Object | 00:10:00 | ||
| 데이터바인딩 숙제 & 문자중간에 변수넣는 법 | 00:11:00 | ||
| 재밌는거 하려고 배우는 Select 인풋 | 00:10:00 | ||
| Select 2 : 자바스크립트로 html 생성하는 법 | 00:10:00 | ||
| Select 3 : forEach, for in 반복문 | 00:11:00 | ||
| array, for 반복문 실력향상 과제 | 00:05:00 | ||
| Ajax 1 : 개념정리 | 00:14:00 | ||
| Ajax 2 : 상품 더보기 버튼 만들기 | 00:12:00 | ||
| array에 자주 쓰는 sort, map, filter 함수 | 00:16:00 | ||
| sort, map, filter 상품정렬기능 숙제 | 00:10:00 | ||
| DOM이라는 용어 개념정리 & load 이벤트 | 00:05:00 | ||
| 장바구니 기능과 localStorage | 00:15:00 | ||
| 장바구니 기능과 localStorage 숙제 | 00:11:00 | ||
| position : sticky 활용하기 | 00:08:00 | ||
| 스크롤 위치에 따라 변하는 애니메이션 | 00:16:00 | ||
| 캐러셀에 스와이프 기능 만들기 | 00:15:00 | ||
| 캐러셀에 스와이프 기능 만들기 숙제 & 터치이벤트 | 00:10:00 | ||
| 간혹 쓰는 Switch 문법 | 00:09:00 | ||
| (실전) 웹개발 기능대회 예제 | 00:10:00 | ||
| 웹개발 기능대회 예제 답안 | 00:10:00 | ||
| 모던 웹개발시 알아야할 배경지식 | 00:06:00 | ||
수강생 리뷰
관련강좌
도커 Docker & Container
웹서버를 만들든 파이썬으로 AI모델을 돌리든 뭘하든 도커와 컨테이너라는 용어를 자주 듣게 될텐데 왜냐면 이전과 다르게 프로그램을 컨테이너로 싸매서 배포 & 실행하는 경우가 많아졌기 때문입니다. …
신청하기50,000₩30,000₩
쉽게 배우는 Spring Boot & JPA
옆집 철수도 백엔드 개발자되는 시대라길래 6개월짜리 학원 며칠 다녀봤지만 막상 스프링 부트 배워보면 1. 어렵고 복잡함 2. 암기식임 3. 노잼 이런 이유 때문에 매년 …
신청하기180,000₩85,000₩
Next.js로 웹서비스 만들기
Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때문에 React, Vue만 사용해서 만든 …
신청하기160,000₩75,000₩
이 강의를 3년전에 알았더라면..
참좋았을텐데말이죠.
지금이라도 듣고 알 수 있어서 감사합니다.
성장하는 개발자로 갈 수 있는 사고력까지 함께 키워주는 강의는
이 강의가 유일하다고 느낍니다.
단순지식전달이 목표가 아닌점. 그리고 이걸 강의에 잘 녹여내신점.
핵심만 잘 전달해주시는 강사님의 역량까지 종합선물셋트군요.
듣는 내내 너무 재밌고 이해 쏙쏙
진짜 코딩애플쌤 강의 너무 웃겨서
취준생활 한줄기 낙이네요 ㅋㅋㅋㅋㅋ
강의력도 진짜 대박
이해 단번에 되고 응용력, 사고력 까지 길러주십니다
초보에게 아주 좋은 강의
혼자서 공부하느라 지금까지 강의를 결제하지 않았는데 큰맘 먹고 팩키지 결제하여 기초부터 다지고 있습니다.
어려운 용어로 몇 번이고 뒤로 눌러 다시 보고 인터넷으로 용어 찾아 보다가 시간 뺏기는 강의 보다는 심플하게 내용과 작동 방식 등을 먼저 몸에 익히는 강의가 아주 좋습니다.
헌데 HTML과 JavaScript 둘다 사용하게 되는 Canvas 도 업데이트 해주시면 좋겠습니다!!
1년 전에 들었어야 했는데...
우연히 유튜브보고 들어왔다가 들었는데,
1년전에 들었으면 좋았을걸 싶네요.
그동안 디자이너로서 책으로 혼자 하다가 포기하고,
국비수업 듣다가 기본을 안가르쳐 주니 그냥 복붙만 하고 있었는데.
여기 수업은 너무 쉽게 쏙쏙 들어오고 이제는 혼자 응용이 되네요.
가르치는데 타고 나신듯.
마지막과제까지 완강하고옴 내가 들은 자스강의중에 걍 이게짱임 저같은코딩허접은 이거들으셈
다른곳 강좌는 자바스크립트에 대한 이론 같이 구구절절한 설명 들어가고
그 다음에 활용을 보여주는데 이론 보다가 졸려서 어 잠깨야지 하고 딴짓하다가 시간 다가거나
따라치기에도 벅찬 분량의 강좌를 하는바람에 영타연습 실력을 크게 키워주는 반면에
여기는 이론같은거는 완전 스킵하고 짧게짧게 바로바로 쉽게 써먹을 수 있는 것들을 가르쳐주고
과제에서 응용력을 길러줘서 진짜 혼자서 고민하고 코딩하는 실력을 키워줌
특히 여기 강좌에서 감탄한 것은 반복문에 관한 부분임
지금까지 반복문을 쓰기 전에는 반복문 전체 동작을 두고서 어떻게 반복시키지 하고 고민했는데
여기서는 일단 만들고 싶은 기능 하나부터 완전히 구현해 놓고
그걸 반복시키면 된다고 가르쳐서 반복문도 너무 쉬워졌음
사랑해요. 형 정말로 저의 롤모델이에요.
정말 나만 아는 맛집 같은 존재.
혹시 형 결혼 생각있으면 연락해줘요.
자신감이 생깁니당
숙제 열심히 꼬박꼬박 다 하면서, 완강을 하였는데요.
정말 자신감이 많이 생깁니다. 자바스크립트의 기초에대해서 어느정도 알게 된 것 같아요.
기본적인 css나 html 을 모르신다면, 선행으로 css/html 강의 듣고 보는게 이해하는데 무리가 없습니다.
선생님의 시원시원하게 조져버리는 강의방식이 저와 정말 잘 맞았습니다.
프리패스라서, 다른 강의들도 들을 예정인데, 언넝 보고 싶습니다. Vue.js 하고 싶은데, 일단 급한게 서버쪽이라, Node.js 강의먼저 보려고합니다. ㄱㄱ!
p.s 이거 리뷰작성하는데, 작성창을 현재 커서가 안보이게 설정해놓으신 것은 좀 불편하네용..;
정말 쉽고 간결하게 설명해주세요
자바스크립트 관련 강의를 찾아보고 듣고 하는데, 여기만큼 쉽고 간결하게
이해되기 쉽게 알려주는 곳은 없는 것 같습니다 !
입문/기초, 어느 정도 알고 있는 사람도 만족할 수 있는 강의 같습니다!
선지식 없는 상태에서 이 강의를 만났다면 좀더 재밌게 공부할 수 있었을 것 같습니다 🙂
Experience Exceptional Learning with THIS JavaScript Course
I absolutely loved this JavaScript course! The instructor not only provided clear and thorough explanations of the material, but also made the videos engaging by including only the most important information. He also encouraged me to think critically and solve problems on my own. His teaching style and positive attitude really resonated with me, and I feel like I've grown so much as a developer thanks to his guidance. Thank you for an outstanding learning experience!
Regards,
Steve Jobs
이것은 정말 최고의 강의
너무 어렵지 않게 쉽게 설명해주시는 것도 그렇고, 강의가 귀에 엄청 쏙쏙 박혀서 잘 들어와요. 진짜임!!
그동안 자바스크립트를 제대로 익히고자 독학한 세월이 꽤 됐는데 여기서 며칠동안 강의 따라가며 들은게 백배천배 더 도움됐음.
진짜 기초를 단단하게 꽉 잡아주시는 느낌이었고 늘 강조하시던 '혼자서 코드 직접 짜는 법'... 이 방법을 코딩애플쌤 강의를 따라가다보면 익힐 수 있어요.
강의도 지루한게 아니고 말씀을 재밌게 해주셔서 더 흥미있게 들었던거 같습니다.
코딩애플쌤 짱.
최고의 강의
JS기초강의이긴 하지만 코딩을 하면서 가져야 할 마인드와 접근법 등에 대해서 크게 배우고 갑니다.
코딩애플쌤 최고심
말빨이 반은 먹고 감
솔직히 취준생이라 강의에 돈 쓰기 아까워서 무료강의 듣고 다녔는데 큰맘 먹고 결제 잘함
진심 강의를 듣다가 피식 거리면서 웃기도 함
심지어 내용도 이해하기 쉽게 잘 알려줌...
아무것도 모르는 밑바닥이라면 이만한 강의는 없긴 함
4주코스라는데 2주만에 완료할 계획이고 바로 리액트로 가겠음
돌고돌고돌아 명강의 안착
와.. 자바스크립트 깨우칠라고 개발학교1년에, freecodecamp에 유투브에 별짓을 다했으나 코드한줄 스스로 제대로 못쓰고 복붙만 하고 있었는데..
현재 스스로 코드짜는 나.. 내맛도리대로 코드 수정할수 있게되었어요 드디어 ㅠㅠㅠㅠㅠㅠㅠㅠ
쓰잘대기없이 어려운 말 안쓰고 이해하기쉽게 진짜 우리가 필요한 기능 구현하면서 배우니까 완전 학습능력 장난아님..
강추추추추추 입니다. 전 이제 리액트강의 넘어가러 슝 ~
자신감 얻기 좋아요.
계속 무언가 만들어가면서 하니까 성취감이 듭니다. canvas 강의도 들어 볼 수 있었으면 좋겠어요. 강의 감사합니다.
슨생님 짱짱맨
어제 HTML/CSS에서 넘어와서
자바스크립트 아직 1/3밖에 안들어서
초심자라 아주 근자감 충만한 상태입니다
내주신 숙제만 보면 쉬워보이는데
막상 하면 까막눈이 되어 1시간씩 좌절하다가
오 된다를 반복하고 있슴다
보시다시피 왕초보이지만 배울수록 채신 기술이
훨씬 더 간단하게 편리하다는 사실을 알게되서
속도를 늦출수가 없네염
어서 자바스크립트까지 완강하고
의기양양하게 개인 프로젝트하다가
좌절해서 돌아오고 싶습니다
(10년전에 산 두꺼운 프로그래밍 책은 이미 분리수거함 에그 디러)
샘덕에 자바스크립트 쫌 앎
거짓말 안함 진짜 진국이십니다
다들 한번쯤은 이분의 무료강의나 유튜브 보면 알겟지만 쌤은 진짜 이해하기 쉽게 알려주시는게 매력임
귀에 쏙쏙들어오는 강의
python밖에 할줄모르는 코린인데 자바스크립트 아주 쉽게 가르쳐주셔셔 정말 좋았습니다
쌤은 잘 가르치시는데 제가 잘 못해요
웹개발 기능 대회예제문제 전까지는 처음 배우는 코딩이지만 쌤 덕분에 재밌고 쉽게 잘 배웠습니다
하지만 웹개발 기능 대회 예제문제를 마주치는순간 저는 홀로 어미와 떨어져 야생에 내던져진 기분이였지만 선생님의 강의에 보답하고자
문제와 맞서 싸웠지만 결국 검색어 입력까지만 혼자서밖에 못했습니다.. 더욱 정진하겠습니다
구매할지 고민하시는 분들은 꼭 풀 패키지 구입해서 강의 다 들으세요
미쳤다...
첫 강의 보자마자 삘이 왔고 그동안 내가 왜 이렇게 되는지 몰랐던거 다 이해가 되었습니다. 최고입니다. 중간보고 바로 NODEJS 강의 신청하고 들었는데 이것도 그냥 천국입니다.
이 강의 사지마세요
그냥 프리패스 끊으세요.. 어차피 프리패스 끊게 될겁니다.