thewavelet

React Native (13)

React Native 0.77 - New Styling Features, Android’s 16KB page support, Swift Template

https://reactnative.dev/blog/2025/01/21/version-0.77   0.77로 업그레이드기존 프로젝트의 React Native 버전 간 코드 변경 사항을 확인하려면 React Native Upgrade Helper를 사용하세요. 또한, 업그레이드 문서도 참고하시기 바랍니다.새로운 프로젝트 생성하려면:npx @react-native-community/cli@latest init MyProject --version latest 만약 Expo를 사용하고 있다면, React Native 0.77은 Expo SDK 52에서 지원됩니다 (Expo 프로젝트 내에서 React Native를 0.77.0으로 업데이트하는 방법에 대한 안내는 가까운 시일 내에 별도의 Expo 블로그 포스트에서..

더 읽기

react native 0.76.2 on windows

git clone nodejs lts 관리자 모드 nodejs command corepack enable프로젝트 디렉토리 가서 yarn set version berry yarn gradle.propertiesorg.gradle.java.home=C:\\Users\\i5\\AppData\\Local\\Programs\\Android Studio\\jbr  JAVA_HOMEC:\Users\i5\AppData\Local\Programs\Android Studio\jbr  C:\Users\i5\IdeaProjects\MyProject\mobile\myproject\node_modules\react-native\ReactAndroid\cmake-utils fix build failure on windows in ..

더 읽기

React Native 0.73.1 변경내용. 20231219

0.73 Hermes를 사용한 디버깅 개선, 안정적인 심볼릭 링크(symlink) 지원, 안드로이드 14 지원 및 새로운 실험적 기능을 추가합니다. 기존 디버깅 기능을 폐지하고, 새 아키텍처의 브릿지리스 모드(Bridgeless Mode)를 출시. 주요사항 디버깅 개선 Metro에서의 안정적인 심볼릭 링크 지원 안드로이드에서의 코틀린 템플릿 안드로이드 14 지원 새 아키텍처 업데이트 폐지된 디버깅 기능 디버깅 개선: Hermes에서의 콘솔 로그 기록: console.log() 로그가 이제 백그라운드에서 캡처됩니다. 앱 초기 로드 로그 관찰이 더 쉬워졌습니다. Flipper, Chrome DevTools 및 새로운 실험적 디버거와 호환됩니다. 업데이트된 디버깅 문서: 최신 정보로 새롭게 단장된 문서. 지원..

더 읽기

WINDOWS Setting FLUTTER & REACT NATIVE

윈도우에서는 안드로이드 빌드 밖에 되지 않지만 윈도우 11 PC 의 속도와 편리함을 무시할 수 없기에 윈도우 환경에서 개발도 상당한 메리트가 있다. 그래서 관련 이슈를 정리. 윈도우 10 이나 윈도우 11 의 콘솔에서 yarn 이나 다른 명령어들 사용시 "이 시스템에서 스크립트를 실행할 수 없으므로..." 에러시... Get-ExecutionPolicy 로 확인. 아마도 Recstricted 로 되어 있을 것. get-help Set-ExecutionPolicy 전부 y 할 것. Set-ExecutionPolicy RemoteSigned 해주면 된다. 전부 y 할 것. eslint 의 CRLF , LF 문제 해결. https://simsimjae.medium.com/vscode%EB%A5%BC-%EC%8..

더 읽기

iOS 개발을 하며 React 의 함수형개발방식이 그냥 옵션일 뿐임을 상기시켜주었다.

이 글에서 언급된 함수형 프로그래밍 방식이 최신의 트렌드인 것으로 생각하였지만 iOS 개발을 하며 잘못됨을 인지. React 와 함수형 프로그래밍 Functional Programming vs OOP 함수형 개발방식은 하나의 옵션일 뿐이다. 위의 글에서 언급된 객체지향개발방식 + 쓰레드 의 문제로 지적한 부분이 객체지향방식으로 개발을 했을 때 추상화를 위해서 메소드를 정의하는데 해당 메소드가 어떤 동작을 하라는 명령형 방식이되고 그럴 경우 해당 명령형 메소드가 동작을 할 때 선점형 방식인 쓰레드에서 동작할 것이고 그럴 경우 어떤 컴포넌트의 state 에 영향을 미칠 때 여러군데에서 부수효과가 발생할 경우 해당 state 에 대해 의도치 않은 오류를 야기할 수 있을 것 같다고 문제 제기를 하였다. 하지만 ..

더 읽기

nested vs normalize vs graphql

nested: 다음과 같이 Sender, Receiver 부분이 IUser 로 nested 된 형태로 필요한 부분까지 전체 데이터를 front 측 모델로 다룬다. export interface IUser { id: number; nickname: string; email: string; updatedAt: Date; createdAt: Date; } export interface IDM { id: number; SenderId: number; Sender: IUser; ReceiverId: number; Receiver: IUser; content: string; updatedAt: Date; createdAt: Date; } normalize: 다음과 같이 Sender, Receiver 가 string..

더 읽기

React 의 훅 그리고 Context API 에 대한 추상적인 고찰

