Front-End/Next

Next.js 리액트 서버 컴포넌트

✔️ 기존 SSR의 한계 및 Next.js 서버 컴포넌트의 개념에 대해서 살펴보자 React Server Component는 리액트 18 버전에서 도입이 되었다. 기존의 서버 사이드 렌더링과는 완전히 다른 개념이다. 기존 리액트 컴포넌트와 SSR의 한계 기존의 React 컴포넌트는 클라이언트에서 작성이 되고 브라우저에서 자바스크립트 코드에 대한 처리가 이루어지게 된다. 그래서 React로 만들어진 페이지는 유저가 웹사이트를 방문했을 때 React 실행에 필요한 코드를 먼저 다운로드 받고 React 컴포넌트 트리를 브라우저에서 만들어주게 된다. React 컴포넌트 트리를 바탕으로 DOM에서 렌더링을 진행하게 된다. 기존의 이런 클라이언트 사이드 렌더링 방식에서 여러 가지 한계들이나 성능상의 이슈들을 마주했..

Next.js App Router

✔️ Next.js 앱 라우터의 개념과 Page, Layout에 대해서 살펴보자 Next 12 버전까지는 페이지 라우터 방식이 기본 방식으로 잘 사용되어 왔다. 기존의 페이지 라우터 방식을 잘 사용하고 있었는데 왜 13 버전부터는 앱 라우터라는 새로운 라우터 방식이 나왔을까? Page Router 방식의 한계모든 페이지에 들어가는 컴포넌트를 Next.js 페이지 라우터 방식으로 구현을 하기 위해서는 어떻게 해야 할까?각각의 페이지 컴포넌트에 를 일일이 넣는다 (권장하지 않는다)_app, _document 같은 파일에 를 넣는다이전에 살펴본 _app, _document의 목적_app : 페이지를 초기화하기 위한 용도로 사용페이지 변경 시 유지하고 싶은 레이아웃페이지간 추가적인 데이터 삽입global CS..

Next.js 프레임워크 라우팅 구조와 데이터 패칭

✔️ Next.js 프레임워크의 라우팅 구조와 데이터 패칭에 대해 살펴보자 페이지 라우트 구조페이지 라우터 구조는 pages라는 디렉토리 하위의 경로에 따라서 라우터 구조를 자동으로 가져가고 있다. Next.js를 템플릿을 사용해서 프로젝트를 시작을 하면 pages라는 디렉토리가 기본으로 만들어지게 된다. 해당 디렉토리 하위에 폴더도 만들 수 있고 파일도 만들 수 있다./pages/index.tsx : 웹 사이트의 루트(localhost:3000)/pages/hello.tsx : 경로는 /hello 로 접근할 수 있다(localhost:3000/hello)/pages/hello/[id].tsx : 대괄호 [] 는 여기에 어떠한 문자도 올 수 있음을 의미한다/pages/hello/123/pages/hell..

Next.js 프레임워크

✔️ Next.js 프레임워크가 무엇이고 동작 원리 및 페이지 역할에 대해 살펴보자 Next.js란?https://nextjs.org/Vercel에서 만든 풀 스택 웹 어플리케이션 구축 프레임워크페이스북 팀에서 만든 react-page라는 리액트 기반 서버 사이드 렌더링 프로젝트 → 여기서 영감을 받음라이브러리가 아니다서버 사이드 렌더링의 원리(스텝)해당 페이지에서 필요한 모든 데이터가 서버로 fetch된다 (A)서버는 이 HTML을 렌더링을 한다 (B)B에서 만든 HTML과 CSS, JavaSCript가 클라이언트로 보내지게 된다 (C)인터랙션이 없는 UI가 HTML과 CSS에 의해서 보여지게 된다마지막으로, React는 Hydration이라는 과정을 통해서 인터랙션을 브라우저 화면에서 적용을 시켜준다..

useSWR로 API 호출 재사용성 높이기

SWR란? React-Query와 비슷한 개념으로 서버에서 데이터를 가져와서 사용하는 Vercel이 개발한 React hooks이다. 더 자세한 개념이랑 사용 방법은 전 글을 참고하자 https://voyage-dev.tistory.com/158 이번에는 SWR hooks로 데이터를 프리렌더링 하며 axios를 이용해 호출 재사용성 높이는 방법을 알아보자. useSWR 함수 SWR 함수는 기본적으로 1개의 인자를 필수로 받는다. key : fetcher 함수에게 전달되는 인자 ⇒ 보통 URL을 넣는다 fetcher : 데이터를 실질적으로 fetch하는 함수이다 option : revalidate , mutate, initialData 등 옵션을 넣어줄 수 있다 사용 순서는 다음과 같다. fetcher를 ..

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

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

[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..