개요본 글은 Next.js에서의 에러 핸들링, 로딩 UI, 그리고 스트리밍을 활용한 성능 최적화와 사용자 경험 향상 방법을 다룬다. 애플리케이션을 개발하다 보면 사용자의 입력 실수나 네트워크 문제 등으로 예상 가능한 에러가 발생하거나, 코드 상의 문제로 인한 예상치 못한 에러가 발생할 수 있다. Next.js는 이러한 에러들을 효과적으로 처리하기 위해 명시적 상태 관리 기법과 에러 경계를 제공하며, 이를 통해 사용자에게 원활한 서비스를 제공할 수 있게 한다. 또한, 데이터를 가져오는 과정에서 사용자에게 빈 화면을 보여주는 대신 의미 있는 로딩 UI를 제공하고, 페이지 로딩 속도를 개선하는 스트리밍 기법을 사용할 수 있다. Next.js는 React의 Suspense를 기반으로 페이지를 점진적으로 렌더링하..

개요App Router는 라우팅 및 내비게이션에 하이브리드 접근 방식을 지원한다. 즉 Next.js는 라우팅 시 서버와 클라이언트를 적절히 섞어서 사용한다. 서버에서 애플리케이션 코드는 경로 세그먼트에 의해 자동으로 분할된다. 예를 들어 app 폴더에 있는 코드끼리 분할되고 dashboard 폴더에 있는 코드끼리 분할된다. 클라이언트에서 Next.js는 경로 세그먼트를 사전 로드하고 캐시한다. 즉 Next.js는 사용자가 다음에 갈 수도 있는 경로를 미리 받아서 캐시한다. 즉 사용자가 새 경로로 네비게이션할 때 모든 페이지를 다시 렌더링하는것이 아닌 바뀐 부분만 바꿔치기한다. 이를 통해 사용자 경험을 향상시킨다. 본 글에서는 Next.js의 코드 분할, 사전 로드, 캐싱, 부분 렌더링, 소프트 네비게이션..

개요클로저는 공식 문서에서 다음과 같이 설명된다.클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생성 시 함수가 생성될 때마다 생성됩니다. 직관적으로는 다음과 같은 의미를 가진다. 클로저는 함수가 “자기 주변의 변수”를 기억해서, 나중에도 계속 사용할 수 있게 해주는 기능이다. 즉 클로저를 쓰면 다음과 같은 이점을 가질 수 있다.변수를 보호하고 감출 수 있다. (은닉)값을 유지할 수 있다. (상태 유지)콜백, 비동기 함수 등에서 엄청 유용하게 쓰인다.해당 내용들을 이해하기 위해선 먼저 자바스크립트의 스코프에 대한 이해가 필요하다.2024.01.03 - [C..

개요프로젝트를 진행하던 중 의문의 에러가 발생했다. React-Native의 Material-Top-Tab-Navigation이 있는 컴포넌트에 들어가면 해당 에러가 발생했다. 단순한 경고라고 생각하고 넘어갈 수도 있지만 콘솔에는 ERROR로 출력되는 모습이다. 나중에 앱 빌드할 때 문제가 될 수 있으니 해결하고 넘어가려 했다.해결 방법24년 5월 8일 공식 라이브러리의 issue에서 에러 해결법을 찾을 수 있었다. https://github.com/react-navigation/react-navigation/issues/11989 A props object containing a "key" prop is being spread into JSX · Issue #11989 · react-navigation..

개요앱 개발을 할 때는 여러 아이콘을 사용하는 경우가 많다.React Native에는 아이콘들을 간편하게 가져와서 사용할 수 있도록 지원하는 react-native-vector-icons 라이브러리가 있다. 사용할 수 있는 아이콘들은 다음 링크에서 볼 수 있다.https://oblador.github.io/react-native-vector-icons/ react-native-vector-icons directory oblador.github.io Expo에서는 자동으로 라이브러리를 사용할 수 있도록 설정해 주지만 React Native cli에서는 라이브러리를 사용하려면 수동으로 설정해주어야 한다.사용 방법인터넷에 검색하면 여러 방법들이 나와 있으나 해당 방법이 가장 간편하다. android/build..

개요 modal은 사용자의 이목을 집중시키기 위한 인터페이스 창이다. 문서 내의 상위에 배치되며 사용자의 이목을 집중시키기에 좋다. 모달의 on, off는 보통 bool타입의 state로 관리하는데, 전역 상태 관리에 사용하는 라이브러리인 redux를 사용해서 모달을 구현하면 코드도 줄고, 관리가 용이할 것 같다는 생각이 들어 구현하게 되었다. 사용 라이브러리 본 글은 Redux와 bootstrap modal을 사용한다. 설치 명령어는 다음과 같다. npm i @reduxjs/toolkit bootstrap react-redux 구현 먼저 Redux가 관리할 state의 초기값을 선언한다. redux.ts const initialState = { message : "", isOpen : false, } ..

생명주기란? 컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트의 생명주기(Lifecycle)라고 한다. 컴포넌트는 생명주기마다 함수를 가지고 있고, 이 함수들을 이용하면 주기의 특정 시점에 원하는 동작을 하도록 만들 수 있다. 컴포넌트의 생명주기 컴포넌트의 생명주기 함수는 총 8종이 있다. 생명주기 함수는 리액트에서 자동으로 호출하며 개발자가 마음대로 호출할 수 없다. 생명주기를 그림으로 나타내면 다음과 같다. 컴포넌트는 생성부터 소멸까지 컴포넌트 생성 → 생성 완료 → 갱신 완료 → 소멸 완료의 4가지 단계를 거친다. 과정은 컴포넌트 생성 → 생성 완료(생성 과정), 생성 완료 → 갱신 완료(갱신 과정), 갱신 완료 → 소멸 완료(소멸 과정)의 3가지 과정을 거친다. 먼저 생명주기 함수가 무엇이 있는지 알..

필수 프로퍼티 특정 컴포넌트에 반드시 전달되어야 하는 프로퍼티가 있다면, 프로퍼티를 필수 프로퍼티로 지정하여 보낼 수 있다. 필수 프로퍼티는 특수 변수 isRequired를 사용하여 전달할 수 있다. 필수 프로퍼티 사용하기 먼저 App.js에서 object형 프로퍼티와 정수형 프로퍼티 2개를 넘겨 줄 것이다. App.js import Ex from './03/Ex'; import './App.css'; function App() { return ( ); } export default App; 여기서 우리는 requiredNumValue를 기본값으로 지정할 것이다. props는 기본적으로 문자형으로 전달된다. 때문에 prop-types를 사용하여 프로퍼티 자료형을 지정해줘야 한다는 것을 잊어선 안된다. i..