react-native-keychain을 활용한 storage 관리

Axios Instance 생성하기

API_URL은 env에 저장해두고 꺼내온다.

const instance = axios.create({
    baseURL: API_URL,
    withCredentials: true,
    timeout: 2000,
});

사용자 지정 config를 넣어 Axios Instance를 생성할 수 있다.

Axios Interceptors 사용하기

• default header 처리

  instance.defaults.headers['Set-Cookie'] = `refresh_token=${refreshToken}`;

  refreshToken을 header에 입력한다.

• request 인터셉터 처리

  instance.interceptors.request.use(
    async config => {
      config.headers['Content-Type'] = 'application/json';
      config.headers['Authorization'] = `Bearer ${accessToken}`;
      return config;
    },
    (err: unknown) => {
      Promise.reject(err);
    },
  );

  request 요청을 보낼 때, 기본으로 넣을 accessToken을 설정한다. header를 Axios 인스턴스 생성 시점에 입력할 수도 있지만, 나는 interceptor 단계에서 처리해줬다.

• response 인터셉터 처리

  instance.interceptors.response.use(
    async response => {
      const { config } = response;
      const originalRequest = config;
      if (response.status === 401) { // 401: Unauthorized
        // 토큰 만료 혹은 로그인 정보 없음
        removeAccessToken();
        return await instance
          .post('/users/reissue-token', { // 토큰 재발급
            loginId: loginId,
            refreshToken: refreshToken,
          })
          .then(async res => { // accessToken과 refreshToken 저장
            setAccessToken(res.data.result.accessToken);
            setRefreshToken(res.data.result.refreshToken);
            // 헤더에 새로운 accessToken 입력
            originalRequest.headers.Authorization = `${res.data.result.accessToken}`;
            return axios(originalRequest);
          });
      }
      // 로그인 정보가 있는 경우 (일반 요청)
      return response.data;
    },
    (err: unknown) => {
      Promise.reject(err);
    },
  );

  response에서 일괄적으로 401 토큰이 유효하지 않은 Unauthorized 에러가 발생한다면, accessToken을 삭제하고, refreshToken으로 재발급을 요청해 새로운 accessToken을 발급받는다.

Request 모듈화하기

• request 생성

  const instance = createInstance(); // 위에서 생성한 인스턴스를 불러오기
  

const defaultRequest = async (path: string, body: (url: string) => any) => { try { const response = body(path); return response; } catch (err) { console.error(err); } };

> 기본 request 모듈을 만든다.
path: URL path
body: 입력할 data 또는 params

- 메소드 구현
```typescript
const post = async (path: string, data: any) => {
    return await defaultRequest(path, async url => {
      const response = (await instance).post(url, data);
      return response;
    });
};

const get = async (path: string, params: any) => {
    return await defaultRequest(path, async url => {
      const response = (await instance).get(url, {
        params: params,
      });
      return response;
    });
};

const patch = async (path: string, data: any) => {
    return await defaultRequest(path, async url => {
      const response = (await instance).patch(url, data);
      return response;
    });
};

Request 모듈 사용하기

• request 모듈 사용 예시

const request = Request();    // 위에서 정의한 Request 모듈을 불러온다.

const duplicateCheck = async () => {
  const response = await request.post('/users/loginId', {
      loginId: form.loginId,
  });
  if (response.isSuccess) { // 서버에서 isSuccess라는 응답을 준다.
      setCheck({ ...check, loginId: true });
  }
}

yarn add react-native-keychain

사용 방식은 다른 storage와 비슷하다.

import * as Keychain from 'react-native-keychain';

const ACCESS_TOKEN = 'ACCESS_TOKEN';
const REFRESH_TOKEN = 'REFRESH_TOKEN';
const LOGIN_ID = 'LOGIN_ID';

// get
async function getSecureValue(key: string): Promise<string> {
  const result = await Keychain.getInternetCredentials(key);
  if (result) {
    return result.password;
  }
  return '';
}

// set
function setSecureValue(key: string, value: string) {
  Keychain.setInternetCredentials(key, key, value);
}

// remove
function removeSecureValue(key: string) {
  Keychain.resetInternetCredentials(key);
}

사용자 로그인을 위해 필요한 토큰을 저장하고 받아오는 과정을 살펴보자.

• 토큰 저장 함수

  export async function getAccessToken(): Promise<string> {
  return await getSecureValue(ACCESS_TOKEN);
  }
  export function setAccessToken(token: string) {
  setSecureValue(ACCESS_TOKEN, token);
  }
  export function removeAccessToken() {
  removeSecureValue(ACCESS_TOKEN);
  }

• 함수 활용 방식
  • get함수는 비동기 방식으로 작동하기 때문에 async await와 함께 사용한다.

    const accessToken = await getAccessToken();
    setAccessToken(res.data.result.accessToken);
    removeAccessToken();

문제

스도쿠는 18세기 스위스 수학자가 만든 '라틴 사각형'이랑 퍼즐에서 유래한 것으로 현재 많은 인기를 누리고 있다. 이 게임은 아래 그림과 같이 가로, 세로 각각 9개씩 총 81개의 작은 칸으로 이루어진 정사각형 판 위에서 이뤄지는데, 게임 시작 전 일부 칸에는 1부터 9까지의 숫자 중 하나가 쓰여 있다.

나머지 빈 칸을 채우는 방식은 다음과 같다.

각각의 가로줄과 세로줄에는 1부터 9까지의 숫자가 한 번씩만 나타나야 한다. 굵은 선으로 구분되어 있는 3x3 정사각형 안에도 1부터 9까지의 숫자가 한 번씩만 나타나야 한다. 위의 예의 경우, 첫째 줄에는 1을 제외한 나머지 2부터 9까지의 숫자들이 이미 나타나 있으므로 첫째 줄 빈칸에는 1이 들어가야 한다.

또한 위쪽 가운데 위치한 3x3 정사각형의 경우에는 3을 제외한 나머지 숫자들이 이미 쓰여있으므로 가운데 빈 칸에는 3이 들어가야 한다.

이와 같이 빈 칸을 차례로 채워 가면 다음과 같은 최종 결과를 얻을 수 있다.

게임 시작 전 스도쿠 판에 쓰여 있는 숫자들의 정보가 주어질 때 모든 빈 칸이 채워진 최종 모습을 출력하는 프로그램을 작성하시오.

입력

아홉 줄에 걸쳐 한 줄에 9개씩 게임 시작 전 스도쿠판 각 줄에 쓰여 있는 숫자가 한 칸씩 띄워서 차례로 주어진다. 스도쿠 판의 빈 칸의 경우에는 0이 주어진다. 스도쿠 판을 규칙대로 채울 수 없는 경우의 입력은 주어지지 않는다.

출력

모든 빈 칸이 채워진 스도쿠 판의 최종 모습을 아홉 줄에 걸쳐 한 줄에 9개씩 한 칸씩 띄워서 출력한다.

스도쿠 판을 채우는 방법이 여럿인 경우는 그 중 하나만을 출력한다.

제한

12095번 문제에 있는 소스로 풀 수 있는 입력만 주어진다. PyPy3: 1172ms

예제

예제 입력 1 0 3 5 4 6 9 2 7 8 7 8 2 1 0 5 6 0 9 0 6 0 2 7 8 1 3 5 3 2 1 0 4 6 8 9 7 8 0 4 9 1 3 5 0 6 5 9 6 8 2 0 4 1 3 9 1 7 6 5 2 0 8 0 6 0 3 7 0 1 9 5 2 2 5 8 3 9 4 7 6 0

예제 출력 1 1 3 5 4 6 9 2 7 8 7 8 2 1 3 5 6 4 9 4 6 9 2 7 8 1 3 5 3 2 1 5 4 6 8 9 7 8 7 4 9 1 3 5 2 6 5 9 6 8 2 7 4 1 3 9 1 7 6 5 2 3 8 4 6 4 3 7 8 1 9 5 2 2 5 8 3 9 4 7 6 1

풀이

• 처음 생각한 풀이: 골드4 치고 좀 간단하다고 생각했다. 각 row, col, 3*3 박스만 체크해주면 되겠네? 하고 코드를 짰다. 근데 브루트포스면 시간초과;;;

import sys

sudoku = [list(map(int, sys.stdin.readline().split())) for _ in range(9)]

def check(box, row, col, num):
    for i in range(9):
        if box[row][i] == num:
            return False

    for i in range(9):
        if box[i][col] == num:
            return False

    # 3 * 3 
    srow, scol = 3 * (row // 3), 3 * (col // 3)
    for i in range(srow, srow + 3):
        for j in range(scol, scol + 3):
            if box[i][j] == num:
                return False

    return True

for i in range(9):
    for j in range(9):
        if sudoku[i][j] == 0:
            for num in range(1,10):
                if check(sudoku, i, j, num):
                    sudoku[i][j] = num

for row in sudoku:
    print(*row)

• 최종 풀이: 그럼 그렇지. 골드4. 백트래킹 문제였다. 가능한 모든 숫자를 체크하기 위해 재귀를 사용해야했다.

  import sys
  

sudoku = [list(map(int, sys.stdin.readline().split())) for _ in range(9)]

def check(box, row, col, num): for i in range(9): if box[row][i] == num: return False

for i in range(9):
    if box[i][col] == num:
        return False

# 3 * 3 
srow, scol = 3 * (row // 3), 3 * (col // 3)
for i in range(srow, srow + 3):
    for j in range(scol, scol + 3):
        if box[i][j] == num:
            return False

return True

def solve(box): for i in range(9): for j in range(9): if box[i][j] == 0: for num in range(1,10): if check(box, i, j, num): box[i][j] = num if solve(box): return True box[i][j] = 0 # 백트래킹 return False return True

solve(sudoku)

for row in sudoku: print(*row) ```

