Front-End

[Next.js] React-Query로 쿼리 캐싱한 데이터 가져오기

리액트 쿼리는 서버사이드 렌더링을 지원한다. NextJS에서 React-Query를 연동하는 방법을 지난번에 소개했었다. 그러나 나 조차도 프로젝트를 하면서 내가 캐싱에 대해서 잘못 생각하고 있었나?라는 사실을 깨닫게 되었다. 그래서 이번에는 React-Query에 캐싱개념을 좀 더 공부해 볼려고 한다. 지난번에도 말했지만 이번에도 한 번 더 개념을 짚어보고 가보자. NextJS에서는 getStaticProps 또는 getServerSideProps에서 props 객체를 페이지로 전달한 후에 리액트 쿼리의 initialData 옵션을 이용해서 SSR을 구현할 수도 있다. 이렇게 하는 방식이 잘못된 것은 아니지만 공식문서에서는 권장하지 않는다. 이유는 깊이 있는 컴포넌트 단에서 서버 사이드 렌더링한 데이터..

[Zustand] React 상태관리 라이브러리

현재 리액트 상태관리 라이브러리는 다양하게 존재한다. 대표적으로 Context API, Redux, MobX, Recoil, Jotai 등이 있다. 이 중 Redux가 상태관리 라이브러리의 시초격이라 할 수 있다. 그렇기 때문에 아직까지 많은 개발자들로 부터 사용되고 있으며 여전히 인기가 많다. 하지만 시간이 지날수록 상태관리 라이브러리로 Redux를 기피하고 걷어내고 있는 이유도 있다. 그것이 바로 보일러 플레이트 코드 때문이다. 즉, 반복적으로 비슷한 코드들이 여러곳에서 재사용되며, 비슷한 형태를 띄우는 코드를 뜻한다. 물론 Redux Toolkit이 이러한 점을 극복하고 있고 계속해서 업데이트되고는 있지만 여전히 보일러플레이트가 존재하며 문법이나 사용하는 방법이 익히는 데 어렵고 난해한 편이라고 생..

[Next.js] Serverless + Github Actions로 Vercel 배포 및 자동화 작업

