HTML 동적 콘텐츠 제이쿼리로 다루기

Jquery

HTML 동적 콘텐츠 제이쿼리로 다루기

martinooo 2024. 8. 29. 17:24

🤷‍♂️ 본론에 앞서

최근에 HTML, CSS 퍼블 프로젝트를 하면서 동적인 기능은 JS와 jQuery 사용하고 있습니다.

오랜만에 HTML, CSS, JS 전통적인 웹 퍼블 작업을 하다 보니 생각지도 못한 에지케이스들이 발생하는 경우가 많았습니다.

이 또한 좋은 경험이고 다시 한번 기본기를 리마인드 할 수 있어서 좋았습니다.

이 글은 저에 개인적인 오류를 해결했던 방법을 공유드립니다.

웹개발자라면 알아야 하는 jQuery란?

https://cometruedream.tistory.com/5

jQuery에 정의

제이쿼리(jQuery)란? 제이쿼리는 오픈 소스 기반에 자바스크립트 라이브러리로 자바스크립트를 더욱 쉽고 편리하게 이해하고 사용할수있게 해주는 라이브러리 입니다!! 코드 자체가 이해하기 쉽

cometruedream.tistory.com

🤷‍♂️ jQuery 로드 순서

jQuery 코드가 동작하려면 jQuery 라이브러리가 먼저 로드되어야 합니다.

<head> </head> 사이에 jQuery 라이브러리를 추가해야지 jQuery를 문제없이 사용하실 수 있습니다.

jQuery 라이브러리 CDN

<head>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

🤷‍♂️ 동적으로 바뀌는 탭메뉴 콘텐츠

탭메뉴 콘텐츠가 동적으로 추가될 경우 jQuery에서 탭 클릭 이벤트를 접근할 때 접근하는 DOM 요소들이 존재하지 않을 수 있습니다.

그 이유는 DOM 요소가 동적으로 추가되기 때문에 첫 DOM 요소에 접근할 때 오류가 발생하거나 기능이 제대로 동작하지 않을수 있습니다.

🤷‍♂️ 동적으로 로드된 콘텐츠 이벤트 위임 활용으로 문제 해결

동적으로 로드되는 콘텐츠를 이벤트 위임을 사용하여 jQuery 클릭 이벤트에 접근합니다.

이벤트 위임을 통해서 동적으로 로드되는 요소들에 대해서 이벤트가 제대로 작동합니다.

기본 jQuery 코드

  $(function () {
    // 탭 클릭 이벤트 처리
    $('.modal_tab ul li').click(function () {
      // 모든 탭에서 active 클래스 제거
      $('.modal_tab ul li').removeClass('active');

      // 클릭한 탭에 active 클래스 추가
      $(this).addClass('active');

      // 모든 탭 내용 숨기기
      $('.tab-content').hide();

      // 클릭한 탭에 해당하는 내용 보여주기
      var tabId = $(this).data('tab');
      $('#' + tabId).show();
    });
  });

jQuery 탭메뉴 기능 코드입니다.

jQuery 탭기능 만들기

2021.07.21 - [Jquery] - 오늘은 Tab-Menu 만들어 봐요!

오늘은 Tab-Menu 만들어 봐요!

항상 말하든 Jquery는 javascript라이브러리 이자 보다 편하고 짧은 코드로 강력한 기능을 구현할수 있는 라이브러리 입니다. 저도 jquery 자주 활용을 합니다. 오늘은 간단하고 기본적인 Tabmenu를 만들

cometruedream.tistory.com

이벤트 위임된 jQuery 코드

$(document).on('click', '.modal_tab ul li', function () {
  // 모든 탭에서 active 클래스 제거
  $('.modal_tab ul li').removeClass('active');

  // 클릭한 탭에 active 클래스 추가
  $(this).addClass('active');

  // 모든 탭 내용 숨기기
  $('.tab-content').hide();

  // 클릭한 탭에 해당하는 내용 보여주기
  var tabId = $(this).data('tab');
  $('#' + tabId).show();
});

이벤트 위임이란?

https://f-lab.kr/insight/closure-event-delegation-20240528

클로저와 이벤트 위임 이해하기

