hanker

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..

이번 글에서는 JavaScript의 동작 원리를 깊이 이해하는 데 필수적인 개념인 실행 컨텍스트(Execution Context)와 콜 스택(Call Stack)에 대해 다뤄보자.이 개념을 이해하면 JavaScript의 호이스팅, 스코프, 클로저, 비동기 처리 등의 동작 방식을 보다 명확하게 파악할 수 있다. 1. 실행 컨텍스트란? 실행 컨텍스트(Execution Context)는 JavaScript 코드가 실행될 때 생성되는 환경을 의미한다.코드가 실행되는 동안 변수, 함수, this의 값 등을 추적하며, JavaScript 엔진이 코드를 실행하는 방식을 결정한다. * 실행 컨텍스트의 주요 역할 * - 코드 실행을 위한 환경 생성- 변수와 함수 선언 저장- 스코프와 this를 관리- 호이스팅 처리 2...

1. JavaScript가 뭘까?2. JavaScript를 시작하기3. JavaScript의 기본 문법4. JavaScript 제어문5. JavaScript 함수6. JavaScript에서 객체와 배열은 무엇일까? JavaScript에서 객체와 배열은 데이터를 구조화하여 저장하고 관리하는 데 매우 중요한 역할을 한다. 이번 글에서는 객체와 배열의 기본 개념, 생성 및 사용법, 그리고 내장 메서드에 대해 살펴보자! 1. 객체(Object) 객체란?객체는 키-값 쌍(Key-Value Pair)으로 데이터를 저장하는 데이터 구조입니다. 각각의 키는 고유하며, 이를 통해 값을 참조할 수 있다. let person = { name: "Hanker", age: 32, isDeveloper: true..