사이드 프로젝트를 React 18과 Next.js 14의 app 라우터를 사용해 개발하였다. 사이드를 시작한 이유는 여러가지가 있었지만 무엇보다 프론트엔드, 특히 리액트와 Next.js을 중심으로 찾아온 변화가 궁금했다. 직접 사용해보고 더 깊게 알고 싶었기 때문에 새로운 기술을 도입하여 프로젝트를 진행하게 되었다. 사용한 뒤 알게 된 내용들을 간략히 정리

지난 글에 이어 쓰는 Next.js의 성능 최적화 사례에 대한 회고입니다.지난 글에서 작성한 최적화를 위한 체크리스트를 실제로 업무에 적용하여 성능 개선을 이룬 사례에 대해 적어보려 한다. 이 체크 리스트에서 최적화를 마친 이후, 각 항목이 실제로 얼마나 임팩트가 있었는지 확인해보았다.0. 최적화 리스트와 성과최적화를 위한 체크 리스트데이터 fetching

리액트에 대해 더 깊게 알고 싶어져 Learning React를 읽었다. 빠르게 완독하고, 리액트 문서를 읽은 뒤 다시 궁금했던 부분을 살펴보았는데, 실용적인 설명 위주인 문서보다 조금은 더 깊게 설명하는 부분이 있어 메모한다. 문서와 이 책을 번갈아보면 이해가 깊어져 좋다. 대부분의 서적이 훅의 사용법 자체에만 집중하고 있기 때문에, 약간은 더 깊게 살펴

이전 글을 통해, 이 글을 쓰게 된 계기인 ‘왜 상태는 불변성을 지켜야 하는가’에 대한 대답이 구체화되어 간다. 그러고보니, 이 글타래에서 불변성에 대해 정의를 내리지 않았던 듯하다. 불변성이란 함수형 프로그래밍의 주요 개념으로 위키에 따르면 다음과 같다.불변객체(immutable object)는 생성 후 그 상태를 바꿀 수 없는 객체를 말한다.

state와 상태 불변성에 대한 궁금증에서 시작된 리액트 상태 메모. 지난 글을 쓰다보니, 자연스럽게 이해되는 부분이 있어 먼저 정리하고 넘어간다. 리액트 상태 Statestate는 렌더링 사이에서 값을 저장 (데이터를 보관)setter는 리렌더링을 트리거 함수형 컴포넌트 기준으로 더 이해가 쉽다. 리액트 컴포넌트는 결국 (render()를 반환하는) 함수