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..
git 에서 private repo 접근이라던가 push 같은 것을 할려면 인증을 해야 하는데 https 방식이 있고 ssh 방식이 있다. ssh 방식은 ssh key 를 맥북에서 생성하고 git 의 SSH keys and GPG keys 에 등록하면 ssh url 을 이용할 때 권한이 인증되어 관련 작업을 할 수 있다. https 방식이 기존에 id 와 password 방식으로 인증을 하던 것인데 이제 password 즉 계정 비밀번호로 접근하는 것은 지원되지 않는다. 대신 Developer settings 에서 Personal access tokens 에서 token 을 생성하여 password 입력하는 곳에 입력해주면 된다. 보통은 git repo 를 생성할 경우 https 방식의 url 을 보여주..
UI 는 Main Thread 에서 갱신을 관리한다. UI 갱신이 한 업데이트 사이클에 우선적으로 이루어져야 할 경우 GCD 의 DispatchQueue.main.async {} 를 사용할 수 있다. 아래는 viewDidLoad, viewWillAppear 등과 같은 일반적으로 사용하는 UIView 의 메소드들 외에 좀 더 내부적으로 디테일한 방식의 메소드들을 설명해놓았다. 기본적으로는 Main Run Loop (위에 언급한 GCD Main Thread) 에서 UI 의 갱신을 담당한다. 이곳에 무거운 연산로직을 넣을 경우 화면이 멈출 수 있다. DispatchQueue.main.async { 이곳에 무거운 연산로직을 넣지 말라. } 화면 갱신이 먼저 수행되어야 할 것을 넣어주어야 한다. 이벤트 큐가 있어..
이 글에서 언급된 함수형 프로그래밍 방식이 최신의 트렌드인 것으로 생각하였지만 iOS 개발을 하며 잘못됨을 인지. React 와 함수형 프로그래밍 Functional Programming vs OOP 함수형 개발방식은 하나의 옵션일 뿐이다. 위의 글에서 언급된 객체지향개발방식 + 쓰레드 의 문제로 지적한 부분이 객체지향방식으로 개발을 했을 때 추상화를 위해서 메소드를 정의하는데 해당 메소드가 어떤 동작을 하라는 명령형 방식이되고 그럴 경우 해당 명령형 메소드가 동작을 할 때 선점형 방식인 쓰레드에서 동작할 것이고 그럴 경우 어떤 컴포넌트의 state 에 영향을 미칠 때 여러군데에서 부수효과가 발생할 경우 해당 state 에 대해 의도치 않은 오류를 야기할 수 있을 것 같다고 문제 제기를 하였다. 하지만 ..
정리해보면 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..
1050 x 600 px 로 작업한 뒤 일러스트로 옮기면 (@ 300 DPI 가 된다. 25.4 mm 가 1 inch 이다.) mm 단위로 크기를 줄일 때 88.9mm x 50.8mm 로 해주면 된다. (90mm x 50mm 기준 명함일 때) 실제로는 인쇄소에서 아래쪽이 1mm 정도 잘릴 수가 있다고 한다. figma 에서는 PDF 로 변환하고 나서 일러스트레이터 로 옮기면 ai 파일로 저장할 수 있다. (이상하게 SVG 로는 일러스트에 나오지 않았다. 따로 브라우저로 열어보면 잘 나오는데 래스터 이미지 부분이 일러스트에서는 안나왔다.) 인쇄소는 보통 cs5 기준 버전을 많이 가지고 있어서 cs5 버전으로 ai 파일을 만들어 보내주면 된다. 기준 캔버스는 A4 용지 크기에 figma 에서 뽑은 PDF 파..
[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. => 컴포넌트가 이미 사라졌는데 그 이후에 해당 컴포넌트의 상태값을 변경하는 로직이 수행될 경우 발생할 수 있다. 메..
실제로 throttle 과 debounce 의 경우 debounce 는 검색어 자동완성에 그리고 throttle 은 로딩 모달이 없는 단순 get 요청의 반복 요청의 빈도를 제한하는 정도로 사용된다. 보통은 생성, 수정, 삭제 같은 경우 isSubmitting 플래그로 로딩 모달과 함께 해당 요청의 응답이 없는 동안에는 클릭하지 못하도록 하는 방식을 사용한다. 생성, 수정, 삭제 같은 경우에 throttle, debounce 를 사용할 경우 결국은 이벤트를 두번은 수행하게 되기 때문이다. throttle 과 debounce 그리고 lodash 를 사용하여 실제 React 에 적용하는 법. throttle 은 이벤트 발생 즉시 실행되고 그 다음 지정한 시간 동안 발생되지 못하게 막고 그 시간이 지나면 다시..
https://typeofnan.dev/fix-the-maximum-update-depth-exceeded-error-in-react/ state 를 useEffect 안에서 setState 하면 무한렌더링 일어날 수 있다. [] 가 되도록 views 를 의존성 배열에서 제거하자. function App() { const [views, setViews] = useState(0); useEffect(() => { setViews(views + 1); }, [views]); return Some content; } function App() { const [views, setViews] = useState(0); useEffect(() => { setViews((v) => v + 1); }, []); ret..
React Native 는 React 의 철학 중 Learn once, Write everywhere 에 맞게 모바일 앱 개발에 있어서도 View 단의 라이브러리를 제공하고 이를 중간에서 연결해주는 브릿징 기술을 제공한다. React Native 는 Android 와 iOS 의 네이티브 모듈의 기능을 가져와 사용할 수 있다. (다른 OS 도 가능하다) 이러한 기능을 제공하는 것이 NativeModules 이며 이는 iOS 에서는 RCTBridgeModule 이라는 프로토콜을 구현한 Objective-C 클래스이다. 아직 타입이라던가 지원이 잘 안되는 네이티브 기능들도 있는데 TurboModules 라는 것이 나오게 되면 개선될 것이라 한다. 업그레이드에 대비하자. 현재는 React Native 의 경우 ..
결국 React Native 와 Nodejs 서버와의 aes 양방향 대칭키 암호화를 사용하기 위해서는 crypto-js 3.1.8 을 사용하면 된다. react-native-crypto-js 가 아니라 그냥 crypto-js@3.1.8 을 React Native 쪽에 사용해야 한다. node 쪽도 crypto-js 설치. (https://www.npmjs.com/package/crypto-js) 주간 다운로드 수가 500만이 넘어간다. 관련 사항(https://lifeonroom.com/study-lab/react-native-crypto-js/) 실무에 써먹기 좋은 글. crypto 기준. 단방향 암호화 비밀번호 저장을 위한 로직이 구체적으로 잘 나와 있다. https://zinirun.github.i..
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.