프로필 로고 차가운 개발노트
close
프로필 배경
프로필 로고

차가운 개발노트

  • 분류 전체보기 (126)
    • Java (23)
    • SQL (12)
    • Spring (23)
    • React (15)
    • Next (5)
    • CS (16)
    • 라이브러리 (13)
    • React-native (4)
    • Git (2)
    • JavaScript (4)
    • 데이터베이스 이론 (3)
    • 설치 (3)
  • 홈
  • 태그
  • 방명록
React 에러 핸들링

React 에러 핸들링

React에서 에러 핸들링은 사용자 경험을 향상시키기 위해 매우 중요합니다.특히, 애플리케이션이 크거나 복잡할수록 예상치 못한 에러가 발생할 가능성이 커지므로, 이를 적절히 처리해야 사용자에게 불필요한 불편을 줄일 수 있습니다. JS Error 객체Error: 기본적인 에러 객체SynTaxError: 문법이 틀렸을 때 발생하는 객체ReferenceError: 잘못된 참조를 했을 때 발생하는 객체RangeError: 숫자 변수가 범위를 벗어났을 때 발행하는 객체TypeError: 변수나 값의 타입이 예상과 다를 때 발생, 예를 들어, 숫자가 아닌 값에 대해 숫자 메서드를 호출할 때 발생HTTP 에러 코드 (서버와의 통신에서 발생하는 에러)React 애플리케이션이 API를 통해 서버와 통신할 때, HTTP ..

  • format_list_bulleted React
  • · 2024. 9. 10.
  • textsms
axios Interceptors

axios Interceptors

