0.73 Hermes를 사용한 디버깅 개선, 안정적인 심볼릭 링크(symlink) 지원, 안드로이드 14 지원 및 새로운 실험적 기능을 추가합니다. 기존 디버깅 기능을 폐지하고, 새 아키텍처의 브릿지리스 모드(Bridgeless Mode)를 출시. 주요사항 디버깅 개선 Metro에서의 안정적인 심볼릭 링크 지원 안드로이드에서의 코틀린 템플릿 안드로이드 14 지원 새 아키텍처 업데이트 폐지된 디버깅 기능 디버깅 개선: Hermes에서의 콘솔 로그 기록: console.log() 로그가 이제 백그라운드에서 캡처됩니다. 앱 초기 로드 로그 관찰이 더 쉬워졌습니다. Flipper, Chrome DevTools 및 새로운 실험적 디버거와 호환됩니다. 업데이트된 디버깅 문서: 최신 정보로 새롭게 단장된 문서. 지원..
https://reactnative.dev/docs/animations#tracking-gestures https://m.blog.naver.com/armigar/221930494683 Animated.Value 를 useRef 사용하여 변수로 잡고 Animated.timing, Animated.spring ... 와 같은 것으로 값을 변경하여 해당 Animated.View 와 같은 것의 style 에 셋팅한 Animated.Value 값을 변화시켜 애니메이션을 통해 움직이게 할 수 있다. 그리고 또한 Animated.View 같은 것은 사용자 제스쳐에도 움직이는데 그것의 이벤트에 Animated.Value 를 셋팅해주면 또한 트래킹이 가능하다. 그래서 스크롤 뷰 페이저 같은걸 구현.
yarn add @react-native-firebase/app @react-native-firebase/messaging @notifee/react-native 설치시 이슈 1. The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or sp..
https://editor.swagger.io/#!/ Swagger Editor editor.swagger.io https://swagger.io/docs/specification/about/ About Swagger Specification | Documentation | Swagger What Is OpenAPI? OpenAPI Specification (formerly Swagger Specification) is an API description format for REST APIs. An OpenAPI file allows you to describe your entire API, including: Available endpoints (/users) and operations on each e..
prettier 와 eslint 를 동시에 사용할 때 prettier 가 && 나 || 를 라인의 끝에 위치시키게 되어서 eslint 에서 operator linebreak 경고 메시지를 내뱉는 경우에 eslint-config-prettier 확장을 사용해서 prettier 와 충돌이 있는 eslint 룰을 꺼주는 방법 외에 이 경고 메시지를 나오지 않게 prettier 측이나 vscode 측 설정으로 해줄 수 있는 방법은 없을까요? https://github.com/prettier/prettier/issues/3806 기본적으로 prettier 의 설정에는 관련 설정이 없다고 하는데.... ESLint는 문법 에러를 잡아주거나 더 좋은 코드 구현 방식을 사용하도록 해주지만, Prettier는 줄 바꿈,..
쓰레드가 없기 때문. 쓰레드가 있었다면 교착상태에 대한 컨트롤이 가능하므로 객체지향적으로 해도되지만 웹브라우저에 쓰레드는 없으니.. 리액트 컴포넌트는 쓰레드가 없어서 선점형 방식으로 개발할 경우 동시다발적 이벤트 및 화면 갱신 그리고 사이드 이펙에서 무결성을 보장하기 힘든 코드가 될 가능성이 높아진다. 클래스 컴포넌트에서 라이프 사이클 메소드에 관련 로직들이 한번에 들어가게 되는데 그렇게 되면 나중에 코드가 난잡해지고 충돌이 일어날 가능성이 높아진다. 함수형 컴포넌트와 훅의 경우 훅은 각각의 상태에 대한 변화 감지를 하고 또한 각 라이프 사이클 메소드라는 개념보다 useEffect 라는 이펙에 중점을 두기 때문에 각 상태와 이벤트들도 각각 독립적으로 컨트롤 할 수 있으며 컴포넌트의 라이프사이클도 이펙 훅..
React Boundaries 라는 것은 선언형으로 전체 에러처리에 좋다. 그리고 react- https://www.youtube.com/watch?v=hszc3T0hdvU react-error-boundary 라는 라이브러리를 추가로 사용해야 한다. react-query 와 같은 api 단계의 에러 처리는 onError 부분에서 처리해주면 좋다. react-error-boundary 를 사용한 React Boundaries 는 전체 에러 처리용. (앱 전체에 걸쳐 예기치 않은 에러 모두 포함) api 단계의 에러처리 부분은 해당 부분 에러처리를 위한 것. 또한 api 부분 외에도 각 포인트 별로 에러처리가 필요하다면 적절한 곳에 포인트를 주면 된다. Exception 와 Error State 는 다르게..
번역: https://react-query.tanstack.com/guides/paginated-queries Paginated/Lagged Queries 페이지네이션 데이타를 렌더링하는 것은 리액트 쿼리에서 매우 일반적인 UI 패턴입니다. 단지 페이지 정보만을 포함하면 작동합니다. const result = useQuery(['projects', page], fetchProjects) 하지만, 이 예제를 실행하면 이상한 걸 알 수 있습니다: success / loading 상태를 들락날락거립니다. 왜냐하면 각 새로운 페이지는 새로운 쿼리로 취급되기 때문입니다. 이러한 부분은 적절하지 않습니다. 그리고 운 나쁘게도 많은 툴들이 이렇게 동작합니다. 하지만 리액트 쿼리는 아닙니다! 예상하듯이, 리액트 쿼리는..
infinite scroll 을 구현하는 경우 useQuery 로는 대응이 안된다. infinite scroll 의 경우 page 가 한개씩 늘어나면서 늘어난 page 가 데이터에 추가되는 식이다. 참고로 pagination 은 새로운 page 로 데이터가 갱신된다. react-query 는 useQuery, useInfiniteQuery 를 대표적으로 사용한다. pagination 은 useQuery 로 대응한다. https://react-query.tanstack.com/reference/useQuery https://react-query.tanstack.com/guides/paginated-queries https://react-query.tanstack.com/guides/infinite-quer..
자꾸 한번씩 의심을 하게 된다. redux 대신 좀 더 쉽게 사용할 수 있는 전역 상태 라이브러리는 없는가에 대해서... 하지만 다른 것들은 쉬운게 아니라 기능이 없는 것이다. redux 가 아직까지는 제일 낫다. 그러나 recoil 은 아직 experimental 인데 이 경우는 아직 잘은 모르겠고 (왜냐하면 리액트 팀의 공식 라이브러리이니깐...) constate 라던가 뭐 이런건 그냥 거의 contextAPI 와 hook 를 사용한 단순한 라이브러리 정도여서 그냥 기능이 없을 뿐이지 심플한 것이 아니다. React 의 useState, useReducer 같은 거 사용한 contextAPI 와의 조합 정도... 전역 상태는 redux-toolkit 이 현재로서는 최고의 선택. flux 패턴의 구현체..
정리하면, sass 와 같은 css preprocessor 적용, styled-components 와 같은 css-in-js 도 적용. 추가적인 헬퍼인 polished, classnames 같은 것 추가. reset 을 전역 scss 파일에 추가해서 적용해주고, postcss 에서 필요한 부분 추가해주면 되는데 이는 보통 browerslist 설정에 대부분 다 포함되어 있다. scss 즉, sass 용 preprocessor 는 node-sass 는 deprecated 되었으니 dart-sass 를 사용해야한다. 명령어는 npm install sass 이다. postcss 란 autoprefixer 나 flexbox 또느 grid 관련 오류라던가 하는 등등의 몇몇 고려해야할 사항들을 위해 컴파일된 css..
정리해보면 nextjs + react-query + redux-toolkit + rtk-query + react-hook-form + yup 의 구성이 좋다. SSR 이 아니라면 CRA (create-react-app) 로. SSR 이면 CNA (create-next-app) 로. 물론 모두 typescript 를 적용. React-Query, RTK-Query, SWR 등은 요청 캐싱용 라이브러리이지 리액트에서 말하는 컴포넌트의 상태, 리덕스의 전역 상태와는 관련이 없다. Hook 와 단일자원(웹소켓이라던가 DB 라던가)의 조합은 마치 전역 상태와 같은 늬앙스를 줄 수 있는데 이는 Hook + 단일자원 이 원래 그러한 역할을 할 수 있기 때문이다. 이것이 늬앙스가 비슷하다하여 마치 리덕스 전역 상태를 ..
* typescript 시작. npm init -y npm install typescript npx tsc --init npm install typescript 를 해주면 node_modules/.bin/tsc 라는 바이너리가 설치된다. npx tsc 명령어는 이를 실행시킨다. 만약 .bin 에 해당 명령어가 없다면 npx 서버 측의 것을 가져와 실행한다. RegExp, setTimeout, console 등 기본 javascript 예약어 들 인식 못하는 것은 npm i -g typescript 하고 설정에서 typescript 실행경로를 Bundled 로 해주니 해결되었음. src/1.ts 생성. npx tsc 라고 입력하면 컴파일 된다. npm install lodash npm install @ty..
[DP, Android] RN 으로 작업할 때는 DP 라고 생각하고 그냥 디자인 받아서 width, height 값으로 작업하면 된다. 아래 코드는 그냥 참고용일 뿐. 대신 디자인을 받을 때 해상도가 좀 떨어질 경우 다시 좀 고해상도로 요청하면 된다. 디자이너도 DP 의 개념 단위로 작업을 해야 한다... (실제 작업은 고해상도 px 단위이지만 논리적으로는 DP 로 생각하고 작업해야한다.) DP 단위로 작업한다는 것은 비율적으로 작업한다는 의미이다. 한 픽셀 한 픽셀의 의미가 아니라 전체적인 비율로 작업하는 개념이어야 한다. 물론 그 전체적인 비율단위의 작업의 결과를 뽑아낼 때 한 픽셀 한 픽셀도 잘 맞아들어 가도록 정밀도 있게 작업하면 좋다. 하지만 실제 개발에 반영될 때 해당 이미지 자체는 거의 정확..
자바스크립트는 ECMA-262 를 만족하는 구현체를 가리킨다. Ecma 인터내셔널의 여러 기술 위원회(Technical Committee, 이하 TC) 중 TC39 라는 위원회가 이 명세를 관리한다. https://ahnheejong.name/articles/ecmascript-tc39/ 이런 문서는 optional chaining 검색하면 나오는데 정작 이것이 es2020 인지에 대해서는 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining https://github.com/tc39/proposal-optional-chaining
대답: Yes. 원래 그런 용도이다. 여기서 RNIap.getAvailablePurchases(); 이걸 통해서 나온 purchase 에는 transactionReceipt 가 undefined 인 경우가 있다. 서버로 purchase 를 통으로 보내서 validation 하려다보니 purchase.transactionReceipt 가 undefined 로 없을 경우 dataAndroid 값을 받게 하려고 해서 receipt: purchase.transactionReceipt || purchase.dataAndroid 이렇게 하면 더 안정적인 코드가 될 것 같았다. 아마 옛날에 테스트 한 사항이라 RNIap.getAvailablePurchases(); 에 대한 정확한 의미를 몰라서 잘못 생각했을 수도 있..
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 훅은 마치 javascript 의 클로저 처럼 함수가 하나의 실행 영역을 가지는 것과 유사하게 파라미터를 받을 수 있고(마치 리액트 컴포넌트의 속성과 같이) 내부에서 사용될 수 있는 변수들이 존재하며 상태(state)와 동작(method) 을 가지는 기능 단위이다. 보통 하나의 기능 단위는 상태와 동작으로 정의될 수 있다. 그리고 함수형 프로그래밍 방식에서 추구하는 확실한 기능 단위의 조합 방식에도 부합한다. 리액트는 UI 라이브러리이며 그 기본 단위인 컴포넌트는 생명주기, 렌더링 관련된 기능과 속성, 상태, 동작과 같은 것을 가진다. 훅이 나오기 전 클래스 형 컴포넌트를 주로 사용하던 시기에 단순한 독립적인 유틸리티 함수..
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..
아래 두가지 오류에 대해 정리해보면 첫번째 것은 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. => 컴포넌트가 이미 사라졌는데 그 이후에 해당 컴포넌트의 상태값을 변경하는 로직이 수행될 경우 발생할 수 있다. 메..