Dahee's Solution Hub

Windows에서 SAP NetWeaver Developer Edition 설치 가이드

안다희 — Wed, 18 Feb 2026 03:29:24 +0900

포스팅 목적

처음 SAP를 설치하는 사용자를 위한 Windows 기준 설치 가이드 작성

설치 환경

32GB RAM / 1TB SSD / Windows 11

안내사항

※ 본 가이드는 SAP NetWeaver 7.x Developer Edition (NPL) 기준으로 작성됨

전체 설치 순서

설치 상세

1. openSUSE 설치 파일 다운로드

목적 : SAP를 설치할 리눅스 운영체제 준비

다운로드

> https://download.opensuse.org/distribution/leap/15.3/iso/

> 링크에서 3개 파일 다운로드

2. SAP 설치 파일 다운로드 및 압축해제

목적 : SAP 설치 파일 준비

다운로드

> https://developers.sap.com/trials-downloads.html

> Part1~11 + License => 총 12개 다운로드

> Part1~11 파일 압축해제 방법 : Part1 파일만 압축해제하면, 나머지 자동 해제 (반디집 사용 추천)

3. VirtualBox 설치 및 가상머신 생성

목적 : Windows에서 SAP 설치용 Linux 가상환경 구성

다운로드

> https://www.virtualbox.org/wiki/Downloads

> VirtualBox 설치

*설치 오류 시, Visual C++ x64 설치 후 재시도

가상머신 생성

> 새로만들기

> ISO Image - 1에서 다운받은 openSUSE iso 파일 선택

> 기본메모리와 프로세서는 녹색 최대치까지, 디스크 크기는 100GB

> 만들기 완료

> 시작

4. openSUSE 설치 및 초기 설정

목적 : SAP 설치가 가능한 Linux 환경 구축

Installation > Next

Yes > Next

Desktop with GNOME

> (중요) Expert Partitioner

> Start with Current Proposal

sda2 선택하고 Edit 클릭

> Format device - Filesystem - Ext4

*SAP 설치에 사용할 디스크를 리눅스용(ext4)으로 준비 / 대용량을 지원하는 파일시스템으로 변경하는 것임

> Asia, Seoul 선택

(중요)

username: vhcalnplci

pw: Down1oad

(중요)

Firewall : disabled

SSH service : enabled

로 사진과 같이 설정하고 Install

> 설치 완료되면 boot from harddisk로 부팅

5. 가상머신 네트워크 및 Hostname 설정

목적 : SAP 서버 이름과 IP를 고정하여 설치 오류 방지

root 로그인

> terminal 실행 후 `sudo -i` 입력 (sudo = super user do)

*super user 상태여야 문제가 발생하지 않음

IP 확인

> `ip addr`

> 127.0.0.1 확인 : (localhost)

> 10.0.2.15 확인 : (VirtualBox NAT 네트워크에서 VM에 할당된 IP, SAP 설치 시 hostname/IP 설정에 쓰는 IP)

hosts 수정

> `nano /etc/hosts`

> `10.0.2.15 vhcalnplci.dummy.nodomain vhcalnplci`

> Ctrl + X -> Y Enter

*가상머신 IP(10.0.2.15)와 hostname(vhcalnplci) 매핑을 위해 /etc/hosts 파일 수정

hostname 설정

> `nano /etc/hostname`

> `vhcalnplci`

> Ctrl + X -> Y Enter

*SAP 설치를 위해 가상머신의 hostname을 vhcalnplci로 설정

재부팅

> `reboot`

재부팅 후 root 권한 재설정

> `sudo -i`

*참고

`sudo -i` : 슈퍼유저 로그인, root 사용자 최상단 폴더로 이동

`sudo -s` : 슈퍼유저 로그인, 현재 폴더 위치 유지

6. 필수 패키지 업데이트 및 설치

목적 : SAP 설치 필수 라이브러리 준비

시스템 업데이트

> `zypper refresh`

(Ask PackageKit to quit 질문이 나오면 터미널 창만 닫고 다시 터미널창 켜서 `sudo -i` > `zypper refresh` 하는걸 반복하면 2~3번 내로 정상적으로 돌아감)

> `zypper update`

필수 패키지 설치

> `zypper in uuidd tcsh libaio1`

*uuidd : SAP 시스템 식별번호 생성 서비스

*tcsh : SAP 설치 스크립트 실행 쉘

*libaio1 : SAP 필수 라이브러리

※ `rpm -qa | grep {라이브러리 이름}` 으로 설치 여부 검색 가능

※ 이미 설치된 경우 nothing to do 메시지 출력

uuid 서비스 실행 확인

> `service --status-all | grep uuidd`

> 현재 실행중인거 아직 없는거 확인 (SAP 설치 직전에 실행할 예정)

7. VirtualBox 공유폴더 설정

목적 : Windows ↔ Linux 간 SAP 설치 파일 공유

공유폴더 생성

> Virtual Box의 설정

> 공유 폴더 탭

> 추가 클릭

> 압축해제한 SAP 파일 있는 폴더로 Path 설정

> 자동마운트 체크

> 확인

8. SAP NetWeaver 설치 실행

목적 : SAP 서버 설치

SAP 라이선스 파일 위치 확인

> server/TAR/x86_64 안에, 라이선스 파일 넣어두기 (설치 과정에서 자동으로 사용됨)

SAP 설치 파일 위치 이동

> `cd /media`

> `cd sf_sap`

> `ls -l`

> install.sh 파일 확인, 실행권한 확인

SAP 로그인 및 시스템 생성에 필요한 서비스 실행

> `sudo systemctl status uuidd` 현재 상태 확인

> inactive인 것 확인

> ctrl + c 로 나오기

> `sudo systemctl start uuidd` 로 실행

> 다시 `sudo systemctl status uuidd` 로 상태 active 확인

SAP 설치 스크립트 실행

> `./install.sh`

> 약관 나오면 q 로 나오기

> 약관 동의 yes

> 암호 2번 입력

> 자동 설치 시작 (약 10~15분 소요)

> 설치 중 화면이 위 화면으로 멈춘듯이 보여도 정상

*최소 70GB 이상 디스크 용량 필요

설치 완료 확인

> Installation of NPL successful

9. 포트 포워딩 설정

목적 : Windows에서 SAP 서버 접속 가능하도록 설정

VirtualBox의 설정 > 네트워크 탭 > 포트 포워딩 버튼 클릭

RFC TCP 127.0.0.1 3300 10.0.2.15 3300

SAP GUI TCP 127.0.0.1 3200 10.0.2.15 3200

SSH TCP 127.0.0.1 22 10.0.2.15 22

확인 > 확인

10. SAP GUI 설치 및 접속

목적 : Windows에서 SAP 시스템(NPL)에 접속

SAP GUI 설치

> client 폴더 아래 설치파일 경로

> SAP\client\SAPGUI4Windows\50144807_6 압축해제

> 이어서 \BD_NW_7.0_Presentation_7.50_Comp._2_\PRES1\GUI\WINDOWS\Win32

> SapGuiSetup.exe 실행

> 첫번째 SAP GUI for ~ 체크

> Next, Next 누르면 설치

> SAP Logon 실행

신규 시스템 엔트리 생성

> 연결 탭에서 빈 공간 우클릭, 신규 엔트리 추가 클릭

> 사용자 지정 시스템 선택된 상태에서 다음 클릭

접속 정보 입력

> 아래 3가지 입력

Application Server : 127.0.0.1
Instance Number : 00
System ID : NPL

> 입력하면 나머지 정보는 자동으로 채워짐
> 다음 → 다음 → 종료

생성된 엔트리 더블클릭

로그인

> User : DEVELOPER

> Password : Down1oad

11. SAP 라이선스 발급 및 적용

목적 : SAP 시스템 사용 가능 상태로 활성화

SAP 라이선스 관리 화면 접속

> SAP GUI 로그인 후 실행창에 입력 : `slicense`

> Hardware Key 확인

SAP 라이선스 발급 사이트 접속

> https://go.support.sap.com/minisap/

> NPL – SAP NetWeaver 7.x (Sybase ASE) 선택

> Hardware Key 등 Info 입력

> 약관 동의 후 Generate

> NPL.txt 파일 다운로드 확인

SAP 라이선스 설치

> 다시 SAP GUI - slicense

> 새로고침 옆 Install New License 클릭

> 다운로드한 NPL.txt 업로드

> DEMOSYSTEM 항목의 System No이 0이 아닌 값으로 표시되면 정상 적용

라이선스 재갱신 방법 (만료 시 / 3개월마다)

> 기존 라이선스가 있는 경우

> DEMOSYSTEM이 적힌 라이선스 삭제 : 우클릭 - Delete License

> 새로 발급한 NPL.txt 다시 업로드

라이선스 만료로 로그인 불가 시

> 이미 만료되면, DEVELOPER로 로그인 안됨

> User : sap* / Password : Down1oad

> 로그인 후 기존 라이선스 삭제, 새 라이선스 적용 진행

12. SAP 설치 정상 동작 확인

목적 : SAP 개발 환경 정상 사용 가능 여부 확인

개발 환경 실행 확인

> T-code 실행창에 입력 : `SE80`

> Repository Browser - Local Objects - DEVELOPER - 엔터 - Programs - 마우스 오른쪽 Create 로 프로그램 생성 가능까지 확인

ABAP 예제 확인

> F1 누르면 예제 확인 가능

13. SAP 서버 재시작 방법

목적 : 가상머신 재부팅 후 SAP 시스템 재가동

SAP 로그아웃 상태에서 가상머신 터미널 실행

> `sudo -i`

> `su npladm`

> `startsap all`

> 출력 메세지 "Instance on host vhcalnplci started" 확인

> SAP GUI에서 다시 로그인 가능

Windows 환경에서 SAP 개발 환경 구축 완료!

