Reusing Logic with Custom Hooks커스텀 훅으로 로직 재사용하기https://youtu.be/y78eaFcoh0g?list=PLjQV3hketAJkh6BEl0n4PDS_2fBd0cS9v https://react-ko.dev/learn/reusing-logic-with-custom-hooks https://react.dev/learn/reusing-logic-with-custom-hooks https://ko.react.dev/learn/reusing-logic-with-custom-hooks
create-expo 명령어 https://docs.expo.dev/more/create-expo/ Ex. 52beta 순수 expo 앱 (2024년 10월 30일 기준 최신 버전 sync with RN 0.76)yarn create expo-app --template default@betayarn create expo-app --template bare-minimum@beta https://reactnative.dev/docs/getting-started-without-a-framework여전히 expo framework 없이 react-native cli 를 사용해서 프로젝트를 생성하고 싶다면 다음과 같이 사용 npx @react-native-community/cli@latest init RN76Sa..
react-query 즉 Tan Query 를 통해 서버 상태를 선언적으로 관리하여 많은 문제 해결을 할 수 있습니다. 아래와 같은 시나리오를 가정해보죠. 현재는 리덕스 툴킷을 사용하여 프론트 측의 전역 상태에 스키마를 정의하고 정규화를 수행하면서 채팅앱을 구현하였습니다.로그인한 내가 있고 나는 프로필 이미지와 성별, 닉네임, 이미지들, 게시물들, 등등의 정보를 가집니다.일대일 채팅방은 채팅방 아이디, 마지막 메시지 타입, 마지막 메시지 내용, 채팅방 참여자 두명의 정보, 읽지 않은 갯수 등의 정보를 가집니다.채팅 메시지는 아이디와 타입, 내용, 보낸사람 아이디, 보낸사람 닉네임, 받는사람 아이디, 받는사람 닉네임, 채팅방 아이디 등의 정보를 가집니다.게시물은 아이디, 제목, 이미지, 작성자, 좋아요 ..
react-query 는 서버 리소스 기준으로 fetching 하고 상태관리 하는 라이브러리라고 보면 되겠죠? 간단하게 사용할 때는 유용할 거 같긴한데 redux, thunk 조합 보다 유연성은 떨어질 거 같은데 또 redux-persist 같은거 사용도 안 될 거 같고, 두개를 동시에도 많이 사용하시나요?저는 개인적으로 그냥 올라운드라 커버 가능한 redux, thunk 조합을 사용하는게 일관되고 유연성이 있어서 더 좋아보이긴 하는데요.. 그럼 redux, thunk 기본 조합에 캐싱? 그런 기능 필요시 그에 맞게 추가해야겠죠? react-query 는 그냥 그 자체만으로 따로 취급해야 하는거겠죠? redux, thunk 방식에 react-query 를 연동한다던가 하는 그런 성격의 것은 아닌거죠?만약..
리액트 props 의 형태에 관한 질문 리액트에서 props 형태는 props 에 a , b, c , d 라는 프로퍼티가 있을 때 가령 b 를 배열, c 를 객체, d 를 깊이가 2 나 3인 객체 라고 하면 d 와 같은 형태는 사용하지 않는게 좋나요? 아니면 2중 3중 깊이의 객체나 배열도 그냥 불변성으로 항상 새로운 걸 만들어 넣는다는 개념으로 사용해도 될까요? 왠만하면 1깊이의 객체까지 한정해서 사용하고 불가피하게 필요할 경우에만 2중 3중 깊이의 객체를 사용할까요? 서버에서 받은 리스트 데이터를 넘겨줄 경우 하위 컴포넌트로 리스트 아이템 컴포넌트가 있을 때 리스트 데이터가 항상 새로운 불변의 객체니깐 하위인 리스트 아이템은 항상 리렌더링 되겠죠? 루프를 돌면서 map 같이 그려주는 경우 key 를 ..
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..
iOS : AutoResizing, AutoLayout, SwiftUI, UIKit iOS 의 선언형 UI 로는 Swift UI 가 있다. 가장 일반적인 것은 스토리보드를 이용하는 것. 스토리보드로 하는 것을 숙지했다면 iOS 에서 기본 제공하는 코드로만 UI 짜는 방법을 학습하면 된다. 그리고 스냅킷 같은 써드파티는 검색하면서 컨셉 알아가면서 사용하면 된다. 스토리보드 vs 코드 vs 스냅킷... 이런 쉐어는 거의 3:3:3 으로 비슷하다. 프로젝트 별로 사용 여부에 따라 따라가면 된다. 스토리보드를 아예 안 쓸 수도 있고 화면전환만 안쓸 수도 있고 오토레이아웃을 안 쓸 수도 있고 모든 것이 선택사항이다. 스토리보드를 안쓰면 코드 타이핑 할 때 마다 디자인이 화면에 반영이 안되서 보고 싶을 때마다 빌드..
아래 글은 무시하고 그냥 리액트의 개발 방식 패러다임 때문이다. 순수함수형 방식이라 OOP 를 기본으로 할 때 병렬 처리에 있어 로직도 복잡해지고 UI 교착 상태의 로직을 지속적으로 isolate 하게 다루기도 힘들고 점점 복잡해지기 때문일거라 생각한다. 쓰레드에도 교착상태에 대한 언급이 있기 때문에 그것과 UI 의 상태, 렌더링의 교착상태가 뭔가 비슷해보여서 아래와 같은 생각을 했을 수는 있지만 또한 그러한 이론적 배경의 늬앙스는 맞지만 정확히는 그냥 각 라이브러리들의 개발 방향에 따라 다른 것이고 쓰레드와는 아무 상관이 없다. 쓰레드가 없기 때문. 쓰레드가 있었다면 교착상태에 대한 컨트롤이 가능하므로 객체지향적으로 해도되지만 웹브라우저에 쓰레드는 없으니.. 리액트 컴포넌트는 쓰레드가 없어서 선점형 ..
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 상태를 들락날락거립니다. 왜냐하면 각 새로운 페이지는 새로운 쿼리로 취급되기 때문입니다. 이러한 부분은 적절하지 않습니다. 그리고 운 나쁘게도 많은 툴들이 이렇게 동작합니다. 하지만 리액트 쿼리는 아닙니다! 예상하듯이, 리액트 쿼리는..
우선 dependency injection (Inversion of Control, IoC) 만 언급. spring boot jsp mybatis mariadb basic gradle with intellij ultimate lombok 이곳에서도 언급했듯이 프레임워크라 함은 기본적으로 DI 기능을 제공하는 것을 말한다. 조립하듯이 해당 규격에 맞다면 다른 구현체로 갈아 끼울 수 있도록 하는 것을 말한다. 여기에는 Factory Pattern, Stratege Pattern, Dependency Inversion Principal 의 디자인 패턴이 사용될 수 있다. 전략패턴은 인터페이스들 정의하고 로직을 분리하여 사용하고자 하는 곳에서 가져다 사용하는 것이고 DIP 는 사용하고자 하는 곳에서 인터페이스를..
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..
이 글에서 언급된 함수형 프로그래밍 방식이 최신의 트렌드인 것으로 생각하였지만 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 + 단일자원 이 원래 그러한 역할을 할 수 있기 때문이다. 이것이 늬앙스가 비슷하다하여 마치 리덕스 전역 상태를 ..
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 라이브러리이며 그 기본 단위인 컴포넌트는 생명주기, 렌더링 관련된 기능과 속성, 상태, 동작과 같은 것을 가진다. 훅이 나오기 전 클래스 형 컴포넌트를 주로 사용하던 시기에 단순한 독립적인 유틸리티 함수..