kohigowild

yarn add embla-carousel-react embla-carousel-react 패키지 설치 import { useEffect, useRef, useState } from 'react'; import { useEmblaCarousel } from 'embla-carousel-react'; function Carousel() { const [viewportRef, embla] = useEmblaCarousel({ loop: true }); const [cardInfo, setCardInfo] = useState([]); useEffect(() => { // 카드인포데이터패칭 }, []); return ( {cardInfo.map((card) => { return ( ); })} ); } expo..

Debounce 는 이벤트 핸들러의 과도한 횟수가 발생하는 경우를 효과적으로 제어하여 성능의 개선을 목표로 하는 프로그래밍 기법으로, 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 기법이다. 해당 프로젝트에서는 검색 페이지에서 키워드 입력 시, 키워드 입력 완료 후 특정 시간 이후 API를 요청하도록 적용하였다. 🗒️ 적용 전 코드 키워드를 담을 state를 선언해 주고 input에 onChange 이벤트를 적용한다 의존성 배열에 keyword를 전달해서 keyword의 값이 변동될 때마다 api를 요청한다 const [keyword, setKeyword] = useState(''); useEffect(() => { // api call searchFeedList(keyword, setFeed..

https://heytossme.netlify.app/ HeyTossMe heytossme.netlify.app Problem 메인 페이지 등에서 사이트가 버벅거리거나 로딩이 느려지는 문제 이미지 최적화 관련 처리 X Reason 검색하다가 LightHouse라는 툴을 발견해서(!!) 한 번 적용해 봤는데 성능 점수 뭔 일임 메인 페이지 무한 슬라이드에서 성능 문제가 있을 거라는 예상은 했었는데, 무한 슬라이드 로직에 문제가 있는 게 아니라 고화질 이미지를 너무 많이 사용한 데서 크게 문제가 아닐까 싶었다 Try to solve 메인 페이지 무한 슬라이드 이미지 교체 대놓고 버벅거리는 문제는 해결됨 41점이긴 한데 410점 같음 이미지 업로드 시 이미지 압축 코드 작성 browser-image-compr..

Problem Error: Image import ... is not a valid image file. The image may be corrupted or an unsupported format. build 되는 과정에서 public 폴더 안에 있는 static 이미지가 누락되는 문제 Reason Disable Static Imports disableStaticImages 속성이 true로 되어 있어서 정적 이미지를 가져올 수 없었던 걸로 추측됨 Try to solve invalid-images-config | Next.js invalid-images-config | Next.js Invalid images config In your next.config.js file you provided an i..

Problem Syntax error: "@next/font" requires SWC although Babel is being used due to a custom babel config being present. Reason 🤔 https://github.com/mui/material-ui/issues/35673 Syntax error: "@next/font" requires SWC although Babel is being used due to a custom babel config being present. · Issue #35673 Duplicates I have searched the existing issues Latest version I have tested the latest versi..

💡 Ref Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다. 예를 들어 HTML을 작성할 때, div 등의 DOM 요소에 이름을 달 경우 와 같이 id를 사용하는데, 이처럼 React에서도 DOM을 선택해 직접 접근하기 위해 Ref를 사용한다. Ref를 사용해야 할 때 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때 애니메이션을 직접적으로 실행시킬 때 서드 파티 DOM 라이브러리를 React와 같이 사용할 때 💡 비제어 컴포넌트 방식 - Ref 활용 import React, { useRef } from "react"; export default function UncontrolledForm() { const inputRef = useRef()..

👽 props와 state 리액트 컴포넌트에서 다루는 데이터는 두 개로 나뉜다. 바로 props와 state인데, props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수는 없다. 반면에 state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 💡 props props는 컴포넌트를 부를 때 함께 지정한다. 아래 코드에서는 People 컴포넌트에 name prop과 age prop을 지정하였다. 위와 같이 같은 타입의 컴포넌트에 다른 props 값을 주어 패턴이 반복되는 형태로 컴포넌트의 효율적인 재사용이 가능하다. props에는 불리언, 숫자, 배열과 같은 다양한 형태의 데이터를 담을 수 있고, 공백 ..

👽 컴포넌트 생명 주기 (Life Cycle) 리액트의 컴포넌트는 생명 주기를 갖는다. 생명 주기란 컴포넌트가 생성되고, 사용되고, 소멸되는 일련의 과정을 뜻하고, 생명 주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데, 이를 라이프 사이클 이벤트라고 한다. 어떤 라이프 사이클 이벤트는 한 번만 실행되고, 어떤 이벤트는 계속해서 실행되기도 한다. 라이프 사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있다. 👽 라이프 사이클 이벤트의 분류 라이프 사이클 메서드의 종류는 총 9가지이다. will 접두사가 붙은 메서드: 어떤 작업을 작동하기 전 실행 did 접두사가 붙은 메서드: 어떤 작업을 작동한 후에 실행 라이프 사이클은 3가지 Mount, Update, Unmount 카테고리로 나눈다. 각 ..