Mac에서 시작해 Windows 환경까지 설치를 3번이나 진행해보았는데,

이제 전체 흐름이 잘 보이는 것 같다.

앞으로 3개월마다 라이선스 잘 갱신하면서 SAP 개발 실습을 해보자~

ALV 리포트 출력 코드 뜯어보기 with SCARR 테이블

안다희 — Sun, 1 Feb 2026 12:34:37 +0900

포스팅 목적

ABAP 공부를 하면서 ALV 리포트를 처음 만들게 되었는데,
그 구조가 어떻게 흘러가는지 단계별로 정리한 내용을 기록한다.

등장 개념

`아밥타입`, `데이터타입`, `내부 테이블`, `행`, `필드 카탈로그`, `구조체`

출력할 ALV 리포트

전체 코드

SCARR 테이블의 정보를 ALV로 출력하는 코드

!abap
*&---------------------------------------------------------------------*
*& Report Z2WEEK_ALV000_SCARR
*&---------------------------------------------------------------------*
*&
*&---------------------------------------------------------------------*
REPORT Z2WEEK_ALV000_SCARR.

TABLES:     scarr.

TYPE-POOLS: slis.  

*Data Declaration: 데이터 담기 (엑셀에 첫 행 구성)
*----------------
TYPES: BEGIN OF t_scarr,
  mandt     TYPE scarr-mandt,
  carrid    TYPE scarr-carrid,
  carrname  TYPE scarr-carrname,
  currcode  TYPE scarr-currcode,
  url       TYPE scarr-url,
 END OF t_scarr.

*it_scarr로 표를 만든거임. internal-table
DATA: it_scarr TYPE STANDARD TABLE OF t_scarr INITIAL SIZE 0.

*ALV data declarations
DATA: fieldcatalog TYPE slis_t_fieldcat_alv WITH HEADER LINE,
      gd_tab_group TYPE slis_t_sp_group_alv,
      gd_layout    TYPE slis_layout_alv,
      gd_repid     LIKE sy-repid.

************************************************************************
*Start-of-selection.
START-OF-SELECTION.

  PERFORM data_retrieval.
  PERFORM build_fieldcatalog.
  PERFORM build_layout.
  PERFORM display_alv_report.


*&---------------------------------------------------------------------*
*&      Form  BUILD_FIELDCATALOG
*&---------------------------------------------------------------------*
*       Build Fieldcatalog for ALV Report
*----------------------------------------------------------------------*
*제목을 붙이는 작업
FORM build_fieldcatalog.

  fieldcatalog-fieldname   = 'MANDT'.
  fieldcatalog-seltext_m   = 'Client'.
  fieldcatalog-col_pos     = 0.
  fieldcatalog-outputlen   = 10.
  APPEND fieldcatalog TO fieldcatalog.
  CLEAR  fieldcatalog.

  fieldcatalog-fieldname   = 'CARRID'.
  fieldcatalog-seltext_m   = 'Airline Code'.
  fieldcatalog-col_pos     = 1.
  APPEND fieldcatalog TO fieldcatalog.
  CLEAR  fieldcatalog.

  fieldcatalog-fieldname   = 'CARRNAME'.
  fieldcatalog-seltext_m   = 'Airline name'.
  fieldcatalog-col_pos     = 2.
  APPEND fieldcatalog TO fieldcatalog.
  CLEAR  fieldcatalog.

  fieldcatalog-fieldname   = 'CURRCODE'.
  fieldcatalog-seltext_m   = 'Local currency of airline'.
  fieldcatalog-col_pos     = 3.
  APPEND fieldcatalog TO fieldcatalog.
  CLEAR  fieldcatalog.

  fieldcatalog-fieldname   = 'URL'.
  fieldcatalog-seltext_m   = 'Airline URL'.
  fieldcatalog-col_pos     = 4.
  APPEND fieldcatalog TO fieldcatalog.
  CLEAR  fieldcatalog.
ENDFORM.                    " BUILD_FIELDCATALOG


*&---------------------------------------------------------------------*
*&      Form  BUILD_LAYOUT
*&---------------------------------------------------------------------*
*       Build layout for ALV grid report
*----------------------------------------------------------------------*
FORM build_layout.

  gd_layout-no_input          = 'X'.
  gd_layout-colwidth_optimize = 'X'.
  gd_layout-zebra = 'X'.

ENDFORM.                    " BUILD_LAYOUT


*&---------------------------------------------------------------------*
*&      Form  DISPLAY_ALV_REPORT
*&---------------------------------------------------------------------*
*       Display report using ALV grid
*----------------------------------------------------------------------*
FORM display_alv_report.
  gd_repid = sy-repid.
  CALL FUNCTION 'REUSE_ALV_GRID_DISPLAY'
    EXPORTING
      i_callback_program = gd_repid
      is_layout          = gd_layout "위에 붙인 3가지 옵션(build_layout)
      it_fieldcat        = fieldcatalog[] "필드별 제목 넣었던 거
      i_save             = 'X'
    TABLES
      t_outtab           = it_scarr "내가 담은 테이블 출력
    EXCEPTIONS
      program_error      = 1
      OTHERS             = 2.
  IF sy-subrc <> 0.
* MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
*         WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
  ENDIF.


ENDFORM.                    " DISPLAY_ALV_REPORT


*&---------------------------------------------------------------------*
*&      Form  DATA_RETRIEVAL
*&---------------------------------------------------------------------*
FORM data_retrieval.

  SELECT mandt carrid carrname currcode url
   UP TO 10 ROWS
    FROM scarr    "항공사 테이블
    INTO TABLE it_scarr.

ENDFORM.                    " DATA_RETRIEVAL

코드 구역별 설명

1) 데이터 선언부

!abap
REPORT Z2WEEK_ALV000_SCARR.

TABLES:     scarr.

TYPE-POOLS: slis.                

*Data Declaration: 데이터 담기 (엑셀에 첫 행 구성)
*----------------
TYPES: BEGIN OF t_scarr,
  mandt     TYPE scarr-mandt,
  carrid    TYPE scarr-carrid,
  carrname  TYPE scarr-carrname,
  currcode  TYPE scarr-currcode,
  url       TYPE scarr-url,
 END OF t_scarr.
 
 *it_scarr로 표를 만든거임. internal-table
DATA: it_scarr TYPE STANDARD TABLE OF t_scarr INITIAL SIZE 0.

*ALV data declarations
DATA: fieldcatalog TYPE slis_t_fieldcat_alv WITH HEADER LINE,
      gd_tab_group TYPE slis_t_sp_group_alv,
      gd_layout    TYPE slis_layout_alv,
      gd_repid     LIKE sy-repid.

- 프로그램 이름은 `Z2WEEK_ALV000_SCARR`

- `scarr`라는 테이블 사용

- `slis`는 ALV 출력을 위해 SAP가 제공하는 타입 풀. fieldcatalog, layout, 그룹핑 등 ALV 관련 구조와 테이블 타입들이 정의되어 있음

- `BEGIN OF ... END OF` 구문은 구조체(structure) 타입을 정의
=> `scarr` 테이블의 일부 필드인 `mandt`, `carrid`, `carname`, `currcode`, `url`을 사용하여, 한 행을 표현하는 `t_scarr` 구조 타입 정의

- `it_scarr`는 `t_scarr` 구조를 행으로 갖는 내부 테이블

- `fieldcatalog`는 `slis_t_fieldcat_alv` 타입의 내부 테이블

- `slis_t_fieldcat_alv`는 출력할 필드의 속성을 정의하는 데 사용됨

- `gd_tab_group`은 필드를 논리적으로 그룹핑하는 데 사용 (이 프로그램에서는 선언만 되고 사용은 x)

- `gd_repid`는 현재 실행중인 프로그램 이름을 담기 위해 `sy-repid`와 같은 타입으로 선언된 변수

- `sy`에 하이픈(-)으로 접근하면, 시스템 변수 사용 가능

2) 실행부 `START-OF-SELECTION`

!abap
*Start-of-selection.
START-OF-SELECTION.

  PERFORM data_retrieval.
  PERFORM build_fieldcatalog.
  PERFORM build_layout.
  PERFORM display_alv_report.

- 실행부.
- 검색화면이 없는 경우, PERFORM 문을 통해 로직이 순차적으로 실행됨
- 검색화면이 있는 경우, 검색화면에서 실행부분을 누르면 그 다음 로직이 순차적으로 실행됨

3) 서브루틴 `data_retrieval`

!abap
*&---------------------------------------------------------------------*
*&      Form  DATA_RETRIEVAL
*&---------------------------------------------------------------------*
FORM data_retrieval.

  SELECT mandt carrid carrname currcode url
   UP TO 10 ROWS
    FROM scarr    "항공사 테이블
    INTO TABLE it_scarr.

ENDFORM.                    " DATA_RETRIEVAL

- scarr 테이블에서 `mandt` ~ `url` 필드 조회하여, 미리 선언해둔 내부 테이블 `it_scarr`에 최대 10개 행을 한 번에 일괄 주입함

4) 서브루틴 `build_fieldcatalog`

