전체 글 (39) 썸네일형 리스트형 react native kakao login 에러 해결 react-native-kakao-login 라이브러리를 적용하던 중 ios 에서 access 토큰을 받아오지 못하고 아래와 같은 에러로그가 찍혀서 해결한 과정입니다. - Error: The operation couldn’t be completed. (KakaoSDKCommon.SdkError error 2.) 1. 카카오 디벨롭퍼에서 플랫폼 ios에서 번들 ID 등록이 되어 있는지 확인하기. - 번들 ID 는 xcode의 general탭에서 identity를 보면 확인할 수 있고 수정도 가능하다. 2. 카카오 디벨로퍼 간편가입 메뉴에서 ON으로 되어 있는지 확인하기 개발자 원칙을 읽고 "개발자 원칙"은 테크리더 9명이 더 나은 개발자로 살아가기 위한 원칙과 철학을 9챕터로 나누어 담은 책이다. 덕업일치를 넘어서 - 박성철 챕터에서 기억하고 싶은 내용 동기 벡터에서 기대되는 성과와 내가 일하는 동기 그래프가 가장 기억에 남는다. 결국 내가 일하는 동기를 기준으로 나의 성과를 만들어낼 수 있다면, 지금 내가 옳은 방향으로 잘 일하고 있다는 측정 도구로 사용해볼 수 있을 것 같았다. 소감 나는 어떤 일을 하고 어떻게 살 것인가에 대해 나온 많은 책이 있지만 개발자로서의 고민이 담긴 글은 처음이었다. 같은 개발자여서 더 당연히 더 흥미가 갔다. 무슨 일을 하면 행복할지 그리고 개발자가 되면 정말 행복할까에 대해 취준생 때 많이 고민 했지만 직장인 개발자가 되고나서는 이러한 고민들에 대해서 소.. 공통컴포넌트 any 대신 제네릭을 사용해볼까? 아래와 같이 공통 컴포넌트에서 onSelect의 param을 any로 정의하는 것에 대한 문제를 해결하고 싶었다. // SelectField.tsx (공통 컴포넌트) interface Props { ... onSelect?: (param: any) => void; } const SelectField = (props: Props) => { return( ) } 첫번째 방법 (Not OK) onSelect의 제네릭 타입을 param에 넘겨주는 방법을 시도 했다. 에러는 없으나 Form.tsx에서 제네릭이 any로 추론되어 적용되었기 때문에 올바른 방법이 아니다. 또한 onSelectSettlementPeriodType라는 함수를 실행할때에는 타입을 넣어주어서 의미가 있겠지만 props로 넘겨만 주고 실행은 .. react-hook-form onBlur 안될때 onBlur가 왜 안먹히나 보았더니 react-hook-form 에서 register를 등록할때 이미 onBlur가 props로 내려가고 있었다. 그레서 {…rest}의 위치를 맨 앞으로 옮겨주고 내가 만든 onBlur를 뒤로 빼주었더니 우선순위가 내가 만든 onBlur로 가게 되어서 작동하였다. {label} [RN] 자동으로 android emulator 가 켜지지 않을때 https://reactnative.dev/docs/0.65/environment-setup 위의 리액트 네이티브 환경설정 가이드대로 준비를 마쳤다면 npx react-native run-android 명령어를 통해 메트로 서버가 켜지는 동시에 에뮬레이터가 자동으로 켜져야 한다. 에뮬레이터가 켜지지 않을 경우 다음과 같은 순서로 잘못된 부분을 찾아볼 수 있을 거 같아서 정리한다. 1. 현재 리액트 네이티브 버전에 맞는 환경변수가 .zshrc에 추가되어 있는지 확인해보자. 예를 들어 0.65 공식문서의 경우 추가하라는 변수가 아래와 같지만, export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export.. [RN] AutoHeightWebview crash with navigation react-native-webview가 있는 페이지에서 react-native-navigation으로 페이지가 이동할때 실제 디바이스에서 앱이 죽는 이슈가 있어서 해결방법을 찾아보았다. 우선 이 문제는 많은 RN 개발자들이 겪는 문제로 이미 해결방법이 크게 두가지로 나와 있었다. webview에 style={{ opacity: 0.99 }} 를 넣어야 하거나, androidLayerType="software"를 속성으로 넣는 방법이다. androidLayerType은 androidHardwareAccelerationDisabled가 Deprecated되고 대체되어 사용되어지는 속성이니 참고로 알아두자. 처음에는 webView의 속성으로 androidLayerType="software" 을 넣어서 테스트를.. Rendered more hooks than during the previous render 에러 메세지에서 알 수 있듯이 이전 렌더링에서 호출된 hooks 보다 현재 렌더링에서 hooks가 더 많이 호출된 결과로 에러가 발생한다. hooks는 매 렌더링마다 동일한 호출을 보장받아야 한다. 그렇기에 hooks를 조건 문안에서 쓰는 게 금지되어 있고 컴포넌트 최상위에서 사용하라고 권장되는 이유이다. hooks라는 게 함수의 상태를 기억해야 하는 것이기 때문에 호출 순서를 이용하여 함수의 상태를 기억했다가 이전의 상태를 가져올 수 있는 것이다. https://ko.reactjs.org/docs/hooks-rules.html#explanation [react-native] 화면 너비를 넘어가서 텍스트가 잘릴 때 해결방법 결론부터 말하면 flex-wrap: wrap 속성을 적용해 보길 권합니다. 부모 컨테이너를 넘어서지 않게 잡아주는 역할을 하기 때문입니다. 다음 예시를 통해서 살펴볼 수 있습니다. {data.posts.data.map((post) => ( {/**/} [{COMMUNITY_LANGUAGE_CODE[post.postPrefixCode]}] {post.title} {post.nickname} {post.createdAt.split(' ')[0]} {post.likeCount} {post.viewCount} {post.commentCount} {/**/} ))} 초록색: InnerWrapper space-between을 통해 댓글 카운트를 맨 오른쪽으로 배치하는 역할을 한다. const InnerWrapper.. 이전 1 2 3 4 5 다음