문제

임한수와 임문빈은 서로 사랑하는 사이이다.

임한수는 세상에서 팰린드롬인 문자열을 너무 좋아하기 때문에, 둘의 백일을 기념해서 임문빈은 팰린드롬을 선물해주려고 한다.

임문빈은 임한수의 영어 이름으로 팰린드롬을 만들려고 하는데, 임한수의 영어 이름의 알파벳 순서를 적절히 바꿔서 팰린드롬을 만들려고 한다.

임문빈을 도와 임한수의 영어 이름을 팰린드롬으로 바꾸는 프로그램을 작성하시오.

입력

첫째 줄에 임한수의 영어 이름이 있다. 알파벳 대문자로만 된 최대 50글자이다.

출력

첫째 줄에 문제의 정답을 출력한다. 만약 불가능할 때는 "I'm Sorry Hansoo"를 출력한다. 정답이 여러 개일 경우에는 사전순으로 앞서는 것을 출력한다.

예제

예제 입력 1 AABB 예제 출력 1 ABBA 예제 입력 2 AAABB 예제 출력 2 ABABA 예제 입력 3 ABACABA 예제 출력 3 AABCBAA 예제 입력 4 ABCD 예제 출력 4 I'm Sorry Hansoo

풀이

• 처음 생각한 풀이

  from collections import Counter
  

s = str(input()) c = sorted(Counter(s).items())

odd = 0 for k, v in c: if v % 2 != 0: odd += 1

answer = '' if odd > 1: print("I'm sorry Hansoo") else: for k, v in c: if v % 2 != 0: # 필요 없는 부분이더라 break if v % 2 == 0: answer += k * (v//2) # 반복 문자 저장 del c[0] # 이 부분이 문제. 잘못 지워진다.

tmp = answer[::-1]
for k, v in c:
    if v % 2 != 0:
        answer += k

answer += tmp

print(answer)

- 최종 풀이
```python
from collections import Counter

s = str(input())
c = sorted(Counter(s).items())    # 정렬된 튜플 리스트로 변환.

odd = 0
for k, v in c:    # key, value 동시 조회 반복문
    if v % 2 != 0:    # 홀수 문자 개수 저장
        odd += 1

if odd > 1:    # 홀수 문자가 여러 개면 팰린드롬 불가능
    print("I'm Sorry Hansoo")
    exit()

answer = ''
m = ''    # 중앙에 올 홀수 문자
for k, v in c:
    if v % 2 != 0:
        m = k # 홀수 문자 따로 저장
    answer += k * (v//2)

answer = answer + m + answer[::-1]    # 반복 문자 + 홀수 문자 + 뒤집은 반복 문자
print(answer)

문제 설명

수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다.

마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요.

제한사항

마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다.

입출력 예

participant completion return ["leo", "kiki", "eden"] ["eden", "kiki"] "leo" ["marina", "josipa", "nikola", "vinko", "filipa"] ["josipa", "filipa", "marina", "nikola"] "vinko" ["mislav", "stanko", "mislav", "ana"] ["stanko", "ana", "mislav"] "mislav"

입출력 예 설명

예제 #1 "leo"는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

예제 #2 "vinko"는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

예제 #3 "mislav"는 참여자 명단에는 두 명이 있지만, 완주자 명단에는 한 명밖에 없기 때문에 한명은 완주하지 못했습니다.

풀이

• 처음 생각했던 풀이. 제일 간단하게 remove 사용해서 풀이. 하지만 효율성 문제가 발생한다. 입력값이 1~100,000 이기 때문에 입력값이 커지면 효율성이 떨어진다.

  def solution(participant, completion):
    for c in completion:
        participant.remove(c)
  
    return participant[0]

• 최종 풀이. 해시맵이 필요하다. dictionary로도 풀이할 수 있는데 counter가 편해서 사용했다.

  from collections import Counter
  

def solution(participant, completion): answer = '' p = Counter(participant) c = Counter(completion)

p.subtract(c)
for k, v in p.items():    # items() 형태로 tuple list 만들기
    if v > 0:
        answer = k
return answer

```

iOS는 http 통신이 기본적으로 불가능하다. https만 허용한다. 하지만 http가 꼭 필요한 경우가 있다. Info.plist에서 NSAppTransportSecurity 라는 dictionary가 있는데, NSAllowsArbitraryLoads를 true로 설정해주게 되면 http 통신이 가능하다.

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>{허용 원하는 URL}</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <key>NSIncludesSubdomains</key>
                <true/>
            </dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

• NSAllowsArbitraryLoads: https 이외의 모든 통신을 허용한다.
• NSExceptionDomains: 이 방법의 사용이 권장된다. 필요한 url을 적어주고 그 url만 통신을 허용해준다.

나는 pod install만 하면, 기껏 해놓은 true가 false로 다시 overwrite되는 오류가 있었다. 온갖 설정을 다 해봐도 소용이 없었는데, 결국 답은 공식문서였다. https://developer.apple.com/documentation/bundleresources/information_property_list/nsapptransportsecurity/nsallowsarbitraryloads Info.plist 안에 3가지 요소 중에 하나라도 있으면 NSAllowsArbitraryLoads의 키값은 무시된다. 즉 무조건 false로만 설정된다는 거다. 나는 NSAllowsLocalNetworking이 있었는데, 이걸 지워주니까 http가 드디어 허용됐다.

Homebrew 설치

mac에서 다양한 패키지들을 설치할 수 있게 해주는 패키지 매니저다. 다양한 상황에서 사용할 수 있으니 꼭 설치해놓는 걸 추천.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Homebrew 링크: https://brew.sh/

Install이 완료되면 제대로 설치되었는지 확인하기 위해 다음 명령어를 사용한다.

brew --version

Xcode 설치

앱 스토어에서 설치! 용량이 매우 크니 설치 눌러두고 다른 작업 하고 있는 거 추천.

node 설치

React native는 Javascript 기반이기 때문에 javascript의 런타임 매

brew install node