!abap
*&---------------------------------------------------------------------*
*&      Form  BUILD_FIELDCATALOG
*&---------------------------------------------------------------------*
*       Build Fieldcatalog for ALV Report
*----------------------------------------------------------------------*
*제목을 붙이는 작업
FORM build_fieldcatalog.

  fieldcatalog-fieldname   = 'MANDT'.
  fieldcatalog-seltext_m   = 'Client'.
  fieldcatalog-col_pos     = 0.
  fieldcatalog-outputlen   = 10.
  APPEND fieldcatalog TO fieldcatalog.
  CLEAR  fieldcatalog.

  fieldcatalog-fieldname   = 'CARRID'.
  fieldcatalog-seltext_m   = 'Airline Code'.
  fieldcatalog-col_pos     = 1.
  APPEND fieldcatalog TO fieldcatalog.
  CLEAR  fieldcatalog.

  fieldcatalog-fieldname   = 'CARRNAME'.
  fieldcatalog-seltext_m   = 'Airline name'.
  fieldcatalog-col_pos     = 2.
  APPEND fieldcatalog TO fieldcatalog.
  CLEAR  fieldcatalog.

  fieldcatalog-fieldname   = 'CURRCODE'.
  fieldcatalog-seltext_m   = 'Local currency of airline'.
  fieldcatalog-col_pos     = 3.
  APPEND fieldcatalog TO fieldcatalog.
  CLEAR  fieldcatalog.

  fieldcatalog-fieldname   = 'URL'.
  fieldcatalog-seltext_m   = 'Airline URL'.
  fieldcatalog-col_pos     = 4.
  APPEND fieldcatalog TO fieldcatalog.
  CLEAR  fieldcatalog.
ENDFORM.                    " BUILD_FIELDCATALOG

- 미리 선언된 `fieldcatalog`에 각 필드의 속성을 정의하여 추가한다.

- `fieldname`은 실제 데이터 테이블의 필드 이름

- `seltext_m`은 ALV 컬럼 헤더에 표시되는 텍스트(한글도 가능)

- `col_pos`는 ALV 컬럼의 출력 순서 (0부터 시작, 왼쪽부터)

- `APPEND fieldcatalog TO fieldcatalog`에서 첫번째 `fieldcatalog`는 행(work area), 두번째는 테이블을 의미한다. 따라서 테이블에 행을 주입한다. 이후 fieldcatalog(행)을 `clear`하여 다음 행 (work area) 주입 전에 값 초기화

5) 서브루틴 `build_layout`

!abap
*&---------------------------------------------------------------------*
*&      Form  BUILD_LAYOUT
*&---------------------------------------------------------------------*
*       Build layout for ALV grid report
*----------------------------------------------------------------------*
FORM build_layout.

  gd_layout-no_input          = 'X'.
  gd_layout-colwidth_optimize = 'X'.
  gd_layout-zebra = 'X'.

ENDFORM.                    " BUILD_LAYOUT

- ALV 그리드 출력 시 사용될 레이아웃(`gd_layout`) 설정 값을 지정하는 작업

- `no_input = 'X'` : ALV 그리에서 셀 수정 불가

- `colwidth_potimize = 'X'` : 컬럼 너비 자동 조정

- `zebra = 'X'` : 짝수/홀수 행에 색상 차이 주어 가독성 향상

6) 서브루틴 `display_alv_report`

!abap
*&---------------------------------------------------------------------*
*&      Form  DISPLAY_ALV_REPORT
*&---------------------------------------------------------------------*
*       Display report using ALV grid
*----------------------------------------------------------------------*
FORM display_alv_report.
  gd_repid = sy-repid.
  CALL FUNCTION 'REUSE_ALV_GRID_DISPLAY'
    EXPORTING
      i_callback_program = gd_repid
      is_layout          = gd_layout "위에 붙인 3가지 옵션(build_layout)
      it_fieldcat        = fieldcatalog[] "필드별 제목 넣었던 거
      i_save             = 'X'
    TABLES
      t_outtab           = it_scarr "내가 담은 테이블 출력
    EXCEPTIONS
      program_error      = 1
      OTHERS             = 2.
  IF sy-subrc <> 0.
* MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
*         WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
  ENDIF.


ENDFORM.                    " DISPLAY_ALV_REPORT

- ALV 리스트를 그리드 형태로 출력 (`REUSE_ALV_GRID_DISPLAY` 함수 모듈 이용)

- 출력에 필요한 요소를 `EXPORTING`과 `TABLES` 파라미터로 전달

1) 프로그램 이름 : `sy-repid`로 프로그램 이름을 가져올 수 있음. 이를 `gd_repid` 변수에 담아 전달

2) 레이아웃 옵션 : `build_layout` 서브루틴에서 구성한 `gd_layout` 구조체 사용

3) 데이터 : `build_fieldcatalog` 서브루틴에서 구성한 `fieldcatalog[]` 테이블 전체 전달

4) 테이블 : `data_retrieval` 서브루틴에서 조회한 결과인 실제 데이터가 담긴 내부 테이블 `it_scarr`

정리

ALV 리포트는 데이터 + 필드 정의 + 화면 설정 + 출력 호출 흐름으로 구성된다.

이번 포스팅에서는

1) 필요한 데이터를 먼저 불러오고,

2) 내부 테이블과 행(구조체) 개념을 이해하고,

3) 필드를 어떻게 ALV에 넣는지

정리해보았다.

원하는 데이터를 어떻게 선언하고 어떻게 다뤄야 ALV에서 출력이 되는지를 이해하는 것이 가장 중요한 것 같다.

웹과 React Native에서 CORS는 어떻게 다를까? (+2024년 12월 근황)

안다희 — Mon, 16 Dec 2024 15:59:00 +0900

본론으로 들어가기 전, 근황을 먼저 공유하겠다!

근황

2024년 11월부터 한국어능력시험 모의테스트 플랫폼 프로젝트 [TopikOn]에서 프론트엔드를 맡고있고, 2025년 1월 출시를 목표로 하고있다. [나를 포함한 프론트 2명 + 백엔드 1명 + 디자이너 1명 + 기획자 1명 + 풀스택/기획/매니저 1명] = 총 6명과 함께한다.

모두가 리모트로 일하지만 가끔은 게더를 켜놓고 하루종일 같이 있는 기분을 느끼며 코딩할 때도 있다. 덕분에 밴쿠버에서 외롭지 않게 작업하고 있다ㅎㅎ

기술스택은 다음과 같다.

- 프론트엔드: React Native + Next.js

- 백엔드: NestJS

React Native로는 이미 [루빗]에서 서비스 운영을 경험하고 [패스트캠퍼스 강의](접속 안되면 이 링크)까지 촬영해보았지만,

Next.js를 활용한 서비스 개발은 처음이라 웹에 관련된 지식이 부족함을 느끼고 있다.

그래서 아주 기본이 되는 개념부터 실제 프로젝트를 진행하면서 발생하는 문제까지 다양한 주제로 글 발행을 할 예정이다.

단순히 개념을 나열하기보단 현업에서의 연관성을 중심으로 작성한다.

오늘은 웹과 React Native에서의 CORS 차이에 대해 짧게 다뤄본다.

CORS (Cross-Origin Resource Sharing)

브라우저 보안 정책을 이해할 때 기본이 되는 개념이다.

CORS는 동일 출처 정책(Same-Origin Policy)으로 인해 다른 출처 간의 요청이 제한되는 것을 해결하고 안전하게 리소스를 공유하는 방법을 제공한다.

우리 프로젝트의 백엔드는 어떻게 되어있을까?

와일드카드(*)를 사용하여 모든 출처가 허용되어있다. 그래서 팀원에게 질문했다.

편의를 위해 허용되어있겠다만, 제대로 처리한다면 클라이언트의 도메인만 처리되어야 한다.

예를 들어 프론트 웹뷰에서 요청하는 도메인이 https://www.yourapp.com이라면 아래와 같이 허용할 도메인을 배열에 추가하여 화이트리스트에 등록한다.

app.enableCors({
  origin: ["https://www.yourapp.com"],
  ...
});

하지만 웹 클라이언트가 로컬호스트 환경에서 서버로 API를 테스트해야할 땐 문제가 될 것이다.

그럴 땐 프록시(proxy)를 사용해 Header의 Host를 수동으로 요청하여 서버가 허용한 도메인에서 보낸 것처럼 처리할 수 있다. (프로덕션 환경에서는 추천하지 않음.)

그리고 서버에서는 API키, JWT토큰 등의 추가 인증방식을 통해 클라이언트의 요청을 검증하는 등 다중 보안 레이어를 적용하는 것이 바람직하겠다.

그런데 또 하나 생기는 궁금증.

React Native에서 서버에 요청하는 건 CORS의 영향을 받지 않는걸까?

그렇다. React Native는 웹 애플리케이션처럼 브라우저 환경이 아니라 네이티브 환경에서 실행되기 때문에 요청에 Origin 헤더가 포함되지 않는다. 브라우저가 아니므로 출처(Origin)라는 개념이 적용되지 않아 CORS 검사를 수행할 필요가 없는 것이다.

대신 네트워크 라이브러리(fetch, axios)를 통해 요청이 직접 서버로 전달된다. 하지만 서버가 화이트리스트 도메인만 허용한다면, 추가적인 인증방식을 통해 검증이 필요하겠다. 가장 많이 쓰는 JWT토큰처럼.

마무리

Native 애플리케이션과는 달리, 웹 애플리케이션을 개발할 때는 브라우저의 보안 모델과 동작 원리에 대한 이해가 필수다.

'동일 출처 정책(Same-Origin Policy)'과 이를 대응 하기 위한 CORS에 대해 정확히 알고 실제 프로덕트에서 디버깅, 프록시, 그리고 보안 인증 방식(JWT, API 키 등)과 같은 실전 기술을 활용하여 브라우저 보안을 극복해야한다.

오늘은 여기서 끝!

Vanilla JS로 SPA 화면전환 구현해보기 (feat. 프레임워크는 소중하다)

안다희 — Fri, 18 Oct 2024 06:50:50 +0900

순수 Valnilla JS를 사용해 가계부 웹페이지를 만드는 프로젝트를 진행하고 있습니다.

JS만을 사용하다보니, Next.js같은 프레임워크에서 제공하는 기능들을 직접 구현해보는 기회가 되었어요.

아무래도 실무에서는 프레임워크를 사용할 확률이 훨씬 높겠지만, 프레임워크에서 어떤 부분들이 개발자의 수고를 덜어주는지 안다면 작동원리를 한층 깊게 이해하며 사용할 수 있게됩니다.

