렌더링 (Rendering) 렌더링이란 화면에 특정한 요소를 그려내는 것을 의미한다. 사실 이 렌더링 과정을 잘 처리해주는 것이 우리가 Vanila JavaScript를 사용하지 않고 React 같은 UI 라이브러리 또는 프레임워크를 사용하는 이유다. 브라우저에서 렌더링이란 결국 DOM요소를 계산하고 그려내는 것을 의미한다. HTML과 CSS를 통해서 만들어지고 계산된 DOM과 CSSOM은 결합되고, 위치를 계산하고, 최종적으로 브라우저에 그려진다. 그리고 개발자는 브라우저에서 제공하는 DOM API를 JavaScript를 통해 호출하면서 브라우저에 그려진 화면을 변화시킨다. 하지만 Vanila JavaScript를 이용해서 DOM에 직접 접근하고 수정하는 것(명령형), 그리고 이를 최적화하는 것은 애플..

CI/CD CI/CD는 Continuous Integration(CI)와 Continuous Delivery/Deployment(CD)를 통합해서 부르는 용어다. CI/CD는 개발 과정에서 필요한 빌드, 테스트, 배포 등의 과정을 자동화한다. CI/CD 자동화를 통해서 개발자들은 코드를 자동으로 테스트하고 배포할 수 있고 이를 통해 효율적인 작업과, 더 빠르고 더 자주 배포를 진행할 수 있게 된다. CI Continous Integration은 코드를 지속적으로 통합해나가는 것을 의미한다. 일반적으로 코드의 통합은 GItHub의 PR을 통해서 진행할 수 있기에 CI 과정에서 도대체 무엇을 하는 건자 의아할 수 있다. 여기서 말하는 코드의 통합은 단순히 코드와 코드를 합치는 것뿐만이 아니라 코드를 테스트하..

먼저 AWS란? AWS(Amazon Web Service)는 클라우드 컴퓨팅 서비스를 제공하는 프로바이더 중 하나로서, 현재 전 세계에서 가장 많이 사용되고 있는 클라우드 컴퓨팅 서비스다. AWS는 단순 컴퓨팅 자원을 제공해주는 것뿐만 아니라 이를 편리하게 관리할 수 있는 서비스, 서버리스 서비스 등 수많은 서비스를 확장성, 안정성, 높은 보안 수준과 함께 제공해준다. Amazon S3 AWS의 Amazon S3 서비스는 Simple Storage Service의 약자로 Storage라는 표현 그대로 특정한 파일을 저장하고 인터넷상으로 접근할 수 있게 해주는 서비스이다. 보통 서비스에 필요한 이미지나 파일 등을 저장해두는 용도로 사용하지만 정적인 파일들을 안정적으로 제공할 수 있다는 점을 이용해서 정적 ..

SSR(Server-side Rendering)이란? 간단히 말하자면 제공하고자 하는 웹 서비스의 화면을 서버 측에서 그리는 방법을 통칭하는 용어다. 웹 서비스는 결국 화면으로 보여줘야 하고 그걸 그려야 하는데, 클라이언트 단에서 그리냐 서버 단에서 그리냐의 차이가 있을 뿐이다. 이전 글에서 알아봤던 CSR은 웹 사이트 패러다임에 대단히 큰 변화를 가져왔지만 모든 기술에는 양면이 있다. 이제 CSR의 장단점을 조금 더 들춰볼 차례로, 그 특징을 좀 더 자세히 들여다보려면, 반대편에 있는 기술인 SSR이 어떻게 돌아가는 기술인지 간략하게 체크해볼 필요가 있다. CSR은 서버로부터 페이지 렌더링에 필요한 asset들을 받아 브라우저에서 렌더링하고, SSR은 서버에서 페이지를 렌더링하고 브라우저로 보내준다. ..

브라우저에서 화면을 그리기 위해 일어나는 일련의 과정들은 변화가 발생했을 때 일어난다. 그런데 자바스크립트가 발전해 DOM을 조작하면서 변화가 자주 일어나게 되었다. 이 변화라는 것은 사용자 입장에서는 풍부한 인터렉션이다. 언어와 하드웨어의 성능이 닿는 한 계속해서 증가할 것만 같으며, 이런 렌더링 작업이 일어나는 동안 자바스크립트가 브라우저의 메인 스레드를 먹어버리면 끊김 현상이 일어나게 된다. 그래서 중요하게 생각되는 숫자가 바로 초당 프레임(Frames Per Second)이다. 화면이 변경되는 프레임의 횟수만 지켜주면 되기 때문이다. 이걸 가능하도록 하기 위해 자바스크립트의 동작을 작은 덩어리로 나누어 줘야 하는데, window.requestAnimationFrame()을 사용하면 프레임 수를 보..

중요 렌더링 경로(Critical Rendering Path)란? Critical Rendering Path(CRP)는 브라우저가 서버로부터 HTML 응답을 받아 화면을 그리기 위해 실행하는 과정이다. CRP는 6단계를 거치며 각 단계는 다음과 같다. DOM 트리 만들기 CSSOM 트리 만들기 JavaScript 실행 Render 트리 만들기 레이아웃 생성하기 페인팅 그럼 렌더링(rendering)한다는 것은 무엇일까? 상태(state)를 변수로 받아 그 상태에 따른 화면(view)을 결과물로 출력하는 함수를 떠올려볼 수 있다. const render = (targetElement, state) => { const element = targetElement.cloneNode(true) // 변화를 바로 ..