Dani's Dev TokTok

들어가며SSR(Server Side rendering) 과 CSR(Client Side Rendering) 은 페이지 렌더링 방식을 경정하는 개념이다.이 개념들을 이해하고 차이가 뭔지 알아보고자 한다. SSR & CSRSSR(Server Side Rendering)서버 사이드 렌더링은 클라이언트 요청에 따라 HTML 파일을 서버에서 렌더링해서 완성된 HTML 파일을 클라이언트에 전달한다. 그 후 브라우저는 서버로부터 완성된 HTML 을 받아서 화면에 표시한다. 서버 사이드 렌더링은 다음과 같은 단계로 진행된다.서버는 웹 페이지에 대한 요청을 받으면 필요한 데이터를 검색한 후에 해당 데이터를 HTML 템플릿에 붙인다.서버는 페이지에 대한 HTML 마크업을 생성하고 콘텐츠를 렌더링하고 필요한 스타일을 적용한..

들어가며이전에 면접 질문으로도 받았었고 프론트엔드 개발자 뿐만 아니라 웹 개발자라면 알아야 할 거라 생각해서 정리해보려 한다. 브라우저 렌더링브라우저의 렌더링 순서브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받는다.서버로부터 HTML 문서를 전달받으면, 브라우저 엔진은 위에서 아래로 순차적으로 파싱하며 태그와 속성을 발견한다이 태그와 속성들을 트리 형태로 변환해서 메모리에 저장되는데, 이를 DOM Tree 라고 한다.HTML 파싱 중 CSS 를 만나면 이를 파싱해서 CSSOM Tree 로 변환한다.DOM tree 와 CSSOM tree 를 결합해서 Render Tree 를 생성한다.렌더 트리를 기반으로 html 요소의 레이아웃(위치와..

들어가며웹 소켓을 공부하다보면 TCP 라는 단어를 많이 봤다.웹 소켓 뿐만 아니라 프로그래밍을 공부하는 사람들은 TCP/UDP 라는 단어를 본다TCP/UDP 가 뭔지 알아보자 TCP 와 UDP TCP 와 UDP 는 네트워크 계층의 전송 계층에서 사용하는 프로토콜이다.전송 계층은 신뢰성 있는 데이터를 전송하기 위한 계층으로, 데이터의 신뢰성을 보장하며, 포트 번호로 데이터를 적절한 응용 프로그램에 전달하는 역할을 한다.TCPTCP 는 패킷 사이의 순서를 보장하고 연결지향 프로토콜을 사용해서 연결을 하여신뢰성을 구축해서 수신 여부를 확인하며 '가상회선 패킷 교환 방식'을 사용한다.연결형 서비스를 지원하고 데이터의 신뢰성을 보장한다.TCP는 아래와 같은 특징이 있다.송신부와 수신부의 연결을 확인하는 연결형 서..

들어가며이번 프로젝트에서 실시간 채팅을 구현하기 위해 웹소켓을 썼지만 정확히 어떤 것이고 어떤 원리로 동작하는지에 대해 잘 안다고 할 수 없다.이왕 썼으니 원리에 대해서 잘 알아보려고 한다. 웹 소켓(Web Socket)이란?웹 소켓은 양방향 통신을 위한 프로토콜(약속) 이다.주로 웹 서버와 웹 브라우저가 실시간으로 메시지를 주고받을 때 사용한다. HTTP 통신은 클라이언트가 서버에 요청을 보내고, 서버가 응답하는 통신을 따른다.보통 작업에는 문제가 없지만, 채팅과 같이 실시간으로 데이터를 주고받는 것에서는 트래픽을 불필요하게 증가시키고,서버의 비용을 증가시키며 요청과 응답사이에 지연시간이 있어서 실시간 통신의 효율성을 저하시킬 수 있다. 이런 상황을 해결하기 위해 나온 것이 웹 소켓이다.웹 소켓은 HT..