이것저것 스터디📚 (107) 썸네일형 리스트형 웹 서버와 WAS(Web Application Server) 1. 웹 서버(Web Server) - 웹 서버는 클라이언트(사용자)가 브라우저 주소창에 url을 입력하여 어떤 페이지를 요청하게 되면 http 요청을 받아들여 HTML 문서, CSS, 이미지, 파일 등과 같은 정적인 콘텐츠를 사용자에게 전달해주는 역할을 한다. - 웹 서버는 저장된 웹 리소스들을 클라이언트로 전달하고, 클라이언트로부터 콘텐츠를 전달받아 저장하거나 처리한다. - 만약 사용자로부터 동적인 요청이 들어왔을 때 해당 요청을 웹 서버 자체적으로 처리하기 어렵기 때문에 해당 요청을 WAS에게 요청한다. - 대표적인 웹 서버 종류 : Apache, Nginx 등 2. WAS(Web Application Server) - WAS는 웹 애플리케이션과 서버 환경을 만들어 동작시키는 기능을 제공하는 소프트.. CORS란 무엇인가? 1. CORS(Cross-Origin Resource Sharing) - CORS는 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념이다. - 즉, 교차 출처 리소스 공유(CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있도록 권한을 부여하도록 브라우저에 알려주는 체제이다. - 브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한하는데, cross-origin 요청을 하려면 서버의 동의가 필요하다. 만약 서버가 동의한다면 브라우저에서 요청을 허락하고, 동의하지 않으면 브라우저에서 거절한다. - 이렇게 허락을 구하고 거절하는 매커니즘을 HTTP-h.. CSR, SSG, SSR Next.js를 공부를 시작하면서 웹 사이트의 랜더링 방법에 대해서 학습하게 되었다. 그동안 React를 사용하면서 CSR 개념은 알고 있었지만, CSR과 더불어 다양한 웹 사이트의 렌더링 방법에 대해서 정리해보고자 한다. 1. CSR(Client Side Rendering) - CSR은 렌더링 하는 주체가 클라이언트(브라우저)다. - 서버는 빈 HTML(index.html)과 모든 로직을 처리하는 자바스크립트 번들을 반환한다. - HTML, React 라이브러리 소스 코드, 개발자가 작성한 js(React) 코드를 서버로부터 받고 브라우저가 렌더링을 실시한다. 장점 - 처음 페이지가 로딩된 이후에는 부드럽고 빠른 사용자 경험을 제공한다. - 그 이유는 처음 렌더링을 할 때 필요한 파일들을 모두 서버로부.. React 공식문서 -<Profiler> - 를 사용하면 프로그램적으로 React 트리의 렌더링 성능을 측정할 수 있다. - id : 측정 중인 UI 부분을 식별하는 문자열 - onRender : 프로파일링된 트리 내의 컴포넌트가 업데이트될 때마다 React가 호출하는 onRender 콜백. 이 콜백은 렌더링된 내용과 소요된 시간에 대한 정보를 받는다. onRender callback - React는 렌더링된 내용에 대한 정보와 함께 onRender 콜백을 호출한다. function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) { // Aggregate or log render timings... // 렌더링 타이밍을 집계하거나 로그를 남깁니다... } - i.. React 공식문서 -<StrictMode> - 를 사용하면 개발 중에 컴포넌트에서 흔히 발생하는 버그를 조기에 발견할 수 있다. - Strict Mode는 다음과 같은 개발 전용 동작을 활성화한다. 1. 불완전한 렌더링으로 인한 버그를 찾기 위해 한 번 더 렌더링한다. 2. Effect 클린업이 누락되어 발생한 버그를 찾기위해 Effect를 한 번 더 실행한다. - 전체 앱에 Strict Mode를 사용하려면 렌더링할 때 루트 컴포넌트를 로 감싼다. import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; const root = createRoot(document.getElementById('root')); root.render( ); - 만약 앱의 일부분.. React 공식문서 -useDeferredValue - useDeferredValue : UI 일부의 업데이트를 지연시킬 수 있는 React 훅이다. import { useState, useDeferredValue } from 'react'; function SearchPage() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); // ... } - 업데이트가 발생하면, 지연된 값은 최신 값보다 "뒤쳐지게" 됩니다. - React는 먼저 지연된 값을 업데이트하지 않은 채로 렌더링한 다음, 백그라운드에서 새로 받은 값으로 다시 렌더링을 시도한다. import { Suspense, useState } from 'react'; import SearchR.. DeepDive - 45장. 프로미스 - 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용하는데, 전통적인 콜백함수는 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한 번에 처리하는데도 한계가 있다. - ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했다. 45.1 비동기 처리를 위한 콜백 패턴의 단점 45.1.1 콜백 헬 - 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다. - 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료되기 때문에, 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 .. React 공식문서 -useInsertionEffect - useInsertionEffect는 CSS-in-JS 라이브러리 작성자를 위한 훅이다. CSS-in-JS 라이브러리에서 작업중에 스타일을 주입하는 경우가 아니라면 useEffect나 useLayoutEffect가 더 나을 수 있다. - useInsertionEffect는 useEffect의 버전 중 하나로, DOM 변이 전에 실행된다. - 즉, useInsertionEffect를 호출하여 DOM 변이 전에 스타일을 주입한다. Usage(사용법) Injecting dynamic styles from CSS-in-JS libraries(CSS-in-JS 라이브러리에서 동적 스타일 삽입하기) - CSS-in-JS에는 세 가지 일반적인 접근 방식이 있다. 1. 컴파일러를 사용하여 CSS 파일로 정적 추출 .. 이전 1 2 3 4 5 6 7 ··· 14 다음 목록 더보기