Node js 다운로드 링크: https://nodejs.org/en 링크를 확인해보면 LTS 버전과 Current 버전이 있는데 LTS 버전을 권장한다. 생각보다 node.js 버전 별로 패키지 dependency 오류가 많이 발생하기 때문에.. 추후에 package version 오류가 발생하면 node 버전을 낮춰줘야 하는 경우도 생긴다.

node를 설치하면 패키지 매니저인 npm도 자동으로 설치된다.

watchman 설치

Watchman은 React-Native에서 코드의 추가, 변경 등의 수정 사항이 발생하면 다시 빌드하기 위해 사용한다.

brew install watchman

cocoapods 설치

cocoapods는 ios 개발을 위해 필요한 의존성 관리자이다.

sudo gem install cocoapods

react native 설치

이번에는 brew가 아니라 npm으로 설치해주어야 한다.

npm install -g react-native-cli

여기까지 react native 기본 설정을 마쳤다. 이제부터는 iOS와 Android 개발을 위한 세팅을 진행해준다.

iOS 설정

1. Xcode 열기 아무 프로젝트나 만들어서 일단 Xcode를 실행해준다.
2. 상단 바에서 Xcode를 눌러 Settings에 들어가준다. (버전에 따라 Preferences로 나와 있을 수도 있다.)
3. Accounts: Simulator가 아닌 실제 디바이스를 연결해서 개발해야하는 경우가 있다. 이를 위해 iCloud 계정을 등록해준다.
4. Locations: Command Line Tools가 선택되어 있지 않은 경우, Xcode x.x(버전명)을 선택해준다.
5. Platforms: 최신 버전 iOS Simulator를 선택하여 설치해준다.

Android 설정

1. java 설치

   brew tap adoptopenjdk/openjdk
   brew install --cask adoptopenjdk14 // 숫자는 버전명이다. 원하는 버전을 설치해준다.

   

2. Android Studio 설치

   https://developer.android.com/studio?hl=ko 위 링크를 통해 다운로드 받을 수 있다.

3. Emulator 생성 설치를 마치면 다음과 같은 화면을 확인할 수 있다. Virtual Device Manager를 눌러 들어가서 Create Device로 에뮬레이터를 선택한다. 원하는 픽셀 크기와 타겟팅할 API를 선택해준다. 요즘 플레이스토어는 무조건 33 이상을 타겟팅하도록 하고 있으니 에뮬레이터도 맞춰서 설정해주면 좋다.

4. SDK Manager 설정

• Android SDK Location: 환경 설정 파일에 추가해야 하니 복사해두기.
• SDK Tools: 다음과 같은 항목들을 선택하고 Apply를 눌러주면 다운로드가 진행된다.
• SDK Platforms: 다음과 같은 항목들을 선택하고 Apply 누르기

5. 환경 변수 설정

   vi ~/.zshrc // 명령어로 파일 열기
   

// .zshrc 파일 내에 다음 내용 추가 export ANDROID_HOME=/Users/(유저명)/Library/Android/sdk //위에서 복사해둔 Android SDK Location export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools

source ~/.zshrc // 변경 내용 바로 적용