✅그래서 오늘은! JavaScript만으로 SPA를 직접 만들어보고 작동원리를 이해해보는 시간을 가져볼게요.

SPA 화면 전환

오늘 만들어 볼 가계부 UI입니다.

(Figma에서 expense tracker를 검색하면 나오는 템플릿을 사용했어요.)

페이지는 3개입니다.

1. Home: 지출 내역을 날짜별로 보는 페이지

2. Add/Edit: 지출 내역을 추가/수정하는 페이지

3. Report: 지출 분석 내역을 보는 페이지

각 화면은 아래 URL로 접근하기로 합니다.

1. Home: `/`

2. Add/Edit: `/add`

3. Report: `/report`

1. Home 2. Add/Edit 3. Report

아주 간단히 만들어둔 각 페이지의 진입화면입니다.

화면 전환은 SPA(Single Page Application) 방식으로 진행합니다.

SPA란?
- 다른 페이지로 이동할 때마다 전체 페이지를 다시 로드하는 대신, 처음부터 하나의 HTML 페이지만 로드하는 방식.
- 빠른 페이지 전환을 통해 부드러운 UX를 제공하며 데이터 로드에 최적화되어있음.

먼저 Home에서 Add/Edit으로 화면을 이동해봅시다.

Next.js 로 화면 전환

import Link from 'next/link';

export default function Home() {
  return (
    ...
    <Link href="/add">
      <a>Go to Add/Edit Page</a>
    </Link>
    ...
  );
}

Next.js의 Link를 사용하면 간편하게 SPA 방식의 화면 전환이 가능해요.

각 화면에 해당하는 파일만 추가로 만들어두면 끝이에요!

JavaScript로 화면 전환

<a href="./add.html">Go To Add/Edit Page</a>

하지만 JavaScript로 SPA 방식의 화면 전환을 한다면 아래와 같은 세팅이 필요합니다.

1. index.html 세팅

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Expense Tracker</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <script type="module" src="App.js"></script>

    <div>
      <!-- 1. Home -->
      <section id="homeSection" class="section">
        <h2 class="text-2xl mb-4">1. Home</h2>
        <br />

        <a href="/add"> <button>Go To Add/Edit Page</button></a>
        <div>
          <a href="/report">Go To Report Page</a>
        </div>
      </section>

      <!-- 2. Add/Edit -->
      <section id="addSection" style="display: none" class="section">
        <h2 class="text-2xl mb-4">2. Add/Edit</h2>
      </section>

      <!-- 3. Report -->
      <section id="reportSection" style="display: none" class="section">
        <div>
          <h2 class="text-2xl mb-4">3. Report</h2>
        </div>
      </section>
    </div>
  </body>
</html>

우선 `index.html`에 필요한 화면 기본 구조를 HTML로 작성합니다.

`id`가 `homeSection` / `addSection` / `reportSection` 인 부분 보이시죠!

이렇게 한곳에 모두 작성을 해두고, 화면 전환이 필요할 때마다 해당 section의 style을 `display: none;`에서 `display: block;`으로 변경해주어 페이지 전환이 이루어지도록 하는 것입니다.

2. App.js 세팅

// route page
const routes = [
  {
    path: "/",
    sectionId: "homeSection",
  },
  {
    path: "/add",
    sectionId: "addSection",
  },
  {
    path: "/report",
    sectionId: "reportSection",
  },
];

// be global function by appending `window.`
window.navigate = (url) => {
  window.history.pushState(null, null, url);
  App();
};

// render page by url & state is maintained without refreshing.
const App = async () => {
  // hide all sections
  document.querySelectorAll(".section").forEach((section) => {
    section.style.display = "none";
  });

  // find page to show
  const pageMatches = routes.map((route) => ({
    route: route,
    isMatch: window.location.pathname === route.path,
  }));
  const match = pageMatches.find((pageMatch) => pageMatch.isMatch);
  if (match) {
    document.getElementById(match.route.sectionId).style.display = "block";
  }
};

// Fired when the HTML is fully parsed and the DOM is completely built.
document.addEventListener("DOMContentLoaded", () => {
  // add click event listener tag "<a>"
  document.body.addEventListener("click", (e) => {
    const target = e.target.closest("a");
    if (!(target instanceof HTMLAnchorElement)) return;

    e.preventDefault(); // prevent default page refresh
    navigate(target.href); // change url without refresh = SPA(Single Page Application)
  });

  App();
});

// Listen for 'popstate' events (triggered when the user navigates using the browser's back/forward buttons)
// This ensures the app correctly updates the view when the history state changes without a full page reload.
window.addEventListener("popstate", App);

이 모든 코드가 화면 전환을 위한 작업 코드입니다 하핫.

하나하나 자세히 볼까요?

2-1. routes

const routes = [
  {
    path: "/",
    sectionId: "homeSection",
  },
  {
    path: "/add",
    sectionId: "addSection",
  },
  {
    path: "/report",
    sectionId: "reportSection",
  },
];

우선 `routes`는, 해당 경로와 매칭되는 `sectionId`를 미리 정의한 배열이에요.

`url`에 따라 html에서 미리 세팅해둔 `section`을 보여줄 때 사용됩니다.

2-2. navigate

window.navigate = (url) => {
  window.history.pushState(null, null, url);
  App();
};

`navigate`는 화면을 전환할 때 사용되는 함수에요.

JavaScript의 `History API`를 사용하여, 페이지를 새로고침하지 않고도 브라우저의 URL을 변경하고 브라우저의 뒤로가기/앞으로가기 기능을 사용할 수 있어요.

`window.`를 붙여준 이유는, navigate를 전역 함수로 사용하기 위함입니다.

App.js 파일은 `<script type="module" scr="App.js"></script>` 이렇게 import하면서 모듈스코프를 가진 파일이 됩니다.

`window.`가 붙지 않는다면, navigate 함수는 모듈스코프(파일스코프) 내에 존재하기 때문에, `navigate` 함수가 사용되는 이벤트 핸들러에서는 참조가 불가능해요. 이벤트 핸들러에서 DOM 트리로부터 트리거된 함수는 전역스코프를 사용하기 때문이에요.

기껏 모듈스코프인 파일을 만들었는데 전역함수로 만드는 것은 좋지 않은 방법인 것 같지만, 일단은 SPA가 어떻게 동작하는지를 이해하기 위해 한 파일에 넣기로 하고 이어서 봅시다!

▷ 전역스코프와 모듈스코프(파일스코프)의 차이점 더 자세히 알아보기

2-3. App()

// render page by url & state is maintained without refreshing.
const App = async () => {
  // hide all sections
  document.querySelectorAll(".section").forEach((section) => {
    section.style.display = "none";
  });

  // find page to show
  const pageMatches = routes.map((route) => ({
    route: route,
    isMatch: window.location.pathname === route.path,
  }));
  const match = pageMatches.find((pageMatch) => pageMatch.isMatch);
  if (match) {
    document.getElementById(match.route.sectionId).style.display = "block";
  }
};

`App.js`에서는 `section` class를 가진 요소를 모두 `display: none;`으로 바꾼 뒤,

현재 URL에 해당하는 요소만 다시 `display: block;`으로 바꿔주는 작업이 진행돼요.

2-4. click event listener

// Fired when the HTML is fully parsed and the DOM is completely built.
document.addEventListener("DOMContentLoaded", () => {
  // add click event listener tag "<a>"
  document.body.addEventListener("click", (e) => {
    const target = e.target.closest("a");
    if (!(target instanceof HTMLAnchorElement)) return;

    e.preventDefault(); // prevent default page refresh
    navigate(target.href); // change url without refresh = SPA(Single Page Application)
  });

  App();
});

`DOMContentLoaded`는 브라우저에서 HTML의 구조가 완전히 로드되고 파싱되었을 때 발생하는 이벤트에요.

DOM 요소들이 준비가 되었으니 요소에 이벤트를 붙일 준비가 된 것이죠.

우리는 `<a>` 클릭으로 화면전환을 할 것이기 때문에, 이곳에 이벤트리스너를 등록해줍니다.

2-5. popstate event listener

// Listen for 'popstate' events (triggered when the user navigates using the browser's back/forward buttons)
// This ensures the app correctly updates the view when the history state changes without a full page reload.
window.addEventListener("popstate", App);

마지막으로, 브라우저의 뒤로가기/앞으로가기 버튼을 눌렀을 때 앱의 상태를 업데이트하는데 사용되는 `popstate` 리스너 등록입니다.

이 이벤트가 발생할 때마다 `App()`함수가 호출되기 때문에, URL에 맞게 다시 렌더링/업데이트가 됩니다.

2-6. 정리

페이지로드가 완료되어 DOM요소가 준비되면 `<a>`태그에 직접 클릭이벤트를 등록하여, 클릭 시 페이지가 새로고침되지 않고 `navigate`함수가 동작되도록 합니다.

`navigate`함수에서는 `history.pushState()`를 사용하여 url을 수정하고 `App`함수를 호출합니다.

App함수에서는 현재 url에 맞는 section만을 동적으로 렌더링합니다.

이렇게 JavaScript만으로 SPA 방식의 페이지 전환을 구현하였습니다!

Next.js와 같은 프레임워크를 사용한다면 전부 생략되었을 과정을 직접 작성해보니,새로고침 없이 URL이 변경되면서 동적인 페이지 상태를 유지하는 SPA의 원리를 알 수 있었습니다.

직접 SPA를 구현하는 것이 실무에서는 드물겠지만, 단순히 프레임워크를 잘 활용하는 것보다 이것을 왜 쓰는지 이해하면서 활용할 줄 아는 것이 훨씬 중요합니다.

오늘의 포스팅은 마치도록 하겠습니다. 감사합니다:)

