썬이의 IT세상

평소 프로젝트에서는 react query 라이브러리로 api를 호출하는데 급하게 한 api만 호출해서 데이터가 앱에 제대로 들어오는지 확인하려고 오랜만에 fetch 함수로 스크립트에 쓰려는데, 이상하게도 데이터가 undefined로 뜬다... ㅠㅠ useEffect(() => { fetch(url) .then((response) => { response.json(); }) .then((data) => { console.log(data) }) .catch((err) => console.log('err :', err)); }, []); 위와 같은 코드에서, fetch된 데이터를 json()으로 변환해주는 부분에서 중괄호로 감싸게 되어 이후 then절에서 undefined를 반환하게 된 것이었다.. useEf..

프로젝트를 하던 중에, 백오피스에서 텍스트 편집기를 통해 저장한 데이터를 html로 받아와 앱에 디스플레이 해주는 부분을 수행하였다.(공지사항, FAQ 등) 이를 위해 react-native-render-html 라이브러리를 사용하였는데, There is no custom renderer registered for tag "font" which is not part of the HTML5 standard. The tag will not be rendered. If you don't want this tag to be rendered, add it to "ignoredDomTags" prop array. If you do, register an HTMLElementModel for this tag with..

프로젝트 진행중에 페이징 처리로 API를 호출해야 하는 업무를 진행중에 있어, 기존에 ScrollView 안에 map 함수로 랜더링하던 부분을 flatlist로 변경하게 되었는데, 문제는 ScrollView의 헤더 컴포넌트가 있었는데, Scrollview와 Flatlist를 같이 쓰게 되면 에러같은 Warning이 뜨므로 굉장히 불편했다. 방법을 찾아보던 중, 이런 고민을 싹 날리게 되는 FlatList의 props가 있었는데 바로 ListHeaderComponent와 ListFooterComponent였다. `key-${index}`} ListHeaderComponent={() => ( ...Some components those need to be on top of the list )} ListFoo..

회사에서 프로젝트 막바지에 이르러 이제 APP_DEBUG 이름을 버리고 앱에 아이콘과 이름을 넣는 작업을 하게 되었다. https://velog.io/@dody_/React-Native-%EC%95%B1-%EC%95%84%EC%9D%B4%EC%BD%98-%EB%B0%94%EA%BE%B8%EA%B8%B0 [RN] 앱 아이콘 바꾸기 안녕하세용 도디예용 오늘은 react native 프로젝트의 앱 아이콘을 바꿔봅시당 아이콘 사이즈 받아오기 일단 로고를 몇개 추출해놨습니당 둘중에 뭘 해볼까 이 로고는 1024x1024 사이즈인데, Android에 velog.io 아이콘/이름 변경은 간단했는데, 문제는 변경 후 Android 디버깅이 99%에서 멈춰 실행이 안되는 것이었다.. 해결 방법은 단순히 \android\..

React Native 앱을 개발할 때 페이스북에서 개발한 디버깅 툴이 있다. RN을 개발한 팀에서 만든것이라 호환적인 부분이나 UI적인 부분에서도 보기 쉬운 장점도 있고, React-Query나 로컬 스토리지 데이터를 볼수있는 장점도 있다. Flipper는 기본적으로 설치 후 sdk 경로를 맞추고, Watchman 등을 연동한 뒤 npm run android만 해주면 바로 붙는데, 자동으로 붙지 않을 경우 이 부분을 확인해보기 바란다. 1) 패키지명 확인 만약 패키지명이 com.sample.app 이라면 android\app\src\main\java\com\sample\app 경로의 MainApplication.java 파일에 Filpper Init 관련 코드에 com.sample.app 으로 되어있는..

gitlab 에서 소스를 연동하고 pull이나 push를 하게 되면 vscode 상단에 아이디/패스워드를 입력해야 동작하는데 매번 입력해주기가 너무 번거로워 자동로그인(?) 하는 방법을 찾아보았다. (ssh 키 인증과는 별개) git config --global credential.helper store 위 명령어를 VSCode 상의 터미널에 입력해주면 간단히 해결된다.

react-native-lineargradient 라이브러리로 UI 작업을 했을 때, margin값을 음수(-)로 주어 다른 컴포넌트 위에 텍스트나 이미지를 겹쳐보이게 작업하는데, 안드로이드에서는 타 컴포넌트 위에 잘 그려지지만 IOS에서는 아무리 z-index값을 주어도 겹쳐지지 않을 때, 간단하게 해결하는 방법을 적어본다. ... {...props} 위의 코드 예시와 같이, LinearGradient 태그의 style 속성에 overflow : 'visible' 만 추가해주면 해결된다.

React Native 앱에서 TextInput 을 사용할 때, Focus 상태에서 페이지 각 요소 Flex가 Keyboard 사이즈에 밀리는 현상이 생기는 경우가 있다. IOS에서는 이런 경우가 발생하지 않고 AOS에서만 생긴다고 하는데, 이럴 경우 간단하게 Keyboard창이 뜨는 유무에 상관없이 해결하는 방법이 있다.

react-native-vector-icons 라이브러리로 아이콘을 불러왔는데, 아이콘 출력이 깨지거나 한자로 출력되는 현상이 있을 경우(In Android) [프로젝트명]/android/app/src/build.gradle 파일에서 apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" 위 코드 한줄 추가 후에 앱을 재빌드하면 해결된다.

react-native-modal을 사용하다 보면, Modal 태그 안의 View Width를 100%로 해도 약 10px정도 margin 되어있는 현상이 있다. 이럴 경우 해결 방법은 매우 간단하다. 위 코드 예시처럼 margin:0 스타일 속성을 주면 간단히 해결된다.