반응형 분류 전체보기360 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. fBM에 대한 정리 1. fBM 이란 fBM은 fractional Brown Motion의 약자이다. 대충 아래의 형태의 수식을 얘기한다 By adding different iterations of noise (octaves), where we successively increment the frequencies in regular steps (lacunarity) and decrease the amplitude (gain) of the noise we can obtain a finer granularity in the noise and get more fine detail. This technique is called "fractal Brownian Motion" (fBM), or simply "fractal nois.. 2025. 11. 19. 패턴을 위한 fract와 floor함수 https://thebookofshaders.com/09/ The Book of ShadersGentle step-by-step guide through the abstract and complex universe of Fragment Shaders.thebookofshaders.com 1. fract와 floor fract는 fraction 즉 분수를 의미한다. 숫자를 넣으면 소수부분을 리턴한다 floor는 소수부분을 날려버린 정수부분을 의미한다. 2. 패턴을 만들때 어떻게 쓰이나? 가로 세로로 5x5를 만들고 싶다면, 먼저 normalized된 좌표에 숫자 5를 곱한다.그리고 fract를 uv에 취하면 해당 타일에 대한 uv값을 얻을 수 있다vec2 uv_tile = fract(uv * 5... 2025. 11. 18. smoothstep으로 선그리기 https://thebookofshaders.com/05/ The Book of ShadersGentle step-by-step guide through the abstract and complex universe of Fragment Shaders.thebookofshaders.com 쉐이더북에 나온 내용 이해하려고 정리 먼저 smoothstep은 아래와 같은 형태다 smoothstep(val1, val2, 변수); va1 이전에는 값이 0이고, val1~val2에서는 부드럽게 0~1값범위이고 val2이후부터는 1임. 만약 val1이 val2보다 크다 한다면, 예를들어 smoothstep(3, 3-0.02, x); 3보다 큰값에는 0이고 2.98 이하로는 1이다. 방향만 틀었다고 이해하자. .. 2025. 11. 17. React Native Skia에서 uniform에 애니메이션 주기 useValue가 없어 져서 헤맸다. 결론부터 말하면 reanimated를 써야한다. useSharedValue로 값을 만들고 useDerivedValue로 uniforms를 만들어야 한다. 그리고 uniforms를 캔버스에 넘겨줄때 value말고 변수명 그대로 넘겨주면 된다. import { Canvas, Fill, Shader, Skia, vec } from "@shopify/react-native-skia";import { useWindowDimensions, View } from "react-native";import { Gesture, GestureDetector } from "react-native-gesture-handler";import { useDerivedValue, useShar.. 2025. 11. 10. SDF 응용 - 선 그리기 1. 선 기본 개념 sdf에서 보통 도형의 안쪽이면 음수, 경계면이면 0, 바깥이면 양수다애초에 선은 안쪽이 없기때문에 0~ 양수 범위만 가진다. 어쨋든 sdf 기본개념인 점에서 내가 원하는 모형까지의 거리를 구하는 개념은 똑같으므로 선까지 거리를 구해보자. 선을 그릴때는 아래 세개의 점이 필요하다쉐이더의 인풋으로 들어오는 점직선의 시작점직선의 끝점 인풋으로 들어오는 점에서 직선까지의 거리는 아래처럼 내적으로 표현 가능하다. float sdLine(vec2 pos, vec2 a, vec2 b) { vec2 ap = pos - a; vec2 ab = b - a; float h = clamp(dot(ap, ab) / dot(ab, ab), 0.0, 1.0); return length(ap - a.. 2025. 11. 9. SDF(Signed Distance Function)이란 1. SDF란? 거리를 기반으로 도형을 표현하는 수학적 방법이다. 가령 아래 코드는 0,0에서 1만큼 떨어진 원을 나타내는 코드이다. float sdfCircle(vec2 p) { return length(p) - 1.0;} 여기서 중요한건 sdf에서는 안쪽은 항상 음수로 잡고, 바깥쪽은 양수로 잡는다는점이다. 다양한 sdf함수는 아래 페이지에서 공부할 수 있다. https://iquilezles.org/articles/ Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more iquilezles.org 2. SDF의 강점 sdf는 min max 함수와 부호를 이용해서 도형을 조합할 수 .. 2025. 11. 6. RN에서 네이티브 코드 불러오기 1. expo module 플러터에서는 네이티브 코드를 호출하려면 메소드 채널, 이벤트 채널이라는걸 사용했는데 rn에서는 모듈이라는걸 사용한다. 먼저 프리빌드를 한 뒤 모듈을 설치해준다 npx expo prebuildnpx create-expo-module@latest --local 2. module의 구조 모듈을 설치하면 아래와 같은 폴더구조가 생긴다 module/ 모듈폴더/ android/ 네이티브모듈.kt 네이티브뷰.kt ios/ 네이티브모듈.swift 네이티브뷰.swift src/ 타입스크립트.types.ts 타입스크립트모듈.ts expo-module.config.json index.ts 여기서 index.t.. 2025. 11. 6. flutter개발자의 RN 애니메이션 적응하기 애니메이션은 플러터가 짱이라고 생각했는데 RN도 공부를 해보니 깊게 파면 RN이 훨씬 더 좋은거 같다.플러터는 0~1이라는 변화만 주면 이걸 이용해서 내맘대로 커스텀하기 쉽지만 코드가 좀 읽기 어렵고 재사용이 쉽지 않다.플러터의 경우 스타일링을 여러 위젯을 조합해서 만드는데 각 위젯마다 각기 다르게 값을 물려줘야 하니깐 좀 어렵다. RN의 경우 스타일링은 css로 전부 처리하기 때문에 css코드 부분만 잡으면 장땡이다. 게다가 자바스크립트 스레드와 애니메이션 스레드(ui스레드)가 확실하게 분리되어있어 성능에도 이점이 있는거 같다. 1. implicit animation, expilicit animation사실 rn에서는 이를 명확하게 구분하지는 않음.플러터처럼 0~1이라는 명확한 범위의 변화를 강조.. 2025. 11. 5. AnimatedSwitcher에서 prev next 구분하기 플러터에서 AnimatedSwitcher를 사용할때 transitionBuilder를 이용하여 prev와 next를 구분해 각각 다른 애니메이션을 적용하고 싶을때가 있다. 이에 두 위젯을 구분해야 하는데 가장 많이쓰이는 방법은 key를 이용하는것이다. 허나 이 방법은 아주 치명적인 문제가 있는데, 유저가 화면을 연타하여 애니메이션을 연속적으로 호출하면 duplicatedKey Exception이 발생한다. 이를 해결하는 방법은 사실상 외부변수로 isPrev = true를 선언한 뒤 불릴때마다 값을 토글해주는 방식밖에 없다. 코드는 좀 더러워지지만 지금까지 찾은 방법줌 가장 확실하다. 2025. 7. 14. 플러터 코드푸시 초간단 정리 https://shorebird.dev ShorebirdOver the air updates for Flutter. Confidently update Flutter apps instantly.shorebird.dev 1. 개요플러터도 코드푸시가 된다. shorebird를 이용하자. 사용법이 너무 간단하다 요약 1. shorebird를 설치하고 shorebird login커맨드로 로그인한다2. shorebird release [플랫폼] 커맨드를 프로젝트에서 실행하면 배포용 앱이 빌드됨과 동시에 shorebird 콘솔에 앱이 등록된다.3. 빌드된 앱으로 앱스토어나 플레이스토어에 배포한다4. 코드푸시할 일이 생기면 코드를 수정하고 shorebird patch [플랫폼]을 입력하면 패치가 배포되며 shore.. 2025. 5. 23. 신촌 빛사랑안과 라섹수술 후기2 - 한 달 반 경과 1. 시력은 지금 어떤가요 한달후 시력측정했을때 왼쪽 0.7 오른쪽 1.0이 나왔습니다.원시였던 왼쪽눈은 불만족, 근시였던 오른쪽눈은 완전 만족. 기본적으로 라섹을 하면 각막 회복까지 고려해서 과교정을 한다고 합니다. 처음 원시였던 왼쪽눈은 근시가 되었으니 멀리있는게 잘 안보여서 불만족스럽습니다.근시였던 오른쪽눈은 멀리있는게 너무 잘보이니 몹시 만족스럽습니다. 대신 가까이 있는게 잘 안보입니다. 시간이 지나면서 근시가된 눈은 서서히 멀리있는게 잘보이고, 원시가 된 눈은 서서히 멀리있는게 안보이면서 맞춰진다 합니다. 양쪽눈 둘다 근시이신분들은 수술 1주차만 되어도 아주 만족스러우실 겁니다. 엄청 멀리있는것도 잘보이니깐요. 물론 시간이 지나면서 멀리있는게 조금 흐려져서 아쉬울수도 2. 부작용은.. 2025. 5. 17. 습진 치료기 - 탈스테로이드와 영양제 1. 탈스테로이드 시작작년부터 습진이라는 병에 걸렸다. 원인을 모르겠다. 나는 술담배도 하지 않고 커피도 안마시는데 말이지..처음에 저 병이 뭔지 몰라서 한 네군데 돌아다니고 유명한 피부과에서 습진이라고 진단해 주었다.습진이라 해서 습해서 생기는건가? 했는데 건조해서 생기는 거란다.. 스테로이드 연고와 항 히스타민제를 처방받았다.스테로이드 연고를 바르니 완치가 되었다. 문제는 그다음이다. 다른곳에서도 똑같이 습진이 생겼고 계속해서 스테로이드를 발라왔다. 발쪽과 종아리까지 생겼다.병원에 다시가보았지만 똑같은 처방을 받았고 더이상 스테로이드 약이 들지않았다. 그리고 그게 지금 위 사진 상태.2. 탈스테로이드 시작더이상 약이 들지 않았고 나는 완치 후기들을 찾아보았다. 공부를하면서 첫 시작은 탈 스테로이드더라.. 2025. 5. 17. BLE 공부 - 기초 개념 https://developer.android.com/develop/connectivity/bluetooth/ble/ble-overview 블루투스 저전력 | Connectivity | Android Developers이 페이지는 Cloud Translation API를 통해 번역되었습니다. 블루투스 저전력 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Android는 중심 역할을 하는 저전력 블developer.android.com 공식문서에 나오는 개념을 정리함 꼭 알아야할 키워드 GATT, Cetral, Peripheral 1. Profile프로파일이란 ble디바이스가 어떻게 동작하냐를 나타내는 규격임. 예를들어 심박을 측정하는 기기프로파일이 있거나 배.. 2025. 4. 22. vscode에서 flutter의 kotlin, swift 코드 환경 구성 1. 개요 플러터를 개발하는데 최고의 ide는 안드로이드 스튜디오라고 생각했다. 그런데 이제 다르다.. vscode의 자동완성 성능이 많이 좋아졌으며 플러그인을 통해 xcode와 android studio를 거의 대체가 가능한 수준으로 되었다. 2. 기본적인 환경구성 먼저 아래의 두 익스텐션이 필요하다 일단 두개를 설치해주자 3. 자동완성이 잘 되도록 하기 두 익스텐션을 설치해도 네이티브 코드를 만지다 보면 자동완성이 잘 되지 않는다. kotlin먼저 코틀린의 경우 하단에 스테이터스 바에 kotlin 언어버튼을 누른다. 그럼 audo detect가 뜨는데 이걸 자동완성 될 때 까지 여러번 갈겨준다.그러다보면 gradle 어쩌구 설정하시겠습니까 라는 알림창이 뜰때 ok를 눌러준다. 그 이.. 2025. 4. 15. 이전 1 2 3 4 ··· 18 다음 반응형
