본문 바로가기

분류 전체보기340

Virtual DOM, 가상 돔 이란? DOM(Document Object Model) 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다. DOM은 애플리케이션의 전체 UI를 나타내며 트리 데이터 구조로 표현된다. 여기에는 Web Document에 있는 각 UI 요소에 대한 노드가 포함된다. 웹 개발자가 JavaScript를 통해 콘텐츠를 수정할 수 있기 때문에 매우 유용하다. 또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고, 모든 코드 작업이 훨씬 쉬워지기 때문에 많은 도움이 된다. DOM의 문제점 DOM은 트리 구조로 되어 있어서 이해하기 쉽지만, 노드의 수가 많아질 수록 속도가 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다. 또한, 최근 모던 웹은 SPA(Single Page Applicat.. 2022. 1. 14.
REST API 설계 가이드 1. REST란? 1-1. REST API의 탄생 REST는 Representational State Transfer라는 용어의 약자로서 2000년도에 로이 필딩(Roy Fielding)의 박사학위 논문에서 최초로 소개되었다. 로이 필딩은 HTTP의 주요 저자 중 한 사람으로 그 당시 웹(HTTP) 설계의 우수성에 비해 제대로 사용되지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다고 한다. 1-2. REST 구성 요소 자원(Resource) : URL 모든 자원에는 고유한 ID가 존재하게 되고, 이 자원은 서버에 존재한다. 자원을 구별하는 ID는 HTTP URL로 구분하게 된다. ex) /members/1 클라이언트는 URL을 이용하여 자원을 지정하고 해당.. 2022. 1. 13.
[React.js]Recoil selector 비동기 처리 에러 Error: App suspended while rendering, but no fallback UI was specified. Add a component higher in the tree to provide a loading indicator or placeholder to display. const [data, setData] = useRecoilState(exRecoilSelecter); 위와 같이 미리 선언된 selector를 사용하기 위해서 useRecoilValue를 통해 접근할 시, 해당 에러가 발생한다. 비동기 처리 시(loading, 랜더링할 데이터가 도착하기 이전) 보여줄 fallback UI가 없다는 에러메시지이다. 해결 방법은 아래와 같다. 1. i18n.js 구성 변경(react.. 2022. 1. 13.
브라우저에서 서버까지 응답 흐름 인터넷 브라우저(IE, Chrome, Safari 등)에서 URL 입력이 들어왔을 때 서버까지의 흐름에 대해서 알아본다. 1. 사용자의 URL 요청 사용자가 브라우저 검색창에 www.google.com과 같은 주소를 요청하는 단계이다. 2. 브라우저의 URL 분석 URL은 인터넷에서 자원의 위치(Uniform Resource Locator)를 나타낸다. URL은 웹에서 정해진 유일한 자원의 주소일 뿐이다. URL의 기본적인 구조는 아래와 같다. Protocol(프로토콜) : 브라우저가 어떤 프로토콜(네트워크에서 데이터를 교환하거나 전송하기 위한 방법들의 세트)을 사용해야 하는 지, 예를들어 http, https, ftp가 있다. Domain Name(도메인 이름) : 어떤 웹 서버가 요구되는 지, 도메인.. 2022. 1. 11.
브라우저 동작 원리 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다. 브라우저는 서버로부터 HTM, CSS, Javascript, 이미지 파일 등을 응답받는다. HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 표시한다. 브라우저의 기본 구조 사용자 인터페이스 : 여기에는 주소 표시줄, 뒤로/앞으로 가기 버튼, 북마크 메뉴 등이 포함된다. 요청한 페이지가 표시되는 창을 제외한 브라우저의 모든 부분이 표시된다. 브라우저 엔진 : UI와 렌더링 엔진 간의 작.. 2022. 1. 10.
CORS(Cross-Origin Resource Sharing) 문제 해결하기 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS) 추가 HTTP 헤더를 사용하여, 실행 중인 웹 애플리케이션이 다른 출처(Origin)에 존재하는 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 Origin(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다. 예시: 프론트 엔드(https://domain-a.com)의 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우, 보안 상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다. 예를 들어, XMLHttpRequest와 Fet.. 2022. 1. 6.
반응형

티스토리툴바