전체 글

Node.js/TypeScript

[TypeScript] union type + primitive type에서 type hint 보존

Problem위 Animal 의 type 처럼 union type 을 지정할 때, 캐스팅이 가능한 primitive types 를 같이 넣으면type property 의 type hint 가 string 으로 합쳐져 Cat 이나 Dog 에 대한 hint 를 받을 수 없음 Resolvedinterface Animal { type: Cat | Dog | (string & {});}위처럼 primitive type 을 {} 와 함께 intersection type 으로 만들면 된다

Node.js/Next.js

[Next.js] 404 Not Found Page (App Router)

SettingsNext.js v15.1.2  서론 - 메인 페이지 : /- 인증 페이지 : /auth- 대시보드 페이지 : /dashboard 위처럼 각 페이지별로 나뉘어져 있고, 각 페이지마다 layout 이 꽤 많이 다른 상황. 만약 대시보드에서 없는 페이지를 접근하려고 할 때,대시보드 layout 은 남겨둔 채로 main 부분만 404 용 컴포넌트가 렌더링 되도록 하고 싶어서Not Found 페이지를 렌더링 하는 방식을 찾아보게 되었다. 1. Global Not Foundapp/not-found.tsx가장 일반적인 방식. 더 이상의 자세한 설명은 생략. 2. Directory-Specific Not Foundapp/foo/not-found.tsx특정 경로 내 Not Found 페이지를 설정하는 ..

Node.js/React Native

[RN] react-native-reanimated-carousel - android 에서 수평/수직 스크롤 중첩 문제

SettingsReact Native 0.75.3react-native-reanimated-carousel 3.5.1 Problem 해당 라이브러리를 사용해서 수평 캐러셀을 구현했고, 각 아이템에 ScrollView 를 렌더링 하도록 했다.iOS 에서 테스트할 때는 아무 문제도 못느꼈지만,Android 에서 테스트하다보니 ScrollView 의 수직 스크롤이 정상적으로 되지 않는 문제(스크롤이 아주 잠깐 되다가 끊기거나 아예 발생하지 않음) 를 발견했다.  Solve 이슈의 답변처럼 activeOffsetX 값을 설정해준 이후, 정상 작동하게 되었다.const FunctionalComponent = ({ ...props }: Props) => { return ( );}  추가적인 답변을 보면, 이런 ..

Node.js/React Native

[RN] android - ScrollView 내 TextInput 사용 시 스크롤 안 되는 이슈

SettingsReact Native 0.75.3 Problem android 에서 가끔씩 스크롤이 제대로 동작하지 않아서 이리저리 테스트 해보는데,TextInput 에서부터 스크롤을 하려고 할 때에만 스크롤이 되지 않는 문제를 발견했다.  Problem 근데 웬걸.생각보다 오래된 이슈이고 몇 가지 방안이 나와 있었다. 나는 그 중, multiline 과 blurOnSubmit 를 true 로 설정해주는 방안으로 해결했다.const CustomInput = ({ ...props, numberOfLines = 1 }: TextInputProps) => { // ... return ( );};

Node.js/React Native

[RN] react-native-image-crop-picker 로 android 에서 webp 이미지를 openPicker 사용하여 cropping 시 'Cannot find image data' 에러

SettingsReact Native 0.75.3react-native-image-crop-picker 0.41.2 Solve 무려 4년 전 올라온 이슈의 답변 덕분에 해결하게 되었다. # 기존const image = await ImageCropPicker.openPicker({ mediaType: "photo", cropping: true, // ...});todo(image); # 수정let image: Image;if (Platform.OS === 'android') { const selectedImage = await ImagePicker.openPicker({ mediaType: "photo", cropping: false, // .....

카테고리 없음

[RN] 0.73.x 에서 0.74.x 업그레이드 과정에서 발생한 에러들

Flipper 지원 중단으로 인한 에러 발생[!] Invalid `Podfile` file: uninitialized constant Pod::Podfile::FlipperConfiguration. # from ~//ios/Podfile: # ------------------------------------------- # # ``` > flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled # # -------------------------------------------0.74.0 의 CHANGELOG 를 보면, Codebase 에서 Flipper 코드를 제거..

BlockHead
BlockHead