썬이의 IT세상

React is a popular JavaScript library for building user interfaces, and its popularity has only increased with the rise of single-page applications (SPAs). One of the main challenges when building SPAs is managing data effectively, and the user query hook is an excellent solution for this problem. UseQuery is a hook provided by the React Apollo library, which is a popular library for integrating..

요즘 핫하디 핫한 ChatGPT에게 무엇을 질문해볼까 하다가 개인적으로 집에서 심심할때 코딩하려고 사이드 프로젝트를 해보려 했는데 막상 무슨 주제로 앱을 만들어야할지 고민이라 ChatGPT에게 질문해보았다. 이런 기특한놈이 있나... 개떡같이 말해도 찰떡같이 알아듣는다는데 찰떡을 넘어 내가 원하는 답변을 미리 알고 있다는듯이 답변해준다... 나는 저중에 여행앱이 마음에 들어 새로운 질문을 해보았다. 날먹 마인드로 질문해봤는데 역시... 그러나 GPT의 답변은 실제로 앱을 빌드해준것보다 더 나를 충격적이게 만들었다. 죄송하지만 AI 언어 모델로서 물리적으로 앱을 빌드할 수 있는 능력이 없습니다. 그러나 React Native를 사용하여 여행 앱을 빌드하는 방법에 대한 몇 가지 지침을 제공할 수 있습니다. ..

데이터를 받아오기도 전에 화면이 렌더링되는 react.. 예를 들어 api를 통해 받아온 데이터를 화면에 디스플레이 해줘야 할 때, 분명 해당 데이터를 담는 state는 초기에 undefined이면 무조건 에러가 날 것이다. 그래서 데이터가 들어오면 렌더링이 되게끔 하는 가장 간단한 방법은 ... const [data, setData] = useState(); return data ? ( {data.title} ) : null ... 이런식으로 data가 들어왔을 때 렌더링이 되게끔 처리해주면 되는데, null로 처리한다면 데이터가 들어올때까지 빈 화면만 노출될 것이다. 이럴 경우엔 사용자 입장에서 움직이는 로딩 컴포넌트가 있어야 한다. 이 포스팅에서는 로딩 컴포넌트를 간단하게 만들어보는 예제를 다루려 ..

새 프로젝트를 만들면서 기존 프로젝트에 있는 npm 라이브러리를 대량으로 설치하고 npm run android 명령어를 실행했더니 Failed to call into JavaScript module method AppRegistry.runApplication(). 샬라샬라... 이럴 땐 역시 마법의 명령어 1. cd android && gradlew clean 2. (android 경로라면) cd .. && react-native start --reset-cache 를 해주고 다시 메트로를 실행시키면 해결된다!

평소 프로젝트에서는 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 상의 터미널에 입력해주면 간단히 해결된다.