dev-hpk 님의 블로그

리액트에서 useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook입니다. React 컴포넌트가 렌더링 된 후 특정 코드를 실행하고, 컴포넌트가 언마운트되거나 상태가 변할 때 정리 작업(cleanup)을 할 수 있도록 도와줍니다.  목차 1. useEffect 기본 개념 2. useEffect 사용 예시 3. 의존성 배열(Dependency Array) 4. 정리 작업(cleanup)마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. useEffect 기본 개념 useEffect는 컴포넌트가 렌더링된 후 특정 작업을 수행할 수 있도록 해줍니다. React 컴포넌트는 렌더링 될 때마다 DOM에 대한 변화가 일어나기 때문에, useEffect를 통해 필요..

React에서 상태(state)는 컴포넌트가 기억하고 관리해야 할 동적인 데이터를 의미합니다. 웹 애플리케이션은 사용자와의 상호작용에 따라 화면이 변경되기 때문에, 상태를 제대로 관리하는 것이 매우 중요합니다. 특히 함수형 컴포넌트에서는 useState라는 Hook을 사용하여 상태를 관리할 수 있습니다. 이 글에서는 state의 개념과 useState Hook의 사용법, 그리고 상태 관리의 핵심 개념에 대해 알아보겠습니다.   목차 1. State란? 2. State의 중요성 3. useState란? 4. useState 불변성 유지추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. State란?state는 React 컴포넌트에서 변경될 수 있는 데이터를 가리킵니다. 컴포넌트는 상태를 통해 동..

React에서 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 중요한 방법입니다. props는 컴포넌트가 동작하는 방식을 정의하거나, 동적인 데이터를 전달해 UI를 업데이트하는 데 사용됩니다. props의 개념, 사용법, 그리고 활용 사례에 대해 자세히 알아보겠습니다.   React Props: 컴포넌트 간 데이터 전달의 핵심  목차 1. Props란? 2. Props 사용법 3. Props로 함수 전달하기 4. Children Props마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Props란?Props(properties)는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용하는 매개변수입니다. 간단히 말해, props는 컴포넌트의 입력 값이라고 할 수 있습..

React는 모듈화 된 사용자 인터페이스를 구축하기 위한 라이브러리로, 그 핵심은 컴포넌트입니다. 컴포넌트는 화면의 일부분을 구성하고, 재사용 가능하며 독립적인 단위를 제공합니다. 이번 포스팅에서는 React 컴포넌트의 개념, 종류, 작성 방법에 대해 알아보겠습니다.   목차 1. React 컴포넌트란? 2. React 컴포넌트 종류 3. React 컴포넌트 장점: 재사용성마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. React 컴포넌트란? 컴포넌트는 HTML, CSS, JavaScript가 결합된 UI 조각이라고 생각하면 됩니다. React에서 컴포넌트를 사용하면 각각의 조각들을 독립적으로 설계하고, 이를 재사용하여 일관성 있는 인터페이스를 구축할 수 있습니다. 컴포넌트는 화면을 ..

React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트를 통해 UI를 모듈화 하고 재사용할 수 있는 강력한 기능을 제공합니다. 그 중심에 있는 것이 바로 JSX (JavaScript XML)입니다. JSX는 HTML과 매우 유사한 문법을 사용하여 React 컴포넌트를 작성할 수 있도록 도와줍니다.이 글에서는 JSX의 주요 문법과 특징, 그리고 React에서 JSX가 왜 중요한지에 대해 설명하겠습니다.   React JSX 문법에 대한 이해 목차 1. JSX란 무엇인가? 2. JSX 특징 마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. JSX란 무엇인가? JSX는 JavaScript 코드 내에서 HTML과 같은 문법을 사용하게 해주는 확장 문법입..