axios 를 자세히 공부 중에 인터셉터 라는 기능을공부해서 정리해 보았습니다.인터셉터(Interceptors)란? then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있다. API 요청을 할때마다 HTTP Authorization 요청 헤더에 토큰을 넣어줘야하는 경우가 생깁니다.하지만 이러한 경우가 많이 발생할 경우 중복 코드가 발생하고 유지보수가 복잡해 지는 문제가 발생합니다.사용자 지정 config 로 새로운 Axios 인스턴스를 생성하여 사용하면 더욱 편리하기 때문에 Axios 인스턴스를 기초로설명하겠습니다. 적용해보기Axios 인스턴스 생성하기const instance = axios.create({ baseURL: "www.text.com", timeout: 1000, // 요..

  • format_list_bulleted 라이브러리
  • · 2024. 9. 1.
  • textsms
메뉴 밑줄 슬라이딩 만들기

메뉴 밑줄 슬라이딩 만들기

프로젝트를 개발 중 메뉴 밑줄 슬라이딩을자연스럽게 구현하고 싶어 정리해 보았습니다. 용어 설명메뉴 밑줄 슬라이딩을 구현하고 싶은데 어떻게 만들어야 할지 막막하다면 여기서 정리한 내용만 차근차근 읽어보시면어떻게 구현하고 어떤 방식으로 만들 수 있는지 이해하실 수 있습니다. 특정 메뉴로 이동하고 싶을 때 애니메이션을 적용하고 싶다면 offset 이라는 기능을 사용하시면 됩니다.그림에서 보시는 바와 같이 검정색 화면이 브라우저 화면이라고 가정해 봅시다.그럴 때 브라우저에서 내가 측정하고 싶은 요소와 브라우저 간의 거리를 확인하고 싶다면 offsetTop 을 이용하시면 됩니다. 이 기능을 이용해서 간편하게 구현하시면 됩니다.아래의 코드는 React 를 이용해서 구현한 코드입니다.아직은 tsx 로 넘어가지 않았으..

  • format_list_bulleted React
  • · 2024. 8. 26.
  • textsms
Jotai

Jotai

jotai 는 전역 상태를 편리하게 도와주는라이브러리 입니다.설명Jotai는 리액트 애플리케이션에서 상태 관리를 위한 간단하고 현대적인 라이브러리입니다.이 라이브러리는 Context API와 리액트 훅을 기반으로 만들어졌으며, 상태를 최소 단위인 "원자 (Atoms)"로 분해하여 관리하는 Atomic 디자인 패턴을 채택합니다.jotai에 대해 찾아보면서 context와 비슷하다고 느꼈었는데, 실제로 다른 상태 관리 라이브러리들보다는 context나 useState와 비교되는 경우가 더 많습니다.Atomic 접근 방식이 패턴은 상태를 최소 단위인 "원자 (Atoms)" 단위로 분해하여 관리하는 방식을 의미합니다. jotai 를 시작하기 전에 앱 컴포넌트 내의 router 를 Provider 로 감싸 주어야..

  • format_list_bulleted 라이브러리
  • · 2024. 8. 24.
  • textsms
React 에서 formData 다루기

React 에서 formData 다루기

React 에서 이진 형태의 이미지를 서버로보내기 위해서는 특별한 형태로 보내야 합니다. 왜 특별한 형태로 서버로 전송되는가?일반적인 텍스트 데이터는 문자열 형태로 이루어져 있어서, 데이터를 인코딩하고 디코딩하는 과정에서 문자 집합 및 특수 문자 등을 다루는 것이 비교적 간단하지만 이미지나 다른 바이너리 파일은 이진 형태로 이루어져 있습니다.  즉, 이 데이터는 텍스트가 아닌 이진 형태의 바이트로 구성되어 있습니다. 따라서 이진 데이터를 전송할 수 있는 특별한 형태의 인코딩이 필요합니다. 그래서 axios 에 이진 데이터를 전송할 때 도와주는 multipart/form-data 형식을 주로 사용하게 됩니다.  이 형식은 여러 종류의 데이터를 구분하여 전송할 수 있도록 도와줍니다. 간단한 용어 설명프론트에..

  • format_list_bulleted React
  • · 2024. 8. 21.
  • textsms
React Intersection Observer

React Intersection Observer

React intersection observer 는 웹 개발자들이 요소의 가시성과 화면 내 위치에 대한 정보를 얻을 수 있는 강력한 라이브러리 입니다. 이 글에서는 React Intersection observer 의 사용법과 기능에 대해 자세히알아보도록 하겠습니다. Observer API 란?Observer API 는 웹 애플리케이션에서 시스템 이벤트 및 상태 변화를 감지하는 데 사용되는 javascript API 입니다. 이 API 는 브라우저에서 실행되는 애플리케이션에서 사용자의 시스템 환경과 관련된 정보를 제공합니다.observer API 는 사용자의 네트워크 연결 상태, 배터리 수준, 장치 방향, 화면 밝기 등과 같은 정보를 확인할 수 있습니다. 따라서 이를 통해 사용자에게 최적화된 경험을 제..

  • format_list_bulleted 라이브러리
  • · 2024. 8. 20.
  • textsms
useId

useId

react 의 따끈따끈한 hook 을설명해 드리겠습니다. useIdReact 18 version 으로 출시된 따근따근한 hook 입니다. useId 는 고유한 id 를 만들고 싶을 때 사용하면 됩니다.function App() { const id = useId(); console.log(id); // :r0:}useId 는 input 의 label 로 사용하는 경우가 있습니다.아래 코드가 예시 코드 입니다.import { useId } from "react";function MyInput() { const id = useId(); return ( 이름 )}function App() { return ( )} 하지만 굳이 useId 를 왜..

  • format_list_bulleted React
  • · 2024. 8. 19.
  • textsms
DNS 의 기초 상식

DNS 의 기초 상식

DNS 가 무엇이며 어떤 기능을 하는지간단하게 알아볼 수 있게 정리했습니다. Domain Name system구글에서 DNS 를 검색해 보시면 도메인 이름 시스템(DNS)은 사용자에게 친숙한 도메인 이름을 컴퓨터가 네트워크에서 서로를 식별하는 데 사용하는 인터넷 프로토콜(IP) 주소로 변환하는 인터넷 표준 프로토콜의 구성 요소입니다. 라고 나와있습니다.하지만 이렇게 용어가 어렵기 때문에 이해하기가 쉽지 않습니다. 따라서 저는 나름대로 이렇게 생략해 보았습니다. DNS는 사람이 이해하기 쉬운 도메인 이름( http://www.example.com ) 을 컴퓨터가 이해하기 쉬운 IP 주소(예: 192.0.2.1)로 변환하는 역할을 한다고 말이죠. 간단한 용어 설명1. 도메인 이름 (Domain Name)도메..

  • format_list_bulleted CS
  • · 2024. 8. 19.
  • textsms
  • navigate_before
  • 1
  • ···
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • navigate_next
공지사항
전체 카테고리
  • 분류 전체보기 (126)
    • Java (23)
    • SQL (12)
    • Spring (23)
    • React (15)
    • Next (5)
    • CS (16)
    • 라이브러리 (13)
    • React-native (4)
    • Git (2)
    • JavaScript (4)
    • 데이터베이스 이론 (3)
    • 설치 (3)
최근 글
인기 글
최근 댓글
태그
  • #데이터베이스
  • #CS
  • #SQL
  • #Java
  • #React-Native
  • #NEXT
  • #Next.js
  • #react
  • #라이브러리
  • #Spring
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바