728x90

Development/ReactNative 33

[study] 앱 최적화 방법

useCallback, useMemo 등의 사용 자주 렌더가 일어나는 경우에는 매번 변수 또는 함수 재생산 너무 자주 일어난다면 비정상적인 memory를 가지게 되기 때문에 자주 발생하는 경우 useMemo, useCallback 등 사용 권장 Image 사이즈 처리 : 이미지의 사이즈를 명확히 명시하지 않아 render가 무한히 호출됨. 가급적이면 정수로 되어있는 width, height값 선언 권장 // 또는 FastImage 사용

[study] ThunkAction

ThunkAction과 ThunkDispatch는 Redux Thunk 미들웨어와 관련된 개념이다. Redux Thunk는 Redux의 비동기 작업을 관리하기 위해 사용되는 미들웨어로, 액션 생성자가 함수를 반환할 수 있게 해 준다. 이를 통해 액션 생성자 내에서 비동기 로직을 실행하고, 완료되면 일반 액션 객체를 디스패치할 수 있다. ### ThunkAction `ThunkAction`은 Redux Thunk 미들웨어에서 사용되는 타입이다. TypeScript와 함께 Redux를 사용할 때, 액션 생성자에서 반환되는 함수의 타입을 정의할 때 사용된다. `ThunkAction` 타입은 비동기 작업의 결과를 처리하기 위해 사용되며, 일반적으로 다음 네 가지 파라미터를 받는다: - `ReturnType`: ..

[study] png 파일 사용, 이미지 파일의 내용을 변경했음에도 불구하고, 변경 전 이미지가 표시되는 이유

이미지 파일의 내용을 변경했음에도 불구하고, 변경 전 이미지가 표시되는 이유는 캐시(cache) 때문일 수 있다. 이미지 파일은 일반적으로 로컬 저장소나 원격 서버에서 가져와서 표시되는데, 가져온 이미지는 성능 및 속도 향상을 위해 임시로 캐시에 저장될 수 있다. 캐시는 이전에 로드한 이미지를 저장해 두고, 동일한 파일 경로나 URL을 가진 이미지를 다시 요청할 때 이전에 캐시 된 이미지를 반환한다. 이로 인해 이미지가 변경되었음에도 불구하고 변경 전 이미지가 여전히 표시될 수 있다. 나는 러버독이라는 프로그램을 사용중이고, 파일 이름을 동일하게 저장, 파일 내용은 변경된 상황에서 앱기기에서 reset-cahce를 했음에도 이미지 파일의 내용이 변경되지 않는 경우가 있었다. 이런 경우 또 한 가지 생각해..

[study] RESTful 기반 API를 이용한 웹 서비스 개발

RESTful 기반 API를 이용한 웹 서비스 개발은 웹 애플리케이션을 구축하는 방법 중 하나다. 이 방법은 REST(Representational State Transfer) 아키텍처 스타일을 따르며, 클라이언트와 서버 간의 통신을 위한 API를 개발하는 것을 중점으로 한다. RESTful API는 웹 서비스의 리소스를 고유한 URI(Uniform Resource Identifier)로 표현하고, HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 리소스에 대한 CRUD(Create, Read, Update, Delete) 작업을 수행한다. 이를 통해 클라이언트는 HTTP 요청을 보내고, 서버는 해당 요청에 응답하여 필요한 데이터를 제공하거나 작업을 수행한다. 웹 서비스 개발에서 ..

[study] 최적화를 위한 Memorization

최적화를 위한 Memorization :기존에 수행했던 연산, 결과들을 어딘가에 저장한 뒤 동일한 입력값인 경우 재활용하는 것 useMemo : -첫 번째 인자 : 기억할 값을 리턴해주는 함수 -두 번째 인자 : dependency array const variableA = useMemo(()=>{}, [])//useEffect와 비슷한 사용법 (예) export const ComponentA = (props)=>{ //props.a=1, props.b=2; const variableA = useMemo(()=>{ return props.a+props.b }, [props.a, props.b]) }; useCallback: -첫 번째 인자 : 기열 할 함수를 리턴해주는 함수 -두 번째인자 : depend..

[study] 왜 hook을 만들었는가 ?(자주 사용하는 hook)

1. 컴포넌트 간 상태 관련 로직 재사용하기 어려움 매번 같은 상태 관리 로직을 copy&paste 공통화되지 않다 보니 컴포넌트마다 변경사항을 수정해야 하는 어려움 2. 컴포넌트가 커질수록 복잡해지는 로직 단일 책임 원칙에서 벗어남 3. 혼란을 주는 class *hook 사용의 규칙 1. 모든 hook을 사용할 때 최상단에서 호출하여야만 함 함수호출 = 랜더링 2.react 함수에서만 hook을 사용해야 함 자주 사용하는 hook React-native -useWindowDimensions -useBackHandler : 안드로이드에서 back키를 눌렀을 때 / return으로 boolean값을 꼭 해주어야 한다. npm install @react-native-community/hooks (예) exp..

[study] Gradle 특정 버전 설치하기

gradle-wrapper.properties 파일>> distributionUrl=https\://services.gradle.org/distributions/gradle-{8.0.1}-all.zip 설치하고 싶은 버전이 7.6.1이면 distributionUrl=https\://services.gradle.org/distributions/gradle-7.6.1-all.zip ./gradlew wrapper --gradle-version {8.0.1} 설치하고 싶은 버전이 7.6.1이면 ./gradlew wrapper --gradle-version 7.6.1 완료 후 다시 빌드 호환되는 java가다른 경우 jdk를 맞추어설치해주어야 한다…. 끝이 없는설치지옥 ㅠ0ㅠ 설치 그만.. 에러 그만...

[error] 안드로이드 스튜디오에서 빌드가 성공적으로 열리는데, 터미널에서 npm start를 실행하면 빌드 실패(buildFailed)가 발생

이러한 문제는 프로젝트의 의존성이나 환경 설정의 일관성 문제로 인해 발생할 수 있습니다. 다음 몇 가지 단계를 따라 문제를 해결해 볼 수 있다 프로젝트의 의존성을 설치해야 합니다. 프로젝트 디렉터리로 이동한 후에 다음 명령을 실행하여 필요한 의존성을 설치합니다: npm install cd ios && pod install 이후 다시 npm start 하면 열림

728x90