반응형 분류 전체보기354 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 공부 - 기초 개념 ble 를 공부하기 위해 기초 개념을 llm을 통해 알아봄 📌 BLE 통신 구조 핵심 개념1. Central ↔ PeripheralCentral: 데이터를 요청하는 주체 (예: 스마트폰).Peripheral: 데이터를 제공하는 장치 (예: 심박계, 체중계, IoT 디바이스).BLE 통신은 일반적으로 Central이 Peripheral에 연결해서 데이터를 읽거나 쓴다.2. GATT (Generic Attribute Profile)BLE 데이터 전송의 기본 구조.GATT는 Central이 Peripheral로부터 데이터를 읽거나 쓰는 방식을 정의함.GATT는 서비스 (Service) 와 특성 (Characteristic)의 집합▶ Service관련된 데이터를 그룹화한 것.예: "Heart Rate Ser.. 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일차 라섹 수술을 받게되었습니다. 개발자로 일하면서 과로로 인해 요즘 눈이 너무 아프더라고요. 프로젝트가 끝나고 후딱 받으려고 빠르게 알아보다가 빛사랑 안과를 알게되었습니다. https://kko.kakao.com/P3mIMT_TLb 빛사랑안과의원서울 서대문구 신촌로 93map.kakao.com 1. 왜 이 병원을 선택하였는지, 그리고 라섹 먼저 시력 교정 수술을 하려면 라식, 스마일 라식, 라섹 중 무얼할지 선택해야겠지요. 제가 알아본 바로는 이렇습니다. 라섹 : 각막을 벗겨내고 레이저를 쏘고, 각막이 회복될댸 까지 기다림라식 : 각막을 뚜껑처럼 잘라 열고, 레이저를 쏘고, 각막을 다시 덮음스마일 라식 : 라식의 업그레이드 버전. 각막의 안쪽을 잘라내서 하는식으로 함 저는 여기서 라섹을 선택했습니.. 2025. 3. 22. Row위젯에서 Text Overflow날 때 앱 막바지 출시 직전에 검토를 하다보니 연세가 있으신분들이 화면을 크게 키워서 overflow이슈가 마구 났었다.생각지도 못한 부분... 임원분께서 나같은 사람들은 어떻게 사용하라고 라는 말 한마디에 많이 반성했다.오버플로우 이슈를 수정하면서 한가지 플러터 꿀팁을 발견했다. 보통 나는 Row안에 좌측에 텍스트, 우측에 아이콘을 넣었는데 그사이에 spacer를 넣었다. 오버플로우 나는 지점이 다 저지점이더라Flexible Expanded 다 넣어봤는데 줄바꿈이 예상보다 심하게 일어난다. 결국에 해결했는데 가장 중요한 포인트는 Spacer를 쓰지 않는다는거다 Spacer를 쓰지 않고 Expanded로 텍스트를 감싸니 화면크기 키우는 이슈는 이쁘게 해결됐다. 고로 기억하자 좌측에 텍스트, 우측에 아이콘.. 2025. 2. 18. GestureDetector 텅빈영역 터치 감지하기 플러터를 하다보면 터치를 주었는데 텅빈영역에서 터치가 안되어서 사용감에 불편을 주는 경우가 많다. 가령 spacer같은 애들... 이를 해결하려면 behavior에 opaque 옵션을 주면 된다. GestureDetector( behavior: HitTestBehavior.opaque, // 빈 공간도 터치 감지 onTap: () { print("Tapped!"); }, child: Text("Tap me!"),), 2025. 1. 9. ios에서 크래시가 났을때 분석방법 product -> scheme -> edit scheme에서 diagnostics탭에 Address Sanitizer를 클릭하면ASan이 돌게 된다. 이 옵션을 활성화 하면 앱이 죽었을 때 코드위치도 깔끔하게 나옴 https://developer.apple.com/documentation/xcode/diagnosing-memory-thread-and-crash-issues-early Diagnosing memory, thread, and crash issues early | Apple Developer DocumentationIdentify runtime crashes and undefined behaviors in your app during testing using Xcode’s sanitizer.. 2025. 1. 2. dynamic사용시 주의점 네이티브에서 플러터쪽으로 함수를 호출했는데 불리지를 않는다. 함수 호출전 까지 갔는데 함수만 안불린다. 이해할수가 없는 현상. 원인은 dynamic이였다. 클래스 안에 있는 메소드에 dynamic을 인풋으로 넣었는데 타입이 안맞아서 함수를 못찾아 불리지 않았다. 별다른 로그도 없고 함수만 안불려서 도대체 뭔가 싶었는데 참 어려운 이슈였음. 따로 다트패드에서 다른방식으로 재현해보니 거긴 로그가 찍히던데 이상하네.. 2024. 12. 31. bloc에서 copyWith을 직접만들면 안되는 이유 흔히보는 copyWith의 코드는 아래와 같다.이 코드의 문제점은 어떤 값을 명시적으로 null로 하고 싶은데 null이 되지 않는다.void main() { User user = User(name: "abc", age:34); print("${user.name} ${user.age}"); user.copyWith(name:null); print("${user.name} ${user.age}"); }class User { final String? name; final int? age; User({this.name, this.age}); User copyWith({ String? name, int? age, }) { return User( name: name .. 2024. 12. 30. 이전 1 2 3 4 ··· 18 다음 반응형
