보호되어 있는 글입니다.
보호되어 있는 글입니다.
보호되어 있는 글입니다.
보호되어 있는 글입니다.
1. Virtual DOM 가상 돔 일단 DOM에 대해 먼저 알아야 한다. DOM - Document Object Model 요소를 담은 것이 문서 돔은 트리구조로 요소를 노드로 표현한 것 (API 제공 -> 이걸로 DOM 조작, querySelector 등등) Virtual DOM 실제 돔을 복사한 것. (JS객체 형태로 메모리상에 저장된다.) 그러나 요소를 조작할 순 없다. (API 제공하지 않기 때문) 리액트는 이 가상돔을 사용하여 빠른 업데이트를 할 수 있게 했다. (실제 돔을 조작하지 않기 때문) React는 가상돔을 어떻게 활용하길래 빠른 업데이트를 하나? 리액트는 항상 두 개의 가상 돔을 갖고 있다. 렌더링 이전 객체 (변경 이전) 렌더링 이후에 보이게될 화면 구조를 나타내는 객체 (변경 이..
보호되어 있는 글입니다.
#js #js기본 JavaScript는 단일 스레드 언어다. 한 번에 하나의 작업만 처리할 수 있다. 이러한 특성 때문에 비동기 처리 모델을 사용하여 I/O 작업 등이 진행되는 동안 다른 작업을 수행할 수 있도록 한다. 비동기 콜백 함수는 일반적으로 두 가지 종류의 큐에서 관리된다. 우선순위: micro task queue > task queue 1. 마이크로 태스크 큐 (micro task queue) Promise의 then 메서드나 async/await 등에 의해 생성된 콜백 함수가 저장되는 곳입니다. 이벤트 루프가 각 반복에서 호출 스택을 비우면, 마이크로 태스크 큐 를 확인하고 그 안의 모든 콜백을 실행합니다. 2. 태스크 큐 (task queue) setTimeout, setInterval 과..
1. MSW 세팅과 버전 업그레이드 msw 1. MSW로 미리 API 만들기 - 서버 쪽 세팅 유의. 넥스트에서 매끄럽게 되지 않는 부분이 있다. 1-1) 설치 npx msw init public/ --save // 넥스트 프로젝트 폴더 내에 public 폴더 // y 클릭 npm install msw --save-dev (1번을 실행하면 public에 mockServiceWorder.js가 실행됨) 🧐 어떤 때에 MSW를 쓰나요? 개발 환경에서 억지로 에러를 내거나 매번 로그인하는 것을 skip할 때 msw를 사용하면 좋다. 1-2) src/mocks 폴더구조 Next Server에서는 아직… node 로 대신해보자. 서버, 클라이언트 두 환경 모두 msw가 돌아야 한다. 그런데 아직 Next.js 서..
페러랠 라우트 (Paraller Routes) 목차 페러랠 라우트 정의 렌더링 예시 사용법 default.tsx useSelectedLayoutSegments(s) 페러랠 라우트? 패러랠 라우트, 즉 병렬 라우팅을 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시 혹은 조건부로 렌더링한다. 렌더링 예시 1. 동시 렌더링 예시 @team/page.js와 @analytics/page.js는 패러렐 라우트의 동일 레벨인 layout.js의 Props로 전달된다. 두 개가 동시에 공존할 수 있음을 보여주는 예시이다. [독립적으로 스트리밍 -> 오류와 로딩상태도 독립적으로] 이들은 독립적으로 스트리밍되고, 독립적인 오류 및 로딩 상태를 정의한다. 2. 조건부 렌더링 예시 인증 상태와 같은 특정 조건하에 조건..