본문 바로가기

분류 전체보기46

[Next.js] sharp 라이브러리 적용 후 vercel 배포 시 런타임 오류 발생 문제상황https://taehyeon-smilestudy.tistory.com/51 [Next.js] AWS S3 업로드 이미지 최적화를 해보자! (feat. sharp)이미지 최적화란?이미지 최적화는 웹사이트의 성능과 속도를 향상시키기 위해 품질을 손상시키지 않으면서 이미지의 파일 크기를 줄이는 프로세스입니다. 이 프로세스에는 크기를taehyeon-smilestudy.tistory.com sharp 라이브러리를 적용 후 vercel 배포를 했더니 런타임 오류가 발생했습니다. Vercel에서 sharp와 관련하여 발생하는 오류는 sharp가 대상 환경에 맞게 특별히 컴파일되어야 하는 기본 모듈이라는 사실 때문입니다. Vercel은 Linux 환경을 사용하며 설치된 sharp 모듈이 linux-x64 런타.. 2024. 7. 13.
[Redux] 리덕스 사용법 및 예제 (2) (feat.payload, ducks패턴) https://taehyeon-smilestudy.tistory.com/49손자) 부모 " data-og-host="taehyeon-smilestudy.tistory.com" data-og-source-url="https://taehyeon-smilestudy.tistory.com/48" data-og-url="https://taehyeon-smilestudy.tistory.com/48" data-og-image="https" data-og-host="taehyeon-smilestudy.tistory.com" data-og-source-url="https://taehyeon-smilestudy.tistory.com/49" data-og-url="https://taehyeon-smilestudy.tisto.. 2024. 7. 8.
[Redux] 리덕스 사용법 및 예제 (1) https://taehyeon-smilestudy.tistory.com/48부모->손자) 부모 " data-og-host="taehyeon-smilestudy.tistory.com" data-og-source-url="https://taehyeon-smilestudy.tistory.com/48" data-og-url="https://taehyeon-smilestudy.tistory.com/48" data-og-image="https://scrap.kakaocdn.net/dn/c0cvtc/hyWvTJkPCB/qj6Td4hsYkneXxjydB3vPk/img.png?width=500&height=315&face=0_0_500_315,https://scrap.kakaocdn.net/dn/yGnkn/hyWvTWS.. 2024. 7. 5.
[Redux] 리덕스 설치하기! (feat. 설치하는 이유는?) 리덕스(Redux)가 필요한 이유 useState의 불편함조부모 컴포넌트에서 손자 컴포넌트로 값을 보낼 때 반드시 부모 컴포넌트를 거쳐 전달해야 되는 문제점이 있습니다. (조부모->부모->손자) 부모 컴포넌트는 그 값이 필요로 하지 않아도 단순히 손자 컴포넌트에게 값을 전달하기 위해 불필요하게 거쳐야만 되기 때문에 중간 컴포넌트가 많아지면 엄청난 불편함과 동시에 리-렌더링이 일어나게 되어 성능도 저하되는 현상이 발생합니다.이러한 불편함을 겪지 않기 위해 [전역 상태관리 라이브러리]를 사용하는데 그중 하나가 리덕스(Redux) 입니다.Redux를 사용하게 되면 Store에서 상태를 관리하고 업데이트해 줍니다.스토어는 컴포넌트 밖에서 관리를 해주기 때문에 컴포넌트를 차례대로 타고 가서 데이터를 주지 않고 어.. 2024. 7. 4.