썬이의 IT세상

The notch is a feature on certain devices, such as the iPhone X and later, which contains the front-facing camera and speaker. The notch can obstruct parts of the screen, making it necessary to control its behavior in a mobile application. In React Native, there are several ways to control the notch and ensure that your content is not obscured by it. Method 1: Use the SafeAreaView Component The ..

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로 처리한다면 데이터가 들어올때까지 빈 화면만 노출될 것이다. 이럴 경우엔 사용자 입장에서 움직이는 로딩 컴포넌트가 있어야 한다. 이 포스팅에서는 로딩 컴포넌트를 간단하게 만들어보는 예제를 다루려 ..

React Native로 앱을 만들고, npx react-native run-android 명령어를 통해 Android로 앱을 빌드할 때, 개발 환경도 다 조성하고 Android virtual device도 연결이 되었지만 NDK Version이 안맞다며 빌드 에러가 날 때가 있는데, 이런 경우에는 주로 Android SDK 버전 문제일 확률이 높다. 먼저, android\build.gradle 내에서 ext { ... ndkVersion = "xx.x.xxxxxx" ... } 로 되어있는 부분과 동일한 버전의 NDK를 설치해 주어야 하는데, 안드로이드 스튜디오 - Tools - SDK Manager 에서 SDK Tools 탭에 들어간 후 하단의 Show Package Details 를 눌러주면 하단 이..

평소와 같이 RN 앱 개발을 하던 중, 어제까지는 잘되던 react-native run-android 명령어에서 를 뱉어내며 에러가 나던 것이었다. 해결 방법은 매우 간단했다. 에뮬레이터에 설치된 디버깅 전용 앱을 삭제하고 다시 react-native run-android 명령어를 사용해 설치해주면 된다.

fetch를 이용하여 API를 사용할 때, GET 함수를 불러올 경우 위와 같은 에러를 마주할 때가 있다. 예를 들면, fetch(`${IP}/users/${props.id}/1`) .then(response => response.json()) .then(data => console.log(data)) 이런 식으로 GET 호출하였다 치면 거의 100% 위와 같은 에러를 마주할 것이다. 해결 방법은 아주 간단하다. fetch(`${IP}/users/${props.id}/1`) .then(response => response.json()) .then(data => console.log(data)) .catch(error => {console.log(error)}) 이런식으로 .catch 만 붙여주면 아주 간..

React Native 앱을 만들면서, TouchableOpacity 혹은 Button 안에 Icon Image를 삽입하고 Text를 넣을 경우, 이미지가 버튼의 크기보다 클 경우에 짤리는 경우가 있다. 이렬 경우 Margin / Padding, Width/Height 등의 속성을 사용해도 찝찝하다. 이미지 크기가 다르더라도 원본의 비율을 그대로 가져오고 싶을 때, style 속성에서 이런 식으로 스타일을 주면 해결된다.

이번 시간에는 Android Studio로 Build한 Debug Apk 파일을 USB 없이 와이파이 환경에서 디버깅하는 법을 다뤄보겠다. 제목에는 USB 없이라고 되어있지만, 사실 초기 설정에는 USB 연결이 1회 필요한데, 이는 adb tcp/ip port를 열기 위함이다. 그리고 스마트폰 환경설정에서 '개발자 옵션'을 켜두어서 세팅을 해주어야 한다. 스마트폰에서 개발자 모드를 실행하고, 데스크탑과 스마트폰을 USB 연결을 해준다. 개발자 옵션 내에서 USB로 디버깅 / Wifi 환경에서 디버깅을 체크해주고, cmd에서 adb devices 를 하여 스마트폰과 PC가 잘 붙었는 지 확인해준다. 모든 준비가 끝났다면, cmd창에서 adb tcpip 5555 //Port 5555 Open 를 입력해준 후..