초보개발자의 소소한 기록

* RN에서 크롤링 기능을 구현하면서, 다양한 경우의 오류 해결 과정을 함께 기록함 * euc-kr to utf-8 방법은 맨 아래로 바로 이동 #1. fetch() 를 통해 호출 시, 'https' 프로토콜 및 'utf-8'로 인코딩된 웹페이지는 ios/android 모두 정상적으로 데이터를 잘 읽어왔다. 1) fetch() 를 통해 url 호출 시 응답 값 ... const Crawling = async () => { const res = await fetch(`https://bocoder.tistory.com/`); console.log(res); } ... 2) fetch().text 를 통해 url 호출 시 응답 값 ... const Crawling = async () => { const res..

* fetch() 를 사용해 api 를 호출 시, android 에서는 이상이 없었으나 ios 에서만 에러가 발생 TypeError: Network request failed # 원인 - 확인해보니 다양한 원인으로 발생할 수 있지만, 나의 경우는 호출 url 주소가 http 프로토콜을 사용하고 있어서 발생함 - iOS 9 버전 이후부터 적용된 보안 정책으로, 보안에 취약한 네트워크를 차단시킬 목적이라고 함 # 해결 - Info.plist 파일에서 NSAllowsArbitraryLoads 를 직접 코드를 추가하거나, xcode 에서 항목을 추가하여 해결 ... NSAppTransportSecurity NSAllowsArbitraryLoads NSExceptionDomains localhost NSExcep..

* createMaterialTopTabNavigator 를 이용하여 상단 탭 구성 후 앱 실행 시, 최초 rendering 에서 Tab.Screen 전체가 표시되지 않고, 다른 탭으로 이동 후 돌아오면 정상적으로 표현됨 # 원인 react-native 에서 제공되는 SafeAreaView 를 사용했었는데, navigation 사용 시에는 react-native-safe-area-context 에서 제공하는 SafeAreaView를 사용해야 더욱 안정적이라고 했고, 변경하여 적용하였으나 동일한 현상이 발생함 * reference : https://reactnavigation.org/docs/handling-safe-area ++++ 최종적으로 react-native-pager-view 의 v5.4.15 ..

* 앱에서 axios 를 통해 브라우저를 읽어오려고 할 때 Warning 발생 # 경고 내용 WARN Possible Unhandled Promise Rejection (id: 0): ReferenceError: Can't find variable: Buffer http://10.0.2.2:8081/index.bundle? ... # 원인 axios를 통해 브라우저를 읽어오는 비동기 처리 시, Buffer 가 필요하다고 함 # 해결 아래와 같이 Buffer 라인을 추가해 주면 해결 import cheerio from 'cheerio-without-node-native'; import axios from 'axios'; global.Buffer = global.Buffer || require('buffe..

* Typescript 템플릿 설치 후 실행 시, ios 에서 에러 발생 # 에러 내용 ... N/A: version "default -> N/A" is not yet installed. ... You need to run "nvm install default" to install it before using it. ... xcodebuild[44462:710271] Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionSentinelHostApplications for extension Xcode.DebuggerFoundation.AppExtensionHosts.watchOS of plug-in com.apple..

@ List * 12.1 타입스크립트가 적용된 리액트 네이티브 프로젝트 만들기 * 12.2 타입스크립트 빠르게 배우기 ** 12.2.1 기본 타입 ** 12.2.2 함수 타입 ** 12.2.3 interace ** 12.2.4 배열 타입 ** 12.2.5 Type Alias ** 12.2.6 Generic ** 12.6.7 더 알아보기 * 12.3 타입스크립트로 컴포넌트 작성하기 ** 12.3.1 Props 사용하기 ** 12.3.2 useState 사용하기 ** 12.3.3 useRef 사용하기 ** 12.3.4 useReducer 사용하기 * 12.4 타입스크립트로 Context API 사용하기 * 12.5 타입스크립트로 react-navigations 사용하기 ** 12.5.1 라이브러리 설치하기 ..

@ 12장 ~ 16장 학습 완료 후, 10장 ~ 11장 학습 시 업데이트 예정

* TypeScript 템플릿 설치 시 에러 발생 npx react-native init LearnTypeScript --template react-native-template-typescript # 에러 내용 ... error An unexpected error occurred: "https://registry.yarnpkg.com/react-native-template-react-native-template-typescript: Not found". ... error This module isn't specified in a package.json file. info Visit https://yarnpkg.com/en/docs/cli/remove for documentation about this c..

@ List * 9.6 포스트 수정 및 삭제 기능 구현하기 ** 9.6.1 재사용할 수 있는 모달 만들기 ** 9.6.2 사용자에게 수정 및 삭제 물어보기 ** 9.6.3 포스트 삭제 기능 구현하기 ** 9.6.4 포스트 설명 수정 기능 구현하기 * 9.7 EventEmitter로 다른 화면 간 흐름 제어하기 ** 9.7.1 EventEmitter3 설치 및 적용하기 ** 9.7.2 포스트 작성 후 업데이하기 ** 9.7.3 포스트 삭제 후 목록에서 제거하기 ** 9.7.4 리팩토링 하기 ** 9.7.5 포스트 수정 후 업데이트하기 * 9.8 설정 화면 만들기 * 9.9 Firesotre 보안 설정하기 * 9.10 Splash 화면 만들기 ** 9.10.1 안드로이드에 Splash 화면 적용하기 ** ..

@ List * 9.5 사용자 프로필 화면 구현하기 ** 9.5.1 Firestore 데이터 조회할 때 조건 추가하기 ** 9.5.2 포스트 조회 함수 리팩토링하기 ** 9.5.3 Firestore에서 색인 추가하기 ** 9.5.4 Profile 컴포넌트 만들기 ** 9.5.5 그리드 뷰 만들기 ** 9.5.6 페이지네이션 구현하기 ** 9.5.7 커스텀 Hook을 작성해 컴포넌트 리팩토링하기 ** 9.5.8 포스트 열기 ** 9.5.9 내 프로필 화면 구현하기 @ Note 1. default parameter 문법 - 파라미터가 주어지지 않았다면 기본값으로 빈 객체 {} 를 사용하도록 함 - 설정하지 않을 시 구조 분해 과정에서 오류 발생 export async function getPosts({use..