WebP 적용하기

안다희 — Fri, 27 Oct 2023 18:38:09 +0900

React Native는 webp를 지원하지만 , 애니메이션이 있는 webp는 지원하지 않는다.

라이브러리의 힘을 빌리자.

1. react-native-webp-format 설치

2. Android 추가 설정

Add the following dependencies to android/app/build.gradle:

dependencies {
  ...
    implementation 'com.facebook.fresco:webpsupport:2.5.0'
    // Optionally, to display animated WebP images, you have to add:
    implementation 'com.facebook.fresco:animated-webp:2.5.0'
  ...
}

3. iOS 추가 설정

- 라이브러리에 설명되어 있지 않다. 추가로 설정해주자!

Go to your ios -> [App name folder] -> Edit AppDelegate.m

#import "SDImageCodersManager.h"
#import <SDWebImageWebPCoder/SDImageWebPCoder.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // . . .

    [SDImageCodersManager.sharedManager addCoder:SDImageWebPCoder.sharedCoder];

    // . . .
}

4. 결과

잘 띄워진다 유후!

React Native Flipper 사용 시, Android 에뮬레이터 인식하지 못할 때

안다희 — Thu, 14 Sep 2023 11:59:25 +0900

해결책

Android SDK location path를 알맞게 변경해주면 된다.

검색 키워드

react native flipper not recognize android emulator

출처

https://stackoverflow.com/questions/71744103/android-emulator-unable-to-connect-to-flipper

Android Emulator unable to connect to Flipper

I followed the instructions here https://fbflipper.com/docs/getting-started/android-native/#diagnostics. I added the 3 dependencies in build.gradle, and added the application class with the same

stackoverflow.com

React Native에서 설정된 언어를 Next.js에 전달하기

안다희 — Tue, 1 Aug 2023 18:39:28 +0900

React Native에서 Next.js로 웹뷰 이동을 할 때,

React Native에 미리 세팅된 언어를 Next.js에도 똑같이 적용을 하고 싶다.

1) localStorage에 저장해서 클라이언트 렌더링 때 context 등의 전역변수로 관리한다.

- 클라이언트 렌더링 할 때서야 언어를 감지하므로 UX 상 좋지 않다.

2) Next.js는 서버사이드 렌더링이기 때문에 서버에서 미리 유저의 언어를 알아낸다.

- 이거다! HTTP Aceept-Language 헤더에 기반해 사용자의 local을 감지하면 된다.

// RN 코드

import WebView from "react-native-webview";

<WebView
    ...
    source={{
      uri: "이동할 URL",
      headers: {
        'Accept-Language': `${사용자 언어}`, // ex) "ko", "en"
      },
    }}
/>

// next.js 코드
// next-18next.config.js

/** @type {import('next-i18next').UserConfig} */
module.exports = {
  i18n: {
    defaultLocale: "en",
    locales: ["en", "ko", "es"], // 영어, 한국어, 스페인어 지원
    localeDetection: true, // 디폴트 값. 이것이 true여야 'Accept-Language'에 있는 locale을 감지한다.
  },
};

이것이 SSR이로구나

참고

https://velog.io/@jeonbyeongmin/Next.js%EB%A1%9C-%EB%8B%A4%EA%B5%AD%EC%96%B4i18n-%EC%A0%9C%EA%B3%B5%ED%95%98%EA%B8%B0

Next.js로 다국어(i18n) 제공하기

Next.js로 다국어를 적용하면서 공부하고 고민했던 흔적들에 대해서 설명합니다.

velog.io

https://jake-seo-dev.tistory.com/483

HTTP 헤더란? (Http headers)

HTTP 헤더란? HTTP 통신의 핵심이 되는 중요한 컴포넌트 중 하나이다. 요청 혹은 응답의 필수 구성요소이다. 클라이언트와 서버 간의 메세지 전송 및 해석을 돕기 위해 메타데이터와 추가 정보를

jake-seo-dev.tistory.com

https://nextjs.org/docs/pages/building-your-application/routing/internationalization

인프런 <AWS 입문자를 위한 강의> 강의메모

안다희 — Sat, 29 Jul 2023 20:05:31 +0900

AWS(Amazon Web Service) 입문자를 위한 강의 - 인프런 | 강의

요즈음 회사 및 다양한 프로젝트에서 종종 사용되는 AWS 서비스들의 핵심 이론을 배우며 뿐만 아니라 함께 따라하는 실습을 통하여 AWS를 온전히 내것으로 만들자!, [사진] AWS 핵심 기술, 기본기부

www.inflearn.com

EBS: Elastic Block Storage

- 저장 공간이 생성되며, EC2 인스턴스에 부착된다.

- 디스크 볼륨 위에 File System이 생성된다.

- EBS는 특정 Availability Zone에 생성된다.

EBS 볼륨 타입

<<SSD군>>

1) General Purpose SSD (GP2)

2) Provisioned IOPS SSD (IO1)

<<Magnetic/HDD군>>

3) Throughput Optimizaed HDD (ST1)

4) CDD HDD (SC1)

5) Magnetic (Sandard)

ELB: Elastic Load Balancers

- 수많은 서버의 흐름을 균형있게 흘려보내는데 중추적인 역할을 함

- 하나의 서버로 traffic이 몰리는 병목현상(bottleneck) 방지

- Traffic의 흐름을 Unhealty instance -> healthy instance로

1. Application Load Balancer: OSI Layer7에서 작동됨

-> HTTP, HTTPS와 같은 traffic의 load balancing에 가장 적합

-> 고급 request 라우팅 설정을 통하여 특정 서버로 request를 보낼 수 있음

2. Network Load Balancer: OSI Layer4에서 작동됨

-> 매우 빠른 속도를 자랑하며 Production 환경에서 종종 쓰임

-> 극도의 performance가 요구되는 TCP traffic에서 적합

-> 초당 수백만개의 request를 아주 미세한 delay로 처리 가능

3. Classic Load Balancer: 현재 Legacy

---

Load Balancer Error: 504 Error

T.T

웹서버,데이터베이스 Layer에서 대부분 해결 가능.

X-Forwarded-For 헤더

Cloud Watch

- AWS 리소스 사용의 실시간 모니터링 기능 지원

- 다양한 이벤트들을 수집하여 로그파일로 저장

- 이벤트&알람 설정을 통해 SNS, AWS Lambda로 전송 가능

사용 용례 1

- Use Case: 매일 얼마나 많은 사용자들이 모바일 앱을 사용하는지 알고 싶음.

- Potential Issue: 특정날에 수많은 traffic이 몰릴 수 있어 병목현상이 생길 수 있음.

- Solution: 매일 traffic rate와 특정 버튼의 유저 클릭 횟수를 분석하여 더 효율적인 앱개발 가능.

사용 용례 2

- Use Case: 특정 시간대에 웹서버 상태를 점검하여 비용 절감 목표

- Potential Issue: 낮,밤에 따라 다른 서버의 성능 -> 똑같은 비용을 내면 비효율.

- Solution: 알람 설정을 통해 특정 threshold에 도달했을 때, 상황 보고해줌으로서 서버 management 가능.

Next i18n 적용하기

안다희 — Thu, 27 Jul 2023 17:18:25 +0900

https://www.npmjs.com/package/next-i18next

next-i18next

The easiest way to translate your NextJs apps.. Latest version: 14.0.0, last published: a month ago. Start using next-i18next in your project by running `npm i next-i18next`. There are 125 other projects in the npm registry using next-i18next.

www.npmjs.com

1. 그대로 따라하면 된다!!

2. 주의할 점은, 페이지 level에서 getStaticProps를 추가하면, 해당 파일에서는 useTranslation을 사용하지 못한다는 점이다.

3. useTranslation을 매 파일마다 import해서 쓰기 귀찮으니까, custom hook을 하나 만들어줬다.

// use-t.ts
import { useTranslation } from "next-i18next";

export const useT = () => {
  const result = useTranslation("common");

  return {
    ...result,
  };
};

// usage
export default function Category(props) {
  const { t } = useT();

  return (
      ...
      <Typography.P14_Bold
        content={t("loot_box")}
        color={...}
      />
      ...
	
  )
}

인프런 <스타트업과 함께하는 AWS 클라우드> 강의기록

안다희 — Thu, 27 Jul 2023 14:54:59 +0900

✅섹션 0: 클라우드를 사용해야 하는 이유

Security Group

- 서버를 만들 땐 방화벽이 있어야 한다.

<보안그룹 만들기>

- SSH

- HTTP

- HTTPS

웹이니까.

인스턴스 내부로 접근하려면?

- connect

- 그러나 쉘로도 접근해보기.

✅섹션 1: 로드밸런서 사용해보기

<ELB 설명>

- 가용영역(Availabilty Zone): 데이터센터.

- 리전(Region): 3개 이상의 가용역역을 논리적으로 묶음.

- 인스턴스를 여러개 사용하게 될텐데, 주소가 여러개인데 사용자의 트래픽을 받아 분산시켜줄거야.

- 로드밸런서는 가용영역을 최소 2개 이상 선택해야하는 이유: 한 가용영역이 문제가 생겨도, 다른 한쪽으로 버틸 수 있기 때문.

<로드밸런서 만들기>

1. 우선 HTTP, HTTPS rule 포함한 SecurityGroup 만들기

2. 로드밸런서 만들기 전, TargetGroup 만들기. 로드밸런서가 부하를 분산해주는건데, 아무 인스턴스에게 부하를 분산해주면 안되니까!

그래서 정해진 인스턴스에게 분산해주기 위해 그룹핑한다.

3. 이제 로드밸런서를 만들자.

인터넷을 통해 트래픽을 받아서 전달하기 때문에, internet-facing 체크.

네트워크가 중요한 부분.

서울리전은 가용영역이 4개.

