주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. addClass 선택자에 입력한 클래스를 추가한다. 공백으로 구분하여 입력 값을 추가하면 여러개의 클래스를 추가할 수 있다. 함수 형식으로도 사용할 수 있으며 인자 값으로 해당 선택자의 index값을 사용할 수 있다. // HTML // jQuery // #firstBox 클래스가 추가 $('#firstBox').addClass('color_box red_box'); // .box 클래스 추가된다 $('.box').addClass(function(index){ return 'box_index'..

인프런 타입스크립트 기초를 통해 공부중이며 제로초님의 유료강좌입니다. 코드를 통으로 가져오지는 않겠습니다.(내가 글을 쓰면서 복습하는게 목적이기때문에 필요한 부분만) 타입스크립트에 익숙하지않다면 자바스크립트로 먼저 코드를 작성하고 그 후에 타입스크립트로 변환하도록하자. 타입스크립트 (Typescript) 오늘은 class와 interface를 더욱 자세히 알아봤다. 클래스는 인터페이스의 확장형(심화)으로 보면 될 듯 하다고 한다. 로직에 대한 힌트 인터페이스를 보고 타입을 확인할 수 있기 때문에 해당 로직에 대한 힌트를 얻을 수 있다. 아래 코드에서 인터페이스를 보고 heeJ와 yoon이 div인 것을 알 수 있다. interface People{ heeJ : HTMLDivElement, yoon : H..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn useEffect로 업데이트를 감지할 수 있다. 재 렌더링이슈가 없기때문에 state나 props를 쓰지 않으면 앞에서도 말했듯이 일반 함수로 생성하는 것이 좋다. componentDidUpdate가 될때 hooks(useEffect)로 변경할때 힘든 부분이 성능문제다. useEffect는 1:1로 대응되는 것이 아니기 때문이다. import React, { useState, useRef, useEffect } from 'react'; const Lotto = () => { const [numbers, setNumbers] = useS..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 리액트에서 돔을 컨트롤할때 ref를 사용하여 접근한다. Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다. 리액트는 대체로 돔을 컨트롤 하지 않아야하는데, input에 focus하는 작업등을 위해서 사용할 수 있다. *바람직한 사용 사례는 포커스, 텍스트 선택영역, 미디어 재생을 관리, 애니메이션 직접적 실행, 서드파티 DOM 라이브러리를 React와 사용할때라고한다. jQuery에서는 아래와 같이 작업을 한다. var input = $('.is-input'); input.focus()..