Web67
[React🌀] Next JS 12 업데이트 사항 총 정리 📄
Next JS 12 React와 Next JS 는 끊임없이 변화중이죠.. 괜히 프론트엔드의 메이저 프레임워크로 자리잡혀가는 게 아닌 것 같습니다. Next JS 12 문서 React 18 은 여기 엄청 잘 정리가 되어 있음 Next JS 12 에는 어떤 변화가? Next JS 공식 블로그 에도 깔끔하게 잘 정리가 되어 있습니다. Rust Compiler rust 기반의 컴파일러로 바꿈 refresh 속도가 3배 빌드 속도가 5배 사용해보니 실제로 체감되는 속도 👍 React 18 Support React 18 버전을 지원 Server-Side Streaming Suspense 및 SSR 스트리밍 지원 HTTP 스트리밍을 통해 페이지를 서버 렌더링 가능 말 그대로 해석한 것이긴 한데, 아마 React 가 ..
[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을 이용한다면 이런 두가지 단점들을 극복할 수 있다고 합니다. ..
[GraphQL] GraphQL code generator 란 / GraphQL과 타입스크립트
Graph QL 과 타입스크립트 GraphQL은 웹 클라이언트가 데이터를 질의하는데에 최적화된 일종의 인터페이스이자 쿼리 언어입니다. 쿼리 언어이므로 결국 데이터를 주고받는 것이 필수적이고, 그에 따라 내부적으로 input 과 output의 데이터의 타입을 정의하게 되죠. 하지만 쿼리 언어이기 때문에, 결국 어플리케이션 단에서 사용하는 언어에 따라, 추가적으로 데이터 타입이나 인터페이스 작업이 필요하다는 번거로움이 있습니다. 이러한 부분을 해결해주는 것이 Graph QL code generator 입니다. GraphQL code generator? Graph QL code generator 은 *.graphql 의 파일에 존재하는 스키마와 쿼리를 바탕으로, 다양한 언어에 맞게 타입, 혹은 코드 자체를 생..
[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 의 의미 를 담고 있다고 생각합니다. (처음 들어보시는 분은 여기를 보시면 잘 설명..