Node.js

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, // .....

Node.js/TypeScript

[TypeScript] 함수 타입 표현(Function Type Expressions) vs 메소드 선언(Method Declaration)

서론 함수 선언문(Function Declarations)과 함수 표현식(Function Expressions) 에 대한 내용이 아닙니다.관련 내용은 검색 해보시면 많이 나와있다보니 이 글에서는 다루지 않습니다. 함수(Function) 와 메서드(Method) 의 차이점을 알고 있다는 점을 전제로 둡니다.  함수 타입 표현 (Function Type Expressions)(...args: ArgTypes[]) => ReturnType위와 같은 형태로 Call Signature 를 정의하는 데 사용. 주로 함수를 변수에 할당하거나, 다른 함수의 매개변수로 전달할 때 사용됨. [예시]interface 인터페이스_예시 { foo: () => void;}type 타입_예시 = { foo: () => ..

Node.js/React Native

[RN - iOS] APNs Token 발급 에러

SettingsReact Native 0.73.4@react-native-firebase 20.0.0 Problem FCM 으로 앱 push 알림을 구현하기 위해 아래와 같이 사용하고 있었는데useEffect(() => { if (!messaging().isDeviceRegisteredForRemoteMessages) { await messaging().registerDeviceForRemoteMessages(); } if (Platform.OS === 'ios') { await messaging().getAPNSToken(); } const token = await messaging().getToken(); updateDeviceToken(token);},..

BlockHead
'Node.js' 카테고리의 글 목록