Overview 2022년, 모던 프론트엔드 개발 생태계를 주도하고 있는 React와 Next는 각각 새로운 Major 버전(React 18, Next13)을 Release 했습니다. React18에서는 Server Component와 Streaming HTML이라는 개념이 등장했고, 이를 FrameWork Level에서 지원하기 위해 Next13에서는 (아직은 Beta 버전인) App Directory라는 개념을 선보였습니다. 이 기능이 출시되자마자 이를 바로 작은 프로젝트에 적용해 보시면서 Pros / Cons를 이야기해 주시는 사내 시니어 프론트엔드 개발자분의 이야기를 듣다가. "어 그러면 기존의 React Application Component 일부분이 Server Component로 대체되면 기..

Overview Nextjs가 편리한 점은 웹 사이트 최적화를 위해 고려해야 하는 여러 가지 사항들을 대부분 "미리" 고려해서 default 옵션으로 제공해 주고 있다는 것입니다. 이번 포스팅에서는 Nextjs에서 웹 사이트 최적화를 위해 제공하는 기능 중의 하나인 Next/Image 가 내부적으로 어떻게 동작하는지에 대해 살펴보려고 합니다. 공식 문서에서 찾아볼 수 있는 내용들은 포함되어 있지 않으며, 실제로 nextjs 라이브러리가 어떻게 구현되어 있는지를 소스 코드를 기준으로 설명합니다. Image Optimization next/image 를 사용하려면 html의 img 태그 대신에 다음과 같이 next/image를 import 해서 사용하면 됩니다. 사용법이 굉장히 간단하고, next/image..

Overview Nextjs 공식문서에 따르면 next v9 이후 버전부터는(현재 기준 release 버전은 12.1.1) getInitialProps 대신에 getStaticProps와 getServerSideProps를 사용하도록 권장합니다. 이는 getInitialProps가 Client Side와 Server Side에서 모두 동작하는 특징을 갖고 있기 때문입니다. 이번 포스팅에서는 Nextjs의 getInitialProps의 구현을 살펴보며 실제로 어떤 식으로 동작하는지를 살펴보도록 하겠습니다. Official Documents getInitialProps를 설명한 공식문서를 보면 다음과 같은 설명을 확인할 수 있습니다. getInitialProps enables server-side rende..

Overview Web Programming 여러 분야의 개발을 동시에 하면서 항상 그래 왔지만 유난히도 '참 가야 할 길이 멀구나' 싶은 생각이 들었던 한 주였다. 우선 프런트엔드 쪽에서는 그동안 개발했던 웹 랜딩페이지(+모바일 대응) 보다는 철저히 모바일을 위한, 데스크톱이 아닌 디바이스의 환경에 최적화된 웹뷰 작업이었다. 프론트엔드 개발을 하면서 가장 귀찮았던 것이 크로스 브라우징이었는데 디바이스 쪽은 훨씬 고려해야 할 것들이 많았다. 기본적으로 브라우저 대응(iOS -> Safari, Android -> Chrome)및 다양한 해상도와 Notch 등의 디바이스 특성 등을 고려하면서도 전반적으로 데스크톱이 아닌 디바이스이기 때문에 고려해야 할 사항들(보안상 이슈로 인한 동영상 플레이 제한 등)까지 ..

Overview 회사에서 새롭게 읽게 되는 여러 코드들을 통해, 그리고 코로나 19의 거리두기 강화로 인한 재택근무로 인해 접하게 되는 콘텐츠의 양과 질이 동시에 높아졌던 한 주였던 것 같다. 무엇보다 월간 750만 유저가 사용하는 글로벌 서비스(Qanda)를 프로덕션 하는 회사이니만큼, 그만큼의 트래픽을 감당하기 위한 여러 아키텍처들을 보고, 또 질문하면서 어깨너머로 다양한 코드들을 익힐 수 있어서 굉장히 좋은 경험을 했던 한 주였다. Nextjs Nextjs는 React JS에서 서버 사이드 렌더링(SSR)을 할 수 있도록 지원해주는 프레임워크이다. 사용해 본 결과, React JS에서 Next JS를 사용한다는 느낌보다는 Nextjs 프레임워크 내에서 React를 사용하는 느낌이 더 강했다. 공식 ..

Overview 새로 입사한 회사에서 사용하는 프레임워크 및 코드 관습들을 익히는데 주로 많은 시간을 사용했었던 한 주였다고 정리할 수 있을 것 같다. 기본적으로 React + Django를 사용해서 개발하는 스타일이지만, SPA 방식이 아닌 SSR (Server Side Rendering) 방식을 주로 사용하고 있었기 때문에 React에서 손쉽게 SSR을 지원해주는 Nextjs에 대해 공부하고 이것저것 정리하는 시간을 가졌다. 또한 상태관리 라이브러리로는 기존에 익숙했던 Redux가 아닌 Observable 기반의 Mobx를 사용하고 있었기 때문에 이에 대해서도 공식문서를 읽으며 간단한 튜토리얼을 진행했다. Nextjs & Mobx Nextjs는 리액트에서 Server Side Rendering에 필요..