[React🌀] Next JS middleware / 미들웨어 / (Next JS 12.0.0)
Next JS 12 next js 12버전이 공개되었습니다. 이번 업데이트는 'rust 컴파일러로 변경' , '리액트 서버컴포넌트' 등 이전 버전들보다 더 혁신적인 기능들이 많은 것으로 보이는데요, 그 중에 눈에 띄는 부분인 미들웨어 부분을 소개드리고자 합니다. Edge Function Middleware는 Edge Function 을 런타임으로 해서 사용이 됩니다. Vercel은 Edge Function 을 설명하기 위해 이런 스토리를 설명하고 있는데요, 속도가 빠르지만 정적인 컨텐츠만을 제공할 수 있는 CDN, 동적으로 매 요청마다 랜더링이 가능하지만 속도가 느린 동적 서버, 항상 양자 택일의 기로에 서있었다구요. Edge Function을 이용한다면 이런 두가지 단점들을 극복할 수 있다고 합니다. ..
2021. 11. 21.
[React🌀] React 서버 컴포넌트 / RSC의 도입 배경과 장점
들어가며 프론트엔드 세계에는, 시간이 갈수록 정말 많은 변화를 겪고, 많은 유용한 프레임워크와 라이브러리들이 생겨나고 있습니다. 그 중에 중요한 요소중 하나가 data를 fetching 및 rendering하는 부분인데요, 그래프QL이라던가 react-query 와 같은 기술들도 모두 서버로부터 데이터를 받아오는 데에 더 효율적이고 프로젝트에 적합한 구조를 도입할 수 있도록 해주는 역할을 합니다. 최근에는 Next JS와 같은 프레임워크를 이용해 필요한 곳에서만 부분적으로 SSR을 채용하면서, CSR과 SSR의 각각의 이점을 가져가고있는 추세이죠. 하지만 이런 구조 또한 완전하다거나 안정적이 방식이라고 하기에는 단점이 명확하게 존재하고, 꾸준히 변화하고 있는 부분입니다. 제 개인적인 생각으로는 State..
2021. 9. 20.
[React] 리액트 버전 18은 무엇이 달라졌을까? / React v18
들어가며 본 포스팅은 아래 링크된 리액트 공식문서를 바탕으로 작성된 글입니다. https://ko.reactjs.org/blog/2021/06/08/the-plan-for-react-18.html The Plan for React 18 – React Blog The React team is excited to share a few updates: We’ve started work on the React 18 release, which will be our next major version. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18. We’ve publish ko..
2021. 9. 8.
[React] 리액트 Concurrent 모드란
Concurrent 모드? 리액트 공식 문서 - Concurrent 모드 에 대해 리액트 공식문서를 보면 Concurrent 모드에 대한 도입이 실험적 단계로 진행되고 있다고 말합니다. 최근 점점 쓰이고 있는 'Suspense 모드' 또한 이런 concurrent 모드와 맥락을 함께합니다. 그렇다면 이 Concurrent 모드는 무엇이며 왜 등장한 것이고, 무슨 이점이 있을까요? Concurrent, 우리말로 하면 '동시의' 라는 뜻을 가지고 있습니다. Concurrent 모드는 한국말로하면 '동시 체계' 혹은 '동시 방법' 정도가 되겠네요. 컴퓨터 사이언스에 에서 자주나오는 개념인 concurrent / parallel 의 의미 를 담고 있다고 생각합니다. (처음 들어보시는 분은 여기를 보시면 잘 설명..
2021. 6. 6.
[React] 리액트 reconciliation(재조정) 이란? / 리액트 key
Virtual DOM 리액트에 있어서 reconciliation 의 개념을 이해하려면, 버츄얼 돔의 이해가 필요합니다. Virtual DOM에 대해서는 간단하게만 설명하고 넘어가겠습니다. 이 동영상 은 VDOM을 직관적으로 이해하는데 많은 도움을 주고, React 공식문서 VDOM 을 참고하셔도 좋습니다. 사실 VDOM은 워낙 유명하고 중요한 개념이기 때문에 검색을 통해 쉽게 레퍼런스를 찾으실 수 있을 겁니다. 😀 DOM 트리는 무겁습니다. DOM 트리를 전부 다시 그리는 것은, 브라우저 렌더링에 있어서 매우 큰 코스트를 잡아먹죠. 그래서 리액트는 메모리에 VDOM 이라는 가상의 돔 트리를 존재시키면서, 실제 DOM 트리를 렌더링 하는데에 있어서는, VDOM을 바탕으로 변경시킬 일부 부분만을 리렌더링하게..
2021. 6. 1.
[React] Next JS 이미지 최적화, 이미지 컴퍼넌트 / Image Component / Image Optimization
목차 Image Component & Image Optimization Quick look differences Configuration 외부에서 가져오는 이미지인 경우 Loader 설정 Caching 설정 Device Sizes Image Sizes Image Component & Image Optimization 💡 version 10.0.0 부터 이미지 최적화 기능을 사용할 수 있습니다. 대신 next/image 의 모듈을 이용하자! 리사이징, 최적화, 브라우저 호환 등을 지원한다. 최적화는 빌드 타임에 진행되지 않고, on-demand 하게 이루어진다. 즉, 이미지 개수에 따라 빌드 타임이 길어지지 않는다는 뜻이다. Quick look differences Feature Next.js Image ..
2021. 3. 8.
[React🌀] Next JS middleware / 미들웨어 / (Next JS 12.0.0)
Next JS 12 next js 12버전이 공개되었습니다. 이번 업데이트는 'rust 컴파일러로 변경' , '리액트 서버컴포넌트' 등 이전 버전들보다 더 혁신적인 기능들이 많은 것으로 보이는데요, 그 중에 눈에 띄는 부분인 미들웨어 부분을 소개드리고자 합니다. Edge Function Middleware는 Edge Function 을 런타임으로 해서 사용이 됩니다. Vercel은 Edge Function 을 설명하기 위해 이런 스토리를 설명하고 있는데요, 속도가 빠르지만 정적인 컨텐츠만을 제공할 수 있는 CDN, 동적으로 매 요청마다 랜더링이 가능하지만 속도가 느린 동적 서버, 항상 양자 택일의 기로에 서있었다구요. Edge Function을 이용한다면 이런 두가지 단점들을 극복할 수 있다고 합니다. ..
[React🌀] React 서버 컴포넌트 / RSC의 도입 배경과 장점
들어가며 프론트엔드 세계에는, 시간이 갈수록 정말 많은 변화를 겪고, 많은 유용한 프레임워크와 라이브러리들이 생겨나고 있습니다. 그 중에 중요한 요소중 하나가 data를 fetching 및 rendering하는 부분인데요, 그래프QL이라던가 react-query 와 같은 기술들도 모두 서버로부터 데이터를 받아오는 데에 더 효율적이고 프로젝트에 적합한 구조를 도입할 수 있도록 해주는 역할을 합니다. 최근에는 Next JS와 같은 프레임워크를 이용해 필요한 곳에서만 부분적으로 SSR을 채용하면서, CSR과 SSR의 각각의 이점을 가져가고있는 추세이죠. 하지만 이런 구조 또한 완전하다거나 안정적이 방식이라고 하기에는 단점이 명확하게 존재하고, 꾸준히 변화하고 있는 부분입니다. 제 개인적인 생각으로는 State..
[React] 리액트 버전 18은 무엇이 달라졌을까? / React v18
들어가며 본 포스팅은 아래 링크된 리액트 공식문서를 바탕으로 작성된 글입니다. https://ko.reactjs.org/blog/2021/06/08/the-plan-for-react-18.html The Plan for React 18 – React Blog The React team is excited to share a few updates: We’ve started work on the React 18 release, which will be our next major version. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18. We’ve publish ko..
[React] 리액트 Concurrent 모드란
Concurrent 모드? 리액트 공식 문서 - Concurrent 모드 에 대해 리액트 공식문서를 보면 Concurrent 모드에 대한 도입이 실험적 단계로 진행되고 있다고 말합니다. 최근 점점 쓰이고 있는 'Suspense 모드' 또한 이런 concurrent 모드와 맥락을 함께합니다. 그렇다면 이 Concurrent 모드는 무엇이며 왜 등장한 것이고, 무슨 이점이 있을까요? Concurrent, 우리말로 하면 '동시의' 라는 뜻을 가지고 있습니다. Concurrent 모드는 한국말로하면 '동시 체계' 혹은 '동시 방법' 정도가 되겠네요. 컴퓨터 사이언스에 에서 자주나오는 개념인 concurrent / parallel 의 의미 를 담고 있다고 생각합니다. (처음 들어보시는 분은 여기를 보시면 잘 설명..
[React] 리액트 reconciliation(재조정) 이란? / 리액트 key
Virtual DOM 리액트에 있어서 reconciliation 의 개념을 이해하려면, 버츄얼 돔의 이해가 필요합니다. Virtual DOM에 대해서는 간단하게만 설명하고 넘어가겠습니다. 이 동영상 은 VDOM을 직관적으로 이해하는데 많은 도움을 주고, React 공식문서 VDOM 을 참고하셔도 좋습니다. 사실 VDOM은 워낙 유명하고 중요한 개념이기 때문에 검색을 통해 쉽게 레퍼런스를 찾으실 수 있을 겁니다. 😀 DOM 트리는 무겁습니다. DOM 트리를 전부 다시 그리는 것은, 브라우저 렌더링에 있어서 매우 큰 코스트를 잡아먹죠. 그래서 리액트는 메모리에 VDOM 이라는 가상의 돔 트리를 존재시키면서, 실제 DOM 트리를 렌더링 하는데에 있어서는, VDOM을 바탕으로 변경시킬 일부 부분만을 리렌더링하게..
[React] Next JS 이미지 최적화, 이미지 컴퍼넌트 / Image Component / Image Optimization
목차 Image Component & Image Optimization Quick look differences Configuration 외부에서 가져오는 이미지인 경우 Loader 설정 Caching 설정 Device Sizes Image Sizes Image Component & Image Optimization 💡 version 10.0.0 부터 이미지 최적화 기능을 사용할 수 있습니다. 대신 next/image 의 모듈을 이용하자! 리사이징, 최적화, 브라우저 호환 등을 지원한다. 최적화는 빌드 타임에 진행되지 않고, on-demand 하게 이루어진다. 즉, 이미지 개수에 따라 빌드 타임이 길어지지 않는다는 뜻이다. Quick look differences Feature Next.js Image ..