Frontend10 리액트가 클래스 컴포넌트를 버린 이유 목차1️⃣ 리액트에선 과정보단 결과다2️⃣ 3초 뒤의 this.state는 과연 믿을 만한가?3️⃣ 클래스 컴포넌트에서는 함수가 데이터 흐름에서 소외된다4️⃣ 클래스 컴포넌트의 라이프사이클은 '의도'보다는 '타이밍'에 집중한다5️⃣ Hooks는 합성과 재사용성을 극대화한다6️⃣ 클래스 컴포넌트는 미래가 없다 1️⃣ 리액트에선 과정보단 결과다React는 처음부터 지금까지 선언형 UI를 지향해왔다. 중요한 건 어떻게 그 목적에 도달했는가가 아니라, 무엇을 보여주고 싶은가다. "과정보다 결과가 중요하다"는 철학 아래, 복잡한 절차를 감추고 UI를 단지 상태의 결과로 표현하는 방향으로 발전해왔다. 그런데 클래스 컴포넌트는 이러한 철학에 조금 부합하지 않는다. 다음 두 코드는 결과적으로 같은 UI를 표시하지만, .. 2025. 4. 19. 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의 표준으로 자리 잡았으며, 페이지 전환 시 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트함으로써 사용자 경험을 크게 향상했다.Browser(Client)가 요청을 보낸다.서버는 간단한 HTML 파일과 JS 파일을 client로 전송한다. 주로 와 같은 최소한의 구조만 포함된다. (TTFB)초기.. 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. 이전 1 2 다음