## react native 실행
다음 명령어를 실행하면 내가 지정한 프로젝트명으로 폴더가 생성되면서 React Native 프로젝트가 시작된다.
```shell
npx react-native init 프로젝트명

생성된 프로젝트를 실행하고 싶으면 다음 명령어를 입력한다.

npm start // yarn을 사용하고 싶으면 yarn start

안드로이드 에뮬레이터를 실행하고 싶으면 a, iOS 시뮬레이터를 실행하고 싶으면 i를 눌러주면 에뮬레이터가 실행되면서 프로젝트를 확인할 수 있다.

<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"  // <-- added this 
        ...>
        ...
    </application>
</manifest>

https://github.com/facebook/react-native/issues/24039#issuecomment-518687649

• 매개변수: 함수 내부에서 사용할 변수
• 반환 값: 함수에서 처리 된 결과 반환

def add(a,b):
    print('결과: ', a+b)
add(3,7)

• 파라미터 지정 가능: 매개변수 순서 달라도 ok

  add(b=3, a=7)

• global: 전역 변수. 함수 바깥에 선언된 변수 바로 참조. 파이썬은 함수 안에 선언된 변수만 함수 내에서 인식 가능함.

  a = 0
  def func():
    global a
    a += 1
  for i in range(10):
    func()
  print(a)    # 10

• 리턴 값 여러 개 가능

  람다 표현식

• 함수를 한 줄에 작성 가능

  print((lambda a, b: a + b)(3,7))

  arr = [('김', 50), ('이', 32), ('박', 74)]
  def my_key(x):
    return x[1]
  print(sorted(array, key=my_key))
  print(sorted(array, key=lambda x: x[1]))
  # [('이', 32), ('김', 50), ('박', 74)]

  l1 = [1,2,3,4,5]
  l2 = [6,7,8,9,10]
  result = map(lambda a,b: a+b, l1, l2)
  print(list(result))        # [7,9,11,13,15]

  라이브러리

  내장 함수

• sum(): 리스트, 튜플 원소들의 합
• min(): 리스트에서 가장 작은 값
• max(): 리스트에서 가장 큰 값
• eval(): 문자열 형태 수식의 결과를 수로 반환
• sorted(): 리스트와 같은 반복 가능한 객체를 오름차순 정렬
  • sorted([], reverse=True): 내림차순 정렬
    • sorted([], key=lambda x: x[1]): key로 정렬

      itertools

      순열, 조합
• permutations(): 순열
• combinations(): 조합

  from itertools import permutations, combinations
  data = ['a', 'b', 'c']
  result1 = list(permutations(data, 3))    # 모든 순열 구하기
  result2 = list(combinations(data, 2))    # 2개 뽑는 모든 조합 구하기

• 중복순열, 중복조합

  from itertools import product, combinations_with_data
  data = ['a', 'b', 'c']
  result1 = list(product(data, repeat=2))                    # 2개 뽑는 모든 순열 (중복 허용)
  result2 = list(combinations_with_replacement(data, 2))    # 2개 뽑는 모든 조합 (중복 허용)

  heapq

  우선순위 queue

  bisect

  이진 탐색

  collections

  deque, counter
• counter: 등장 횟수 세는 기능. iterable 객체에서 내부 원소 몇 번씩 등장했는지 count

  from collections import Counter
  counter = Counter(['r', 'g', 'b', 'r', 'g', 'g'])
  print(counter['r'])        # 2
  print(dict(counter))    # {'r': 2, 'g': 3, 'b': 1}

  math

  팩토리얼, 제곱근, 최대 공약수, 삼각함수, pi 상수
• gcd(): 최대 공약수

  import math
  def lcm(a,b):    # 최소 공배수 구하기: 최소 공배수 = 두 수의 곱 나누기 최대 공약수
    return a*b // math.gcd(a,b)

참고 이것이 취업을 위한 코딩 테스트다 with 파이썬 https://youtu.be/m-9pAwq1o3w

입력

• input(): 한 줄의 문자열 입력
• map(): 리스트의 모든 원소에 각각 특정한 함수 적용

  n = int(input())    # 데이터 크기 입력
  data = list(map(int, input().split()))        # 공백 기준으로 정수형 데이터 리스트

  • 빠르게 입력: sys.stdin.readline()

  • 엔터가 줄 바꿈 기호로 입력되므로 rstrip() 메서드 함께 사용

    import sys
    data = sys.stdin.readline().rstrip()

출력

• print(): 각 변수를 ,를 이용하여 띄어쓰기로 구분
  • 기본적으로 출력 이후에 줄 바꿈 수행 -> 줄 바꿈 원치 않을 경우, 'end' 속성 이용

    print(7, end=" ")
    print(8, end=" ")
    # 7 8

• f-string: 문자열 앞에 접두사 f 붙여 사용
  • 중괄호 안에 변수명 기입하여 문자열과 정수 함께 넣을 수 있음

    answer = 7
    print(f"정답: {answer}")    # 정답: 7

    조건문

• 블록 indent로 조건문 설정
• 조건문 간소화
  • 조건문에서 실행될 코드가 한 줄인 경우, 줄 바꿈 없이 한 줄로 표기
    • 조건부 표현식으로 한 줄로 표기 result = 'success' if score >= 80 else 'fail'

      부등식 x > 0 and x < 20 과 0 < x < 20 은 같은 결과

if-elif-else

score = 85
if score >= 75:
    print('75 이상')
elif score >= 50:
    print('50 이상 75 미만')
else:
    print('50 미만')
print('종료')
# 75 이상
# 종료

연산자

비교

• pass: 아무것도 처리하고 싶지 않을 때 사용
  • 디버깅 과정에서 일단 조건문의 형태만 만들어 놓고 조건문 처리하는 부분은 비워놓고 싶은 경우

a = 5
if a >= 0:
    pass    # 나중에 작성할 코드
else:
    print('음수')

반복문

• 코딩 테스트 실제 예시에서는 for문이 더 간결한 경우가 많음
• continue: 남은 코드 실행 건너뛰고 다음 반복 진행
• break: 반복문 즉시 탈출
• 중첩 반복문 가능

  while

  i = 1
  result = 0
  while i <= 9:
    result += i
    i += 1
  print(result)    # 45

• 무한 루프: 반복문 작성한 뒤, 탈출할 수 있는지 확인 (코딩 테스트에서는 거의 구현할 일 없음)

  for

• for 변수 in 리스트: in 뒤에 오는 데이터(리스트, 튜플 등)에 포함되어 있는 원소를 첫 번째 인덱스부터 방문
• for 변수 in range(시작 값, 끝 값+1): 연속적인 값 차례대로 순회
  • 인자를 하나만 넣으면 자동으로 시작 값은 0

    result = 0
    for i in range(1, 10):
    result += i
    print(result)    # 45

참고 이것이 취업을 위한 코딩 테스트다 with 파이썬 https://youtu.be/m-9pAwq1o3w

수 자료형

정수형

• 양의 정수, 음의 정수, 0 (형 변환 int)

• 코테 출제 대부분의 문제는 정수형을 주로 다룸*

  a = 1000    # 양의 정수
  b = -7        # 음의 정수
  c = 0        # 0

  실수형

• 소수점 아래의 데이터를 포함하는 수 자료형 : 변수에 소수점 붙이면 실수형으로 표현 가능 (형 변환 float)

  a = 157.93
  b = -1837.2
  c = 5.        # 소수부가 0일 때 0 생략: 5.0
  d = -.7        # 정수부가 0일 때 0 생략: -0.7

• 지수 표현 방식: e나 E 다음에 오는 수는 10의 지수부 유효숫자e지수 = 유효숫자 * 10^지수

  a = 1e9        # 1,000,000,000
  b = 75.25e1    # 752.5
  c = 3954e-3    # 3.954

  최단 경로 알고리즘 (그래프) : 도달할 수 없는 노드에 대하여 최단 거리를 INF(무한)으로 설정

• round() : 반올림 내장함수

  round(123.456, 2)    # 123.46

💡 연산 : 사칙연산 + 나머지 연산자 많이 사용

• // : 몫 연산자
• / : 나누기 연산자. 결과를 실수형으로 반환
• % : 나머지 연산자
• ** : 거듭제곱 연산자

리스트

• 리스트: 여러 개의 데이터를 연속적으로 담아 처리. (배열, table)

  초기화

• 대괄호 안에 원소 넣기. 쉼표로 원소 구분
• list() 혹은 [] 이용하여 선언
• 인덱스 값으로 접근 (0부터)

  a = [1,3,5,7,9]
  print(a[1])        # 3
  empty = list()      

  인덱싱과 슬라이싱

• 인덱싱: 인덱스 값을 입력하여 리스트의 특정한 원소에 접근.

  - 인덱스 값: 양, 음 정수 모두 사용 가능 (음의 정수: 원소 거꾸로 탐색)

  a = [1,2,3,4,5]
  print(a[-1])    # 5

• 슬라이싱: 연속적인 위치의 원소들 가져오기.
  • 리스트[시작 인덱스: 끝 인덱스] (끝 인덱스: 실제 인덱스보다 + 1)

    a = [1, 2, 3, 4, 5]
    print(a[0:2])    # 1,2

컴프리헨션

• 대괄호 안에 조건문과 반복문을 적용하여 리스트 초기화

  a = [i for i in range(10)]
  print(a)    # [1,2,3,4,5,6,7,8,9]
  b = [j * j for j in range(1,10) if j % 2 == 1]
  print(b)    # [1,9,25,49,81]
  

List Comprehension 사용하지 않을 경우

b = [] for j in range(1,10): if j % 2 == 1: b.append(j*j) print(b)

> **2차원 리스트 초기화할 때 효과적으로 사용**
- n x m 크기의 2차원 리스트를 한 번에 초기화
`a = [[0] * m for _ in range(n)]`

_ _ : 반복문에서 반복 변수값 무시하고 싶을 때 사용_

### 메서드
- append(): 원소 하나 삽입 `O(1)`
- sort(): 오름차순 정렬 `O(NlogN)`
sort(reverse = True): 내림차순 정렬
- reverse(): 리스트 원소 순서 모두 뒤집기 `O(N)`
- insert(): 특정 인덱스 위치에 원소 삽입 `O(N)`
- count(): 특정 값 갖는 원소 개수 세기 `O(N)`
- remove(): 특정 값 갖는 원소 제거. 여러 개면 하나만 제거 `O(N)`
```python
a.append(4)
a.append([5,6])
a.sort()    # 문자도 알파벳 순서 정렬 가능
a.reverse() # 정렬 X. 반환값 X. 그냥 뒤집어주는 메소드.
a.insert(0,4)   # 리스트의 0번째 위치에 4 삽입
a.remove(3) # 리스트에서 첫 번째로 나오는 3 제거
a.count(1)  # 1이 몇 개 있는지 리턴

💡 리스트에서 특정 값 가지는 원소 모두 제거

a = [1,2,3,3,3,4,5,5]
remove_set = {3,5}
result = [i for i in a if i not in remove_set]
print(result)    # [1,2,4]

문자열

초기화

• "" 혹은 '' 이용 (\ 이스케이프 문자 사용해서 따옴표를 문자처럼 취급하여 표현)

  연산

• + 사용하여 concatenate: 양의 정수와 곱하면 여러 번 더해짐
• indexing, slicing 가능 but 특정 인덱스 값 변경 불가

  a = 'hello'
  b = 'world'
  print(a+" "+b)    # hello world

  튜플

  특징

• 한 번 선언된 값 변경 불가
• () 이용
• 리스트에 비해 공간 효율적

  a = (1,2,3,4,5)
  print(a[3])        # 4
  print(a[1:4])    # (2,3,4)

  튜플 장점

• 서로 다른 성질 데이터 묶어서 관리할 때 ex) 최단 경로 알고리즘 (비용, 노드 번호)
• 해싱 키 값으로 사용
• 메모리 효율적 사용

사전

특징

• Key, Value 쌍을 데이터로 가지는 자료형: 변경 불가능한 자료형을 키로 사용
• Hash table 이용: 데이터 조회/수정 O(1)

  data = dict()
  data['사과'] = 'apple'    # 사과: key, apple: value
  data['바나나'] = 'banana'
  data['오렌지'] = 'orange'
  print(data)        # {'사과':'apple', '바나나':'banana', '오렌지':'orange'}

  함수

• keys(): key 데이터만 담은 리스트
• values(): value 데이터만 담은 리스트

  key_list = data.keys()
  value_list = data.values()
  print(key_list)        # dict_keys(['사과', '바나나', '오렌지'])
  print(value_list)    # dict_values(['apple', 'banana', 'orange'])

집합

특징

