🍒 Chae-ri Dev 🍒

리액트의 주차였던 3주차!!! 이번주 너무 빠르게 지나갔다..바로 회고 포스팅 시작하겠다.2025-01-13-MONReact 기본 개념 정리✏️다양한 기능이 추가되면서 자바스크립트 파일이 커지게 되어 브라우저가 부담되는 부분이 커져감MPA일 때는 첫 페이지에서 두번째로 갈때 새로고침되면서(깜빡이면서) 이동됨SPA일 때는 새로고침 없이 페이지 이동(사용자 경험 개선)dom을 직접 조작하면 성능 저하 발생=> 리액트에서 이를 해소하기 위해 가상dom을 활용함CSR => React서버로부터 받아온 json을 클라이언트에서 변화해서 쓸 수 있도록 한다ex) 구글 지메일 => 처음 실행할 때 로딩하고 페이지 보여줌(로딩할 때 html이랑 자바스크립트 번들 파일을 불러오는 것)SSR => NextJS요즘은 다시 서..

nginx 관련해서 들어가기 전에 먼저 웹 서버에 대해 간단히 정리하면서 시작해보겠다.웹 서버 웹 서버란 하드웨어와 소프트웨어 측면으로 나누어서 볼 수 있다.하드웨어웹 서버는 웹 서버의 소프트웨어와 website의 컴포넌트 파일들을 저장하는 컴퓨터컴포넌트 파일에는 HTML 문서, images, CSS stylesheets, 그리고 JavaScript 파일들이 있다.웹 서버는 인터넷에 연결되어 웹이 연결된 다른 기기들이 웹 서버의 데이터를 주고 받을 수 있도록 한다.소프트웨어기본적으로 웹 사용자가 어떻게 호스트 파일들에 접근하는지를 관리HTTP 프로토콜을 사용하여 클라이언트의 요청 처리 및 응답대표적으로 Apache와 Nginx가 있다. nginx nginx는 대표적인 상용 웹 서버 중 하나로, 클라이언트..

Portal이란?부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링을 해준다.즉, 컴포넌트의 상하 관계 구조를 가지고 있는 DOM 상에서 자식 컴포넌트를 부모 컴포넌트의 외부에 있는 다른 컴포넌트에 전달할 수 있도록 해준다. 리액트 프로젝트에서 해당 컴포넌트를 어디에 렌더링 시킬지,사전에 DOM을 선택하여 부모 컴포넌트 바깥에 렌더링해주는 기능이라고 생각하면 된다.ReactDOM.createPortal(child, container) ReactDom의 createPortal 메서드를 활용하여 포탈을 사용해 계층 밖으로 보낼 컴포넌트(child), 포탈로 이동할 목적지, DOM Element(container)를 인자로 넣어준다. 1. 모달이  렌더링할 위치 지정하기index.htm..

useReducer란?상태를 관리하고 업데이트하는 훅인 useState의 대체 함수.useState의 업그레이드 버전이라고 생각하면 된다.다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 useState가 아닌 useReducer 사용을 통해 컴포넌트의 성능을 최적화시킬 수 있다고 한다.(callback 대신 dispatch를 전달하기 때문) useReducer는 다음과 같이 사용된다.const [state, dispatch] = useReducer(reducer, initialArg, init);  state현재 상태 값. useReducer로 관리되는 상태의 현재 값이며, reducer 함수의 반환 값에 의해 업데이트 된다.초기 상태는 in..