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

차가운 개발노트

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

Next.js MetaData 심화

metadata 를 간단하게 사용하고 있다가 다양하게 사용할 수 있는 걸 알게 되어 정리해 보았습니다.  설명metadata 를 모른다면 개인적으로 조금 공부하고 오거나 제 블로그에 next.js 소개 part 부분을 읽어 보시면 좋습니다. 기본적인 metadata 활용은 아래처럼 사용 할 수 있습니다.export const metadata = { title: "next.js", description: "hello next.js"} 하지만 항상 페이지별로 metadata 를 적용하고 설명하고 추가하고 하는것은 귀찮을 수 있기 때문에 동적으로 만들 수도 있습니다.import { Metadata } from 'next';export const metadata:Metadata = { title: { t..

  • format_list_bulleted Next
  • · 2024. 7. 30.
  • textsms
React 에서 files 다루기

React 에서 files 다루기

React 를 통해 파일 업로드 기능을 구현하기 위해 우리는 미리 알아야할 지식이 있습니다.첫 번째는 이미지와 비디오, 오디오 파일과 같은 파일이 어떻게 이루어져 있는 지를 알아야 합니다.두 번째는 input 태그의 type 이 file 일 때 미리보기 기능의 경우 올린 파일의 URL 객체의 createObjectURL 메소드를 이용하는 것세 번째는 React 의 useRef Hook 을 사용해 직접적으로 HTML 요소의 reference 값에 접근하는 법 입니다. Blob 이란? 우리가 웹에서 객체를 다룰 때 흔히 json 이라는 형식의 key, value 쌍으로 이루어진 형식으로 다루게 됩니다.하지만 파일이나 영상 이미지와 같이 용량이 큰 파일은 어떯게 다루어야 할까요?? 우리는 웹에서 이렇게 멀티미..

  • format_list_bulleted React
  • · 2024. 7. 29.
  • 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
  • navigate_before
  • 1
  • ···
  • 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)
최근 글
인기 글
최근 댓글
태그
  • #Java
  • #Spring
  • #SQL
  • #React-Native
  • #CS
  • #NEXT
  • #라이브러리
  • #Next.js
  • #react
  • #데이터베이스
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바