판교너굴맨의 개발노트

내 사이드 프로젝트 중 운동 어플 '헛둘'에 테스트 코드를 작성해보려고 한다. 타이머를 밀리세컨드 단위로 조작하다 보니 예상치 못한 버그 방지에도 좋을 것 같다는 생각이 들었다. 툴은 가장 많이 쓰이는 Jest와 React Native Testing Library를 사용하려고 한다. Jest 메타(구 페이스북)에서 관리하는 Javascript의 테스트 러너이다. 웹에서는 jsdom을 사용하지만, 모바일에서는 네이티브 모바일 환경을 재현하는 방식으로 사용한다. DOM이나 브라우저 API를 로딩하지 않아 실행 시간이 더 줄어든다. jsdom: Node.js 내에서 실행되는 가벼운 브라우저 (가상의 Dom) Jest는 React Native 프로젝트를 생성하면 package.json 파일에 자동으로 생성되어 ..

Next.js를 학습하면서 궁금한 점에 대한 자체 Q&A를 진행하려고 한다. 궁금한 점이 생길 때마다 업데이트를 할 생각이다. Next.js 13.4 버전 이상의 app Router 기반으로 작성되었다. Q: 'use client'를 사용한 CSR 컴포넌트도 어떻게 SSR 컴포넌트와 같이 서버에서 정적 HTML를 렌더링 할 수 있을까?? A: 기본적으로 Nextjs는 클라이언트 컴포넌트, 서버 컴포넌트에 대해 서버에서 정적 HTML preview를 렌더링 한다고 한다. 그 후 js 파일을 가져와 html과 하이드레이트 과정을 거치고 인터렉션이 가능하게 만든다 Server Component Static Rendering (정적 렌더링): 빌드 시에 렌더링 Dynamic Rendering (동적 렌더링): ..

사내 제품의 다국어 처리를 맡게 되어 i18next 라이브러리를 적용하게 되었다. 쉽고 간단하게 사용할 수 있으며, 내용을 작성해 두면 다음에도 유용하게 사용할 수 있을 것 같다. 1. i18next란? 자바스크립트 환경을 위한 국제화 라이브러리 2. 사용 방법 1. 라이브러리 설치 # npm npm install i18next react-i18next # yarn yarn add i18next react-i18next 2. 디렉터리 구조 PATH: src/i18n/ i18n/index.ts: 다국어 초기화 설정 파일 i18n/locales: locales별 JSON 파일 ( locales 또는 translation 이름 사용) 3. JSON 파일 생성 각 locale에 맞는 JSON 파일 생성 # en..

리액트 네이티브 프로젝트를 git clone 받았는데 android 빌드할 때 NDK 관련 에러가 계속 났다. 특정 파일이 계속 없다고 그러길래 NDK파일이 있는 폴더를 검색해 봤다. 폴더에서 C:\Users\[userName]\AppData\Local\Android\Sdk\ndk\ userName부분만 본인으로 변경하고 검색하면 설치되어 있는 NDK 폴더가 나온다. 위 버전은 default로 설치되어 있던 NDK 버전이다. 그런데 이 폴더 내부로 들어가면 원인은 모르겠으나 전부 있어야 할 파일 중에 표시한 네 개의 파일만 존재했었다. 그렇다면 NDK를 재설치해주면 해결될 일이다. 안드로이드 스튜디오를 켜고 상단에 Tools -> SDK Manager -> SDK Tools를 들어간다. 하단에 Show ..

문제 맥북을 공장 초기화 하고 프로젝트를 clone 받아 pod install을 했더니 아래와 같은 에러를 만나게 되었다. [!] /bin/bash -c set -e #!/bin/bash # Copyright (c) Meta Platforms, Inc. and affiliates. # # This source code is licensed under the MIT license found in the # LICENSE file in the root directory of this source tree. set -e PLATFORM_NAME="${PLATFORM_NAME:-iphoneos}" CURRENT_ARCH="${CURRENT_ARCH}" ... xcrun: error: SDK "iphoneos" ..

이 게시물을 보시는 분들은 react-native-splash-screen 패키지를 적용하고, README 문서대로 statusBar의 color를 바꾸는 작업을 진행하고 있을 거라고 생각이 듭니다. 아래는 라이브러리의 문서입니다. If you want to customize the color of the status bar when the splash screen is displayed: Create android/app/src/main/res/values/colors.xml and add Create a style definition for this in android/app/src/main/res/values/styles.xml: Change your show method to include you..

React Native Firebase 라이브러리를 설치하고 빌드할 때 xcode에서 이런 에러를 만나게 되었다. FBDefines/FBDefines.h not found FBDefines.h 파일은 Flipper라는 페이스북의 모바일 앱 디버깅 도구에서 사용하는 파일 중 하나이다. Flipper를 사용하고 있다면 위 에러를 만나지 않았을 수도 있었겠다. 위의 내용을 React Native Firebase 공식문서에서도 확인할 수 있다. React Native Firebase | React Native Firebase Welcome to React Native Firebase! To get started, you must first setup a Firebase project and install the..

xcode에서 build 할 때 'module map file ... not found' 에러가 발생해서 이 게시물을 찾아보고 있는 당신.. 혹시 xcode로 프로젝트 열 때 xcdoeproj 파일로 열었는지 xcworkspace 파일로 열었는지 한 번 확인해 보자 xcworkspace 파일로 열어야 한다. 본인처럼 파일 이름 헷갈려서 xcdoeproj파일로 열고 안 된다고 방황하는 어이없는 실수를 하지 않길 바란다...

1. 문제 발생 React Native cli / Typescript 환경에서 SafeAreaProvider 컴포넌트를 설치하고, import했더니 이 에러를 만나게 되었다. SafeAreaProvider: 리액트 네이티브가 제공하는 컴포넌트 중에 하나로 기기의 안정영역(Safe Area)을 고려하려 UI를 렌더링 할 수 있게 도와주는 컴포넌트이다. Safe Area: 기기의 화면에서 실제 컨텐츠를 렌더링 할 수 있는 영역 import { SafeAreaProvider } from 'react-native-safe-area-context'; function App(): JSX.Element { return ( ... ); } error: Invariant Violation: requireNativeCom..

React Native/TypeScript 환경에서 모듈을 import 할 때 상대 경로로 '../../../...' 점점 길어지는 게 보기 싫어서 절대경로 설정을 하려고 한다. 1. babel-plugin-module-resolver 설치 babel-plugin-module-resolver 라이브러리를 사용하면 모듈의 별칭(alias)을 설정해서 절대경로로 import 할 수 있게 된다. npm 문서: https://www.npmjs.com/package/babel-plugin-module-resolver npm i babel-plugin-module-resolver # or yarn add babel-plugin-module-resolver 2. babel.config.js 파일 설정 작성일인 202..