브라우저

바닐라 자바스크립트로 웹 애플리케이션을 만드는 고된 과정 속에는 DOM 조작이 필수적으로 들어간다. 그런데 이 DOM 조작은 때로는 안티 패턴(Anti-Pattern)으로 인식되기도 한다. 이번에는 DOM을 조작하는 Web API에는 주로 어떤 것들이 있고, 어떻게 하면 DOM을 조작하는 과정을 최적화할 수 있을지에 대해 알아보려고 한다. DOM이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. 기본적으로 HTML로 된 문서에는 웹페이지의 설계도가 그려져 있는데, 이 구체적인 구조를 웹페이지에 접속할 때 HTML이라는 형식을 통해 브라우저에 전달하게 된다. 그러면 브라우저는 이 형식을 보고, 그 안의 HTML..

현대 브라우저가 웹 사이트 렌더링을 수행하는 방법에는 크게 두 가지가 있다. 바로 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)이다. 오늘은 이중 SPA에서 사용되는 클라이언트 사이드 렌더링에 대해 알아보고자 한다. 클라이언트 사이드 렌더링이란? 클라이언트 사이드 랜더링(CSR)은 웹사이트가 클라이언트에서 렌더링되는 것을 말한다. 여기서 말하는 클라이언트는 바로 브라우저다. 즉, 브라우저에서 렌더링을 수행하는 것이다. 이 과정은 다음과 같다. 1. 서버에서 index라는 단순한 구조의 HTML 파일을 클라이언트에 보내준다. 일반적인 구조의 SPA에서는 다음과 같은 HTML을 사용하게 되는데, 태그 안에 자바스크립트 링크가 담긴 2. HTML에 링크된 Javascript 파일(ex. ap..

웹개발을 하다보면 한번쯤 마주치는 상황 중 하나는 CORS 에러다. 최근에 회사에서 백엔드 아키텍처를 MSA로 전환하고 있는데, 이에 따라 한 도메인에서 사용하던 API 중 상당수가 각자의 도메인으로 분리되었다. 별도의 API Gateway가 없는 상황에서 새로운 도메인의 API를 처음 연동하다 보니, 콘솔창에 빨간 글씨로 이렇게 뜨는 에러를 보게 되었다. 어디에서 보낸 요청이 CORS로 막히는가? 분명 Postman 등 브라우저가 이외 환경에서는 멀쩡하게 실행되던 API인데, 유독 웹에서 내가 작업중인 프론트엔드의 화면에 연동을 하려고 보니 CORS 정책에 위반되었다는 에러 로그가 뜨며 HTTP 요청에 실패하는 것이었다. 즉, 웹사이트에서 AJAX 요청을 보낼 때에만 안 된다. 즉 웹사이트를 열어주는 ..