여기서 2개! 데이터센터를 2개 쓰겠다는 이야기야. (하나 붕괴되어 마비되는 것 방지)

내가 만든 Target Group에 라우팅 시켜주겠다!

Provisining: 할당. 장비를 공급받는중.

근데 아직, 지정한 TargetGroup에 인스턴스가 없어서, LB에 접근해봤자 의미 없다.

✅섹션 2: 오토스케일링 사용해보기

- ELB가 부하 분산하는 건 알겠는데, 필요한 건 자동으로 서버가 늘어나는 것.

- AutoScaling을 해보자!

- 보통 CPU 사용률을 기준으로 자동으로 늘어나고 줄어든다.

- Lucky Instance의 이미지가 하나 필요하다. Action에서 Create Image

- Images - AMIs 들어가면 만든 이미지가 보인다.

- 이건, 웹서버 이미지를 뜬거야.

- 웹서버랑 앱서버랑 있는 이것을 자동으로 오토스케일링이 늘게 해야하는데, 방금 만든 이미지를 넣어야 해.

- 이 때 템플릿을 만들어. EC2 launch templates. 어떤 인스턴스,운영체제,이미지 를 설정하는거야.

- 버전이 계속 올라간다. 처음은 1로 세팅하자.

- HTTP, HTTPS, SSH 있는 Security Group 선택.

- 만든 Launch Template을 가지고, Auto Scaling을 만들거야.

- VPC는 아직 배우지 않았으니 패스.

- 가용영역은 전과 같이 a,b 똑같이 선택해야함!

- 아까 만든 타겟그룹 선택!!

- 일반적으로, 오토스케일링 그룹과 타겟 그룹이 똑같아!!

- 부하가 많이 없어도 테스트 가능하도록, 일단 CPU 점유율의 Target Value는 20으로 잡는다.

- 이제 로드밸런서가 정말 분산을 시켜주고 있는지를 보자.

- 만든 로드밸런서의 주소로 가보자. 잘 뜬다.

자, 이제 인스턴스 하나를 타겟그룹에서 제외해볼거야.

- 타겟그룹에서 대상을 제외해야해.

- 왜 인스턴스를 직접 지우면 안되냐? 실제 사용자 중 지울 인스턴스를 쓰고있는 유저가 있을 수도 있으니까.

빠른 테스트를 위해, 시간을 300s -> 20s 로 바꾸자. 원래는 5분이라 조금 기다리는게 맞다~

draining이 완료되면, 이제 인스턴스에서 직접 삭제할 수 있다.

근데 로드밸런서에서는 최소 2개여야 하기에, 자동으로 늘어나는지를 보면돼.

하나가 자동으로 만들어지고 있다!!!

이제 다시 2개가 되었으니, 과부하를 걸어서 분산이 잘되는지를 볼까?

내부로 직접 들어가서 CPU 과부하를 걸어버릴 것이다.

script실행해서 반복문을 계속 돌려볼거야!

CPU 점유율 모니터링하고, 인스턴스 늘어나는 것을 볼 수 있음.

로드밸런서, 타겟그룹, 오토스케일링, AMI(deregister), AMI Snapshot, Launch Template, Security Group

✅섹션 3: 관계형 데이터 베이스 사용해보기

RDS: Relational Database Service

- MariaDB로 만들어보자.

- 매일 스냅샷을 찍음.

- 인스턴스와 달리, DB는 오토스케일링

- 그래서 DB는 민감하게 모니터링해야해.

- 사용량이 올라가면 scale up 등의 조치를 취해야 해.

✅섹션 4: 도메인 연결하기, 도메인 HTTPS 인증하기

✅섹션 5: AWS의 네트워크를 이해해보기

- VPC: AWS에서 나만의 사설 네트워크를 만들어주는 서비스.

- VPC: 집에 있는 IP 공유기와 비슷해.

- 네트워크를 쪼개서 만들어야 해.

- VPC에서 쪼개진 영역을 subnet이라 하고, public과 private있다.

- 보안상, default VPC 사용은 권하지 않음.

CIDR

- IP주소를 관리하는 체계.

- 10.0.0.0/16 이면 16이 prefix.

- {prefix}번째 숫자까지 고정하겠다는 이야기.

- 10.0.0.0 을 2진수로 나타내면, 00001010.00000000.00000000.00000000 인데 여기서 앞에 16번째까지는 고정이고 나머지는 가변적이야.

- 그러면 2^8 * 2^8 = 2^16 개의 private ip를 사용할 수 있는 것.

Internet Gateway

- 위에서 만든 Public Subnet이, 그냥 만든다고 해서 외부에서 접근 가능한게 아니라, Internet gateway를 붙이고 Route Table 설정을 해야해.

- 하나 만들고 VPC에 달면 돼.

- 인터넷 게이트웨이 만들고, 인스턴스에 pulic ip가 할당되어 있어야 하고, route table을 설정해줘야 해.

VPC 만들기

1. Create VPC

2. Create Subnet

- 가용영역 a: Public 1, 10.0.0.0/24

- 가용영역 a - Private 1, 10.0.1.0/24

- 가용영역 b: Public 2, 10.0.2.0/24

- 가용영역 b: Private 2, 10.0.3.0/24

이제 Public Subnet을 외부에서 접근 가능하도록 Interent Gateway를 열어줄거야.

만들고 VPC 연결해주면 된다.

마지막으로, Route Table을 만들어서, Public Subnet들이 Internet Gateway를 통해 인터넷이 되도록 설정까지 해줘야 해.

기본적으로 VPC를 만들면 Route Table이 하나 있다.

Public Route Table 하나, Private Route Table 하나 만들 것이다.

Public RT - Routes - Edit routes

- 인터넷을 통해 들어오는 트래픽을 처리하고, 다시 나가야 하는데, 이걸 설정해줄거야.

- 0.0.0.0/0 은 모든 IP를 의미하는데, 모든 IP를 IG로 가게하면, 내부에서 돌아야 하는 패킷도 IG로 가는거야.

- 근데 라우팅 테이블은 적용 우선순위가 있어. Longest Prefix Match: Prefix 숫자가 클수록 네트워크 범위가 작기 때문에, 작은 것부터 적용됨. 그래서 내부에서 돌아야하는 것 빼고는 전부 IG로 간다~

이제 Private Subnet에서도 인터넷이 가능하도록 NAT Gateway를 만들거야~

NAT Gateway는, IP 공유기와 똑같은 역할을 해서, 고정 IP가 있어야 해.

NAT Gateway를 Public Subnet 1번,2번에 만들자. 다른 가용영역에 고장나도 다른 곳에서 사용 가능하게.

Route Table을 만들어서 Private Subnet의 인스턴스들이 NAT를 통해 인터넷을 할 수 있도록 설정해야해.

https://docs.aws.amazon.com/ko_kr/autoscaling/ec2/userguide/tutorial-ec2-auto-scaling-load-balancer.html

자습서: 조정 및 로드 밸런싱된 애플리케이션 설정 - Amazon EC2 Auto Scaling

인스턴스에 연결해야 하는 경우 Proceed without a key pair(키 페어 없이 계속)를 선택하지 마세요.

docs.aws.amazon.com

- NAT gateway, Elastic IP, VPC 지우기.

(좌) 원본 다이어그램 / (우) 직접 그린 다이어그램

그대로 카피하는 것이지만, 그래도 직접 그려보니 이해가 깊이 되었다.

이걸 설명할 수 있을 정도로도 연습해야 한다.

<질문창고>

1. 로드밸런서: 하나의 인스턴스에 대해서도 필요?

2. 서버를 만들면, 인스턴스, 로드밸런서, 오토스케일링, RDS, VPC 모든걸 세팅해줘야 하는 것?

Next 폴더 구조에 대한 고민: 관심분리

안다희 — Wed, 26 Jul 2023 02:19:19 +0900

기존 react native 프로젝트 구조는,

├── apollo
├── assets
│   ├── gf-asset
│   │   ├── collection
│   │   ├── roubisy
│   │   └── themes
│   ├── icons
│   ├── image
├── c_components
│   ├── analysis_stack
│   ├── atom
│   │   ├── icon
│   │   └── text
│   ├── home_stack
│   ├── molecules
│   ├── my_roubit_stack
│   ├── on_alarm_stack
│   ├── onboarding_stack
│   ├── organisms
│   ├── presenter
│   ├── setting_stack
│   ├── template
│   └── universal
├── c_containers
│   ├── analysis_stack
│   ├── home_stack
│   ├── my_roubit_stack
│   ├── on_alarm_stack
│   ├── onboarding_stack
│   ├── setting_stack
│   └── universal
├── c_screens
│   ├── analysis_stack
│   ├── home_stack
│   ├── my_roubit_stack
│   ├── on_alarm_stack
│   ├── onboarding_stack
│   ├── root_tab_stack
│   ├── setting_stack
│   └── universal
├── constants
├── context
├── hook
├── lang
├── navigation
├── recoils
├── types
└── utils

우선 screen,container,component로 대분류하고,

(`c_`를 붙인 이유는 screen,container,components 폴더를 모아서 보려고! prefix를 단 것이다.)

stack 별로 폴더를 구성했다.

특정 container에서 사용되는 hook은 전부 root에 있는 hook에 넣었는데,

이렇게 하니까 어떤 hook이 어디에서 관리되고, 어떤 hook이 글로벌하게 쓰이고 있는지 파악이 안되었다.

웹뷰를 도입하게 되어 새로 만든 웹용 레포지토리.

이곳은 폴더관리를 어떻게 해야하나 고민하던 중 아래 글을 보게 되었다.

https://betterprogramming.pub/how-to-structure-your-next-js-app-with-the-new-app-router-61bf2bf5a20d

How to Structure Your Next.js App With the New App Router

Learn how to organize your Next.js project using a feature-driven structure with the new App Router, allowing for greater flexibility and…