• 중복 허용 X
• 순서 X
• 데이터 조회/수정 O(1)

  초기화

• list 혹은 string 이용: set() 함수 이용
• {} 안에 각 원소를 , 기준으로 구분하여 삽입

  a = set([1,1,2,3,4,4,5])
  b = {1,1,2,3,4,4,5}
  print(a)    # {1,2,3,4,5}
  print(b)    # {1,2,3,4,5}

  연산

• 합집합: a | b
• 교집합: a & b
• 차집합: a - b

  함수

• add(): 새로운 원소 추가
• update(): 새로운 원소 여러 개 추가
• remove(): 특정 값 갖는 원소 삭제

  data.add(4)
  data.update([5,6])
  data.remove(3)

  • 리스트, 튜플: 순서 O. 인덱싱을 통해 값 얻기

• 사전, 집합: 순서 X. 인덱싱 불가. 사전의 key, 집합의 element를 이용해 O(1)로 조회

참고: 이것이 취업을 위한 코딩테스트다 with 파이썬 https://youtu.be/m-9pAwq1o3w

생성

npx create-react app . // 현재 디렉토리에 프로젝트 생성

npm start 코드 시행

수정

배포

npm run build

serve: 웹서버. 사용 추천. 노드. npx serve -s build

=> localhost 말고 네트워크로 배포.

Component

사용자 정의 태그 만들기: 함수 정의 (무조건 대문자) => 컴포넌트

// components
function Header() {
  return <header>
    <h1><a href = "/">React</a></h1>
  </header>
}

function Nav() {
  return <nav>
    <ol>
      <li><a href = "/read/1">html</a></li>
      <li><a href = "/read/2">css</a></li>
      <li><a href = "/read/3">js</a></li>
    </ol>
</nav>
}

function Article() {
  return <article>
    <h2>Welcome</h2>
    Hello, WEB
  </article>
}

// main function
function App() {
  return (
    <div className="App">
      <Header />
      <Nav />
      <Article />
    </div>
  );
}

Props

Prop: 속성

function Header(props) {    // 변수명 임의로 props라 설정함
  console.log('props', props, props.title);
  return <header>
    <h1><a href = "/">{props.title}</a></h1>
      // { } 안에 작성 시, 변수 취급
  </header>
}

function App() {
  return (
    <div className="App">
      <Header title = 'REACT'/>
      <Nav />
      <Article />
    </div>
  );
}

콘솔에 다음과 같이 출력됨

>> props {title: 'REACT'} REACT

function Nav(props) {
  const lis = []
  // 반복문
  for(let i = 0; i < props.topics.length; i++){    // 객체 배열 길이: length
    let t = props.topics[i];    // topics 배열을 변수 t에 저장
    lis.push(<li key = {t.id}>    // key라는 prop에는 unique key값 필요. id 값을 key 값으로 저장
      <a href = {"/read/" + t.id}>{t.title}</a>
        // 중괄호 사용하여 id값을 주소에 포함
      // title을 내용으로 함
      </li>)
  }
  return <nav>
    <ol>
      {lis}
    </ol>
  </nav>
}

function App() {
  const topics = [    // 객체 배열 생성
    {id : 1, title: 'html', body: 'html is...'},
    {id : 2, title: 'css', body: 'css is...'},
    {id : 3, title: 'javascript', body: 'javascript is...'}
  ]
  return (
    <div className="App">
      <Header title = 'WEB'/>
      <Nav topics = {topics}/>
      <Article title = 'Welcome' body = 'Hello, WEB'/>
    </div>
  );
}

Event

function Header(props) {
  console.log('props', props, props.title);
  return <header>
    <h1><a href = "/" onClick = {(event) => { // callback 함수. arrow function
      event.preventDefault(); // 기본 동작 방지 => 클릭해도 리로드 X
      props.onChangeMode();
    }}>{props.title}</a></h1>
  </header>
}

function Nav(props) {
  const lis = []
  for(let i = 0; i < props.topics.length; i++){
    let t = props.topics[i];
    lis.push(<li key = {t.id}>
      <a id = {t.id} href = {"/read/" + t.id} onClick = {(event) => {
        event.preventDefault();
        props.onChangeMode(event.target.id);  
        // event 객체가 가지고 있는 event를 유발시킨 태그 : target
        }}>
      {t.title}</a>
    </li>)
  }
  return <nav>
    <ol>
      {lis}
    </ol>
  </nav>
}

function App() {
  //
  return (
    <div className="App">
      <Header title = 'WEB' onChangeMode = {() => {
        alert('Header');
      }}/>
      <Nav topics = {topics} onChangeMode = {(id) => {
        alert(id);
      }}/>
      <Article title = 'Welcome' body = 'Hello, WEB'/>
    </div>
  );
}

State

prop: 컴포넌트를 사용하는 외부자를 위한 data state: 컴포넌트를 만드는 내부자를 위한 data

import { useState } from 'react';

function Nav(props) {
  const lis = []
  for(let i = 0; i < props.topics.length; i++){
    let t = props.topics[i];
    lis.push(<li key = {t.id}>
      // t.id는 원래 숫자. 하지만 태그의 속성에 들어가는 순간 문자가 됨.
      <a id = {t.id} href = {"/read/" + t.id} onClick = {(event) => {
        event.preventDefault();
        props.onChangeMode(Number(event.target.id));
        // Number로 변환 안 해주면 문자열 값.
        }}>
      {t.title}</a>
    </li>)
  }
  return <nav>
    <ol>
      {lis}
    </ol>
  </nav>
}

