본문 바로가기

공부

 (13)
requestAnimationFrame 정리 최근 requestAnimationFrame이라는 브라우저 API를 많이 사용하고 있다. 크롬에서 웹을 개발할 때는 렌더링 성능이 좋기 때문에 그냥 css의 translate를 사용하면 웬만한 요구사항은 해결할 수 있지만 웹뷰에서는 성능이 좋지 않기 때문에 평범한 css의 translate도 굉장히 버벅이게 된다. 특히 translate 되는 Element가 화면에서 클수록 사용자 체감은 크다. 보통 프론트엔드를 처음 배울 때 javascript 보다 css를 이용해 구현하는 것이 성능적으로 좋다고 배웠는데 꼭 그런 것은 아닌 것 같다. css의 최대 단점은 기기의 성능에 영향을 많이 받기 때문에 디바이스, 브라우저 상관없이 균일한 사용자 경험을 위해서라면 번거롭더라도 javascript를 이용하는 것이..
Next.js 13 마이그레이션 소감 및 아쉬운 점 들어가기 12버전을 오래 사용하면서 피부로 와닿던 Next.js의 문제점들을 vercel이 인지하고 해당 내용으로 13버전을 준비한다고 했을 때 묘한 쾌감을 느꼈었는데 이번에 토이프로젝트에서 13버전으로 마이그레이션 작업을 진행했다. 내가 Next.js 13을 기다렸던 이유는 훨씬 빨라진 터보팩도 있지만 무엇보다 기존 pages 폴더의 구조적 한계였다. 파일 경로가 곧 URL이 되는 구조로 인해 pages 폴더에 파일을 함부로 추가할 수가 없었기에 전체 프로젝트 구조는 번잡해졌고 중첩 레이아웃이 적용이 되지 않기에 페이지마다 레이아웃을 따로 설정해야 했다. 그리고 가장 중요한 것은 위와 같은 구조적 문제로 인해 유사 SPA 방식을 지원한다고 소개하는 next/router 패키지는 말그대로 유사 SPA이기..
브라우저는 html을 다 받았는지 어떻게 알고 렌더링 할까 과거에 봤던 면접 질문이 갑자기 생각났다. 브라우저의 렌더링 과정에 대한 질문을 받고 답변하는 중에 브라우저에서 html을 다 받았는지 어떻게 알고 파싱을 시작하냐는 꼬리질문을 받았다. 그 당시 나는 굉장히 당황스러웠지만 http는 tcp 위에서 돌아가는 것이니 tcp의 close 핸드쉐이크 후에 알 수 있다고 답변했던 것 같다. 하지만 현재 대부분 브라우저에서 사용되는 http/2는 TCP 커넥션을 귀하게 여긴다. 왜냐하면 TCP 커넥션을 다시 맺는 것은 비용이 크기 때문이다. 핸드쉐이크도 맺어야 하고, 혼잡제어라는 TCP의 독특한 방식 때문에 커넥션이 최적화 되기까지 시간이 걸리기 때문이다. (처음에 크기를 1보내보고 괜찮으면 더 크게, 이래도 괜찮아? 하면 더 더 크게 보내는 방식..) 따라서 ht..
[Next.js] 브라우저 뒤로가기 막기 beforePopState 문제점 최근 웹뷰 서비스를 개발 중에 뒤로가기 처리를 고민하게 되었다. 버튼을 통한 뒤로가기는 자바스크립트 코드로 막으면 그만이지만 브라우저 자체에서 발생하는 이벤트가 문제였다. 웹뷰에서는 사용자가 손가락으로 옆으로 스위핑(뒤로가기) 를 하게 되면 popstate 이벤트가 발생한다. popstate 이벤트의 문제점은 새로고침이나 닫기 이벤트와 다르게 취소가 불가능한 것이다. preventDefault 같은 것도 먹히지 않는다. next.js에서는 popstate 이벤트를 제어하기 위한 메서드로 beforePopState를 제공한다. 뒤로가기 이벤트가 발생하면 실행되는 콜백을 전달하는 메서드이다. import { useEffect } from 'react' import { useRouter } from 'next..
Edge Side Rendering (SSR vs CSR vs ESR) 용어 정리 CSR CSR은 Client Side Rendering의 약자로 말 그대로 브라우저(Client)에서 렌더링하는 것이다. SSR SSR은 Server Side Rendering의 약자로 서버에서 렌더링(html 파일 생성)하여 브라우저에 보내주는 것이다. SSG SSG는 Static Site Generation의 약자로 SSR과 다르게 빌드 시에 html을 미리 생성해놓는 것이다. ESR Edge Side Rendering의 약자로 Edge Computing을 이용해 사용자와 가까운 곳에 위치한 Edge 노드에서 렌더링에 필요한 데이터를 브라우저에 제공하는 역할을 한다. 흔히 서버리스 개념으로 보면 편하다. 아래 설명을 보면 이해되겠지만 Edge node에서 렌더링을 하는 것은 아니기 때문에 ..
[next.js] useRouter vs Router 차이 next.js의 next/router 패키지에서 useRouter와 Router를 제공한다. 두 가지 사용법과 차이에 대해서 알아봤다. useRouter import { useEffect } from 'react' import { useRouter } from 'next/router' // Here you would fetch and return the user const useUser = () => ({ user: null, loading: false }) export default function Page() { const { user, loading } = useUser() const router = useRouter() useEffect(() => { if (!(user || loading)) {..
Edge Computing (FeConf 2022) 최근 FeConf 2022 내용을 보면서 발표 챕터 중에 당근마켓 김혜성님이 발표하실 엣지 컴퓨팅에 관한 내용을 보게 되었다. 최근에 올린 Next.js 12 버전의 Edge Functions를 소개하면서 살펴봤던 개념이라 어떤 내용으로 발표하게 될지 자연스럽게 관심이 갔다. Edge Computing? 쉽게 말하면 서비스를 사용하는 사용자와 최대한 가까운 곳에 서버가 있는 것이다. 대한민국에 있는 사용자라면 대한민국에 있는 서버에서, 미국에 있다면 미국 서버에서 이런 식이다. 여기까지 생각하면 자연스럽게 기존 람다 같은 서버리스와 무슨 차이가 있을까 생각할 수 있다. 차이가 없다. 엄밀히 말하면 약간 다른 개념이지만 같은 개념으로 이해해도 된다. 다만 Next.js의 행보에서 유추해보자면 프론트엔드만을..
HTTP 2.0 HTTP 1.1 HTTP Pipelining HTTP 1.0은 기본적으로 Connection 당 하나의 요청을 처리할 수 있습니다. 그렇기 때문에 동시전송은 불가능하고 하나의 요청에 대한 응답이 온 후 다음 요청을 처리하게 됩니다. 위에서도 말했듯이 수 많은 멀티미디어 리소스들이 있는 상황에서 이러한 특징은 Network Latency를 발생시킵니다. 이를 위해 HTTP 1.1에서 HTTP Pipelining 이 도입되었습니다. 이는 TCP 안에 두 개 이상의 HTTP 요청을 담아 Network Latency을 줄이는 방식입니다. 하지만 이는 정확히 구현하기 힘들 뿐 아니라 HOL Blocking이 발생합니다. HOL Blocking HOL은 Head of Line의 줄임말로서 앞선 요청에 의해 뒤에 요..
HTTP 1.1 Connection 4장 커넥션 관리 목차 HTTP는 어떻게 TCP 커넥션을 사용하는가? TCP 커넥션의 지연, 병목, 막힘 병렬 커넥션, keep-alive 커넥션, 커넥션 파이프라인을 활용한 HTTP의 최적화 커넥션 관리를 위해 따라야 할 규칙들 TCP 커넥션 TCP 커넥션이 맺어지면 주고받는 데이터들은 손실, 손상되지 않고 순서대로 전달 우리가 아는 3-Way-Handshake는 바로 (4)에서 TCP 커넥션을 맺으며 수행 이 맺어진 커넥션을 통해 통신(Request와 Response)을 하게되고 통신이 완료된 후 커넥션은 close 이 때, 흔히 얘기하는 데이터는 IP 패킷, IP 데이터그램을 통해 전송 여기서 A, B, C가 각각 하나의 패킷이다. 하나의 큰 덩어리 데이터를 작은 패킷단위로 나누어 쪼개는 이유는 뭘..
HTTP 리다이렉션과 부하균형 리다이렉션과 부하균형 이 글은 HTTP 완벽가이드 20장을 참고해 정리한 포스팅입니다. 시작하기에 앞서 HTTP 메시지의 데이터는 네트워크 통신과정에서 많은 프로토콜에 의해 통제됩니다. HTTP가 고려하는 것은 오직 출발지(송신자)와 목적지(수신자) 뿐이지만, 미러링된 서버, 웹 프락시, 캐시 등 역시도 고려되어야 하므로 항상 단순하지만은 않습니다. 리다이렉션 기술은 HTTP 메시지의 최종 목적지를 정하는것과 관련되어있고, 보통 메시지가 프락시,캐시, 서버팜의 특정 웹서버 중 어디에서 끝나는지 판별하기 위해 사용한다고 합니다. 리다이렉션 기술은 클라이언트의 메시지를 명시적으로 요청하지 않은 곳으로 보낼 수 있습니다. 리다이렉션을 하는 이유 HTTP 애플리케이션은 언제나 아래 세가지를 원하기 때문에 리다이..

티스토리툴바