초고 서버의 성능 최적화를 위해 프레임워크를 변경시키는 것을 고려하고 있다. 응답속도나 처리 속도보다는 메모리 사용률을 최소화시키는 방향으로 최적화하고 싶다. 클라이언트에는 그동안 써왔던 React를 썼지만 서버는 배웠던 프레임워크가 없었기 때문에 간편하게 바로 짤 수 있는 express.js를 사용했다. 또 신생 프레임워크보다 챗지피티에게 짜달라고 하기도 쉽고. 그러던 어느 날, 프레임워크별 성능 차이 표를 보게 되었다. https://youtu.be/a8uPDppckQk?si=Y6wD-fHww1tOgxoi - 출처: 유튜브 코딩애플 심플하게 nodejs + express를 사용하는 것보다 bun이라는 새로운 자바스크립트 런타입과 fastify라는 JS 서버 프레임워크를 사용하면 성능이 엄청나게 상승하..
Context로 데이터 깊숙이 전달하기 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 data를 전달한다. 그러나 중간에 여러 컴포넌트를 거쳐야 하거나 앱의 여러 컴포넌트가 동일한 정보를 필요로 하는 경우 props를 전달하면 장항하고 불편해질 수 있다. Context를 사용하면 부모 컴포넌트가 깊이와 무관하게 하위의 모든 컴포넌트에서 data를 사용할 수 있다. 학습 내용 “Prop drilling”이란 무엇인가 반복적인 prop 전달을 Context로 대체하는 방법 Context의 일반적인 사용 사례 Context에 대한 일반적인 대안 Passing props의 문제 Passing Props(props 전달): UI 트리를 통해 데이터를 컴포넌트에 명시적으로 연결할 수 있는 좋은 방법..
44장 REST API REST란? REpresentational State Transfer의 약자 HTTP/1.0과 1.1의 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 펄딩의 2000년 논문에서 처음 소개되었음 발표 당시의 웹이 HTTP를 제대로 사용하지 못하고 있는 상황을 보고 HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 소개되었다. RESTful REST의 기본 원칙을 성실히 지킨 "서비스 디자인"을 RESTful하다고 표현한다. REST 아키텍처 스타일을 따르고 있는 것을 나타내는 형용사. 차이점 REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST API는 REST를 기반으로 서비스 API를 구현한 것. 설계된..
state 보존 및 재설정 state는 컴포넌트 간에 격리된다. React는 UI 트리에서 어떤 컴포넌트가 어떤 state에 속하는지를 추적한다. React는 state를 언제 보존하고 언제 초기화할지를 제어할 수 있다. 학습 내용 React가 컴포넌트 구조를 “보는” 방법 React가 state를 유지하거나 재설정하도록 선택할 때 React가 컴포넌트의 state를 재설정하도록 강제하는 방법 key와 type이 state 보존 여부에 영향을 미치는 방법 UI 트리 브라우저는 UI를 모델링하기 위해 "여러 트리 구조"를 사용한다. DOM은 HTML element CSSOM은 CSS Accessibility 트리도 있다! => 이처럼, React도 트리 구조를 사용하여 사용자의 UI를 관리하고 모델링한다!..
State 구조 선택 state를 잘 구조화(structuring)하면 수정과 디버깅이 편한 컴포넌트를 만들 수 있다. 이번 장에서는 state를 구조화할 때 고려해야 할 몇 가지 팁에 대해 알아볼 것이다. 학습 내용 단일 state 변수를 사용해야 하는 경우 vs. 다중 state 변수를 사용해야 하는 경우 state 정리시 피해야 할 사항 state 구조와 관련된 일반적인 문제를 해결하는 방법 Principles for structuring state state 구조화 원칙 state를 보유한 컴포넌트를 작성할 때는 선택을 해야 한다. 얼마나 많은 state 변수를 사용할지 데이터의 모양은 어떻게 할지 등등 최적화되지 state 구조를 사용해도 문제는 없지만, 더 나은 선택을 위한 몇 가지 원칙이 있..
