rushin 님의 블로그

1. ScrollView의 물리적 제약과 중첩 스크롤RN에서 스크롤 뷰 안에 또 다른 스크롤 뷰를 넣는 것은 문제상황이 될 수 있음.문제 상황: 제스처 경합 (Gesture Contention)ScrollView나 FlatList는 터치 제스처를 인식해서 화면을 움직인다.만약 부모(상위) 컴포넌트와 자식(하위) 컴포넌트가 동일한 방향으로 스크롤되어야 한다면, 앱은 사용자의 손가락 움직임이 부모를 위한 것인지 자식을 위한 것인지 판단하기 어렵다.해결 전략: 교차 스크롤 패턴보통 UX적으로나 기술적으로나 스크롤 방향을 엇갈리게(Orthogonal) 배치하는 것이 정석예시과거: width 값을 수동으로 계산(개수 × 화면 너비)해서 넣기현재: 최신 RN 레이아웃 시스템(Flexbox)의 ScrollView에서..

1. 함수 컴포넌트리액트의 핵심 원리리액트는 가상 DOM(Virtual DOM)을 사용하여 효율적인 UI 업데이트를 수행컴포넌트: 재사용 가능한 UI DOM(Document Object Model)이란?HTML 문서의 구조를 트리 형태로 표현한 프로그래밍 인터페이스브라우저가 웹 페이지를 렌더링할 때 생성하는 객체 모델JavaScript를 통해 HTML 요소에 접근하고 조작할 수 있게 해줌DOM 조작 가능 언어웹 브라우저 안: JavaScript만 가능 (TypeScript는 JavaScript로 변환되어 실행)웹 브라우저 밖: Python, Java 등도 가능 (웹 자동화, 테스트 등) → 웹 브라우저는 JavaScript 엔진만 내장하고 있어 JavaScript가 사실상 표준TypeScriptJava..

1. 프로젝트 구조 설정절대 경로 (@/) 설정하기상대 경로(../../../)는 파일 위치가 바뀔 때마다 수정해야 해서 불편. 절대 경로를 설정하면 항상 @/로 시작하는 깔끔한 import를 사용할 수 있음.1단계: tsconfig.json 수정{ "extends": "expo/tsconfig.base", "compilerOptions": { "strict": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } }}2단계: babel 플러그인 설치npm install --save-dev babel-plugin-module-resolver3단계: babel.config.js 생성/수정module.exports = function..

1. 자원(Assets) 관리자원이란 정의: 앱에 포함하여 배포하는 이미지, 폰트, 아이콘, 사운드 등의 정적 파일중요성: 오프라인 상황에서도 앱이 정상 작동하려면 필수 자원을 앱에 포함해야 한다 자원 폴더 구조my-todo-fish-app/├── assets/│ ├── images/│ │ ├── fish/│ │ │ ├── goldfish.png│ │ │ ├── clownfish.png│ │ │ └── beta.png│ │ ├── backgrounds/│ │ │ ├── aquarium.png│ │ │ └── ocean.png│ │ └── icons/│ │ ├── checkmark.png│ │ └──..

1. 스타일 기초스타일 속성과 스타일 객체리액트 네이티브에서 스타일은 객체 형태. HTML/CSS의 문자열 방식과 다름.// HTML/CSS 방식 (불가능)// 리액트 네이티브 방식Yoga 레이아웃 엔진리액트 네이티브는 Yoga라는 독자적인 CSS 엔진을 사용.Facebook이 C++로 구현한 레이아웃 라이브러리HTML/CSS 엔진이 없는 네이티브 환경에서 작동Flexbox 기반의 레이아웃 시스템 제공컴포넌트별 스타일 속성컴포넌트스타일 속성ViewbackgroundColor, padding, marginTextcolor, fontSize, fontWeightImagewidth, height, resizeMode인라인 스타일 (Inline Style)import React from 'react'import..