Frontend9 JPEG 손실 압축 JPEG은 손실 압축 방식으로 압축을 수행한다. 어떤 원리로 압축이 수행되는지 알아보자. 1. Color Space Conversion2. Chrominance Downsampling3. Discrete Cosine Transform4. Quantization5. Run Length and Huffman Encoding 인간의 눈은 완벽하지 않다. JPEG은 인간이 알아차리지 못하는 정보를 지움으로써 압축을 한다. RodsConesBrightness & Low light sensitiveColor sensitive100 million6 million 밝기를 감지하는 Rods가 색깔을 감지하는 Cones보다 훨씬 많다. 그래서 우리 눈은 밝기에 더 민감하다.STEP 1: Color Space Conver.. 2025. 1. 27. WebView: 나빼고 다 쓰고있었잖아? 목차1. 웹뷰 이해하기2. 네이티브 웹뷰 인터렉션3. 웹뷰 장단점1. 웹뷰 이해하기1.1. 웹뷰란?웹뷰는 모바일 앱 내에서 웹 콘텐츠를 렌더링할 수 있는 임베디드 브라우저로, 부분적인 UI를 그리는 데에 사용할 수 있는 기술이다. 각 웹뷰는 독립적인 실행 환경을 가지며, 세션, 쿠키, 로컬 스토리지가 웹뷰별로 분리되어 관리된다. 이를 활용하면 하나의 모바일 앱을 여러 작은 앱들로 나누어 개발할 수 있고, 각 웹뷰마다 별도의 Git 레포지토리를 운영하여 각 팀이 원하는 시점에 독립적으로 배포할 수 있다. 예를 들어, 앱 내 광고는 대부분 웹뷰로 구현되고, 하이브리드 앱에서는 웹뷰와 네이티브 컴포넌트가 밀접하게 통합되어 어떤 부분이 웹뷰이고 어떤 부분이 네이티브인지 구분하기 어려운 경우도 많다. 1.2. .. 2025. 1. 15. 리액트의 렌더링 전략: CSR > SSR > Suspense in SSR > RSC - Client-Side Rendering- Server-Side Rendering - Suspense in SSR- React Server Component1. Client-Side Rendering1.1. SPA의 표준CSR은 모든 렌더링 작업을 브라우저에서 수행하는 방식이다. 서버로부터는 최소한의 HTML과 JS 파일을 받아 브라우저가 이를 기반으로 UI를 동적으로 생성한다. CSR은 빠르게 SPA의 표준으로 자리 잡았으며, 페이지 전환 시 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트함으로써 사용자 경험을 크게 향상했다.1. Request: Browser(Client)가 요청을 보낸다. 2. 서버는 간단한 HTML 파일과 JS 파일을 client로 전송한다. 주로 와 같은 최소한의 구.. 2024. 11. 21. [Next.js] Data Mutation: Server Actions 1. Server ActionsNext.js의 server component는 hydrate되지 않은, 즉 interactive하지 않은 컴포넌트로 useState, useEffect 없이 데이터를 불러올 수 있다. 데이터를 변경시켜야 하는 상황에서는 server actions를 사용하면 API route 없이 서버 측에서 직접 DB에 접근할 수도 있고, 페이지 렌더링 과정에 참여하게 된다. 기존에 browser -> (front server ->) backend server -> DB 의 구조를 browser -> front server -> DB로 줄인 것이다. 장점- network 요청 수를 줄일 수 있다- SEO 향상- 민감한 데이터를 클라이언트 측에 노출시키지 않고 처리할 수 있다- client.. 2024. 7. 16. React의 최적화 전략 목차- 프롤로그- 렌더링 최적화 기법- 상태 관리 및 업데이트 최적화- 로딩 성능 최적화프롤로그 지난번에는 리액트를 왜 쓰는지에 대해 브라우저의 렌더링 원리부터 리액트의 특징까지 알아보았다. 이렇게나 잘 만든 라이브러리인데 장점을 최대한 살려 코드를 짜야하지 않을까? 이번에는 최적화를 어떻게 하는지 알아보자! 프로젝트 5개 하고 돌아보는 React를 쓰는 이유목차 - 프롤로그 - SPA - 브라우저의 렌더링 원리 - React의 렌더링 과정 - React의 특징 3가지 - React+TypeScript 프롤로그 나의 2023년은 프로젝트로 가득했다. 7~8개월 동안 vanilla JS, React, React Native를 이용hwanheejung.tistory.com렌더링 최적화 기법#불필요한리렌더.. 2024. 4. 11. React의 원칙: Immutable Data Pattern 목차- 프롤로그- JavaScript 복습- React는 어떻게 state 변화를 감지하는가? - Immutable Data Pattern이란? - TypeScript + Immutable Data Pattern - 정리 프롤로그React의 핵심에는 컴포넌트 기반 아키텍처가 있다. 이를 통해 개발자는 재사용 가능한 UI 조각을 만들어 레고처럼 조립한다. React는 선언적 UI를 통해 애플리케이션의 상태가 변경될 때 자동으로 변경사항을 감지하고, 필요한 컴포넌트만을 효율적으로 리렌더링함으로써 개발자가 명시적으로 조작할 필요가 없도록 한다. 이러한 프로세스는 불변성 원칙을 통해 최적화된다. state를 직접 변경하지 않고 setState를 사용해야 하는 이유.. react에서 변경된 값을 감지하는 방법... 2024. 4. 11. 이전 1 2 다음 more
