⚡5.1 상태관리의 필요성상태란 흔히 웹 애플리케이션을 개발할때 이야기하는 상태는 어떠한 의미를 지닌 값이며, 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미함 (UI, URL, form, 서버에서 가져온 값)5.1.1 리액트 상태관리의 역사🌕Flux 패턴 단방향으로 데이터 흐름을 변경하는 것 (양방향 데이터 바인딩 / 코드의 양이 많아지고 변경시나리오가 복잡💡 Flux패턴의 용어action : 어떠한 작업을 처리할 액션과 그 액션이 발생시 함께 포함시킬 데이터를 의미dispatcher : 액션을 스토어로 보내는 역할store : 실제 상태에 따른 값과 상태를 변경할 수 있는 메서드를 가짐view : 리액트의 컴포넌트에 해당하는 부분양방향 데이터 바인딩은 데이터 흐름은 모두 액션..

⚡서버 사이드 렌더링 - 4.3 Next.js4.3.1 Next.js란?리액트 기반 프로젝트에서 서버 사이드 렌더링을 고려할때 가장 많이 선택함4.3.2 Next.js 시작하기💡Next.js 프로젝트 만들어보기npx create-next-app@latest --ts프로젝트 생성 후 npm run dev를 통해 접속하면 됨🌕 package.jsonnpm프로젝트를 볼때 package.json을 확인해야 함🌕의존성next : Next.js의 기반이 되는 패키지elint-config-next : Next.js 기반 프로젝트에서 사용하도록 만들어진 ESLint설정🌚next.config.js프로젝트의 환경 설정을 담당 pages/_app.tsx : 에러 바운더리를 사용해 애플리케이션 전역에서 발생하는 에러 ..

⚡서버 사이드 렌더링 - 4.2 서버 사이드 랜더링을 위한 리액트 API 살펴보기 Node.js같은 서버환경에서만 실행할 수 있으며, window환경에서 실행 시 에러가 발생할 수 있음리액트에서 서버 사이드 렌더링을 실행할 때 사용되는 API를 확인해 보려면 리액트 저장소의 react-dom/server.js를 확인하면 됨react-dom/server.js에는 react-dom이 서버에서 렌더링하기 위한 다양한 메서드를 제공하고 있음4.2.1 renderToString인수로 넘겨받은 리액트 컴포넌트를 렌더링해 HTML문자열로 반환하는 함수최초페이지를 빠르게 HTML로 먼저 렌더링 하는 역할클라이언트에서 실행되는 자바스크립트 코드를 포함시키거나 렌더링하는 역할까지 해주지는 않음클라이언트에서 실행되지 않고,..