hanker

React를 사용하다 보면 DOM 요소에 직접 접근하거나, 컴포넌트가 리렌더링되어도 값을 유지해야 하는 상황이 있는데,이럴 때 사용하는 것이 바로 useRef 훅이다. useRef란 무엇인가? useRef는 React 함수형 컴포넌트에서 사용할 수 있는 훅으로, 두 가지 주요 용도가 있다.DOM 요소에 직접 접근하기 위한 참조(reference) 생성리렌더링 간에 값을 유지하되 변경 시 리렌더링을 트리거하지 않는 변수 저장기본 문법은 아래와 같다.const ref = useRef(initialValue); useRef의 특징 리렌더링되지 않음- useRef로 생성된 객체의 current 값이 변경되어도 컴포넌트가 리렌더링되지 않는다. - 이는 useState와의 가장 큰 차이점이다.값이 유지됨- 컴포넌..

JavaScript를 사용하다 보면 조건문(if, while, 삼항 연산자 등)에서 다양한 값들이자동으로 참(true) 또는 거짓(false)으로 평가되는 것을 볼 수 있다.이때 어떤 값은 항상 거짓(falsy)으로 평가되고, 그 외 대부분의 값은 참(truthy)으로 평가된다. 이번 글에서는 JavaScript에서 자주 사용되는 falsy 값과 truthy 값을 알아보자. Falsy 값이란? Falsy 값이란, 조건문에서 자동으로 false로 평가되는 값을 말한다.즉, 아래와 같은 값들은 if 문 등에서 항상 거짓으로 간주된다.값설명false불리언 false 값 자체0숫자 0-0음수 0 (자바스크립트에서 구분됨)0nBigInt에서의 0""빈 문자열null값이 없음undefined정의되지 않음NaN숫..

React에서 함수형 컴포넌트를 쓸 때, 상태 관리와 생명주기 처리는 Hook을 통해 구현한다.그중에서도 가장 많이 쓰이는 것이 바로 useState와 useEffect이다. 1. useState - 상태(state) 관리 useState는 컴포넌트 안에서 상태 값을 선언하고 관리할 수 있게 해주는 Hook이다.상태가 변경되면 해당 컴포넌트는 자동으로 리렌더링 된다.const [state, setState] = useState(initialValue); state : 현재 상태 값setState : 상태 변경 함수initialValue : 상태의 초기값// 예시import React, { useState } from "react";function Counter() { const [count, set..

웹 개발을 하면서 자주 사용하는 요소를 보이게 하거나 숨기게하는 방법에 대해서 알아보자. 1. style.display 속성// modBtn ID 값을 가진 요소 숨기기document.getElementById('modBtn').style.display = 'none';// modBtn ID 값을 가진 요소 보이기document.getElementById('modBtn').style.display = 'block';// modBtn ID 값을 가진 요소를 원래 display 값으로 복원document.getElementById('modBtn').style.display = '';장점간단하고 직관적완전히 레이아웃에서 제거됨단점원래 display 값을 기억해야 함갑작스러운 변화로 자연스럽지 않음 2. st..

JavaScript를 사용하면서 혼란스러운 개념인 ==과 ===의 차이를 한번 알아보자. ==, ===의 차이 == : 느슨한 비교타입 변환을 수행한 후 값을 비교서로 다른 타입이어도 변환 후 같은 값이면 true를 반환abstract equality 라고도 불린다.null과 undefined를 동시에 체크할 때 유용 === : 엄격한 비교타입과 값을 모두 비교타입이 다르면 무조건 false 반환타입 변환을 수행하지 않음성능이 ==보다 빠르지만(타입 변환 과정 생략) 미미 예시 // 같은 타입, 같은 값console.log(5 === 5); // trueconsole.log("hello" === "hello"); // true// 다른 타입, 같은 값console.log(5 == "5");..

Axios는 JavaScript에서 가장 많이 사용되는 HTTP 클라이언트 라이브러리 중 하나이다.Promise 기반으로 동작하며, 브라우저와 Node.js 환경 모두에서 사용할 수 있어 많은 개발자들이 선호하는 도구이다. 1. Axios Axios는 XMLHttpRequest와 Fetch API를 기반으로 한 Promise 기반 HTTP 클라이언트이다.RESTful API와의 통신을 위해 설계되었으며, 요청과 응답을 간편하게 처리할 수 있도록 도와준다. 자동 JSON 변환: 요청과 응답 데이터를 자동으로 JSON으로 변환해준다.요청 및 응답 인터셉터: 요청을 보내기 전이나 응답을 받은 후에 데이터를 가공할 수 있다.타임아웃 설정: 요청에 대한 타임아웃을 쉽게 설정할 수 있다.광범위한 브라우저 지원: ..

JavaScript의 Fetch API는 네트워크 요청을 위한 인터페이스이다.XMLHttpRequest를 대체하여 더 간단하고 유연한 방법으로 HTTP 통신을 할 수 있게 해준다. 1. fetch API 지원 브라우저 fetch API는 웹 브라우저에서 제공하는 네이티브 JavaScript API로, 서버와의 HTTP 통신을 Promise 기반으로 처리할 수 있게 해준다.IE를 제외한 모든 브라우저에서 지원 2. fetch API 사용 방법 2-1. GET 방식 구현// 기본 GET 요청 - Promise 체인 방식// jsonplaceholder는 샘플 데이터를 제공하는 무료 온라인 REST API fetch('https://jsonplaceholder.typicode.com/posts/1') ...

JavaScript에서 서버와 데이터를 주고받는 비동기 통신 방법들을 알아보자. 1. XMLHttpRequest XMLHttpRequest는 JavaScript에서 비동기 HTTP 요청을 보내는 가장 기본적인 방법이다.모든 브라우저에서 지원된다. 라이브러리 추가 필요: 없음const xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data');xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { const data = JSON.parse(xhr.responseText); console.log(da..

CSS Position 속성은 HTML 요소가 웹페이지 내에서 어떻게 배치될지를 결정하는 핵심 CSS 속성이다.기본적으로 모든 HTML 요소는 문서의 정상적인 흐름(normal document flow)을 따라 배치되지만, position 속성을 사용하면 이 흐름에서 벗어나 원하는 위치에 요소를 정확히 배치할 수 있다. CSS Position 속성에는 5가지 주요 값이 있으며, 각각 고유한 특성과 용도를 가지고 있다. 1. position static (기본값) .element { position: static;}모든 HTML 요소의 기본값문서의 정상적인 흐름을 따라 배치top, right, bottom, left 속성이 적용되지 않음z-index 속성도 적용되지 않음기본적인 블록 레이아웃이 필요하..

Single Thread 방식으로 실행되는 JavaScript에서 비동기 처리방법은 Promise와 async / await 가 있다. 이번 글에서는 매일 써도 어려운 비동기 프로그래밍에 대해서 알아보자. 1. 비동기 프로그래밍이란? JavaScript는 싱글 스레드 기반 언어이기 때문에 한 번에 하나의 작업만 실행이 가능하다.예외로 네트워크 요청, 파일 읽기, 타이머 같은 작업은 비동기 방식으로 실행된다.// 동기 코드 (순차 실행)console.log("Start");console.log("Processing...");console.log("End");// -- 출력 결과 --// Start// Processing...// End// 비동기 코드 (비순차 실행)console.log("Start");s..