jQuery 배우기 - 코딩 강좌
jQuery 배우기 - 코딩 강좌 — 휴대폰으로 jQuery 배우기: 체인을 작성하고 실제 페이지가 반응하는 모습 확인하기
jQuery 배우기 - 코딩 강좌는 초보자, 학생, 그리고 jQuery 사이트를 유지 관리하는 개발자를 대상으로 jQuery JavaScript 라이브러리를 가르치는 무료로 시작할 수 있는 iOS 및 Android 앱이에요. DOM 조작, 이벤트, 효과, AJAX를 배울 수 있어요. 모든 레슨에는 라이브 에디터와 페이지 미리보기가 함께 제공되며, jQuery 3.7.1이 내장되어 있어 작성한 코드가 오프라인에서도 휴대폰에서 실행돼요. AI Mentor는 선택자, 오류 또는 AJAX 호출에 관한 질문에 답변해 줘요.
- 가격
- 무료, Pro 업그레이드
- 플랫폼
- iOS 및 Android
- 언어
- 22
- 연령 등급
- 4+
- 필요 사항
- iOS 15.1 이상
CSS 선택자를 알고 있다면 jQuery의 대부분을 이미 알고 있는 거예요.
jQuery는 CSS에서 선택자를 가져와 결과에 작업을 연이어 연결할 수 있게 해요. 덕분에 DOM, 이벤트, 비동기 코드를 부담 없이 처음 접할 수 있고, 아직도 jQuery에 의존하는 기존 웹사이트가 많아 실용적인 기술이기도 해요.
어떤 앱인가요
jQuery 배우기 - 코딩 강좌는 jQuery JavaScript 라이브러리를 위한 iOS 및 Android 학습 앱이에요. A1부터 C1까지 22개 코스와 48개 레슨, jQuery 3.7.1이 내장되어 기기에서 실행되는 페이지 미리보기 기능이 있는 라이브 JavaScript 에디터, 20개의 디버깅 미션, 20개의 안내형 HTML 및 CSS 프로젝트, 50개의 면접 질문, 50개의 퀴즈 질문, 91개 항목의 치트 시트가 제공돼요. AI Mentor는 선택자, 오류, AJAX 호출을 쉬운 말로 설명해 줘요.
앱 내부 살펴보기
화면은 어떻게 보이나요
강좌
jQuery 과정에서 다루는 내용
CoddyKit jQuery 과정 목록을 바탕으로 하며, 첫 번째 $ 호출부터 플러그인, 테스트, 최신 JavaScript와 함께 사용하는 방법까지 다뤄요.
jQuery 소개와 첫 단계
jQuery가 무엇인지, 실제로 어떤 문제를 해결했는지, 왜 아직도 많은 사이트에서 사용하는지 알아본 뒤 첫 번째 체인과 초보자를 위한 기초를 배워요.
요소 선택과 DOM 탐색
요소를 선택한 다음 고급 속성 및 의사 클래스 선택자를 사용하고, DOM에서 한 요소에서 다음 요소로 이동하는 방법을 배워요.
DOM 조작과 스타일 지정
두 과정에 걸쳐 요소를 생성하고 삽입하고 이동하고 삭제하는 방법과 코드로 CSS 및 클래스를 변경하는 방법을 배워요.
이벤트와 위임
이벤트 관리부터 나중에 추가된 요소를 위한 이벤트 위임과 사용자 지정 이벤트 관리까지 다뤄요.
애니메이션과 효과
기본 애니메이션부터 복잡한 애니메이션과 체인 시퀀스 및 사용자 지정 easing 같은 사용자 지정 효과까지 배워요.
폼, 데이터와 템플릿
데이터 속성과 템플릿을 사용한 동적 콘텐츠, 그리고 고급 폼 처리 및 유효성 검사를 다뤄요.
AJAX, Deferred 객체와 promise
AJAX 작업과 원격 데이터 처리를 배운 뒤, 비동기 코드를 관리하기 위한 Deferred 객체와 promise를 배워요.
플러그인, 성능과 테스트
사용자 지정 선택자와 필터링, 견고한 플러그인 개발, 성능과 모범 사례, 최신 JavaScript와 jQuery 통합, jQuery 애플리케이션 테스트까지 다뤄요.
어떻게 작동하나요
레슨 진행 방식
각 레슨에서는 직접 실행해 보는 코드 옆에 짧은 설명을 제공해 아이디어를 다음 단계로 넘어가기 전에 확인할 수 있어요.
짧은 레슨 하나 읽기
주제를 열고 선택자, 이벤트 또는 효과에 관한 간단한 설명을 읽어 보세요. 버스를 타고 가는 동안에도 읽을 수 있을 만큼 짧고, 첫 번째 체인부터 플러그인과 테스트까지 단계적으로 진행돼요.
체인을 작성하고 페이지가 반응하는 모습 확인하기
라이브 에디터에서 HTML, CSS, jQuery를 작성하고 한 번에 실행할 수 있어요. 에디터는 입력을 멈추면 서버나 빌드 단계 없이 코드를 다시 실행하고, 페이지 미리보기에 결과가 표시돼요.
버그를 수정한 다음 멘토에게 질문하기
미션에서는 고장 난 코드를 제시하고 문제를 찾도록 해요. 예를 들면 this가 window인 클릭 핸들러, 계속 슬라이드되는 메뉴, 두 번 실행되는 저장 기능 등이 있어요. 개념이나 오류가 이해되지 않을 때는 AI Mentor가 더 쉬운 말로 다시 설명해 줘요.
무엇이 들어 있나요
앱에 포함된 기능
22
A1부터 C1까지의 코스
$ 함수와 첫 번째 체인부터 시작해 선택자, DOM 조작, 이벤트, 애니메이션, 폼, AJAX, 플러그인, 성능까지 다루는 22개 코스와 48개 레슨이 제공돼요.
3.7.1
jQuery 내장
페이지 미리보기는 jQuery 3.7.1이 포함된 상태로 기기에서 실행되므로 에디터를 오프라인에서도 사용할 수 있어요.
20
디버깅 미션
문자열에서 끝나는 체인이나 첫 번째 행에서만 작동하는 삭제 버튼처럼 실제로 발생할 법한 버그를 수정해요.
20
안내형 페이지 프로젝트
나중에 선택자가 작동할 마크업을 직접 구성해 보는 HTML 및 CSS 프로젝트 20개가 제공돼요.
91
치트 시트와 퀴즈
선택자, 이벤트, 효과, AJAX 메서드를 다루는 91개 항목의 치트 시트와 50개의 퀴즈 질문, 50개의 면접 질문이 제공돼요.
AI
AI Mentor
선택자, 오류 또는 AJAX 호출에 관해 질문하면 쉬운 말로 답변을 받을 수 있어요. 무료 플랜에서는 하루에 질문 3개가 포함돼요.
배경
jQuery는 아직 배울 가치가 있을까요? 어디에 사용되나요?
jQuery는 웹 페이지에서 요소를 더 짧은 코드로 선택하고, 변경하고, 클릭에 반응하게 하며, 페이지를 새로 고치지 않고 데이터를 불러올 수 있게 해 주는 JavaScript 라이브러리예요. 새로운 프레임워크가 많은 신규 프로젝트를 대신하고 있지만, 기존 웹사이트의 상당수가 여전히 jQuery로 작동하고 있어 해당 코드를 읽고, 수정하고, 확장하는 일은 여전히 실용적인 웹 개발 기술이에요. 또한 더 큰 도구로 넘어가기 전에 DOM, 이벤트, 비동기 JavaScript를 부담 없이 익힐 수 있는 방법이기도 해요.
$ 함수와 체이닝한 줄로 여러 작업 수행
선택자와 함께 $를 호출하면 jQuery 객체가 반환되고, 거의 모든 메서드가 다시 해당 객체를 반환해요. 덕분에 목록을 선택하고, 클래스를 추가하고, 페이드 인하는 작업을 네 개의 별도 문장이 아닌 읽기 쉬운 한 줄의 체인으로 작성할 수 있어요.
선택자CSS 지식의 활용
클래스, id, 속성, 의사 클래스 선택자는 스타일시트에서와 거의 같은 방식으로 작동해요. 그런 다음 탐색 메서드로 요소에서 부모, 자식 또는 형제 요소로 이동할 수 있어요. 페이지에 비슷한 행이 수백 개 있을 때 원하는 행에 도달하는 방법이에요.
이벤트 위임나중에 추가된 요소를 위한 해결 방법
버튼에 연결한 핸들러는 코드가 실행될 당시 존재하던 버튼에만 적용돼요. 부모 요소에 핸들러를 연결하고 선택자로 필터링하면 이후 추가된 행에도 작동해요. 삭제 버튼이 기존 행에서만 작동하는 대표적인 원인이 바로 이 문제예요.
this가 가리키는 대상흔히 발생하는 버그
jQuery 핸들러 내부에서 this는 이벤트를 받은 요소를 가리키지만, 화살표 함수나 잘못 배치된 콜백 때문에 달라질 수 있어요. this가 window가 되어 버린 핸들러를 디버깅하는 것은 처음 마주하는 실제 버그의 전형적인 예예요.
AJAX와 promises새로 고침 없이 데이터 가져오기
$.ajax()는 요청을 보내고 응답이 돌아오면 페이지를 업데이트할 수 있게 해 줘요. Deferred 객체와 promises는 여러 요청을 체계적으로 처리해 한 단계가 다른 단계의 완료를 기다리게 하므로, 콜백을 중첩하지 않아도 돼요.
나에게 잘 맞는지
누구에게 적합하고, 누구에게는 적합하지 않은지
다음과 같은 분께 잘 맞아요
- HTML과 CSS를 조금 알고 있으며 페이지가 클릭과 폼에 반응하도록 만들고 싶어요
- jQuery로 구축된 사이트를 유지 관리하며 코드를 읽고 수정해야 해요
- 레거시 jQuery가 여전히 등장하는 프런트엔드 면접을 준비하고 있어요
- 휴대폰으로 코드를 작성하고 바로 페이지 미리보기를 확인하고 싶어요
- 짧은 시간 단위로 학습하는 것을 선호하고 질문할 수 있는 멘토를 원해요
다음과 같은 경우에는 적합하지 않아요
- React 같은 최신 프레임워크를 배우고 싶지만, 이 앱은 jQuery와 DOM을 가르쳐요
- 모든 과정을 무료로 이용할 수 있기를 원해요. 첫 번째 과정, 첫 번째 프로젝트와 두 개의 미션은 무료이고 Pro에서 나머지를 잠금 해제해요
- Pro에서 광고를 제거하므로 광고 없는 무료 버전을 기대하고 있어요
질문
자주 묻는 질문
휴대폰에서 jQuery를 배우는 가장 좋은 방법은 무엇인가요?
가장 효과적인 방법은 선택자에 대한 설명만 읽는 것이 아니라 직접 코드를 작성하고 페이지가 바뀌는 모습을 확인하는 거예요. jQuery 배우기 - 코딩 강좌에서는 각 짧은 레슨에 페이지 미리보기가 있는 라이브 편집기를 제공하고, jQuery 3.7.1이 내장되어 기기에서 코드를 실행할 수 있으며, AI Mentor가 이해하기 어려운 내용을 설명해 줘요. iOS와 Android에서 무료로 시작할 수 있어요.
jQuery는 JavaScript와 같은 건가요?
아니요. JavaScript는 프로그래밍 언어이고, jQuery는 JavaScript로 작성된 라이브러리로 요소 선택, 클릭 반응, AJAX 요청 전송 같은 일반적인 작업을 간단하게 해 줘요. jQuery 배우기 - 코딩 강좌에서는 JavaScript 편집기 안에서 jQuery를 가르치므로 두 가지를 함께 연습하고, 체인이 일반 DOM 코드로 어떻게 표현되는지 확인할 수 있어요.
jQuery를 지금도 배울 가치가 있나요?
새 프로젝트에서는 많은 팀이 다른 도구를 선택하지만, 여전히 상당수 기존 웹사이트가 jQuery로 실행되므로 해당 코드를 읽고 수정하는 것은 실용적인 기술이에요. DOM, 이벤트와 비동기 JavaScript를 익히는 쉬운 입문 방법이기도 해요. jQuery 배우기 - 코딩 강좌에는 레거시 jQuery가 여전히 등장하는 프런트엔드 직무 면접을 위한 질문도 포함되어 있어요.
jQuery 배우기 - 코딩 강좌는 iPhone과 Android에서 사용할 수 있나요?
네. jQuery 배우기 - 코딩 강좌는 iPhone(iOS 15.1 이상)의 App Store와 Android의 Google Play에서 이용할 수 있어요. 인터페이스는 English, Spanish, German, French, Portuguese, Japanese, Korean, Arabic, Hindi, Turkish를 포함한 22개 언어로 제공되며, 어떤 언어를 사용하든 작성하는 코드는 jQuery와 JavaScript로 유지돼요.
앱에서 jQuery 코드를 오프라인으로 실행할 수 있나요?
편집기에서는 가능해요. jQuery 3.7.1이 jQuery 배우기 - 코딩 강좌에 내장되어 있으므로 오프라인에서도 페이지 미리보기가 기기에서 실행돼요. AI Mentor에 의존하는 기능에는 인터넷 연결이 필요해요.
jQuery 과정에서는 어떤 주제를 다루나요?
22개 과정에서 $ 함수와 선택자부터 DOM 조작, 스타일 지정, 이벤트와 위임, 애니메이션, 폼, AJAX, Deferred 객체와 promise까지 다뤄요. 이어서 사용자 지정 선택자, 플러그인 작성, 성능, 최신 JavaScript와의 통합 및 테스트까지 배워요.
디버깅 미션이란 무엇인가요?
실무에서 발생하는 방식처럼 고장 난 jQuery 코드를 제시하고 버그를 찾도록 하는 20개의 연습 문제예요. 예를 들면 this가 window가 되는 클릭 핸들러, 문자열로 끝나는 체인, 오래된 행에서만 작동하는 삭제 버튼, 페이지를 떠난 뒤에도 계속 슬라이드되는 메뉴, 두 번 실행되는 저장 기능 등이 있어요.
JavaScript나 HTML을 먼저 알아야 하나요?
jQuery 선택자는 마크업에서 작동하고 CSS에서 많은 부분을 가져오므로 HTML과 CSS를 조금 알면 도움이 돼요. jQuery 배우기 - 코딩 강좌에는 가이드에 따라 진행하는 HTML 및 CSS 페이지 프로젝트 20개도 있어 선택자가 사용할 마크업을 직접 만들 수 있어요. 과정은 첫 번째 체인부터 시작해요.
jQuery 배우기 - 코딩 강좌는 무료인가요?
무료로 시작할 수 있어요. 첫 번째 과정, 첫 번째 가이드 프로젝트, 두 개의 미션, 편집기, 퀴즈, 면접 질문, 치트 시트와 하루 3개의 AI Mentor 질문을 이용할 수 있어요. 무료 버전에는 광고가 표시돼요. Pro에서는 모든 과정, 프로젝트와 미션, 인증서 시험 및 무제한 AI Mentor를 잠금 해제하고 광고를 제거해요. 주간, 월간 또는 연간 구독이나 일회성 평생 이용권으로 제공돼요. 과정 마지막의 인증서 시험은 Pro에 포함돼요.
이 앱은 jQuery와 제휴 관계가 있나요?
아니요. jQuery는 OpenJS Foundation의 상표이며, jQuery 배우기 - 코딩 강좌는 OpenJS Foundation과 제휴하거나 OpenJS Foundation의 보증을 받지 않는 독립적인 학습 앱이에요.
시작하기
오늘 첫 jQuery 체인을 작성해 보세요
iOS와 Android에서 22개 언어로 무료로 시작할 수 있어요.
CoddyKit의 다른 앱
iOS 및 Android에서 이용할 수 있어요.