React 의 훅 그리고 Context API 에 대한 추상적인 고찰. React 훅은 마치 javascript 의 클로저 처럼 함수가 하나의 실행 영역을 가지는 것과 유사하게 파라미터를 받을 수 있고(마치 리액트 컴포넌트의 속성과 같이) 내부에서 사용될 수 있는 변수들이 존재하며 상태(state)와 동작(method) 을 가지는 기능 단위이다. 보통 하나의 기능 단위는 상태와 동작으로 정의될 수 있다. 그리고 함수형 프로그래밍 방식에서 추구하는 확실한 기능 단위의 조합 방식에도 부합한다. 리액트는 UI 라이브러리이며 그 기본 단위인 컴포넌트는 생명주기, 렌더링 관련된 기능과 속성, 상태, 동작과 같은 것을 가진다. 훅이 나오기 전 클래스 형 컴포넌트를 주로 사용하던 시기에 단순한 독립적인 유틸리티 함수..

더 읽기

왜 StyleProp<ViewStyle> 를 쓰는가? 그냥 ViewStyle 이 아니라?

Avatar 라는 재사용 가능 컴포넌트를 만든다고 할 경우 속성값으로 ImageStyle 이나 ViewStyle 의 타입을 가진 속성값을 받을 것이다. 이때 타입을 지정해줄 때 이렇게 TextStyle, ViewStyle, ImageStyle 로 해도 되지만 이렇게 할 경우 style={[styles.x, styles.y]} 와 같이 배열로 입력할 경우 오류가 난다. 그래서 style: ViewStyle | ViewStyle[] 과 같이 해주면 이 오류는 사라진다. 하지만 또 다시 style={[style.x, boldText ? style.bold : undefined]} 와 같이 조건에 따라 달라지는 속성값을 넣어줄 경우 또 오류가 난다. interface Props { textStyle?: Text..

더 읽기

React Native 몇몇 애매한 오류 메시지 관련

아래 두가지 오류에 대해 정리해보면 첫번째 것은 navigate 메소드를 사용하고 resetRoot 를 사용하지 않으면 해결되었고 두번째 것은 그냥 내가 로직을 잘못짜서 그런 것이었다. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. => 컴포넌트가 이미 사라졌는데 그 이후에 해당 컴포넌트의 상태값을 변경하는 로직이 수행될 경우 발생할 수 있다. 메..

더 읽기

throttle 과 debounce 그리고 lodash 를 사용하여 실제 React 에 적용하는 법. 그리고 useCallback 에서의 lint 에러.

실제로 throttle 과 debounce 의 경우 debounce 는 검색어 자동완성에 그리고 throttle 은 로딩 모달이 없는 단순 get 요청의 반복 요청의 빈도를 제한하는 정도로 사용된다. 보통은 생성, 수정, 삭제 같은 경우 isSubmitting 플래그로 로딩 모달과 함께 해당 요청의 응답이 없는 동안에는 클릭하지 못하도록 하는 방식을 사용한다. 생성, 수정, 삭제 같은 경우에 throttle, debounce 를 사용할 경우 결국은 이벤트를 두번은 수행하게 되기 때문이다. throttle 과 debounce 그리고 lodash 를 사용하여 실제 React 에 적용하는 법. throttle 은 이벤트 발생 즉시 실행되고 그 다음 지정한 시간 동안 발생되지 못하게 막고 그 시간이 지나면 다시..

더 읽기

package-lock.json vs yarn.lock

react native 관련 작업 시 패키지 매지저로 yarn 을 사용하면 다음과 같은 경고 문구가 뜰 수 있다. warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. npm 최신 버전의 경우 package-lock.json 으로 패키지의 버전 락을 수행한다. yarn 의 ..

더 읽기

cocoapods 업데이트 repo 변경사항. Git MasterSource 에서 CDN TrunkSource 로

pod 를 업그레이드 후에 pod install 시에 다음과 같은 경고 문구를 만날 수 있다. [!] Your project does not explicitly specify the CocoaPods master specs repo. Since CDN is now used as the default, you may safely remove it from your repos directory via `pod repo remove master`. To suppress this warning please add `warn_for_unused_master_specs_repo => false` to your Podfile. 이 이슈와 연관이 있다. git 기반의 MasterSource 대신 CDN 기반의 Trun..

더 읽기

React Native vs Android / Swift

왜 React Native 가 좋은가? Android / Ios Native 를 Java, Kotlin, Swift 를 통해서 개발한다고 생각해보자. 단순히 한 화면에서 다른 화면으로 전환하며 데이터 전달을 한다고 할 때 간단히 보면 아래와 같다. 논리적으로나 복잡도에서나 react native 가 가장 단순하고 논리적이라 할 수 있다. 또한 안드로이드나 Swift 네이티브의 경우 구현을 하려면 꽤나 성가신 것을 알 수 있다. 간단한 화면 전환에서 데이터 전달을 함에 있어 인텐트, 액티비티, 세그웨이, 뷰컨트롤러 등의 고차원적 개념과 이를 각 문법에 맞게 그들 특유의 방식에 맞추어 공을 들여 구현해야 하고 또한 이런 간단한 의도를 코드로 구현하고자 함에 있어 여러가지 고려하고 생각해야할 것들이 많아 상당..

더 읽기

Copyright © thewavelet All Rights Reserved

Designed by JB FACTORY

티스토리툴바