렌더링

최근 작업했던 프로젝트에서 유저의 시간대 별 스케줄 데이터를 요일별로 다룰 필요가 있었다. 이때 10진수 값으로 들어오는 요일별 시간 데이터를 2차원 boolean 배열로 변환한 뒤, 실제 화면에 요일 별 몇 시부터 몇 시까지 가능한 스케줄의 범위를 문자열로 출력해줘야 하는 기능이 추가되었다. 이때, 10진수 값으로 구성된 스케줄 객체를 화면에 렌더링 시 요일별 시간대를 보여주도록 변환하는 로직을 Angular의 Custom Pipe를 사용하여 개발하였다. 따라서 유저가 요일별 스케줄을 업데이트하고 나면, 전역에서 관리되는 스케줄 객체가 업데이트되고, 이 값을 참조해서 화면에 바인딩하는 홈 화면에서는 변경을 감지해서 pipe를 실행시켜주어야만 했다. 그런데 최초 스케줄 업데이트 시에는 정상적으로 변경된 ..

하나의 컴포넌트를 만든 뒤, 컴포넌트를 여러 번 반복해서 보여주는 목록 화면을 개발한다고 해보자. React에서 권장하는 배열 렌더링 방법은 JavaScript의 map() 함수를 활용하는 것이다. 예를 들면 다음과 같다. function Expenses() { return ( {EXPENSES_MOCK.map((expense) => ( ))} ); } map() 함수를 통해서 엘리먼트의 모음을 만들고, 이걸 JSX에 포함시키기만 하면 된다. 그런데 이 상태로 실제로 서버를 띄워 실행해보면 다음과 같은 경고를 만날 수 있을 것이다. 직역해보면, 리스트에 존재하는 각각의 자식 컴포넌트들은 고유한 “key” 값을 가지고 있어야 한다는 것이다. 실행은 가능하지만, 냅두기에는 빨간 색 경고라 약간 찜찜하다. 대..

바닐라 자바스크립트로 웹 애플리케이션을 만드는 고된 과정 속에는 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..