betterprogramming.pub

핵심은 관심분리다.

한 페이지를 구성할 때 쓰이는 component,hook 등은 모아놓자는 것이다.

. 
└── 앱/ 
    ├── ... 
    └── (인증)/ 
        ├── LogoutModal/ 
        │ ├── LogoutModal.tsx 
        │ ├── LogoutModal.test.tsx 
        │ ├── LogoutModal.stories.tsx 
        │ └── LogoutModal.module.css 
        ├── useAuth.ts 
        ├── User.ts 
        ├── 가입/ 
        │ └── page.tsx 
        └── 로그인/ 
            └── page.tsx

인증페이지가 있다면, 이곳에 필요한 LogoutModal, useAuth hook, User 관련 인터페이스(etc), 가입과 로그인 페이지 등을

(인증) 폴더 안에서 관리하겠다는 것이다.

물론 전역으로 쓰이는 것이 있다면 그것은 따로 폴더를 만들어서 관리하고!

이 핵심만 가지고 폴더 구조를 짜보려 한다.

참고

https://velog.io/@jodmsoluth/nextjs-%ED%8C%8C%EC%9D%BC%EA%B5%AC%EC%A1%B0

https://betterprogramming.pub/how-to-structure-your-next-js-app-with-the-new-app-router-61bf2bf5a20d

파일구조 예쁘게 보는 법: 파일트리 (tree)

안다희 — Wed, 26 Jul 2023 02:05:36 +0900

파일구조에 대한 블로그 글을 쓰려는데...

파일트리를 도출하는 방법이 궁금해졌다.

무슨 명령어 하나만 치면 나오는거겠지?

그러했다.

$ brew install tree

tree를 깔고,

$ tree

tree 명령어를 실행하면 된다.

원하는 폴더만 트리를 보고싶다면,

$ tree {폴더경로}

이렇게 사용하면 된다.

참 쉽다!!

참고

https://macinjune.com/all-posts/mac/tip/%EB%A7%A5unix-%ED%84%B0%EB%AF%B8%EB%84%90%EC%97%90%EC%84%9C-tree-command%EB%A1%9C-%ED%8A%B8%EB%A6%AC-%ED%98%95%EC%8B%9D%EC%9D%98-%ED%8C%8C%EC%9D%BC-%EA%B5%AC%EC%A1%B0-%EB%B3%B4%EA%B8%B0/

개념 정리: CSR, SSR, 돔트리, HOC, Hook

안다희 — Tue, 25 Jul 2023 19:10:29 +0900

CSR: Client Side Rendering
- 렌더링이 클라이언트 쪽에서 일어난다.
- 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다.

- 클라이언트는 그것을 받아 렌더링을 시작한다.

SSR

- SEO 최적화

- SSR이 서버 자원을 더 많이 사용한다.

돔트리

- 왜 hook이 바뀔 때 돔트리가 바뀌는건지

HOC: High Order Component

- 컴포넌트 로직 재사용을 위한 패턴

- HOC(Higher-Order-Components)은 컴포넌트를 개발하는 하나의 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다.

- 함수형 컴포넌트가 등장하고 나서는 거의 사용되지 않는다. 고차 컴포넌트 지옥에 빠질 수도 있기 때문.

- 고차 컴포넌트는 사이드 이펙트가 전혀 없는 순수 함수.

- 그냥 Custom Hook을 사용하자.

컴포넌트에 날개를 달아줘, 리액트 Higher-order Component (HoC) | VELOPERT.LOG

리액트 Higher-order Component (HOC) 코드를 작성하다보면, 자주 반복해서 작성하게 되는 코드들이 있습니다. 우리는 주로 그러한 것들을 함수화하여 재사용 하곤 하죠. 컴포넌트 또한 비슷하죠. 같은 U

velopert.com

Hook

- 클래스 컴포넌트에서만 사용할 수 있던 상태 변화와 라이프 사이클을 hook에서도 사용할 수 있다.

- 계층의 변화 없이 상태 관련 로직을 재사용 할 수 있다. (클래스 컴포넌트라면 HOC 지옥에 빠졌을 것)

- 간결한 코드 / 가독성 향상 / HOC 지옥 해결 / 불필요한 보일러플레이트 코드 제거

- 컴포넌트 사이에서 상태로직을 재사용하기 어렵다.

- Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다.

- 독립적인 테스트와 재사용 가능

- Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다.

참고

https://blog.hwahae.co.kr/all/tech/11631

https://hahahoho5915.tistory.com/52

https://react.dev/reference/react

https://surviveasdev.tistory.com/entry/React-hook%EC%9D%B4-%EB%82%98%EC%98%A8-%EC%9D%B4%EC%9C%A0%EC%99%80-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

https://overreacted.io/ko/a-complete-guide-to-useeffect/

[React Native] 기기에 맞게 폰트 사이즈 대응하는 방법!

안다희 — Thu, 20 Jul 2023 15:50:34 +0900

React Native에서 폰트 사이즈는 어떻게 관리할까?

그냥 피그마에서 본 폰트크기가 10이라면, fontSize: 10 으로 하면 될까?

기기에 맞게 대응해주는 방법이 있다.

물론 더 세세하게 나누자면,

디바이스의 가로가 (a~b)px: 8, (b~c)px: 10, (c~d)px: 12

이런식으로 나눌 수도 있겠다. 그러나 그렇게까지는 세세하게 나눈 상황은 아니라서,

우리는 폰트사이즈르 계산할 때 하나의 함수를 통하고, 그 안에서 PixelRatio를 이용하기로 한다.

PixelRatio란?

글꼴 크기에 대한 축척 비율을 반환합니다.
이 비율은 절대적인 글꼴 크기를 계산하는 데 사용되므로 이에 크게 의존하는 모든 요소는 이 비율을 사용해서 계산해야 합니다.

안드로이드: Settings > Display > Font Size 에서 설정된 사용자 기본 설정을 반영합니다.
iOS: Settings > Display & Brightness > Text Size 에서 설정된 사용자 기본 설정을 반영하며, Settings > Accessibility > Display & Font Size > Large Text에서도 값을 업데이트할 수 있습니다.

만약 글꼴 축척이 설정되지 않은 경우, 디바이스의 pixel ratio가 반환됩니다.

import { PixelRatio } from 'react-native';

export const font = (size: number) => {
  /*
  - 230720: `pixel(size)` 말고, size를 fontScale로 나눈다.
  - 폰트사이즈 참고 아티클: https://muhammadrafeh.medium.com/make-responsive-react-native-text-for-any-device-f8301b006694
  */
  return size / PixelRatio.getFontScale();
};

참고

https://muhammadrafeh.medium.com/make-responsive-react-native-text-for-any-device-f8301b006694

Make Responsive React Native Text for any device

As we faced problems related to text responsiveness in a way that sometimes it looks bigger on low end devices and smaller on modern…

muhammadrafeh.medium.com

https://reactnative.dev/docs/pixelratio

[React Native] react native typescript 환경에서 env 파일 사용하기

안다희 — Sun, 16 Jul 2023 23:53:28 +0900

너무나도 완벽한 블로그가 있어 그대로 첨부하였다.

https://yong-nyong.tistory.com/46#--%--env-d-ts

[React Native] 렌더링 수 줄이기 대작전 : apollo client - useMutation 에 ignoreResults 옵션 사용하기

안다희 — Wed, 12 Jul 2023 23:26:47 +0900

react native에서 apollo client를 이용한다.

클릭 이벤트가 발생할 때마다 특정 mutation을 호출하는데,

이 mutation이 호출될 때마다 재렌더링이 2번 되는 것을 발견했다.

바로 이 mutation이다.

62 line에서 return값 배열의 두번째 원소에는 loading, data 등이 들어가는데,

mutation을 호출하면 이 loading과 data값이 업데이트되면서 총 2번의 렌더링이 더 진행되는 것이다.

그래서 결과값은 필요없다고 알려주고 재렌더링을 방지하는 옵션이 있지 않을까? 해서 찾아봤는데,

역시나 있었다.

https://www.apollographql.com/docs/react/data/mutations/#ignoreresults

Mutations in Apollo Client

Modify data with the useMutation hook

www.apollographql.com

63 line: `ignoreResults: true`를 넣으면 재렌더링을 방지할 수 있다.

그리고 다시 렌더링 횟수를 측정해봤더니,

이 mutation을 호출해도 재렌더링은 되지 않았다. 얏호!!!!!!!!!!

useMutation 쓰는 곳에서, result가 필요없는 경우라면 전부 저 옵션을 추가해줬다.

렌더링은 어떻게 확인했냐?

( 이런 hook을 만들어서 확인하고 싶은 컴포넌트에서 호출해서 사용했다.)

useQuery와 useLazyQuery도 적용 가능하냐?

query는 애초에 값을 불러오기 위한 용도라... 옵션이 없다.

느려진 앱을 개선하면서, 코드 하나하나를 더 깊이 이해하려고 하는 중이다.

역시 코드는 파도파도 재밌는 게 계속 나온다..

[React Native] Dimension height 뿌시기 (안드로이드)

안다희 — Sat, 8 Jul 2023 19:41:16 +0900

import { getStatusBarHeight } from 'react-native-status-bar-height';

const statusBarHeight = getStatusBarHeight(false); // skip android = false;

const deviceHeight = Dimensions.get('screen').height;
const windowHeight = Dimensions.get('window').height;

deviceHeight: 기기 전체 세로길이

windowHeight: 앱이 차지하는 만큼의 세로길이

statusBarHeight는 상태바의 세로길이

공식문서 링크: https://reactnative.dev/docs/dimensions

문제는 windowHeight가 삼성/구글 폰 별로 다른 것이다.

삼성폰은 window height가 statusBarHeight를 포함하지 않고,

구글폰은 window height가 statusBarHeight를 포함한다.