이 글에서는 자바스크립트의 클로저와 이벤트 위임에 대해 다룹니다. 클로저의 개념과 활용, 이벤트 위임의 개념과 활용, 실제 활용 예제, 장단점 등을 설명합니다.

f-lab.kr

🤷‍♂️ 이벤트 위임이란?

동적으로 로드되는 탭메뉴 콘텐츠를 제이쿼리로 다루면서 DOM 요소에 접근하지 못해서 아무 기능이 동작하지 않는 문제에 직면했습니다.

script 로드 순서는 html, css, js 개발을 할때 중요한 개념 중에 하나이며 이벤트 위임을 사용하여 동적으로 로드되는 콘텐츠를 제이쿼리로 다루면서 문제를 해결한 저의 경험을 공유드립니다.

재밌는 오늘의 띠별 운세 보고 가세요!

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

🤷‍♂️ Tailwind 한줄, 두줄, 세줄 효과프로젝트 진행중 배너 링크에 URL 길이가 너무 길어서 3줄 효과 처리를 해야 했습니다. React + Tailwind CSS 셋팅된 프로젝트 여서 CSS 파일 & style 태그를 사용하

cometruedream.tistory.com

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

🤷‍♂️ 본론에 앞서 Nest JS 개념?Nest JS는 Node JS 기반으로 한 서버 어플리케이션 프레임워크 입니다. 자바스크립트는 상당히 오랫동안 Express 기반으로 서버 어플리케이션 개발에서 압도적인 점

cometruedream.tistory.com

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

🤷‍♂️ 본론에 앞서프론트엔드 번들러 개념과 webpack vs vite 비교에 대해서 공부를 하고 글을 보시면 더 많은 도움이 됩니다^^프론트엔드 개발을 위한 번들러 개념과 webpack vs vite 비교https://comet

cometruedream.tistory.com

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

🤷‍♂️ 본론에 앞서프로젝트를 시작하기에 앞서 폴더 구조, 설계에 대한 아키텍처를 만드는 것은 상당히 어렵다. 이번 프로젝트에 React FSD 폴더구조 아키텍처를 설계할 예정이라서 FSD 아키텍

cometruedream.tistory.com

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리

🤷‍♂️ Prisma 명령어 본론에 앞서 Prisma란?Nest JS 프레임워크와 Prisma ORM을 활용해서 프로젝트를 진행하면서 Prisma는 Node JS 기반에 프레임워크/라이브러리와 상호작용이 잘되며 Prisma + DB 연동으

cometruedream.tistory.com

https://fnfentermagazine.com/%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8-%ec%88%ab%ec%9e%90-%ec%9e%90%eb%a3%8c%ea%b5%ac%ec%a1%b0%ec%9d%98-%ea%b0%9c%eb%85%90%ea%b3%bc-%eb%82%b4%ec%9e%a5%ed%95%a8%ec%88%98/

[자바스크립트 2탄] 자바스크립트 숫자 자료구조의 개념과 내장함수

세상을 향해 달려 - 자바스크립트(javascript) 숫자형 데이터 자료구조는 모든 종류의 수학적 연산을 수행할 수 있는 중요한 데이터 타입입니다. [자바스크립트 2탄] 자바스크립트 숫자 자료구조의

fnfentermagazine.com

'Jquery' 카테고리의 다른 글

요즘 많이 쓰이는 gnb floating 을 만들어봐요 (7)	2021.08.04
오늘은 floating 만들어봐요! (10)	2021.07.23
오늘은 go-Top 만들어봐요 (10)	2021.07.22
오늘은 Tab-Menu 만들어 봐요! (10)	2021.07.21
Jquery 기본문법을 알아봐요! (10)	2021.07.20

현재글HTML 동적 콘텐츠 제이쿼리로 다루기

꾸준히 발전하는 FRONTEND AND BACKEND...빛나는 사람이 될것^^

JavaScript, 프론트, 개발공부, MySQL, react, 프론트엔드, Git, aws, 자바스크립트 코딩테스트, 알고리즘 공부, jquery, 자바스크립트 알고리즘, 프론트개발자, 자바스크립트, SQL, 네트워크관리사, 개발자, 백엔드, 프로그래머스 자바스크립트, IT,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

꿈많은 DEVELOPER