전체 글

시작하며 React 프로젝트를 하다 보면 특정 동작을 오직 한 번만 실행하거나, 중복 호출을 막아야 하는 상황이 자주 발생합니다. 특히, API 호출이 불필요하게 여러 번 호출될 경우에는 성능에 영향을 줄 뿐만 아니라 더 나아가 데이터베이스 무결성에 영향을 줄 가능성이 있습니다. 오늘은 useEffect를 활용하여 앞선 문제를 간단하고 효율적으로 해결하는 방법을 소개하고자 합니다. 왜 useEffect를 사용할까? React에서 상태 관리를 위한 useState와 달리 useRef는 값이 변경되어도 렌더링에 영향을 주지 않으며 값이 동기적으로 즉시 변경된다는 특징을 가지고 있습니다.  useRef의 주요 특징1. 렌더링과 독립적ref 값이 변경되어도 컴포넌트가 리렌더링되지 않습니다.불필요한 렌더링을 방지..

들어가며  요즘 주변 개발자 분들과 이야기를 나누면서 오픈소스 기여에 관심을 가진 분들이 제 생각보다 많다는 것을 느끼게 되었습니다. 오픈소스 기여의 중요성과 그 가치에 대해서는 시간이 지날수록 많은 개발자들이 강조하는 요소 중 하나인 것 같기도 합니다.  학부생 시절에 오픈소스 기여의 중요성에 대한 강연도 몇 차례 있었고 인턴을 경험했던 회사 중 오픈소스 서비스를 제공하는 곳도 있었기에 중요성에 대한 이야기를 특히나 더 많이 들었던 것 같습니다. 오픈소스 기여의 효과 많은 사람들이 오픈소스 기여가 중요하다는 말을 하고 실제 기업에서 오픈소스 기여자를 우대조건으로 두기도 합니다. 그렇다면 오픈소스 기여를 한다면 정확히 무엇에 도움이 될까요? 제 주관적인 견해는 아래와 같습니다.오픈소스 커뮤니티에서 활동하..

시작하며 현재 진행 중인 프로젝트의 성능 개선을 위하여 가장 많은 사용자가 진입하고, 많은 로직을 처리하는 홈 부분부터 차근차근 개선을 시작하기로 하였습니다. Request Waterfall을 보며 특별한 문제가 없는지 확인해본 결과 아래와 같았습니다.    원인 script 태그의 위치가 태그 안쪽에 위치한 것이 PARSER-BLOCKING의 원인이었습니다. 해당 코드의 히스토리를 살펴보니 KAKAO JS SDK 탑재 공식 문서에 기재된 컨벤션을 유지하기 위하여 태그 안쪽에 위치하도록 작성된 것으로 보였습니다.  해결 및 처리 방향 진행하는 프로젝트의 경우에는 Next.js를 사용하고 있었기 때문에 script 태그를 next/script 컴포넌트로 교체하는 작업을 진행하였으며, Kakao JS S..

시작하며 시간이 지남에 따라 웹과 웹앱 애플리케이션은 더 많은 데이터 통신, 복잡한 UI 구성, 다양한 애니메이션과 많은 이미지 처리 등 처리하는 태스크들이 많아지게 되었습니다.  사용자에게 다량의 정보를 가공하고 더 보기 좋은 웹 애플리케이션을 제공하는 것은 큰 의미가 있겠지만 많은 것을 제공함에 따른 성능 저하로 인하여 사용자 경험이 떨어지기 쉬워졌습니다.  웹 페이지 성능 개선을 위한 최적화 작업은 웹 서비스를 제공하는 경우, 서비스 고객의 네트워크 전송량, CDN의 비용 등 여러 방면과 밀접한 연관을 가지고 있는 만큼 중요해졌습니다.    Google Chrome에서 제공하는 Lighthouse라는 Dev tool을 이용하게 된다면 웹 페이지의 성능을 쉽고 직관적이게 확인할 수 있습니다. 오늘은 ..

JavaScript 모듈 시스템에서 export default와 named export는 모두 모듈을 외부로 내보내는 방식입니다. 본 포스팅에서는 각 export의 차이점과 적절한 사용 방법에 대하여 이야기를 나누어보고자 합니다. 1. export defaultexport default는 모듈에서 기본으로 하나의 값만 내보낼 수 있게 합니다. 다음과 같은 상황에서 많이 사용됩니다.단일 값만 내보낼 때 적합 (예: 하나의 컴포넌트, 클래스, 함수 등).내보낸 모듈을 가져오는 쪽에서 임의의 이름으로 import가 가능.// math.jsexport default function add(a, b) { return a + b; }// 다른 파일에서import sum from './math'; // 임의의 이름으..

Next.js 14 버전 프로젝트에서 favicon(이하 파비콘)을 적용하던 도중 한 가지 에러 상황을 마주치게 되었습니다. 문제 상황로컬 개발 환경(localhost)상용 환경(vercel) 로컬 개발 환경에서는 파비콘이 정상적으로 적용되지만 vercel을 통하여 상용 배포를 진행한 경우에는 파비콘이 노출되지 않고 있음.투명 배경 파비콘을 적용하고자 하였지만 투명 배경이 적용되지 않고 흰색으로 노출되고 있음. 해결 방안 Next.js 14 버전으로 업그레이드 되며 파비콘을 관리하는 방법이 변경된 것으로 추정됩니다.https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons Metadata Files: favicon, icon..

TanStack Query(React Query)를 사용하다보면 stale time과 cache time을 직접 조작할 수 있다는 것을 알 수 있습니다. 하지만 막상 stale time과 cache time을 직접 건드릴 일이 생기면 각각 어떤 차이가 있고 어떤 기능을 수행하는지 잘 와닿지 않는 것도 사실입니다. 오늘은 두 가지를 정리해보고자 합니다.본 포스팅은 아래 TanStack Query의 `useQuery` 관련 공식 문서를 정리한 내용입니다. useQuery | TanStack Query React DocsDoes this replace [Redux, MobX, etc]? reacttanstack.com우리는 stale time과 cache time을 명확하게 이해하기 위해서는 TanStack ..

문제 상황 스크린샷처럼 react hooks이 적용된 컴포넌트에서 ‘Warning: React has detected a change in the order of Hook ~’에러가 발생하는 것을 볼 수 있습니다. 문제 확인 에러 문구 그대로 hooks의 순서가 변경됨에 따른 경고입니다. 위 사진에서는 useContext -> undefined 순서로 호출되던 hooks가 useContext -> useState 순서로 바뀐 것을 볼 수 있습니다. hooks의 순서가 변경되면 안되는 이유? 리액트에서 rooks의 주요 제약은 크게 아래 2가지 입니다. hooks는 함수형 컴포넌트 내부, 최상단에서 호출되어야 한다(조건문, 반복문, 함수 내부 X).hooks는 컴포넌트의 re-render마다 동일한 순서로..