SSR
-
[React Query] (5) SSRFront-End(Web)/React - 라이브러리들 2022. 8. 12. 21:12
🧐 서론 지난 포스팅까지 진행하며, React Query를 사용해서 데이터를 다루는 주요 문법들을 정리하였다. 프로젝트를 마이그레이션하며 적용하던 중, Next.js 세팅인 점을 상기했으며 당연히 React Query도 SSR을 위한 솔루션을 제공하는 것을 알았다. Next.js에서의 SSR을 React Query와 함께 사용하기 위해 어떤 방법이 있는지 한 번 정리해보도록 하겠다. 🌺 SSR 사용하기 공식문서는 React Query가 2가지 형태의 SSR을 지원한다고 소개한다. initialData : SSR 메서드로 불러온 응답을 React Query 기본값으로 넣어주는 방법 Hydration : SSR 내에서 prefetch를 통해 쿼리를 불러온 뒤, queryClient에서 dehydrate한 ..
-
[React] React 18 의 달라진 점들Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 18. 01:15
올해 3월, React v18.0 이 정식 릴리즈가 되었다. (2020년 10월, v17.0 이 릴리즈된지 약 1년반) 업데이트 소식과 베타버전은 작년부터 리포트 되어왔으며, 최근 정식 릴리즈됨에 따라 이 포스팅을 한 번 정리하면 좋겠다는 생각이 들었다. 지난 React v17.0 은 호환성, 안정화 정도의 간단한 업데이트라면, v18.0은 주요 기능들이 많이 추가되어 이례적으로 작년에 알파버전까지 릴리즈하기도 했다. 이번 기회를 통해 React를 버전업하는 방법, 그리고 이번에 추가된 주요 기능들에 대해 알아보도록 하겠다! 💙 React 18 시작하기 이번 React 18 버전에서 추가된 주요기능은 크게 아래 3가지로 소개된다. automatic batching : 여러 개의 상태 업데이트를 한 번에 ..
-
[Next.js] next/image - <Image> 컴포넌트Front-End(Web)/React - 프레임워크(React, Next) 2022. 3. 13. 13:22
이번에 토이를 Next.js로 진행하면서, 이미지를 Next.js에서 지원하는 컴포넌트로 적용하는 것을 권장한다는 메세지를 보았다. Next.js v10부터 컴포넌트를 지원했으며, 주요 목적이 바로 이미지 최적화(Optimization) 인 것이다. 컴포넌트를 사용하는 의의와 사용법에 대해 간단하게 공부하면서 정리해보았다! 🤍 컴포넌트는? 는 HTML의 태그에서 확장되어 built-in을 최적화하는 Next.js의 이미지 컴포넌트이다. Next.js 공식문서에서 설명하는 컴포넌트 사용의 의의는 아래와 같다. Basic Features: Image Optimization | Next.js Next.js supports built-in image optimization, as well as third par..
-
[Nuxt.js] Nuxt 학습기 - (2) LifeCycle & 렌더링 모드Front-End(Web)/Vue 2021. 11. 28. 19:54
🤔 서론 앞서 언급한, Nuxt.js의 SSR모드는 Universal SSR 이라고 지칭하며, 이는 고전적인 정적 SSR 방식과는 조금 다르다. 새로운 SSR 모드가 반영되게 된 배경으로는, 아무래도 기존 SSR의 단점인 데이터 통신 비효율성과 클라이언트 퍼포먼스를 개선하기 위해 CSR의 장점을 일부 차용한 것이다. 이러한 Universal 모드를 비롯해서, Nuxt.js 에서 지원하는 3가지 렌더링 모드(SPA, Universal, Static) 에 대해 자세히 알아보겠다! 📗 Nuxt.jsLifecycle 마지막으로, Nuxt.js의 각 사이드(Server, Client 및 라우팅 Navigation 시) Lifecycle을 좀 더 구체적으로 알아보고 포스팅을 마무리하고자 한다. 1. Server ..
-
[Nuxt.js] Nuxt 학습기 - (1) 개념 및 설치Front-End(Web)/Vue 2021. 11. 16. 01:06
🤔 서론 일전 Next.js를 공부하면서도, 그리고 회사의 이전 포털 사이트에 Nuxt.js를 사용하면서 SSR 프레임워크 환경을 어느정도 경험했었다. SSR(Server Side Rendering) 개념 자체가 이슈인 만큼, 학습뿐만이 아닌 다양한 경로(유튜브 등)를 통해 이를 접해왔었다. 회사의 리뉴얼 버전 코드에선 팀장님께서 Vue를 활용한 임의의 SSR 환경을 구성해주셨고, 여기서 역시 Nuxt와 유사한 개발경험을 해볼 수 있었다. (head 프로퍼티, asyncData 등) 이러한 개념들을 근본적으로 Nuxt.js 환경에서 개발해보고, 또 이외의 다양한 기능들을 학습해보고자 오픈API를 활용한 간단한 Nuxt.js 토이 프로젝트를 진행하였다. 이후 포스팅에선 Nuxt.js에서 활용한 주요 기능들..
-
[Next.js] Pre-RenderingFront-End(Web)/React - 프레임워크(React, Next) 2021. 7. 7. 01:45
오늘도 역시, Next.js의 주요기능인 Pre-Rendering에 대해 포스팅하려고 한다. 이전에, Next.js 입문에서 작성한 Pre-Rendering 부분을 좀 더 구체화하며, 관련된 메서드까지 소개하기 위함이다! * 이전 포스팅(Next.js 입문) : https://abangpa1ace.tistory.com/177 [Next.js] Next.js 입문 🤔 Next.js를 시작하며.. 정말 오랜만에 블로그를 쓰는것 같다. 이제 입사 1개월이 되어 task를 맡기도 하고, 구현에 맘이 앞서다 보니 중간중간 찾아본 주요한 정보들을 정리하는 시간을 가지지 못 abangpa1ace.tistory.com React 개발을 하면서, Data Fetch를 위해 componentDidMount() 라이프사이클..
-
[Next.js] Next.js 입문Front-End(Web)/React - 프레임워크(React, Next) 2021. 7. 1. 01:48
🤔 Next.js를 시작하며.. 정말 오랜만에 블로그를 쓰는것 같다. 이제 입사 1개월이 되어 task를 맡기도 하고, 구현에 맘이 앞서다 보니 중간중간 찾아본 주요한 정보들을 정리하는 시간을 가지지 못했다. 회사에서 FE 선임 개발자님, 그리고 기획 및 디자인과 함께 모바일 서비스를 만드는 사이드 프로젝트를 시작하게 되었다. React를 오랜만에 사용하니 떨리기도 하고, 새로운 기술을 적용할 생각에 우려가 앞서기도 한다. 이를 위한 학습 및 포스팅이 될 것 같다. 새로운 기술들 중, 요즘 화두가 되는 SSR을 지원하는 Next.js 프레임워크 적용에 흥미가 생겼으며, 사이드와 병행하여 가능한 학습도 같이해볼 생각이다! 🤍 Next.js 란? Next.js는 2016년 등장한 React 어플리케이션의 S..