function App() {
  /*
  const _mode = useState('WELCOME');    // 초기값 설정
  const mode = _mode[0];    // 상태의 값을 읽음
  const setMode = _mode[1];    // 상태의 값을 변경할 때 사용하는 함수
  console.log('_mode', _mode);
  */
  const [mode, setMode] = useState('WELCOME');    // 간단하게 표현
  const [id, setId] = useState(null);
  const topics = [
    {id : 1, title: 'html', body: 'html is...'},
    {id : 2, title: 'css', body: 'css is...'},
    {id : 3, title: 'javascript', body: 'javascript is...'}
  ]
  let content = null;
  if (mode === 'WELCOME'){
    content = <Article title = 'Welcome' body = 'Hello, WEB'></Article>
  } else if (mode === 'READ') {
    let title, body = null;
    for(let i = 0; i < topics.length; i++){
      if(topics[i].id === id){
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title = {title} body = {body}></Article>
  }
  return (
    <div className="App">
      <Header title = 'WEB' onChangeMode = {() => {
        setMode('WELCOME');
      }}/>
      <Nav topics = {topics} onChangeMode = {(id) => {
        setMode('READ');
      }}/>
      {content}
    </div>
  );
}

CRUD

Create

function Create(props) {
  return <article>
    <h2>Create</h2>
    <form onSubmit = {(event) => {
      event.preventDefault();
      const title = event.target.title.value;
      const body = event.target.body.value;
      props.onCreate(title, body);
    }}>
      // 각각 다른 줄에 표현하기 위해 p 태그 사용
      <p><input type = 'text' name = 'title' placeholder = 'title' /></p>
      <p><textarea name = 'body' placeholder = 'body' /></p>
      <p><input type = 'submit' value = 'Create' /></p>
    </form>
  </article>
}

function App() {
  const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);
  const [nextId, setNextId] = useState(4);
  const [topics, setTopics] = useState([
    {id : 1, title: 'html', body: 'html is...'},
    {id : 2, title: 'css', body: 'css is...'},
    {id : 3, title: 'javascript', body: 'javascript is...'}
  ]);
  let content = null;
  if (mode === 'WELCOME'){
    content = <Article title = 'Welcome' body = 'Hello, WEB'></Article>
  } else if (mode === 'READ') {
    let title, body = null;
    for(let i = 0; i < topics.length; i++){
      if(topics[i].id === id){
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title = {title} body = {body}></Article>
  } else if (mode === 'CREATE') {
    content = <Create onCreate = {(_title, _body) => {
      const newTopic = {id: nextId, title: _title, body: _body}
      const newTopics = [...topics] // 복제본 생성
      newTopics.push(newTopic);
      setTopics(newTopics);
      setMode('READ');
      setId(nextId);
      setNextId(nextId + 1);
    }}/>
  }
  return (
    <div className="App">
      <Header title = 'WEB' onChangeMode = {() => {
        setMode('WELCOME');
      }}/>
      <Nav topics = {topics} onChangeMode = {(_id) => {
        setMode('READ');
        setId(_id);
      }}/>
      {content}
      <a href = '/create' onClick = {(event) => {
        event.preventDefault();
        setMode('CREATE');
      }}>Create</a>
    </div>
  );
}

Update

function Update(props) {
  // useState 사용하여 업데이트
  const [title, setTitle] = useState(props.title);
  const [body, setBody] = useState(props.body);
  return <article>
    <h2>Update</h2>
    <form onSubmit = {(event) => {
      event.preventDefault();
      const title = event.target.title.value;
      const body = event.target.body.value;
      props.onUpdate(title, body);
    }}>
      // onChange 속성 함수로 변경 내용 실시간 반영
      <p><input type = 'text' name = 'title' placeholder = 'title' value = {title} onChange = {(event) => {
        setTitle(event.target.value);
      }}/></p>
      <p><textarea name = 'body' placeholder = 'body' value = {body} onChange = {(event) => {
        setBody(event.target.value);
      }}/></p>
      <p><input type = 'submit' value = 'Update' /></p>
    </form>
  </article>
}

function App() {
  //
  let content = null;
  let contextControl = null;    // READ 모드일 때만 확인 가능한 context
  if (mode === 'WELCOME'){
    content = <Article title = 'Welcome' body = 'Hello, WEB'></Article>
  } else if (mode === 'READ') {
    let title, body = null;
    for(let i = 0; i < topics.length; i++){
      if(topics[i].id === id){
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title = {title} body = {body}></Article>
    contextControl = <li><a href = {'/update/' + id} onClick = {(event) => {
      event.preventDefault();
      setMode('UPDATE');
    }}>Update</a></li>
  } else if (mode === 'CREATE') {
    //
  } else if (mode === 'UPDATE') {
    let title, body = null;
    for(let i = 0; i < topics.length; i++){
      if(topics[i].id === id){
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Update title = {title} body = {body} onUpdate = {(title, body) => {
      const newTopics = [...topics]
      const updatedTopic = {id: id, title: title, body: body}
      for(let i = 0; i < newTopics.length; i++){
        if(newTopics[i].id === id){
          newTopics[i] = updatedTopic;
          break;
        }
      }
      setTopics(newTopics);
      setMode('READ');
    }}/>
  }
  return (
    //
      <ul>
        <li><a href = '/create' onClick = {(event) => {
          event.preventDefault();
          setMode('CREATE');
        }}>Create</a></li>
        {contextControl}
      </ul>
    </div>
  );
}

Delete

else if (mode === 'READ') {
    let title, body = null;
    for(let i = 0; i < topics.length; i++){
      if(topics[i].id === id){
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title = {title} body = {body}></Article>
    contextControl = <>
      <li><a href = {'/update/' + id} onClick = {(event) => {
        event.preventDefault();
        setMode('UPDATE');
      }}>Update</a></li>
      <li><input type = 'button' value = 'Delete' onClick = {() => {
        const newTopics = []
        for(let i = 0; i < topics.length; i++){
          // 현재 id에 해당하지 않는 topics의 id들만 newTopics 배열에 push
          if(topics[i].id !== id){
            newTopics.push(topics[i]);
          }
        }
        setTopics(newTopics);
        setMode('WELCOME');
      }} /></li>
    </>
  } 

생활코딩 React 강의 2022 개정판 https://youtu.be/AoMv0SIjZL8

navigate VS replace

• navigate: stack 중에 screen이 있으면 그걸 찾아서 간다.
• replace: 새롭게 replace한다.

나는 거의 navigate로 사용했는데 그러다보니까 예를 들어 노트를 삭제했는데 삭제 후 다시 리스트로 돌아가도록 navigate 메소드를 사용하면, 삭제된 노트도 리스트에서 계속 확인이 됐다. 그래서 replace로 바꾸어주었더니, 바로바로 동기화 완료.

Passing Params

• 넘겨줄 때 : 가장 중요한 건 제일 바깥쪽 export할 function의 인자로, { navigation, route } 를 넣어주는 것이다. 이게 없으면! 안 돌아간다.

  navigation.navigate('Note', {
    noteId: response.data.result['note_id'],
    categoryName: category,
    userId: userId,
    fromUpload: true
  })

• 받아올 때 : 여기도 마찬가지로 navigation, route 설정해주기.

  useEffect(() => {
    setUserId(route.params.userId);
    setCategory(route.params.categoryName);
    setNoteId(route.params.noteId);
    setFromUpload(route.params.fromUpload);
  }, [noteId]);

참고 공식 문서 -> React Navigation

• 로그인 화면에서 다음과 같이 AsyncStorage를 이용해 user_id를 저장해주었다.
  • user_id는 key값. value값을 저장할 때는 JSON.stringify를 써줘야한다. key, value 모두 string값이어야 하기 때문이다.

    const saveId = async id => {
      try {
          await AsyncStorage.setItem('user_id', JSON.stringify(id));
      } catch (e) {
          console.error(e);
      }
    }

로그인 여부 받아오기

• AsyncStorage 안에 user_id가 저장되어 있는지 아닌지로 로그인 여부를 판단했다.

  const [isLogin, setIsLogin] = useState(false);
  const getLogin = async () => {
    if(await AsyncStorage.getItem('user_id')!== null){
        setIsLogin(true);
    }
  }
  useEffect(() => {
    getLogin();
  });

• 그 뒤, isLogin 값에 따라 navigation stack 분리

  {
    isLogin ? (
        <>
        <Stack.Screen name = 'TabNavigator' component = {TabNavigator} /> 
        </>   
    ) : (
        <>
        <Stack.Screen name = 'SignInStack' component = {SignInStack} />
        <Stack.Screen name = 'TabNavigator' component = {TabNavigator} />
        </>
    )
  }

로그인 여부에 따라 navigation 나눈 자세한 코드는 다음 링크 참고 -> Navigator 구성

로그아웃

마지막으로 로그아웃! 내가 이놈의 로그아웃 때문에 얼마나 고생했는지 모른다. 내가 navigation stack을 요상하게 쌓아놓는 바람에 navigation 메소드로 넘어가는 걸 포기하고 앱 리로딩이 되도록 만들었다.. 아직도 해결 방법을 못 찾아 그냥 앱 restart하기로 했다.

• 로그아웃 시에는 AsyncStorage에 저장해두었던 값을 지우도록 AsyncStorage.clear() 사용해주기.

  const logout = async () => {
    try {
        AsyncStorage.clear();
        restart(); // 이 부분에 로그아웃 네비게이션
    } catch (error) {
        console.log(error);
    }
  };

  restart() 대신 navigation method나 자기가 원하는 화면으로 넘어가도록 잘 설정해주면 된다. 혹시 앱을 리로드하고 싶은 사람들을 위해 참고하시라고 코드 올려놓는다.

  import * as Update from 'expo-updates';
  

export default () => Update.reloadAsync(); ```

React Native로 앱을 개발하면서 가장 어려움이 많았던 부분은 간단해 보이던 navigator였다. 우선 나는 stack navigator와 tab navigator를 사용할 예정이었기 때문에 모듈을 다운로드했다.

npm add @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm add @react-navigation/stack
npm add @react-navigation/bottom-tabs

내가 구성한 navigation을 살펴보면

StackNavigator
    ㄴSignInStack
    ㄴCameraStack
    ㄴAlbumStack
    ㄴMypageStack

TabNavigator
    ㄴCameraStack
    ㄴAlbumStack
    ㄴMypageStack

MainNavigator
    ㄴSignInStack
    ㄴTabNavigator

로그인을 하고 나면 tab navigator 화면으로 넘어가야 하기 때문에, main navigator를 두 가지 스택으로 분리하였다. 각 Tab 별로 stack을 쌓아 tab 속 screen을 관리하였다.

Stack Navigator

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export function SignInStack() {
    return (
        <Stack.Navigator
            screenOptions = {({ route }) => ({ headerShown: false })}
        >
            <Stack.Screen name = {SignInName} component = {SignInScreen} />
            <Stack.Screen name = {SignUpName} component = {SignUpScreen} />
        </Stack.Navigator>
    )
}

위와 같은 방식으로 다른 Stack들도 구성해주었다.

• screenoptions: route를 넣어준 이유는, 메소드를 사용해 screen별로 이동하고 route.params로 parameter를 넘겨주기 위해서다. 그리고 나는 header를 따로 만들었기 때문에 navigation 기본 헤더는 가려주었다.

Tab Navigator

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { CameraStack, AlbumStack, MypageStack } from './StackNavigator';

const Tab = createBottomTabNavigator();

<NavigationContainer
    independent = {true}
>
    <Tab.Navigator
        screenOptions = {({ route }) => ({ headerShown: false })}
        initialRouteName = 'AlbumStack'
    >
        <Tab.Screen name = 'CameraStack' component = {CameraStack} 
            options = {{
                tabBarShowLabel: false,
                tabBarIcon: () => (
                    <Image source = {images.camera} />
                ),
                unmountOnBlur: true,
            }} />
        // 나머지 tab screen도 위와 같이 구성
        </Tab.Navigator>
</NavigationContainer>

• 전체를 navigation container로 감싸주어야 작동한다. nested navigator 구성이기 때문에 independent = {true} 설정도 필요
• TabNavigator 전체에도 route가 필요했다. 그리고 마찬가디로 header는 가려줌.
• Tab bar label도 필요 없어서 가려줌.
• tabBarIcon도 expo vector icon말고 따로 활용하려고 image source 넣어줌
• unmountOnBlur: 각 tab 이동하고 나면 tab stack history는 없애려고 true로 설정해줬다.

Main Navigator

로그인 로직을 분리하여 navigator를 구성하기 위해 파일을 따로 빼서 main navigator를 만들어 stack을 쌓았다.

<NavigationContainer
    independent = {true}
>
    <Stack.Navigator
        screenOptions = {({ route }) => ({ headerShown: false })}
        initialRouteName = {SignInStack}
    >
    {
        isLogin ? (
            <>
            <Stack.Screen name = 'TabNavigator' component = {TabNavigator} /> 
            </>   
        ) : (
            <>
            <Stack.Screen name = 'SignInStack' component = {SignInStack} />
            <Stack.Screen name = 'TabNavigator' component = {TabNavigator} />
            </>
        )
    }
    </Stack.Navigator>
</NavigationContainer>

Flatlist 컴포넌트는 말하자면 스크롤 가능한 리스트라고 볼 수 있다. 나는 메모리스트를 보여주는 데에 사용했다. (grid로도 사용할 수 있다)

• ScrollView 스크롤은 ScrollView로도 가능한데, 왜 사용하지 않았는가? 라고 묻는다면, map함수를 사용하기 귀찮았기 때문이다. 나는 메모리스트를 구현해야하는데 ScrollView를 사용한다면 map함수로 각 메모를 돌려줘야하는데, 이 부분이 귀찮아 그냥 map 기능까지 비슷하게 제공하는 flatlist를 사용했다.

Props

Flatlist를 사용할 때 가장 중요한 두 가지 요소는 data와 renderItem이다.

• data: 말 그대로 flatlist에 넣을 데이터를 의미한다. 나는 객체 배열을 사용해서 data에 넣었다. 아래는 내가 넣은 data이다. API에서 데이터 받아오는 부분이 조금 복잡해져서 코드가 이렇게 나왔다. id, title, date를 가지는 객체의 배열이라고 보면 된다.

  const setMemos = (i) => {
      memos.push({
        id: _noteId[i],
        title: _title[i],
        date: _date[i]
      });
   }
  
   setNotes(memos);    // notes를 data에 넣음.

• renderItem: data를 불러오는 callback함수라고 보면 된다. { item }은 객체로, render할 data의 item을 의미한다. data가 객체 배열이었으니, item은 그 하나하나의 객체라고 보면 된다.

  const renderMemo = ({ item }) => {
    return(
      <TouchableOpacity style = {boxStyles.memo}
        onPress = {() => navigation.navigate('Note', {
          noteId: item.id,    // data의 id
          category: category,
          userId: userId
          })}>
        <View style ={textStyles.InBox}>
          <View style = {boxStyles.important} />
          <Text style = {{
            marginLeft: 10,
            fontWeight: 'bold',
          }}>
            {item.title}    // data의 title
          </Text>
        </View>

        <View>
          <Text 
            style = {{ marginLeft: 35 }}
          >
            {item.date}        // data의 date
          </Text>
        </View>
      </TouchableOpacity>
    );
  }

• keyExtractor: map 함수의 key값처럼 앞의 item에 key를 주는 거라고 볼 수 있다.

Usage

이제 flatlist를 생성해주면 완성.

<FlatList
    data={notes}
    renderItem = {renderMemo}
    keyExtractor={(item) => item.id}
/>

FlatList 생성 화면은 다음과 같다.

web -> localhost

하지만 앱을 개발할 때는 ios simulator, android emulator를 돌리기 때문에, web의 localhost로 할 때는 연결이 되지 않는다. 따라서, ios와 android 에뮬레이터의 IP 주소를 따로 설정해주어야 한다. ios -> 127.0.0.1 andriod -> 10.0.2.2

(만약 안 된다면 settings.py에서 ALLOWED_HOST[*]로 바꿔주면 된다)

나는 ios simulator로 개발했기 때문에 ios 기준으로 얘기하겠다. 일단 API 연결 전에, 백엔드에서 Response Body를 지정해주었다.

{
    "success" : true,
    "result" : [~],
    "status" : 200
}

axios를 매번 import하는 것보다는 api 파일을 따로 만들었다.

import axios from 'axios';

const API = axios.create({
    baseURL: 'http://127.0.0.1:8000/api',
    headers: {
        'Content-Type' : 'application/json',
    },
});

export default API;

Post

Create

• bodyData는 하나의 객체로 전송했다.

• 지정해준 response.data.success가 true로 나오면 navigation method가 작동되도록 설정했다.

  const saveNote = async () => {
        const data = {
            user_id: userId,
            title: title,
            date: new Date(),
            contents: contents,
            category_id: categoryId,
        }
  
        try {
            const response = await API.post(
                `/notes`,
                data
            )
            .then(function (response) {
                if (response.data['success'] == true) {
                    navigation.navigate('Note', {
                        noteId: response.data.result['note_id'],
                        categoryName: category,
                        userId: userId,
                        fromUpload: true
                    })
                }
            })
            .catch(function (error) {
                console.log(error.response);
            });
        } catch (error) {
            console.log(error);
        }
    }

  Get

  Read

• get에는 bodyData를 전송할 필요가 없다. API를 받아오는 목적이기 때문이다.

• get api를 성공했다면, 각각 필요한 데이터를 useState 값으로 넣어주었다.

  const getNotes = async () => {
        try {
            await API.get(
                `/notes/${noteId}`
            )
            .then(function (response) {
                if (response.data['success'] == true) {
                    setTitle(response.data.result['title']);
                    setContents(response.data.result['contents']);
                    setSummary(response.data.result['summary']);
                    for(let i = 0; i < response.data.result.keywords.length; i++){
                        _keyword.push(response.data.result.keywords[i]['keyword']);
                    }
                    setKeywords(keywords.concat(_keyword));
                }
            })
            .catch(function (error) {
                console.log(error.response);
            })
        } catch (error) {
            console.log(error);
        }
    }

Put

Update

• Put은 Get + Post라고 볼 수 있다.

• bodyData는 post와 같은 형식으로 지정해주었다.

  const modifyNote = async () => {
        const data = {
            user_id: userId,
            title: title,
            contents: contents,
            date: new Date(),
            category_id: categoryId + 1,
        }
  
        try {
            const response = await API.put(
                `/notes/${noteId}`,
                data
            )
                .then(function (response) {
                    if (response.data['success'] == true) {
                        navigation.replace('Note', {
                            noteId: response.data.result['note_id'],
                            categoryName: category,
                            userId: userId,
                            fromUpload: fromUpload
                        });
                    }
                })
                .catch(function (error) {
                    console.log(error.response);
                });
        } catch (error) {
            console.log(error);
        }
    }

  Delete

  Delete

• 삭제 시에는 bodyData를 지정할 필요가 없었다.

• 그리고 response data를 주지 않는다. 백엔드 쪽에서도 204 No content를 status로 지정해주었다.

const deleteNote = async () => {
        try {
            await API.delete(
                `/notes/${noteId}`
            )
            .then(response => {
                if(response.status === 204){
                    console.log('delete');
                    fromUpload ? (
                        navigation.replace('Camera')
                    ) : (
                        navigation.replace('List', {
                            categoryName: categoryName,
                            userId: userId
                        })
                    )
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        } catch (error) {
            console.error(error);
        }
    }

npm install @react-native-picker/picker

위와 같은 명령어로 install https://github.com/react-native-picker/picker

멍청한 짓 하지 말자. 꼭 node_modules 깔려있는 디렉토리 확인하고 거기에 설치. cd frontend 안 하고 전체에 설치하려는 멍청한 짓으로 2시간 가량 오류 잡다가 날림^^

picker를 사용하려면 코드는 다음과 같이 작성

import { Picker } from '@react-native-picker/picker';


const [category, setCategory] = useState('diary');

return (
    <Picker
        selectedValue = {category}
        onValueChange = {(itemValue, itemIndex) => 
        setCategory(itemValue)
        }
        style = {{
            width: 200,
            height: 50,
        }}>
        <Picker.item label = 'Diary' value = 'diary' />
        <Picker.item label = 'Todo' value = 'todo' />
        <Picker.item label = 'Study' value = 'study' />
    </Picker>
);

그러나 이 picker는 커스텀하기도 힘들고 딱 밑으로 떨어지는 dropdown을 원했는데 약간 scroll 형식이라 옆에 글씨 놓고 디자인 맞추고 싶었던 나에겐 부적절. 그래서 찾은 게 아래의 picker.

react-native-dropdown-picker

npm install react-native-dropdown-picker

이거는 앞에 picker보다 개인적으로 디자인은 별로지만 커스텀이 쉽고 전반적으로 내가 원하던 디자인으로 페이지 구성할 수 있어서 선택.

CustomPicker라는 컴포넌트를 구성해, screen에서 불러와 설정할 수 있도록 했다.

import DropDownPicker from 'react-native-dropdown-picker';

const CustomPicker = ({ open, setOpen, value, setValue, items, setItems, onChangeValue, placeholder }) => {
    return (
        <DropDownPicker
            open = {open}
            value = {value}
            items = {items}
            setOpen = {setOpen}
            setValue = {setValue}
            setItems = {setItems}
            onChangeValue = {onChangeValue}
            containerStyle = {{
                width: 200,
            }}
            placeholder = {placeholder}
            dropDownDirection = "BOTTOM"
            style = {{
                marginBottom: open ? 100 : 10
            }}
            listItemContainerStyle = {{
                height: 30,
            }}
        />
    );
}

export default CustomPicker;

<CustomPicker
    open = {open}
    value = {category}
    items = {items}
    setOpen = {setOpen}    // true, false value
    setValue = {setCategory}
    setItems = {setItems}
    onChangeValue = {() => getIndex(category)}
    placeholder = "Select a category"
/>

setOpen을 사용한 이유는 open, close 상태에서 밑에 버튼의 위치를 다르게 주고 싶었기 때문이다.

근데 이거 defaultvalue 설정이 잘 안 된다.. 흠..

cd usr/local/mysql/bin
./mysql -uroot -p

최상위에서만 hook 호출

반복문, 조건문, 중첩 함수 내에서 hook 호출 불가 컴포넌트 렌더링 시, 여러 번 hook이 호출되더라도 올바른 상태로 유지될 수 있도록 한다.

이거 때문에 진짜 삽질을 오지게 하고, 굉장히 비효율적인 코드를 만들었다.

useState 사용하지 않고 반복문으로 배열값 받아오기

일단 이 코드는 카테고리 별로 노트 리스트를 받아오기 위함인데, 이때 flatlist로 노트를 띄워주기 위해 여러 과정을 거쳤다.

우선 아래와 같이 필요한 배열과 변수들을 선언해주었다.

  const _title = [];
  const _date = [];
  const _noteId = [];
  const [userId, setUserId] = useState('');
  const [categoryName, setCategoryName] = useState('');
  const [category, setCategory] = useState('');
  const [notes, setNotes] = useState('');
  const memos = [];

useState를 axios 코드 내의 반복문에 적용할 수 없기에, flatlist의 객체 배열을 만들어주기 위해 각각 원소 배열을 따로 변수 배열에 저장해 받아왔다. react에서는 javascript의 push 대신 concat이나 map 또는 spread 연산자를 사용하기를 권장하던데.. 나는 concat이나 map을 쓰면 자꾸 오류가 나고, 그냥 push가 편해서 이걸 사용했다.

  const setMemos = (i) => {
    memos.push({
      id: _noteId[i], 
      title: _title[i], 
      date: _date[i]
    });
  }

  const getNotes = async () => {
    try {
      await axios.get(
        `/notes/${userId}/all?category=${category}`
      )
      .then(function (response) {
        if(response.data['success'] == true) {
          // 반복문을 사용해서 각 메모 별로 title, date, note id를 저장해주었다.
          for(let i = 0; i < response.data.result.length; i++){
            _title.push(response.data.result[i]['title']);
            _date.push(response.data.result[i]['date']);
            _noteId.push(response.data.result[i]['note_id']);
            // setMemos 함수에 객체 배열로 각각의 원소를 저장해주었다.
            setMemos(i);
          }
              // 저장한 memos를 notes에 배열로 넣어주었다.
            setNotes(memos);
        }
      })
      .catch(function (error) {
        console.log(error.response);
      })
    } catch (error) {
      console.log(error);
    }
  };

// 앞서 작성한 Axios와 useEffect를 사용하기 위한 글 참고
  useEffect(()=> {
    setCategory(route.params.category);
    setUserId(route.params.userId);
    getNotes();
  }, [userId, category]);

• 또 다른 예시!

여기서 keywords는 data 안에 배열로 저장되기 때문에, 이 원소들을 다른 배열에 저장해 받아오는 게 필요했다. 주로 배열을 저장하는 데 사용하던 useState hook은 반복문 안에 사용이 불가능하기 때문에, keyword 배열을 따로 생성해서 push로 데이터를 받아왔다. 그 후, useState 배열에 concat을 활용해 넣어주었다.

for(let i = 0; i < response.data.result.keywords.length; i++){
      _keyword.push(response.data.result.keywords[i]['keyword']);
}
setKeywords(keywords.concat(_keyword));

이거는 hashtag를 보여주어야 했기 때문에, 반복문을 돌려 hashtag를 보여주었다.

var hashtag = [];
    for(let i = 0; i < 5; i++){
        hashtag.push(
            <Text style = {textStyles.hashtag}>#{keywords[i]}</Text>
        )
    }

(추가) 아 왜 map을 까먹고있었니^^

참고) Hook의 규칙