보통 bottomNavHeight가 48인데,

device height에서 window height를 뺐을 때 48이 나오면,

window height가 statusBarHeight를 포함한다는 뜻이다.

그래서 statusBarHeight를 뺀 진짜 windowHeight의 길이를 알고싶다면,

다음 함수를 사용한다.

const isWindowHeightIncludeStatusBarHeight = ({
  windowH,
  deviceH,
}: {
  windowH: number;
  deviceH: number;
}): boolean => {
  const tempDeviceH = windowH + bottomNavBarH;

  /**
   갤럭시 S22
    "_statusBarHeight": 27
    "windowH": 753
    "deviceH": 780
   */
  if (deviceH - tempDeviceH < 0) return false; // 오차가 0보다 작으면, bottomNavBarH는 없다는 뜻이야.


  if (deviceH - tempDeviceH >= 3) {
    // 오차 3정도 있다고 치고, 그래도 남는다 싶으면, windowH에는 statusBarHeight가 포함되지 않았다는 뜻이야.
    return false;
  }
  return true;
};

그러나 주의할 점.

갤럭시 S22 같이 bottomNavBar가 존재하지 않는데,

deviceH - tempDeviceH가 음수인 것을 통해 알 수 있다.

deviceH - tempDeviceH가 음수인 경우는, windowH = deviceH + statusBarHeight 이므로,

return false로 예외처리 해준다.

* 주의: 갤럭시 S22같은 경우는 bottomNavBar가 존재하지 않는다.

* 주의: iOS는 windowHeight에 항상 statusBarHeight까지 포함한다.

참고링크

https://velog.io/@kjwsx23/ReactNative-Dimension%EA%B3%BC-%EC%A2%8C%ED%91%9C%EA%B0%92

react-native-push-notification 사용 시 주의점 (안드로이드 id)

안다희 — Fri, 9 Jun 2023 17:09:51 +0900

https://github.com/zo0r/react-native-push-notification

GitHub - zo0r/react-native-push-notification: React Native Local and Remote Notifications

React Native Local and Remote Notifications. Contribute to zo0r/react-native-push-notification development by creating an account on GitHub.

github.com

이 라이브러리를 사용할 때 주의점이 있다.

보다시피 id를 설정할 수 있는데, 한번 지정된 id는 다시 사용하지 않는 것이 좋다.

안그러면 이 푸시에 넣은 데이터를 꺼내올 때 예전 id의 데이터를 꺼내오기 때문이다.

이 문제 때문에 서비스에서 불편을 겪은 유저가 한둘이 아니다ㅠ.ㅠ 이제라도 발견해 해결해서 다행이다.

부디 항상 새로운 id를 부여하시길!!!!

또는, id가 optional이기 때문에 아예 부여 안하면 이렇게 알아서부여해준다.

아래 데이터는 이 함수로 가져왔다.

PushNotification.getScheduledLocalNotifications

https://github.com/zo0r/react-native-push-notification/issues/2368

[FYI] If the ID used once is given again, the old data is loaded. Be careful. · Issue #2368 · zo0r/react-native-push-notificat

Give this id an unused id. Otherwise, the old data comes from the cached data that was used in the past.

github.com

모두의 소중한 시간을 위해 이슈에도 올려두었다ㅎㅎ

[React Native] Admob 보상형 영상 광고 다 보고 X 버튼 클릭 안되는 오류 해결 : 상태바 숨기기!

안다희 — Tue, 18 Apr 2023 15:13:32 +0900

어느날... 이러한 CS가 왔다.

광고를 다 봤는데도 상태바에 가려져서 X버튼을 누르지 못했다는 것!

현재 react native에서 보상형 영상 광고를 띄워주기 위해

@react-native-firebase/admob: 11.5.0

을 사용하고 있다.

서드파티... admob을 원망하며 admob+statusbar를 키워드로 이슈를 찾아봤는데 마땅히 해결책이 없었다.

-> 그런데 상태바를 가리는거면.. 상태바를 없애면 되는 문제 아닌가? 싶었다.

당장 react-native에서 StatusBar를 이용해 숨겨보았다.

상태바 부분을 터치범위로 두고, 상태바가 있을 때와 없을 때 각각 터치가 가능한 지 실험해보았다.

예상한대로, 상태바가 있을 때는 클릭이 가능했고 없을 때는 불가능했다.

위 영상에서 사용한 코드를 첨부한다. (일부 수정됨)

참고로, statusBar의 height는 react-native-status-bar-height 라이브러리에서 얻을 수 있다.

import React from 'react';
import { StatusBar } from 'react-native';
import { getStatusBarHeight } from 'react-native-status-bar-height';

export default () => {
    return (
      <View style={{ flex: 1, backgroundColor: 'lightgreen' }}>
        <TouchableOpacity
          style={{
            height: getStatusBarHeight(),
            backgroundColor: 'lightcoral',
          }} />
        <TouchableOpacity
          onPress={() => {
            StatusBar.setHidden(true);
          }}>
        	<Text>상태바 숨기기</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            StatusBar.setHidden(false);
          }}>
        	<Text>상태바 보이기</Text>
        </TouchableOpacity>
      </View>
    );
}

-> 상태바를 숨기면 상태바가 있었던 부분도 클릭이 가능해진다!

[React Native] linkTo 사용 시, The 'navigation' object hasn't been initialized yet 문제 해결 방법 (react-navigation NavigationContainer 마운팅된 직후를 onReady로 감지하기)

안다희 — Sat, 8 Apr 2023 01:51:57 +0900

[React Native] linkTo 사용 시, The 'navigation' object hasn't been initialized yet 문제 해결 방법 (react-navigation NavigationContainer 마운팅된 직후를 onReady로 감지하기)

특정 페이지에 도달 할 수 있는 링크인 딥링크를 이용하고 있다.

앱이 완전히 닫힌 상태에서 딥링크로 앱을 열면,

(Android의 경우) Linking.getInitialURL 로

(iOS의 경우) Linking.addEventListener('url', handleOpenUrl) 로

앱을 열게 한 url 장본인(?)을 알 수 있다.

(이 글은 Android 기준으로 코드를 작성했습니다.)

const url = "roubitapp://root-tab/setting"

위 url로 앱을 열면 SettingScreen이라는 화면으로 navigate해야한다고 가정해보자.

코드는 아래와 같이 짤 수 있다. (자세한 딥링크 세팅은 이곳을 참고)

import React, { useEffect, useState } from 'react';
import { Linking } from 'react-native';
import { NavigationContainer, useLinkTo } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default () => {
  const linkTo = useLinkTo()

  useEffect(() => {
      Linking.getInitialURL()?.then(url => {
        if (url) {
          const deepLink = getDeepLinkByUrl(url); // ex. '/setting'
          linkTo(deepLink)
        }
      });
  }, [])

  return (
    <NavigationContainer
      linking={{
        prefixes: ['roubitapp://'],
        config: {
         // ...,
         SettingScreen: {
         	path: "setting"
         }
        }
      }}
      >
      <Stack.Navigator>
        <Stack.Screen />
        <Stack.Screen />
        <Stack.Screen />
      </Stack.Navigator>
    </NavigationContainer>
   );
  }

그런데, linkTo를 사용하면 아래와 같은 오류가 난다.

// ERROR  The 'navigation' object hasn't been initialized yet. 
// This might happen if you don't have a navigator mounted, 
// or if the navigator hasn't finished mounting. 
// See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.

아직 navigation이 세팅되지 않았는데 사용하려고 해서 생기는 문제다.

에러에 친절하게 안내되어있는 링크를 따라가본다. (웬만한 에러는 에러내용 잘 읽으면 해결됨. 떠먹여주는대로 받아먹자!)

navigation이 세팅되었는지를 아는 방법에 대해 안내해준다.

하지만 Linking.getInitialURL()을 실행하는 시점에 navigationRef.isReady()가 여전히 false라면 쓰나마나다.

우리는 navigation이 세팅되는 순간을 알아야 한다. 그래야 그 이후에 linkTo를 사용할 수 있기 때문이다.

이 링크를 보자.

NavigationContainer에 onReady라는 prop을 사용하면 된다.

문서에서는 아래와 같이 설명하고 있다.

// Function which is called after the navigation container and all its children finish mounting for the first time.

NavigationContainer와 하위 컴포넌트가 모두 마운팅을 마친 시점에 onReady가 실행된다.

이 점을 이용하여 아래와 같이 코드를 추가했다.

import React, { useEffect, useState } from 'react';
import { Linking } from 'react-native';
import { NavigationContainer, useLinkTo } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator<RootTabStackParams>();

export default () => {
  const [isNavMounted, setIsNavMounted] = useState<boolean>(false);
  const linkTo = useLinkTo()

  useEffect(() => {
    if (isNavMounted) {
      Linking.getInitialURL()?.then(url => {
        if (url) {
          const deepLink = getDeepLinkByUrl(url); // ex. '/setting';
          linkTo(deepLink)
        }
      });
    }
  }, [isNavMounted])

  return (
    <NavigationContainer
   	  onReady={() => {
        setIsNavMounted(true)
      }}
      linking={{
        prefixes: ['roubitapp://'],
        config: {
         // ...,
         SettingScreen: {
         	path: "setting"
         }
        }
      }}
      >
      <Stack.Navigator>
        <Stack.Screen />
        <Stack.Screen />
        <Stack.Screen />
      </Stack.Navigator>
    </NavigationContainer>
   );
  }

이제 isNavMounted를 이용하여 navigation 세팅이 완료되었음을 확신하고 linkTo를 사용할 수 있게 되었다.

참고링크

https://velog.io/@beanlove97/NavigationContainer

https://reactnavigation.org/docs/navigating-without-navigation-prop/#handling-initialization

https://reactnavigation.org/docs/navigation-container/#onready