Axios를 사용한 API 요청에서 발생할 수 있는 다양한 오류를 처리하는 방법은 매우 중요합니다. 서버나 네트워크 문제로 인해 API 요청이 실패할 수 있으며, 이러한 오류를 적절히 처리하면 사용자 경험을 개선하고 문제를 디버깅하는 데 도움이 됩니다. 이번 글에서는 Axios의 오류 처리 방식과 일반적인 방법을 소개하겠습니다.   Axios의 오류 처리목차 1. 기본 오류 처리 2. 오류 객체 3. HTTP 상태 코드에 따른 오류 처리 4. 타임아웃 처리마무리추천글 기본 오류 처리 Axios는 Promise 기반이기 때문에, 오류는 주로 .catch() 블록에서 처리됩니다. 요청이 실패하면 .catch() 블록이 실행되어 오류에 대한 정보를 처리할 수 있습니다.axios.get('https://json..

Axios는 Promise 기반의 HTTP 클라이언트로, 웹 브라우저와 Node.js를 위한 HTTP 비동기(작성된 순서대로 실행되지 않는 처리) 통신 라이브러리입니다. 특히, REST API 요청을 간편하게 처리할 수 있도록 다양한 기능을 제공해 많은 개발자들이 선호하는 라이브러리입니다. 이번 포스팅에서는 Axios의 특징과 이를 사용한 API 요청 방법을 알아보겠습니다.   JavaScript에서 Axios를 사용한 API 요청 방법 목차 1. Axios 설치 2. Axios 특징 3. Axios로 API 요청하기 4. Axios 인스턴스마무리추천글 Axios 설치npm을 통한 설치npm install axiosyarn을 통한 설치yarn add axioscdn을 통한 설치// jsdelivr// u..

Fetch API는 JavaScript에서 HTTP 요청을 보낼 수 있는 현대적인 인터페이스입니다. 예전의 XMLHttpRequest보다 훨씬 더 강력하고 유연하게 서버와 데이터를 주고받을 수 있게 해 줍니다. Fetch를 사용하면 JSON, HTML 같은 리소스를 쉽게 요청하고 처리할 수 있습니다.   JavaScript의 Fetch 함수 목차 1. fetch() 기본 사용법 2. fetch() 옵션 3. fetch() - POST 요청 4. API 호출 함수 5. fetch() 오류 처리마무리추천글 fetch() 기본 사용법 fetch() 메서드는 URL을 받아 HTTP 요청을 보낸 후, 응답을 Promise로 반환합니다. 다음은 간단한 GET 요청의 예시입니다.fetch('https://jsonpl..

JavaScript에서 비동기 작업을 처리할 때 가장 강력하고 직관적인 도구 중 하나가 Promise입니다. 과거에는 콜백(callback) 방식으로 비동기 처리를 많이 했지만, 콜백 헬(callback hell) 문제로 인해 코드가 복잡해지는 단점이 있었습니다. Promise는 이런 문제를 해결하기 위해 등장한 개념으로, 비동기 작업을 더욱 쉽게 처리할 수 있게 해 줍니다.    자바스크립트의 비동기 Promise: 이해와 활용  목차   1. Promise란? 2. Promise 사용법 3. Promise 체이닝(Chaining) 4. Promise 병렬 처리 5. async와 await 6. 오류 처리(try / catch / finally)마무리추천글 Promise란?Promise는 "미래에 완..

JavaScript의 코드가 실행되는 방식은 핵심 개념입니다. JavaScript는 단일 스레드로 작동하지만, 메인 스레드를 막지 않고 비동기 작업을 처리하는 데 강점을 가지고 있습니다. 여기서 콜백과 비동기 실행이 중요한 역할을 합니다. 이번 포스팅에서는 이 개념들을 쉽게 설명해 보겠습니다!    콜백(Callback) 목차   1. 콜백이란? 2. 콜백을 이용한 비동기 처리 3. 콜백의 한계점 - 콜백 헬마무리추천글 콜백이란?콜백(callback)은 하나의 함수에 파라미터로 전달되어 특정 작업이 완료된 후에 실행되는 함수입니다. 쉽게 말해, 파라미터로 변수나 값을 전달하는 게 아니라 함수를 전달해, "이 작업이 끝나면 이 함수도 실행해 줘"라고 지시하는 방법입니다.function sayHello(na..