All
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이라는 과정을 통해서 인터랙션을 브라우저 화면에서 적용을 시켜준다..
Suspense
✔️ React 18에서 추가된 Suspense에 대해 살펴보자 Suspense란?fallback 컴포넌트를 로딩이 끝날 때 까지 보여주는 기능이다.사실 Suspense는 React 16.6 버전에서 실험적으로 도입된 기능이었다.기존의 한계Next.js에서 사용할 수 없었다. → (React 18) Next.js에서도 사용할 수 있게 되었다.컴포넌트가 마운트가 되기 전에 effect가 실행되는 문제가 발생했다. → (React 18) 컴포넌트가 화면에 실제로 노출될 때 effect가 실행된다.이전에는 컴포넌트가 스스로 Suspense에 의해 보여지고 있는지 없는지 알 방법이 없었다. → (React 18) Suspense로 인해 컴포넌트가 보이거나 사라질 때도 effect가 정상적으로 실행이 되는 방식으..
자동 배치(Automatic Batching)
✔️ React 18에서 추가된 자동 배치(Automatic Batching)에 대해 살펴보자 리액트에서 항상 관심을 가지는 있는 주제는 바로 상태를 어떻게 업데이트 할 것인가 이다. useTransition이나 useDeferredValue 같은 훅들도 어떻게 하면 상태를 잘 업데이트할 수 있을까에 대한 고민에서 나온 기능이라고 볼 수 있다. 리액트 컴포넌트에서는 하나의 상태만 가지고 있기 보다는 두 개 이상의 상태를 가지고 있는 경우가 훨씬 더 많다. 이러한 경우 상태가 하나씩 업데이트가 될 때마다 컴포넌트는 리렌더링을 수행하게 된다. React 트리가 깊고 복잡해질수록 다루는 상태가 많아지게 되고 리렌더링 횟수가 기하급수적으로 늘어나게 되는 문제가 발생한다. 이러한 문제를 해결하기 위해서 나온 기능..
React v18
React 18 버전에 대한 소개✔️ React 18 버전에 대해 알아보자→ 24년 4월 25일 React 19 베타 버전이 출시되었지만 아직 정식으로는 출시되지 않았기 때문에 지금은 18버전에 대해 알아보고 추후에 19버전에 대해 알아보자! React 18 공식 문서React v18.0 – React React v18.0 – ReactThe library for web and native user interfacesreact.dev 가장 중요한 내용은 동시성을 지원한다 즉, UI에 여러가지 버전이 한꺼번에 존재를 하는데 이러한 버전들을 동시에 보여주는 것을 동시에 보여주는 것을 가능하게 하는 것이 동시성이다이러한 동시성은 외부에서는 잘 보여지지 않지만 리액트 팀에서 내부적으로 구현을 할 때 이 개념을 ..
CSR과 SSR
✔️ CSR(클라이언트 사이드 렌더링)과 SSR(서버사이드 렌더링)을 비교해서 살펴보자 CSR한 문장으로 정리를 해 보면 브라우저에서 컨텐츠를 그리는 동작을 직접 하는 것을 의미한다처음에 클라이언트가 서버로부터 리소스를 받아올 때 HTML 파일을 받아오는데 그때 빈 HTML 파일만 받아오게 된다. 그러면 사용자 입장에서는 화면에서 그 HTML 파일이 보여지더라도 아무것도 이제 볼 수가 없는 흰 화면만 나타나게 된다. 그 빈 뼈대를 가지고 그 다음에 브라우저가 자바스크립트 파일을 다운로드를 받는다. 그렇게 됐을 때 자바스크립트 안에서 이 HTML 안에 컨텐츠들을 그려주는 로직들이 포함이 되게 되어 있다. 그래서 그렇게 자바스크립트가 실행이 되면서 컨테츠가 만들어지고 렌더링이 되어지면서 보여지는 컨텐츠가 나..
브라우저 렌더링의 원리
✔️ 브라우저 렌더링이 어떤 과정을 통해 이루어지는지 살펴보자사용자 인터페이스브라우저를 켰을 때 확인할 수 있는 주소 표시줄, 뒤로 가기 버튼, 새로고침 버튼 등, 요청한 페이지를 보여주는 창외에 사용자가 컨트롤 할 수 있는 부분우리가 보고 있는 페이지를 제외한 나머지 브라우저의 그 프레임 부분에 해당하는 부분을 사용자 인터페이스라고 한다브라우저 엔진사용자 인터페이스에서 어떤 동작이 왔을 때 브라우저 엔지을 통해서 전달이 된다사용자가 주소창에 입력한 URI 값을 렌더링 엔진에게 전달해 주는 역할새로고침, 뒤로 가기 버튼 등 명령 또한 렌더링 엔진에게 전달한다자료 저장소자료를 저장하는 레이어쿠키나 세션 등 모든 종류의 자원을 하드디스크에 저장한다HTML5 명세에는 브라우저가 지원하는 웹 데이터베이스가 정의..
유틸리티 타입
유틸리티 타입?유틸리티 타입이란 공통 타입 변환을 용이하게 하기 위해서 타입스크립트에서 지원하는 문법이다자주 사용하는 7가지 타입PartialT라는 타입의 모든 프로퍼티를 선택적으로 만드는 타입을 구성하는 유틸리티 타입이다.이 유틸리티 타입을 통해서 주어진 타입의 모든 하위 집합을 나타내는 타입을 반환할 수 있다.interface Todo { title: string; description: string;}function updateTodo(todo: Todo, fieldsToUpdate: Partial) { return { ...todo, ...fieldsToUpdate };} // fieldsToUpdate는 Todo으 부분집합을 선언해 줄 수 있다const todo1 = { t..