생각정리

React 19의 새로운 기능들

React 19는 성능과 개발자 경험을 개선하기 위한 여러 새로운 기능을 도입했다. 이번 업데이트에서는 서버와 클라이언트 간의 통합을 강화하고, 코드 최적화 및 사용자 경험 향상에 중점을 두었다. 이번 글에서는 React 19에서 도입된 주요 기능과 그 사용법에 대해 설명한다.1. 서버 컴포넌트와 클라이언트 컴포넌트의 통합 React 19에서 가장 큰 변화 중 하나는 서버와 클라이언트 컴포넌트 간의 통합이다. 이제 서버에서 처리한 데이터를 클라이언트가 받아 바로 랜더링할 수 있어, 단일 작업을 서버와 클라이언트가 나눠서 실행함으로써  UX가 끊기지 않고 자연스럽게 이어질 수 있다. export default async function ServerComponent() { // 서버에서 API 호출을 통해..

컴포넌트 구성은 훌룡합니다 그런데

이 글은 Tktodo의 블로그를 번역한 글입니다.원문 링크: https://tkdodo.eu/blog/component-composition-is-great-btwPhoto by Glen Carrie  제가 처음 리액트를 배웠을 때, 리액트의 모든 장점들에 대해 들었습니다: 가상돔은 매우 빠르고, 단방향 데이터 흐름은 예측 가능하며, JSX는 자바스크립트에 마크업을 넣는 흥미로운 방법입니다. 하지만 리액트의 가장 큰 장점은 시간이 지나면서야 제대로 이해하게 되었습니다: 바로 컴포넌트를 다른 컴포넌트에 함께 구성할 수 있는 능력입니다. 이를 항상 익숙하게 사용했다면 이것이 장점이라는 것을 쉽게 놓칠 수 있습니다. 믿거나 말거나, 약 10년 전만 해도 컴포넌트의 로직, 스타일, 마크업을 하나의 컴포넌트로 묶..

Frontend에서의 Bundler

번들러는 여러 개의 자바스크립트 파일을 하나로 합쳐주는 도구이다. 개발자들이 코드를 나누어 작성할 때, 여러 파일로 나누어도 결국 실행 환경에서는 단일 파일로 실행해야 하는데, 이때 여러 파일을 묶어 하나의 파일로 만들어주는 역할을 한다. 예를 들어, 브라우저와 리액트 네이티브와 같은 환경에서는 여러 파일을 동시에 처리할 수 없기 때문에 하나의 파일로 번들링하여 실행해야 한다.번들러의 역할 번들러의 주요 역할은 세 가지로 나뉜다: 레졸루션(Resolution), 로드(Load), 옵티마이제이션(Optimization)이다. 각각의 역할을 하나씩 살펴보자.Resolution레졸루션은 파일 간의 참조를 올바르게 해석하는 과정이다. 자바스크립트 코드에서 import나 require를 사용할 때, 해당 경로에 ..

React Native에서 Routing: React Navigation 사용법

리액트 네이티브는 네이티브 앱처럼 화면을 전환하고, 상태를 관리하기 위해 강력한 네비게이션 라이브러리가 필요하다. React Navigation은 이러한 요구를 충족시키는 가장 많이 사용되는 라이브러리 중 하나이다. 다양한 네비게이션 패턴(스택, 탭, 드로어 등)을 지원하며, 복잡한 앱 구조에서도 간단하고 효율적으로 화면 이동을 처리할 수 있다. 이 글에서는 react-navigation의 주요 기능과 사용 방법을 살펴보자.React Navigation React Navigation은 리액트 네이티브에서 스크린 간의 전환과 상태 관리를 효율적으로 처리하기 위한 라이브러리이다. 이 라이브러리를 사용하면 여러 화면 사이에서 쉽게 이동할 수 있고, 스택 네비게이션, 탭 네비게이션, 드로어 네비게이션 등 다양한..

React Native에서의 View 컴포넌트

리액트 네이티브에서 View 컴포넌트는 모든 UI 레이아웃의 기본 구성 요소이다. 화면에 다양한 요소들을 배치하고 관리하기 위해 사용하는 가장 중요한 컨테이너로, HTML의 와 비슷한 역할을 한다. 이 글에서는 View 컴포넌트의 기본적인 사용법과 다양한 레이아웃 속성들을 살펴보며, 리액트 네이티브의 레이아웃 시스템을 이해하고 효과적으로 활용하는 방법을 설명한다.View의 기본 사용법 View는 기본적으로 화면의 다른 요소들을 포함하는 역할을 한다. 별도의 속성이나 스타일을 설정하지 않으면 아무런 효과가 나타나지 않으므로, 주로 스타일과 함께 사용된다.import React from 'react';import { View, Text } from 'react-native';const App = () => ..

React Native에서 Text Input과 키보드 처리하기

리액트 네이티브에서 텍스트 인풋(TextInput)은 사용자와 상호작용을 위한 가장 기본적인 요소 중 하나이다. 하지만, 텍스트 인풋을 사용할 때 키보드가 화면을 가리는 문제가 발생할 수 있어 이를 적절히 처리하는 방법을 알아두는 것이 중요하다. 이 글에서는 TextInput의 주요 속성과 키보드 처리 방법에 대해 설명하고, 예제 코드를 통해 적용 방식을 소개한다.TextInput의 기본 사용법 TextInput은 사용자의 입력을 받을 수 있는 기본 컴포넌트이다. 가장 기본적으로는 placeholder 속성을 사용해 입력 필드에 안내 문구를 넣을 수 있다.이 코드는 간단하게 텍스트 입력을 받는 기본적인 텍스트 인풋 필드를 만들어준다.유용한 TextInput 속성들 TextInput에는 다양한 속성을 통해..

웹 성능을 높일 수 있는 bundler plugins

웹 프론트엔드 성능 최적화는 사용자 경험과 직결되며, 로딩 속도가 느려지면 사용자 이탈률이 증가할 수 있다. 이를 해결하기 위해 웹 애플리케이션을 최적화하는 방법 중 하나는 번들러 플러그인들을 활용하는 것이다. 이번 글에서는 웹 프론트엔드 성능을 높일 수 있는 몇 가지 주요 번들러 플러그인들을 소개하고자 한다.1. Imagemin-pngquant 이미지 파일은 웹사이트 로딩 속도에 큰 영향을 미친다. 특히, PNG 파일은 고화질을 유지하는 만큼 용량이 커질 수 있다. 이를 줄이기 위해 사용하는 플러그인 중 하나가 imagemin-pngquant이다. 이 플러그인은 PNG 파일의 크기를 줄이면서도 이미지 품질을 최대한 유지해주는 역할을 한다.주요 기능:PNG 파일의 무손실 또는 저손실 압축이미지 품질을 사..

React Hook을 사용할 때 실수들 (2): useEffect

서론 React에서 컴포넌트의 lifecycle에 맞춰 동작하는 useEffect는 매우 자주 사용되는 훅이다. 하지만 이 훅을 잘못 사용하면 예기치 않은 동작이나 성능 문제를 일으킬 수 있다. 이 글에서는 useEffect를 사용할 때 흔히 저지르는 실수들과 그 해결 방법을 다룰 것이다.1. 객체는 참조한다 JavaScript에서 객체는 non-primitive 자료형이다. 즉, 객체의 내용이 같아도 두 객체는 서로 다른 참조 값을 가진다. 예를 들어 다음 코드를 보자.const obj1 = { a: 1 };const obj2 = { a: 1 };console.log(obj1 === obj2); // false 이 두 객체는 구조가 같지만 서로 다른 참조를 갖고 있으므로 === 비교에서는 false가 ..