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

차가운 개발노트

  • 분류 전체보기 (124)
    • Java (23)
    • SQL (11)
    • Spring (22)
    • React (15)
    • Next (5)
    • CS (16)
    • 라이브러리 (13)
    • React-native (4)
    • Git (2)
    • JavaScript (4)
    • 데이터베이스 이론 (3)
    • 설치 (3)
  • 홈
  • 태그
  • 방명록
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
useLayoutEffect

useLayoutEffect

useEffect 라는 hook 은 들어봤는데useLayoutEffect 는 무엇일까요??  useEffect vs useLayoutEffect React에서 컴포넌트의 생명주기를 관리하기 위해 useEffect와 useLayoutEffect를 사용합니다. 이 두 훅은 비슷해 보이지만, 실제로는 매우 다른 역할을 합니다. 왜냐하면 useEffect는 비동기적으로 실행되기 때문에, DOM이 업데이트된 후에 실행되기 때문입니다.반면에 useLayoutEffect는 동기적으로 실행되어, DOM이 업데이트되기 전에 실행됩니다.  간단한 useEffect 의 동작 원리useEffect는 비동기적으로 실행되며, 이는 이벤트 루프의 테스트 큐에 콜백이 쌓이는 방식으로 동작합니다.왜냐하면 useEffect 의 콜백이 ..

  • format_list_bulleted React
  • · 2024. 8. 13.
  • textsms
React-throttle

React-throttle

설명Throttle는 성능 최적화를 위해 자주 사용되는 기법으로, 일정 시간 내에 함수 호출 횟수를 제한하는 데 사용됩니다.주로 스크롤, 윈도우 리사이즈, 버튼 클릭 등 빈번한 이벤트 핸들링에서 과도한 함수 호출을 방지하는 데 유용합니다.기본 동작 원리Throttle의 기본 원리는 주어진 시간 간격(delay) 내에서 한 번만 함수를 실행하게 하는 것입니다. 예를 들어, 스크롤 이벤트가 1초에 100번 발생해도, Throttle을 사용하면 지정된 시간 간격(예: 200ms)마다 한 번만 해당 이벤트 핸들러가 호출되도록 제한할 수 있습니다. Throttle vs DebounceThrottle: 일정한 간격으로 함수를 실행합니다. 주기적으로 실행되므로 이벤트 발생 간격이 불규칙해도 실행 시점이 일정하게 유지..

  • format_list_bulleted React
  • · 2024. 8. 12.
  • textsms
React-Debounce

React-Debounce

Debounce 란?개발을 하다 보면 너무 자주 호출되는 함수가 있다면 서버 비용이 너무 많이 들 수 있습니다.따라서 특정 이벤트가 여러번 발생한 경우 해당 이벤트 안에 함수가 일정 시간이 지나야 실행되고그 전에 이벤트에 의해 발생한 함수들은 없애주는 기능이라고 생각하시면 됩니다. 언제 사용할까?제가 사용하는 경우는 검색어 입니다.우리가 입력창에 새우 볶음밥 만드는 방법이라고 입력을 할 때 새우만 입력을 해도 새우에 관한 검색어 예시들이 밑에 나오는 모습을경험해 본 적이 있으실 것입니다. 그럴 때 만약 Debounce 를 적용하지 않는다면 해당 검색어 예시들을 찾기 위해 이벤트가 발생하고우리의 타자 속도가 너무 빠르다면 해당 이벤트는 ㅅ, 새, 새ㅇ, 새우 라고 입력할 때마다 이벤트가 발생해 서버에 비용..

  • format_list_bulleted React
  • · 2024. 8. 8.
  • textsms
Axios

Axios

Axios를 간단히 소개하자면 fetch() 함수처럼 request를 보내고 response를 받을 수 있는 라이브러리입니다. fetch() 함수랑 사용법은 비슷하지만 조금 더 편리하게 쓸 수 있는 라이브러리라고 생각하시면 됩니다. Axios를 설치하고 사용하는 방법에 대해 간략하게 정리한 글입니다.설치npm install axiosfetch vs axiosfetch 가 기존에 있지만 왜 axios 를 사용하는 것일까요?? 그 이유는 axios 가 더 직관적이고 생략할 수 있는 부분이 있으며 간단하게 사용할 수 있기 때문입니다.  fetchasync function getProducts() { const res = await fetch('https://www.naver.com/hello'); cons..

  • format_list_bulleted React
  • · 2024. 7. 28.
  • textsms
Day.js

Day.js

항상 Moment.js 를 사용하다가 Day.js 를 사용해야지 라는 소리가 들려서 정리해 보았습니다. Moment.js 의 단점들Moment.js의 용량은 2.24.0버전 기준으로 235.4KB로, react-dom의 약 2.3배, vue의 3.6배만큼 크기 때문에 번들에서 Moment.js가 30%를 차지하지만 실제로 사용되는 부분도 30% 정도밖에 되지 않는 극단적인 예시 상황이 발생하기도 합니다. 그리고 Moment.js 공식문서에서도 이 라이브러리를 레거시하다고 정의하고, 더 이상의 신규 개발 없이 유지보수만 하는 상태로 전환하며 앞으로의 계획을 다음과 같이 밝혔습니다. 새로운 성능이나 기능을 추가하지 않을 예정이라는 거죠. Day.js Moment.js와 호환되는 API를 가진 경량 라이브러..

  • format_list_bulleted 카테고리 없음
  • · 2024. 7. 26.
  • textsms
React hook form

React hook form

React Hook Form은 React 애플리케이션에서 폼을 다루는 데 도움이 되는 라이브러리 중 하나입니다. 이를 통해 폼 컴포넌트의 개발과 유지 보수를 용이하게 할 수 있습니다.  React-hook-form 을 사용하면 form component 의 상태 및 유효성 검사를 관리하는데 필요한 코드 양을 대폭 줄일 수 있습니다. 저도 평소에 form 기능을 만들때 input 을 useState 로 관리하고 필요에 따라 명시적인 이벤트 핸들러를 작성하는데 React-hook-form 은 제공해주는 Hook 을 사용하여 관련 데이터를 추적하고 업데이트 할 수 있습니다. 장점간결한 API React Hook Form은 사용하기 쉽고 직관적인 API를 제공하여 복잡한 폼 로직을 단순화합니다. 기본적으로 제..

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

티스토리툴바