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₩
예제 진짜 좋아요
혼자 하는것보다 훨씬 실제내용들 많이 배울 수 있었습니다. 감사합니다.
빨리 다음강좌도 출시를 기원합니다
강사샘 목소리도 그렇고 강의스타일도 그렇고 여타 다른강의에비해 너무 좋습니다
수강생입니다. 샘 강의 너무 좋습니다.~ 여러강의를 두루 들어봤는데 쌤 강의만한게 없는거 같습니다. 오프라인수업도 참여하고 있고~~ 오프라인수업때 처음 쌤이 온라인강의도 하신다는 걸 목소리듣고 알았습니다^^ 여러모로 도움이 되는 강의 였습니다. 앞으로도 좋은 강의 부탁드릴께요~~
강의가 진짜 깔끔하고 이해가 쏙쏙됩니다.
이때까지는 그냥 외워서 작성했던 내용을 원리부터 문법을 왜이렇게 사용하는지도 설명을 해주시니 이해가 쏙쏙되네요~
그리고 지루할 틈 없이 짧고 굵게 수업이 진행되어 좋아요!
쉽고 재미있고, 내용이 정말 좋아요.
쉽고 재미있고, 내용이 정말 좋아요.
나도 이제 곧 JS 중급자
와 멀게만 느껴지던 멋진 메뉴바 슬라이드 토글을 강의 첫날 갑자기 스스로 쉽게 할 수 있게 되다니...
✨감격?
이만한 강의가 없다
유튜브에서 자바스크립트 강의 찾아 듣던 난민인데 우연찮게 이 강의를 발견하고 무료 강의 몇개 들은 후
고민도 없이 바로 질러버렸다
지금 레벨 2 중간정도까지 수강했는데 이렇게 간결하고 재미있게 알려주는 강의가 없음
빨리 이거 떼고 자바스크립트 심화과정도 질러야지
이상한 국비 학원 듣지 말고 이 아저씨 거 들으십쇼
이거 하면 국비 2~3개월 +a과정 3주도 안돼서 끝냄.
본인 국비 4개월 듣고 부족하다 싶어 이거 들었는데, 이거 먼저 들었으면 4개월간 뻘짓 안 했지. 좀 열받음
심지어 인강이라 그만 듣고 싶을 때 끄고 자러갈 수도 있음ㅇㅇ
코딩애플은 신이다
노XX코더, X림코딩 등 클론코딩+a 형태의 강의로 입문을 했었는데, 비유적 설명 없이 이론+따라쓰기식의 수업이라 자신의것으로 습득하는데 굉장히 힘들었습니다.
여기는 원리의 비유적 설명 + 스스로 문제해결능력까지 머가리에 굉장히 치명적으로 때려박아줍니다.
주저하지말고 결제하세요
저는 ES6로 떠납니다.
+ 실무용 git과 github강의도 있으면 좋겠어요
코딩알못들에게 최고의 강의!!!!
Node.js 다 듣고 Javascript 문법을 조금 더 보강하고 싶어서 듣는 중 입니다.
아니 무슨 코딩 가르쳐주는 영상을 유튜브 개그영상 처럼 재밌게 본거는 처음이네요. (Jquery = Javascript 개같네 부분에서 빵터졌습니다ㅜㅡㅠ)
개념이랑 응용력을 제 두뇌에 때려 박아주셔서(상남자세요ㅋ) 프로그램 뭐 만들지 아이디어만 있다면 바로 실전 프로젝트 술술 짤 수 있어요.
원래 귀찮아서 리뷰같은건 잘 안남기는 타입이지만 진짜 이 강의는 초보자들에겐 최고의 강의 입니다.
진짜 쉽습니다
쉽다 + 재미있다 = 당신의 완강 확률이 비약적으로 증가할 것이다
정말
공부하고 싶게 만드는 사람은 처음이에요.
하루라도 목소리 안 들으면 듣고 싶어서 찾아오게 됨
유튜브 보고 청강신청하게 됐어요!
엄청 대충설명 해주는 것 같아도 은근 코린이 입장에서 부담없이 실제 화면으로 구동가능할 수준의 기초 지식을 잡을 수 있을 것 같다고 생각하고, 스스로 학습해 갈 수 있는 교육의 방향성이 정말 저랑 잘 맞는 것 같아요 !!
다른 강의 듣다가 왔는데 충격..
쉽고 재밌고 이해도 잘되고.. 그렇다고 내용이 부실하지도 않아요 대박쓰..
3일만에 완주했습니다.
물론 모든걸 다 이해하고 혼자 다 해내면서 하진 못했지만
도무지 외계어 같고, 과연 할수 있을까..
포기하려다 그래도 미련이 남아
여기저기 찾아 헤매다
사막에서 오아시시를 만났습니다.
하루만에 함수가 이해가 되고
점점 완벽하진 않아도 코드를 짜고 그래도 어찌저찌 실행이 되는 걸 보면서
3일을 작심하고 일단 완주했습니다.
끝에는 뭐가 있는지 궁금하기도 하고
3번정도 정주행 하면
어려운 '수학+아프리카어' 같은 문법들과 좀 심도 있는 다음단계에도
도전할 수 있지 않을까 싶습니다.
늦은 나이에 개발자가 되려는 생각은 없지만
그래도 자바스크립트는 일종의 언어를 깨우치는 개념 같아서
영어도 못하는데 우리 일상에서 생필품 같은 웹언어를 한번 터득해 보고 싶습니다.
진짜 솔직히말함..
다른 사이트 강의도 많이 들었는데,
이게 최고임..............
다른데서 계속 얼타다 여기서 완전 배움
딴데서 배울때 이해안가니까 js 하기싫고 포기할까 싶었는데
강사님때문에 완전 재밌어짐ㅋㅋㅋ
특히 강제 공부 시키는 게 최고인듯합니다.
ㅋㅋ 답보고싶어도, 자극적인 멘트때문에 좀더 고민하고
해결하게되고 너무좋아요 .
다른강의도 다듣겟슴다
자바 강의가 없어서 좀 아쉬어여 ㅠㅠ
잼있어요.ㅋㅋㅋ 잼있게 배우는게 최고죠
쌤 말투도 잼나고 말도 어렵게 안하시고 잼나요~~~
30% 듣고 쓰는 후기
저 진짜 이런 후기 잘 안 쓰는데
완강 다하고 적으려다가 너무 좋아서 첫 번째 파트 다 듣고 적으러 왔습니다
정말 정말 정말!!!!!!!!!!! 도움이 너무 많이 됐습니다.
다른 js 무료 유료 강의 여러 개 들어봤었는데
이론부터 시작해서 다 듣고 나면....... 물론 이론 지식이 조금씩 늘어가긴 하지만
듣더라도... 코드를 치는 부분에서 ... 뭔가 쓰고 싶어도 머릿속이 다 꼬여서 아무것도 칠 수가 없었거든요
어떻게 해야 할지도 감도 안 잡히구 필기를 해 놔도 혼자는 다시 못 만들겠더라구요
그래서... HTMLCSS 하고 난 뒤에 하는 자바스크립트가 재미없고 제가 이거를 할 수 있을지 너무 심란했는데
강사님 강의 들으면서 조금 생각하면서 쓰는 속도가 느려도, 제가 생각해서 쓴 코드들이 작동이 되니까 자바스크립트가 너무 재밌어졌어요 !!!!!
강의 끝날 때 내주시는 문제들도 한번 더 복습하면서 생각해 볼 시간을 가질 수 있게 해주셔서 너무 좋아요
이해 너무 잘됩니다... 저 같으신 분들 모두 들으세요 진심입니다
일년 가까이 제이쿼리 온라인 오프라인 강의, 책을 공부했는데..코딩애플쌤이 최고임
부푼 꿈을 안고 시작한 제이쿼리 자바스크립트 공부에
좌절의 시간이 몇번...
난 안되나 싶을때 코딩애플쌤을 유투브에서 만났습니다.
기본 무료로 제공되는 강의를 듣고 할 수 있다는 생각을 했고
유료결제후 반 정도 왔습니다.
너무 쉽게 알려주셔서..
그래도 응용을 하고 싶은 욕구가 생겼고요..
진짜 어떠한 선생님이나 온라인 오프라인 강의 보다 좋아요.
다른 어떤 분의 후기 처럼..ㅎㅎ
애플쌤. 만나보고 싶네요. ^^ 감사합니다.
리뷰 읽을 시간에 일단 강의 사서 들으세요.
가히 우리나라 최고의 강의라 말할 수 있을 것 같습니다. 이렇게 재밌고 알찬 강의가 우리나라에 또 있을까 싶네요.
쌩초보 분에게도 훌륭한 강의겠지만, 개인적으로는 저처럼 어느정도 개념을 갖춘 상태이긴 하나, 뭔가 확실하게 안다는 느낌이 없는 상태의 분에게 최적화 된 강의라 생각해요.
자바스크립트 진짜 대충 공부하고 바로 뷰랑 리액트로 넘어가서, 맨날 부트스트랩같은 라이브러리랑 구글 복붙 코드로만 개발하다가 지금은 캐로젤, 탭 메뉴, 무한스크롤 같이 기본적인 기능들을 하드코딩 할 수 있게 되었습니다.
이번주에 술마실거 아끼면 나오는 돈이니까 아깝다는 생각 마시고 일단 결제하고 들어보십쇼. 이거 완강하고 도움 안 되면 님이 제대로 안들은 거임
믿고 듣는 코딩 애플
진짜 JS 딥다이브니 자바스크립트 개론이니 드림 코딩 다 들었지만
돌고돌아 결국엔 진작 이 강의부터 들었다면 어땠을까라는 생각이 듬
리액트 강의 듣고 마음에 들어서 JS 보충할 겸 하고 있는데
진짜 최고의 강의입니다.... 다른 강의도 기대되네요