본문 바로가기
반응형

전체 글363

react native 커스텀 화면전환 구현 만드느라 힘들었다.. flutter는 AnimatedSwitcher로 한방에 되지만 rn은 해당 구조를 만드는게 여간 까다롭지 않다. 아이디어는 다음과 같다 1. zustand에 currentScreen과 nextScreen을 구분해서 상태를 저장한다2. 전환 애니메이션을 먼저 설정한다3. 애니메이션이 설정되었으면 이제 screen 이름을 갈아끼운다. 먼저 기본구조..import { StyleSheet, View } from 'react-native';import React, { ReactNode, useEffect } from 'react';import Animated from 'react-native-reanimated';import BottomNavigation from './BottomNa.. 2026. 3. 27.
Claude Code 프로젝트 수준의 mcp 붙이기 https://code.claude.com/docs/en/settings Claude Code settings - Claude Code DocsConfigure Claude Code with global and project-level settings, and environment variables.code.claude.com mcp를 프로젝트의 .claude/settings.local.json에 붙이려 하니 동작하질 않는다. 공식문서 확인해보니 .mcp.json에서 등록해야한다... 프로젝트/.claude/.mcp.json이 아닌프로젝트/.mcp.json에다 해야한다. 2026. 2. 24.
왜 flutter로 만든 앱은 rn보다 예쁘게 나오지 않을까? 두 프레임워크를 왔다리 갔다리 하라면서 항상 느끼는거다. rn이 flutter보다 훨~씬 이쁘게 나온다. 그런데 이게 단순 기분탓이 아니였다.. 진짜였다.flutter의 엔진은 기본적으로 sRGB 색공간을 지원하며, 이는 iOS의 display P3 색공간보다 색표현력이 적다. 이에 플러터팀은 iOS에서 FLTEnableWideGamut 옵션을 활성하 하면 저 p3색공간을 지원해준다고 한다. 그런데 디폴트 값이 아니다...그리고 단순히 저 옵션을 활성화 한다고 widget들이 이뻐지지 않는다. 관련자료 여러개가 있다. 일단 공식문서 https://docs.flutter.dev/release/breaking-changes/wide-gamut-framework Migration guide for wi.. 2026. 1. 13.
npx patch-package 1. 개요 써드파티 라이브러리를 쓰다 에러가 났다. 원작자가 이를 수정할때 까지 기다리는데 임시방편으로 소스코드를 수정해서 사용하고싶다. 그런데 이 내용을 내 깃소스에다가 반영해서 다른 팀원들도 그 수정내용을 사용하려면? npx patch-package를 사용하면 된다. 2. 사용법 먼저 npm install patch-package를 설치해야 한다. 그리고 package.json에 아래 내용을 추가해준다. "scripts": {+ "postinstall": "patch-package" } 이러면 세팅 완료이다. 다음으로 node_moudules에 들어가서 외부 라이브러를 수정한다 그 다음 npx patch-package 패키지네임 을 입력하면 patches라는 폴더가 만들어지고 거기에 .. 2025. 12. 30.
Flutter와 비교해 RN에서 최적화 할때 고려해야 할것 플러터에서의 최적화는 간단하다. 필요한 부분만 리빌드 하는것. 리액트 네이티브에서도 마찬가지지만 최적화 방법이 조금 까다롭다. 플러터는 build scope만 정해주면 되는데 얘는 별에 별거를 다해줘야한다.. 일단 공식문서에서 나오는 내용부터 보면.. By default, when a component re-renders, React re-renders all of its children recursivelyhttps://react.dev/reference/react/useCallback#usage useCallback – ReactThe library for web and native user interfacesreact.dev 얘네도 대충 setState쓰면 컴포넌트 트리 만든거 자식들까지 re.. 2025. 12. 20.
Reanimated 큰그림 정리 SharedValueAnimation그냥 내가 이름 지은거. sharedValue를 이용한 애니메이션은 flutter에서 explicit animation과 같다. 1. SharedValueuseSharedValue로 애니메이션 값을 설정한다. 값을바꾸면 그에따라 ui가 변함. 주의사항 sharedValue는 UI thread에서 사용되는 값이다. 고로 자바스크립트 스레드의 변수와 연산을 해서 style에 물려주면 동작을 하지 않음.값을 섞어서 애니메이션을 주려면 AnimatedStyle이나 AnimatedProp을 사용해야함 2. withTiming, withSpringwithTiming, withSpring 같은걸로 값을 설정하면 worklet 기반 애니메이션이 진행된다. 3. AnimatedCo.. 2025. 12. 16.
Flutter에서 RN으로 넘어오며 느낀 장단점들 장점 풍부한 자료고수들의 자료가 많다. 역사가 오래되었다 보니 하이레벨 수준에서 구현 가능한건 RN이 압승이다.하지만 로우레벨 수준의 난이도 ui는 flutter가 훨씬 우위이다. 최적화의 편안함react compiler 등장으로 flutter 대비 최적화에 덜 신경 써도 된다. flutter는 최적화를 제대로 안해주면 성능이 정말 안좋다. 하지만 세밀한 부분에서의 최적화는 listenable의 유무로 인해 flutter가 훨씬 최적화를 하기가 쉽다. 다른 분야로 넘어가기 쉬움아마 가장 큰 장점이 아닐까... 자바스크립트 생태계는 진짜 혼자 다 해먹으니까 코드의 재활용성개인적으로 리엑트에서 권장하는 코드의 구조가 재사용성이 flutter보다 높은거 같다.mvvm보단 flux 패턴이 훨씬 좋다고 생.. 2025. 12. 10.
Perlin Noise에 대하여 https://thebookofshaders.com/11/ The Book of ShadersGentle step-by-step guide through the abstract and complex universe of Fragment Shaders.thebookofshaders.com 1. 펄린 노이즈란? 먼저 펄린노이즈를 배우기전에 랜덤노이즈 부터 생각해보자. 랜덤노이즈는 값이 랜덤하게 나오는데 값의 앞뒤로 전혀 상관없는 애들이 튀어나오는 노이즈이다. 반면 펄린노이즈는 랜덤한 값이 나오지만 값의 앞뒤로 연속성이 있다. 이것이 랜덤노이즈와 가장 큰 차이점이다. 2. 그래서 어디다 씀? 펄린노이즈는 값이 랜덤하지만 값의 변화가 부드럽다. 이에따라 게임 이펙트 같은곳에 많이 사용된다. 구름을 만들거나 .. 2025. 12. 4.
color warping mat2 rotate(float a) { return mat2(cos(a), -sin(a), sin(a), cos(a));}void mainImage( out vec4 fragColor, in vec2 fragCoord ){ vec2 uv = fragCoord / iResolution.xy; uv = uv * 2.0 - 1.0; uv.x *= iResolution.x / iResolution.y; float t = iTime; // ------- 중심 회전 추가 ------- float rotSpeed = 0.1; uv = rotate(sin(t) * rotSpeed) * uv; // ------- 좌표 워핑 ------- .. 2025. 12. 1.
반응형

티스토리툴바