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₩
코딩 애플이 좋은 최강 이유
1. 힙스터 개발자로 거듭 날 수 있음
2. 영상 하단에 글로 정리된 부분이 진짜 초강력 장점임
영상 보고 글을 한 번 쭈욱 읽으면 진짜 이해 잘됨
내가... 이게 되네?
html, css 하면서 정말 간단한 js밖에 몰랐는데 이거 하면서 조금씩 성장하고 있다는 생각이 들었습니다.
핵심만 쏙쏙 알려주셔서 이해하기도 쉽고, 숙제도 혼자 해보는데 어떤 건 빠르게, 어떤 건 몇 시간 걸리는 상황을 겪으며 해결해나가
결국 완강까지 할 수 있었네요ㅠㅠ 후다닥 빨리 듣고 단기간에 넘어가야지! 하고 자만했던 과거의 저... 숙제에 울고웃고ㅋㅋㅋ
자꾸 하면서 반성하게 된달까요. 확실히 숙제를 하지않으면 의미가 없는 것 같아요 지나면 까먹는게 코드라;
마지막 웹개발 기능대회는 진짜 영혼이 빠져나갔었습니다.. 결국 2번까지 완성하고 3번부터는 별짓해도 안되는 바람에 좌절했죠.
사실 문제자체를 보고 가출할 뻔한 영혼을 붙잡으며 2번까지라도 해낸 제가 놀랍기도 합니다ㅎㅎ;
아직은 많이 부족하지만 좀더 분발해서 기능마스터(?)가 되어보렵니다!!
좋은 강의 감사해요~! 다음 강의도 열심히 하겠습니다 🙂
5점 만점이면 말 다한거임
일단 숙제랑 강의가 매우 유익하고 숙제 빈도도 그리 많지 않음. 그래서 가볍게 듣기도 좋고 그리고 알려주는 내용들 중간중간에 자막으로도 알려줘서 노트필기하기도 아주 좋음! 그리고 영상 밑에 있는 글이 영상 내용 요약해줘서 특정 영상 다시보고 싶을때도 괜찮음. 그리고 무엇보다 코딩애플 특유의 목소리가 강의에 몰입이 가능한 목소리임. 그리고 다른 곳에 비해 가격도 8만원 정도의 혜자가격임 . 왜 살까말까 20분 고민하면서 리뷰 보면서 결정하고있냐 5점 만점이면 말 다했다 빨리 구매해라
그냥 최고의 강의
정말 코딩애플보다 잘 알려주는 코딩 강사 없을 것 같습니다..
배민 리뷰도 안 쓸 정도로 후기 같은 거 안 쓰는 사람인데 코딩애플 강의듣고 감동받아서 후기 남깁니다.
제가 다른 강사 강의도 들어본 적 있는데 정말 차원이 다른 수준입니다.
강사 본인이 코딩을 잘하는 거랑 가르치는 거랑은 별개의 문제인데 코딩애플은 남 가르치는데 정말 탁월한 재주가 있습니다.
코딩애플은 물고기를 잡아다 주는 게 아니라 물고기 잡는 방법을 알려주는 사람입니다.
다른 강사는 그거 하나만 따라할 수 있게 하지만 코딩애플은 수강생 혼자서도 코드 짤 수 있는 힘을 길러줍니다.
문법이나 개념 같은 것들은 실제 기능을 구현해보면서 자연스레 습득하게 됩니다. 강의를 어떻게 이렇게 잘 기획했을까 놀랍습니다.
그리고 코드를 잘 짜는 기본적인 방법 같은 것들도 반복적으로 잘 설명해줍니다.
( ex) 코드부터 무작정 짜지 말고 한글로 먼저 쳐보기 / 복잡한 기능 , 여러 개의 기능을 구현하기 어렵다면 쉬운 것, 한 가지 기능부터 개발하기 /
잘 모르는 자료가 있거나 코드가 제대로 작동하는지 확인하려면 출력 먼저 해보기 등등)
사실 이게 굉장히 중요하다고 생각합니다.
단순히 강의만 듣는 게 아니라 정말 내 실력을 성장 시키겠다는 마인드로 코딩애플이 스스로 코딩 해보라는거 반드시!! 혼자 코딩해보고 숙제 반드시 다 해보고 응용기능 같은 것도 반드시 다 구현해 보십시오. 실력이 정말 크게 늘 것입니다. 시키는 대로만 하면 됩니다.
거기에 그냥 강의 듣는 것 자체 만으로도 지루하지 않고 재밌습니다.
도대체 이거 안 들을 이유가 어딨음??
인간적으로
사람이면 후속 강의 만들어주세요
선생님 없으면 못 사는 개발자가 되어버렸습니다
선생님 없는 코딩의 길.... 버틸 수 없습니다
다음강의 넘어가기 기능좀 넣어주세용
다음강의 넘어가기 기능좀 넣어주세용
프로그래머가되
1달전.. 리제로 정주행을 하며 "아 코딩배우고 싶다." 라고 생각 한 저는.
유튜브에서 많이 보던 "코딩애플"님이 생각나 강의를 보게 되었습니다.
이 강의를 1달간 보며 많은 자바스크를 배우게 되었습니다.
한본어 밖에 못하지만, 영어도 모르는 저에게 코딩이란 재미있는 언어를..
알려주셨습니다. 그 후 저는 강의를 다보고 입에서 육성으로 나왔습니다.
"아리가또. 센세...." 라고요 .
다시한번 말합니다. 아리가또...센세..
아니 이게 왜 되지
강의 자체는 10분 내외로 짧다고 느껴질 수 있는데 막상 안에 든 내용은 액기스 그 자체임. 스스로 코드를 짤 수 있게 코치해주는 점이 제일 강점인듯. 예제나 숙제들도 실제로 쓸만한 것들로 주셔서 혼자서 응용하기도 가능. 국비나 학원같은곳 보다 코딩애플이면 됨. 진짜로.
와
이 강의를 들려주니 html이 프로그래밍 언어가 되고 자바스크립트가 자바가 되었습니다.
재미쪄
코딩애플 그저 갓
다 좋은데 통신 라이브러리가 조금 아쉽다 정도?
ajax 대신 axios면 진짜 좋았을듯
나중에 또 보러와야겠다