Github Actions란? GitHub Actions는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이다. 레포지토리에 대한 모든 풀 요청을 빌드 및 테스트하는 워크플로를 생성하거나 병합된 풀 요청을 프로덕션에 배포할 수 있다. GitHub Actions는 단순한 DevOps를 넘어 리포지토리에서 다른 이벤트가 발생할 때 워크플로를 실행할 수 있도록 한다. 예를 들어, 누군가가 저장소에 새 문제를 생성할 때마다 적절한 레이블을 자동으로 추가하는 워크플로를 실행할 수 있다. GitHub 홈페이지 쉽게 얘기하면 깃헙에서 특정 이벤트가 발생했을 때 어떤 동작을 할지 설정해놔서 리액션을 자동화하는 서비스라고 보면 된다. CI / CD란? CI (Continuous Integratio..

[Next.js] 정적 사이트에 다크 모드 구현하기

굳이 다크모드를?? 대부분의 웹사이트는 다크모드를 지원하지는 않지만 요즘 들어 많은 사이트들이 다크모드를 지원하기 시작했다. 굳이 어두운 테마를 추가하는 이유가 뭘까? 우리가 어두운 곳에서 핸드폰을 볼 때 핸드폰 밝기를 낮추면서 보는 이유는 우리의 눈이 예민하기 때문이다. 계속해서 밝은 빛을 어두운 환경에서 비추게 되면 눈이 쉽게 피로해지며 눈 건강에도 좋지 않다. 또한, 나부터도 어두운 테마를 조금 더 선호하기 때문에 웹 접근성을 높이기 위해서 추가적인 리소스를 넣으면서까지 다크 모드를 설정할 수 있도록 구현해야 한다. 이 글은 Next.js에서 다크모드를 적용한 방법에 대해 정리할려고 한다. Next.js + Typescript + Styled-Components를 사용하여 어떻게 구현했는지 보자. ..

[Next.js] Sentry.io로 프론트엔드 모니터링 하기

가볍게 사용할 수 있지만 다양한 에러를 직관적으로 분석해주며, 알림 설정을 통해 어떤 문제가 생겼는지 알려주고 처리 할 수 있는 Sentry를 알아보자 프론트엔드 모니터링 프론트엔드에서의 오류는 크게 데이터 영역 과 화면 영역 이 두 가지 영역에서의 오류, 그리고 예상할 수 없는 네트워크 이슈나 다양한 런타임 오류로 나눌 수 있다. 이러한 오류는 언제든지 발생할 수 있는 오류이지만 개발자에게 이런 오류를 모두 예측하는 것은 거의가 아니라 불가능 한 일이다. 웹 사이트가 더욱 강력해지고 복잡해짐에 따라 성능 유리 관리가 점점 더 어려워지고 있다. 사용자는 사이트에서 경험하는 것을 기반으로 그 기업의 품질을 평가하기 때문에 사이트가 중단되거나 오류가 발생한다면 그 기업의 신뢰가 떨어질 수 있다. 프론트엔드 ..

[Next.js] Next with React-Query

리액트에서 엄청 유용하고 매 프로젝트마다 사용했던 React-Query. React-Query는 아직도 가장 핫한 라이브러리라고 생각한다. React-Query를 통해 get과 post 방식의 query를 손쉽게 사용할 수 있으면서 데이터를 손쉽게 cache 할 수 있다는 점에서 많은 기업들이 상태관리를 위해 도입하는 무척이나 매력적인 라이브러리라고 할 수 있다. 계속 강조하지만 Next.js를 유명하게 만든 가장 큰 요소 중 하나는 SSR이라고 생각하는데, 아쉽지만 React-Query의 hook의 경우 SSR이 아닌 CSR 방식으로 데이터를 가지고 온다. 이번 글에서는 React-Query의 데이터를 SSR로 사용할 수 있는 2가지 방식을 지원한다. 직접 데이터를 prefetch해와서 initialD..

[Next.js] Pre-Rendering

Pre-Rendering에 들어가기 전, SPA의 특성을 먼저 생각해보자. SPA (Single Page Application)은 처음이 느리고 그 다음부터 빠르다. SPA에서는 사용자가 실제 컨텐츠를 보려면 서버로 요청을 한 뒤에 HTML, JS, ASSETS 파일을 다 다운 받기 전 까지 대기해야한다. 그리고 다 다운받고 난 뒤 JavaScript를 이용해서 매 화면의 컨텐츠를 동적으로 바꾼다. 이러한 것들이 SPA를 느리게 하는 이유가 되는데, 이런 문제를 해결하기 위해서는 SSR위에 HTML 파일을 반환해줄 서버를 둬야한다. Next.js에서는 이런 문제를 Pre-Rendering으로 SSR보다 복잡하지 않은 비용으로 해결할 수 있다. Next.js의 Pre-Rendering React는 CSR로..

[NextJS] Hydrate?

Next.js 프레임워크의 동작원리를 알고있다면 Hydrate에 대해서는 이미 익숙하게 들었을 거다. 하지만, 놓치기도 쉬운 개념인 만큼, 이번에 제대로 공부하고 정리 해보려고 한다. 일단 React에서 렌더링 되는 과정과 Next에서 렌더링 되는 과정의 차이점에 대해서 정리 해 보자. React.js HTML과 JS파일을 한꺼번에 보내고 클라이언트에서 JS 코드를 통해 웹 화면을 렌더링한다. React는 JS파일만을 이용하여 웹 화면을 구성하는 원리를 가지고 있기 때문에 실제 HTML 코드는 안에 내용이 하나도 없는 상태이다. (CSR이 SEO에 적합하지 않은 원리) // public/index.html 단순 뼈대만 있는 HTML document와 Js 파일들을 클라이언트로 모두 보낸 뒤, 클라이언트 ..

Next.js를 사용하는 이유

Framework vs Library React는 라이브러리이고, Next는 React의 프레임워크이다. 이 둘의 궁극적인 차이점은 “응용 프로그램의 흐름 주도권을 누가 가지고 있느냐" 이다. 여기서 프레임워크란? 원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격 즉, 뼈대를 의미한다. 사용자는 코드를 작성하여 애플리케이션을 개발한다. 여기서 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분을 프레임워크가 관리한다. 라이브러리란? 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임. 즉, 특정 기능을 모아둔 코드 혹은 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미한다. Next.js SSR을 쉽게 구현하도록 도와주는 프레임워크 Next...

[Web] 프론트엔드 성능 최적화

웹은 무수히 많은 프로토콜과 많은 실행 환경 속에서 동작이 되고 있기 때문에 웹 성능 최적화를 위한 방법들을 단순히 정의하는게 쉽지는 않다. 성능 최적화는 단순히 각종 비용을 줄이는 측면에서 볼 수 있다. 왜냐? 프로그램은 컴퓨터의 리소스를 소모하면서 동작한다. 그러한 리소스에는 메모리 사용량, 처리 시간 등이 있다. 처리하는 작업이 복잡하고 클수록 리소스를 더 많이 소모하게 되기 때문에 성능 저하로 이어진다. 특히 웹 프론트엔드 환경에서는 각종 파일들을 주고 받으며 화면을 띄우고 업데이트하는 과정속에서 비용을 소모하기 때문에 웹 개발자는 최소한의 데이터로 가장 빠른 시간에 사용자가 불편함을 느끼지 않는 최적의 화면을 띄워야 한다. 이러한 성능 최적화를 통해 사용자 경험의 개선으로 이어지면서 기업의 실적..