$$config title: [REACT] vscode 에서 제이쿼리 코드 작성하기 keywords: - vscode - jquery $$ # vscode 에서 제이쿼리 코드 작성하기 카카오뱅크 사이트를 모작하던 중, 화면이 일정 높이 이상 보여지면 background 색이 바뀌고, 애니메이션을 동작하게 구현하고싶었다. 이전에 스크롤을 내리면 이미지가 나오게 하는 작업은 AOS(Animation-On-Scroll) 을 사용하였지만, 이 작업은 제이쿼리를 사용하여 작업해보았다. 제이쿼리는 따로 배우지 않아 vscode에 어떻게, 어느 위치에 작성해야하는지도 몰라 수많은 검색 끝에 알아내었다 !!! # 제이쿼리 설치 npm install jquery - 를 터미널창에 입력하여 제이쿼리 설치함
- 제이쿼리를 사용할 컴포넌트 위에 `import jquery from "jquery";` `import $ from "jquery";` `window.$ = window.jquery = jquery;` 입력 # 코드 ```javascript import React from "react"; import "../styles/Content7.scss"; import jquery from "jquery"; import $ from "jquery"; window.$ = window.jquery = jquery; // 제이쿼리 코드 작성 class Content7 extends React.Component { componentDidMount() { function ActiveOnVisible__init() { $(window).resize(ActiveOnVisible__initOffset); ActiveOnVisible__initOffset(); $(window).scroll(ActiveOnVisible__checkAndActive); ActiveOnVisible__checkAndActive(); } function ActiveOnVisible__initOffset() { $(".active-on-visible").each(function (index, node) { var $node = $(node); var offsetTop = $node.offset().top; $node.attr("data-active-on-visible-offsetTop", offsetTop); if (!$node.attr("data-active-on-visible-diff-y")) { $node.attr("data-active-on-visible-diff-y", "0"); } if (!$node.attr("data-active-on-visible-delay")) { $node.attr("data-active-on-visible-delay", "0"); } }); ActiveOnVisible__checkAndActive(); } function ActiveOnVisible__checkAndActive() { $(".active-on-visible:not(.actived)").each(function (index, node) { var $node = $(node); var offsetTop = $node.attr("data-active-on-visible-offsetTop") * 1; var diffY = parseInt($node.attr("data-active-on-visible-diff-y")); var delay = parseInt($node.attr("data-active-on-visible-delay")); var callbackFuncName = $node.attr( "data-active-on-visible-callback-func-name" ); if ($(window).scrollTop() + $(window).height() + diffY > offsetTop) { $node.addClass("actived"); setTimeout(function () { $node.addClass("active"); if (window[callbackFuncName]) { window[callbackFuncName]($node); } }, delay); } }); } $(function () { ActiveOnVisible__init(); }); } render() { return ( // 리액트 코드 작성

복잡한 서류 제출을 간편하게, 내가 원하는 시간에

이사 날짜가 주말이나 공휴일이어도 전월세보증금 대출을 신청할 수 있습니다.

마이너스 통장대출

신용대출

개인사업자 대출

전월세보증금 대출

); } } export default Content7; ```