Open source developped by Facebook to test React files.

Main functions

describe("name of test group", () => {
    test("name of test", () => {
      expect(37).toBeEqual(37);
    }) // test function can be named "it"
})

There are many methods that can be used to test JS code.

Redux-saga

A redux middleware that deals with every side effect.

Basic Principle

1. create a SomethingSaga.ts saga file that collects side effects of some variable.
2. connect that saga file to rootSaga.ts file.
3. dispatch the action that runs the saga file.

Context API

How to use it? First, create a context using React.createContext(). Then this context on the top component allows all the other child components to use the same variable or state. In App.js, make a <SomeContext.Provider> component and set the value prop as the variable or state you want to manage in other components.

How to get the context data from child components

Use useContext() hook to get the data from Context API.

import { useContext } from "react";
import PersonContext from "../contexts/PersonContext"; //The context file that contains React.createContext()

export default function ContextExample() {
  const persons = useContext(PersonContext);

  return (
    <ul>
      {persons.map((person) => {
        <li>{person.name}</li>;
      })}
    </ul>
  );
}

Instead of useHistory() function or history props contained in <Route /> component in v5, we use useNavigate() function to move page inside an event.

import { useNavigate } from "react-router";

export default function Login() {
  const navigate = useNavigate();
  function login() {
    setTimeout(() => {
      navigate("/");
    }, 1000);
  }

  return (
    <div>
      <h2>Login 페이지입니다.</h2>
      <button onClick={login}>로그인하기</button>
    </div>
  );
}

Ant Design

install by npm i antd

From ant design package, we can use lots of components or icons which are styled already.

hooks

useMemo() , useRef() , useCallback() hooks are used to keep the state without change in functional components. Since state components have render() function, they does not have to manage unchanging states. However, functional components do not have such function that deals with rendering itself, so these three hooks exist to limit the change of states.

Change parent components from child

1. <A /> 에 함수를 만들고, 그 함수 안에 state를 변경하도록 구현, 그 변경으로 인해 렌더링 되는 어떤 내용을 변경.
2. 만들어진 함수를 props에 담아서, <B />로 전달
3. <B />의 props의 함수를 <C />의 props로 전달
4. <C />의 props의 함수를 <D />의 props로 전달
5. <D />의 props의 함수를 <E />의 props로 전달, <E />에서 클릭하면 props로 받은 함수를 실행

JSX elements are compiled into pure javascript using Babel.

react-router-dom

Install by npm i react-router-dom This package makes it easier for a react project to be a SPA.

Using react-router-dom v6 Unlike previous versions, from v6 one should code a routes-system like

<BrowserRouter>
      <Routes> {/*This tag is needed */}
        <Route path="/" element={<Home />} /> {/* 'component' props is replaced with 'element' */}
        <Route path="/profile" element={<Profile />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>

'exact' props is not needed anymore.

Reading URL props

If someone wants a 'dynamic routing' using id(e.g. profileId), one can nest another route in original route.

<Route path="/profile" element={<Profile />} >
  <Route path=":profileId" element={<Profile />} />
</Route>

Then in the Profile component, use useParams() function.

import { useParams } from "react-router-dom";

export default function Profile() {
  const params = useParams();
  const id = params.profileId;
  console.log(id);
  return (
    <div>
      <h2>Profile 페이지입니다.</h2>
      {id && <p>id는 {id}입니다.</p>}
    </div>
  );
}

If someone code a function-based component in react native, the component calls the props(no matter the param's name) as the first parameter.

React native hooks

• useState(initValue): Returns an array, whose first entry is the name of a state, and the second one is the name of a function which will be used to change the state.
• useEffect(callbackFunction, [array]){} : A hook that works the same as componentDidMount and componentDidUpdate in class-based components. One component may contain multiple useEffect hooks, and they will operate in an order. By writing the name of state in the [array] part, one can easily control the states at which the useEffect hook is going to react. If nothing is written like [], the hook works as same as componentDidMount.
  • return(callback function) in a useEffect hook works the same as componentWillUnmount in class-based components. It works as a clean-up phase of an update of a component.

expo로 실행된 앱의 개발 메뉴에서 'remote JS debug'라는 메뉴는 클릭하지 말자. 앱이 로딩되지 않는다.

만약 눌렀다면

import { NativeModules } from 'react-native'; NativeModules.DevSettings.setIsDebuggingRemotely(false);

위의 코드를 맨 위에 작성함으로써 코드 단에서 강제로 토글시킬 수 있다.

근데 이러면 무한 다운로딩 이슈가 생긴다. 뭐가 문제인지는 잘 모르겠으나 번들러가 맛이 가서 계속 앱을 다시 다운로드하는 일이 발생한다. 다시 지우면 문제가 해결되기는 하나, 번들러가 맛이 가있는 상태여서 내가 코드에 작성한 변화가 저장을 하거나 앱을 다시 리로드하더라도 앱에 반영되지 않게 된다. 어디에 검색해도 답을 찾기가 어려웠는데, 결국 스스로 해결해냈다.

해결책

.expo/settings.json에서 "urlRandomness": "아무말이나" 로 설정을 바꿔주면 번들러가 다시 정신을 차리고 파일의 변화를 바로바로 앱에 반영한다.

V50ThinQ 모델에서 expo 앱을 usb를 통해 실행시키려면 PTP(사진 및 영상 전송) 모드로 연결해야 한다. 그럼 디버깅 허용 안내문이 뜨면서 실행이 잘 된다.

$git clone url링크 DIR

Github에서 url링크로 복사해옴

$git pull origin main --allow-unrelated-histories

Unrelated histories 관계 없이 어떤 branch에 있는 것 다 pull함

$git remote add origin url링크

url링크와 local repository를 연동시킴

$git push origin main

``` main branch에 현재 commit을 추가함

React Native Map Libraries

여기를 참고해보자 https://openbase.com/categories/js/best-react-native-map-libraries

오늘의 한 일

우선 카카오 로컬 api를 이용하여 검색된 장소의 좌표를 얻어온 뒤 해당 좌표에 마커를 찍는 것에 성공함. 마커를 클릭하면 제목과 설명도 나옴. 장소 검색 기능도 만들어 봄. 입력하면 거기로 감. 굿.

https://mildb.tistory.com/68 구글 맵 Expo로 쓰는 방법

provider={MapView.PROVIDER_GOOGLE} 아이폰에서 구글맵 띄우는 방법: MapView 태그 안에 들어가는 props

https://yannichoongs.tistory.com/175?category=802704 react-native-nmap 이용한 개발 일지

오늘의 목표

react-native-nmap을 이용해서 앱에 지도 띄우기

오늘의 삽질

처음에 react native 프로젝트를 만들어서 진행을 하다가 이것저것 깔고 하다보니 문제가 많아서, 그냥 github에 올라와 있는 example을 그대로 복사해서 해봤다.

하는 방법

1. github(https://github.com/QuadFlask/react-native-naver-map.git)에서 클론해온다.
2. example 폴더에서 npm install (dependencies 모두 설치)
3. android > app > src > main > AndroidManifest.xml 에 naver api key 추가
4. ios > example > info.plist 에도 key 추가
5. npx react-native run-android 하면 끝

이렇게 하니 android emulator에서 띄우는 것에는 성공했다. 그렇지만 실제 기기에서도 테스트 해보고 싶어서 https://marshmello.tistory.com/78?category=1213283 여기서 방법을 알아내서 가지고 있는 LG의 V50S ThinQ 모델에 띄워보는 것에 성공했다.

네이버 맵이 굉장히 구동이 잘 된다는 것을 확인했다. 띠용?