2025 / 02 / 19
오늘 수업 시간에는 jQuery의 메소드에 대해 배웠습니다.
그리고 수업 도중 잠깐 라이브러리와 프레임위크라는 단어가 나왔는데, 앞으로 종종 듣게 될 것 같아서 오늘은 이 부분에 대해 함께 정리해서 포스팅하겠습니다!
💌 라이브러리
Library
- 라이브러리는 특정 작업을 할 때 필요한 코드 묶음을 제공해주는 도구를 말합니다.
- 원하는 기능을 사용할 때 그 기능만 선택적으로 사용하는 방식입니다.
1. 예시
jQuery & Lodash
- 자바스크립트에서 jQuery나 Lodash 같은 라이브러리는 웹 개발에서 자주 쓰이는 기능을 쉽게 구현할 수 있도록 도와주는 역할을 합니다.
- 개발을 하다가 필요한 순간에 그 기능만 가져다 사용하는 방식입니다.
2. 특징
1. 선택적 사용
- 필요한 부분만 선택해서 사용할 수 있습니다.
2. 호출의 주도권이 개발자에게 있음
- 개발자가 라이브러리를 호출하고 어떻게 사용할지 결정합니다.
💌 프레임워크
Framework
- 프레임워크는 전체 구조를 제공하는 도구를 의미합니다.
- 원하는 작업을 하기 위해 어떤 방식으로 코드를 작성할지에 대한 규칙을 정의해줍니다.
- 개발자는 그 규칙에 맞게 코드를 작성해야하고, 프레임워크가 그 흐름을 주도합니다.
1. 예시
Angular & React & Vue.js
- Angular나 React, Vue.js는 프레임워크로서 전체적인 웹 애플리케이션 구조를 제공하고, 그 구조 안에서 개발자가 코드를 작성하도록 유도합니다.
- 프레임워크는 "이 방식으로 작업을 해야 한다"는 제약을 가질 수 있지만, 그만큼 효율적인 개발을 도와줍니다.
2. 특징
1. 전체적인 구조 제공
- 애플리케이션의 기본 구조나 흐름을 설정합니다.
2. 호출의 주도권이 프레임워크에 있음
- 프레임워크가 개발자의 코드를 호출합니다.
💌 비교하기
- 라이브러리와 프레임워크에 대해 알아보기 쉽도록 표로 정리해보았습니다.
라이브러리
- 필요한 부분만 쉽게 쓸 수 있는 도구를 의미합니다.
프레임워크
- 큰 그림을 그리며 그 안에서 작업하게 도와주는 도구를 의미합니다.
| 구분 | 라이브러리 | 프레임워크 |
|---|---|---|
| 주도권 | 개발자가 주도하여 필요할 때 라이브러리 함수 호출 | 프레임워크가 전체 구조와 흐름을 주도하고, 개발자는 그 안에서 작업 |
| 사용법 | 필요한 기능만 선택적으로 사용 | 규칙에 맞춰 작업해야 함 |
| 구조 | 별도의 구조 없이 기능 중심 | 전체적인 애플리케이션 구조 제공 |
| 예시 | jQuery, Lodash, Axios | Angular, React, Vue.js |
| 장점 | 필요한 부분만 빠르게 사용 가능, 간단한 작업에 유리 | 일관된 개발 방식, 큰 프로젝트에 유리 |
| 단점 | 코드가 많아질수록 관리가 어려울 수 있음 | 제한적인 자유도, 배워야 할 내용이 많음 |
💌 jQuery
- JavaScript 라이브러리 중 하나로, 주로 DOM 조작, 이벤트 처리, 애니메이셔느 AJAX 등을 간편하게 처리할 수 있게 도와주는 도구입니다.
- JavaScript로 할 수 있는 작업을 적은 코드로 빠르고 쉽게 작성할 수 있습니다.
1) 특징
1. 간결한 문법
- jQuery는 복잡한 Javascript 코드 없이 간단하고 직관적인 문법을 제공합니다.
2. 호환성
- 여러 브라우저에서 일관된 동작을 보장합니다.
- 예전에는 각 브라우저마다 DOM 처리 방식이 달랐는데, jQuery는 이를 추상화하여 개발자가 걱정할 필요 없이 동일한 코드로 여러 브라우저에서 잘 작동합니다.
3. 체이닝(Chaining)
- 여러 메서드를 하나로 묶어서 사용할 수 있어 코드가 간결하고 효율적입니다.
2. 기본 사용법
- jQuery를 사용하려면 먼저 jQuery 라이브러리를 HTML 파일에 불러와야 합니다.
<script>태그를 사용하여 CDN이나 로컬 파일을 연결할 수 있습니다.
<!-- CDN을 통해 jQuery 불러오기 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
- jQuery 코드를 $()를 사용하여 HTML 요소를 선택하고, 그 선택된 요소들에 다양한 메서드를 사용할 수 있습니다.
$(document).ready(function() {
// 문서가 준비되면 실행되는 코드
$('#myDiv').css('color', 'red');
});$(document).ready()는 DOM이 완전히 로드된 후에 실행할 코드를 작성하는 방법으로, jQuery에서 많이 사용하는 패턴입니다.
💌 jQuery 메서드
- jQuery에서 자주 사용되는 것들이며, HTML 요소를 제어하는 데 도움이 됩니다.
1. 선택자
$( )- 선택자
- jQuery에서 HTML 요소를 선택하는 기본 메서드입니다.
- CSS 선택자처럼 특정 요소를 선택할 수 있습니다.
// id가 'myDiv'인 요소 선택
$('#myDiv');
// class가 'item'인 모든 요소 선택
$('.item');
// 모든 <p> 태그 선택
$('p');
2. 스타일 적용
.css( )- 스타일 적용
- 선택한 요소의 CSS 스타일을 가져오거나 설정할 수 있습니다.
- 하나의 스타일 속성을 설정하거나 여러 개를 한 번에 설정할 수도 있습니다.
// 단일 스타일 설정
$('#myDiv').css('color', 'red');
// 여러 스타일을 객체로 설정
$('#myDiv').css({
'color': 'blue',
'font-size': '18px'
});
3. 클래스 추가/제거
.addClass( )/.removeClass( )/.toggleClass( )- 클래스 추가/제거
- 클래스를 추가하거나 제거하거나, 존재 여부에 따라 클래스를 토글할 수 있습니다.
// 클래스 추가
$('#myDiv').addClass('active');
// 클래스 제거
$('#myDiv').removeClass('active');
// 클래스 토글 (있으면 제거, 없으면 추가)
$('#myDiv').toggleClass('active');
4. 콘텐츠 변경
.html( )/.text( )- 콘텐츠 변경
- HTML 요소의 콘텐츠를 가져오거나 설정하는 메서드입니다.
- .html( )은 HTML 태그를 포함한 콘텐츠, .text( )는 텍스트만 처리합니다.
// HTML 콘텐츠 설정
$('#myDiv').html('<strong>새로운 HTML 내용</strong>');
// 텍스트 콘텐츠 설정
$('#myDiv').text('새로운 텍스트 내용');
// HTML 콘텐츠 가져오기
let htmlContent = $('#myDiv').html();
// 텍스트 콘텐츠 가져오기
let textContent = $('#myDiv').text();
5. 속성 값 설정하기
.attr( )- 속성 값 가져오기 / 설정하기
- HTML 요소의 속성 값을 가져오거나 설정할 때 사용됩니다.
<a>태그의 href 속성이나 이미지의src 속성등을 다룰 수 있습니다.
// src 속성 값 가져오기
let imgSrc = $('img').attr('src');
// href 속성 값 설정
$('a').attr('href', 'https://example.com');
6. 폼 요소 값 설정하기
.val( )- 폼 요소 값 가져오기 / 설정하기
- 폼 요소의 값을 가져오거나 설정할 때 사용합니다.
- 주로 input, textarea, select 등의 값을 다룰 때 사용합니다.
// input 요소의 값 가져오기
let inputValue = $('#myInput').val();
// select 요소의 선택된 값 가져오기
let selectedValue = $('#mySelect').val();
// input 값 설정
$('#myInput').val('새로운 값');
7. 크기 가져오기 / 설정하기
.width( )/.height( )- 크기 가져오기 / 설정하기
- 선택한 요소의 너비와 높이를 가져오거나 설정할 수 있습니다.
- 픽셀 단위로 값을 반환하거나 설정합니다.
// 요소의 너비 가져오기
let width = $('#myDiv').width();
// 요소의 높이 가져오기
let height = $('#myDiv').height();
// 요소의 너비 설정
$('#myDiv').width(200);
// 요소의 높이 설정
$('#myDiv').height(150);
8. 요소 추가
.append( )/.prepend( )- 요소 추가
- 선택한 요소의 자식 요소를 추가하는 메서드입니다.
- .append( )는 자식 요소를 끝에 추가하고, .prepend( )는 자식 요소를 처음에 추가합니다.
// 요소의 끝에 콘텐츠 추가
$('#myDiv').append('<p>새로운 내용</p>');
// 요소의 시작 부분에 콘텐츠 추가
$('#myDiv').prepend('<p>처음에 내용 추가</p>');
9. 요소 제거
.remove( )- 요소 제거
- 선택한 요소를 DOM에서 제거합니다.
- 요소 자체를 삭제하며, 해당 요소에 등록된 이벤트나 데이터도 함께 제거됩니다.
// 요소 제거
$('#myDiv').remove();
10. 요소 복제
.clone( )- 요소 복제
- 선택한 요소를 복제하여 새로운 요소를 만들 때 사용합니다.
- 복제된 요소는 원본과 동일한 속성, 이벤트 등을 가집니다.
// 요소 복제
let clonedDiv = $('#myDiv').clone();
$('body').append(clonedDiv); // 복제된 요소를 body에 추가
11. 반복문
.each( )- 반복문
- jQuery 객체의 각 요소에 대해 반복 작업을 할 수 있습니다.
- 배열처럼 요소를 순차적으로 처리할 수 있어 유용합니다.
// 각 요소에 대해 반복
$('.item').each(function(index, element) {
// 각 요소에 대해 작업
$(this).css('color', 'red'); // 색상 변경
});
31일차 후기
- 자바스크립트를 더 쉽고 간편하게 사용하기 위해 제이쿼리를 사용한다고 했는데.. 내가 작성한 코드도 헷갈리는 경우가 빈번해서 아직은 잘 모르겠습니다.
- 무조건적으로 다 사용하는 것은 아니라고 하니까 사용 방법만 알아둬야겠습니다.
- 자바스크립트로 DOM을 조작하다가 제이쿼리로 넘어가니까 멈칫하는 부분이 많기도 하고.. 좀 간결해보이긴 하는데... 궁금증이 많아졌습니다. ೕ(•̀ㅂ•́ )
- 이번에 하는 프로젝트에는 제이쿼리를 사용해봐야겠습니다. ✧⁺⸜(●′▾‵●)⸝⁺✧
૮꒰ ྀི〃´꒳`〃꒱ა