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

차가운 개발노트

  • 분류 전체보기 (130)
    • Java (23)
    • SQL (12)
    • Spring (27)
    • 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
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
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
Next.js API Key 보관

Next.js API Key 보관

Api key 는 너무나도 중요하기 때문에다른 누군가가 사용하지 않게 해야 합니다. Next.js 로 개발을 하다가 특정 api key 를 가져와야 하는 경우가 생겨서 공부하면서 정리해 보았습니다. 설명보통 개발을 하면서 자신의 Github 에 프로젝트를 올리고 관리할 것입니다.개발을 하다보면 피치못하게 다른 개발자의 API 나 공공하게 사용하는 API 를 사용해야하는 경험을 하셨을 것입니다.이때 대부분 API key 를 이용해서 API 를 불러옵니다.API 에 따라 다르지만, 대부분 API 인증키가 본인 이외의 외부에 보여지는 것은 좋지 않습니다.그래서 Next.js 는 .env.local 이라는 파일을 지원해 줍니다. 사용법Next.js 에서 어떻게 .env.local 이라는 파일로 api key 를..

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

티스토리툴바