TailScale을 설치해서 동료들이 나의 홈서버에 접속해서 작업할 수 있도록 해보자.

홈서버에 TaileScale설치

curl -fsSL https://tailscale.com/install.sh | sh
sudo tailscale up

설치하고 sudo tailscale up을 하면 To authenticate, visit: https://login.tailscale.com/xxxxxxx 이런식으로 url이 뜨는데 여기에 접속을 해서 github로 로긘을 한다.

맥북에 TailScale설치하고 접속하기

그럼 이제 내 맥북이 내 홈서버에 붙어야한다. 맥북에도 TailScale을 설치하고 홈서버에 붙어보자 https://tailscale.com/download 위 사이트에 들어가서 맥에 tailScale을 깔고 서버랑 같은 계정으로 로그인해야 한다. 접속 완료되면 이렇게 접속된다고 뜬다

동료 초대하기

Users탭에서 동료를 초대한다

동료에게도 sudo tailscale up을 해서 github계정으로 로그인하게 한다음 homeserver로 로그인한 계정으로 붙을 수 있도록 해야한다.

그리고 동료에게 ssh키(.pub)를 받아서 해당 키를 서버에저장한다. 동료에게 ssh-keygen -t ed25519 를해서 나온파일을 달라고 하면된다. vi ~/.ssh/authorized_keys 위 명령어로 동료에게 받은 파일을 전부긁어서 붙여넣기한다.

vscode에 ssh config파일 수정해주고 접속하면 tailscale에 붙어있는 pc들만 접속할 수 있다.

이제 Cloudflare로 네트워크 구성을 할 차례다.

그동안 AWS 무료 티어를 활용해서 서버를 운영해왔다.

매년 계정을 새로 만들어서 무료 티어를 이어 쓰는 방식이었다.

예를 들면 이런 식이다. • wepinlab2024 • wepinlab2025 • wepinlab2026

매년 새로운 계정을 생성하고, 서버를 옮기고, 도메인을 다시 연결하고, 환경을 재구성했다.

처음에는 잘 동작했다.

그런데 어느 순간부터 이상했다.

새 계정을 만들어 로그인했는데도 무료 티어가 적용되지 않았다.

아마도 AWS에서 계정 패턴이나 결제 정보 기반으로 중복 무료 사용을 감지한 것 같았다.

결국 깨달았다.

“이건 지속 가능한 방식이 아니다.”

매년 서버를 이사 다니는 것도 번거롭고 계정 관리도 점점 복잡해졌다.

예전에 게임 하려고 샀던 데스크탑이 계속 놀고있었기에, 이를 홈서버로 구축해보려고 마음을 먹게 되었다.

Windows 삭제 → Ubuntu Server 설치

ubuntu 설치는 꽤나 간단했다. 기존 Windows를 밀고 Ubuntu Server 24.04 LTS 설치하였다.

Ubuntu iso파일 받기

현재(26.03.04)기준 제일 최신 LTS를 다운받으면 된다.

Rufus 다운받고 USB굽기

https://rufus.ie/ko/ 필자의 데스크탑은 Window x64이기에 첫번째 릴리스 표준(rufus-4.13.exe)으로 받았다.

장치는 USB를 선택하고, 부트 유형은 아까 다운받은 iso파일을 선택한다. 이외에는 건드리지않는다. 시작 누른 후 모든 옵션에서 예 선택하면된다.

BIOS에서 boot우선순위 바꿔서 USB로 부팅하기

요새는 BIOS가 UEFI로 업그레이드 되어서 UI도 좀더 쉽게 바뀌었다. USB로 부팅하기로 바꾼 후 운영체제 설치를 진행하면 된다. 퓨어한 모습^^ 기분이 좋다.

DBeaver에서 마이그레이션 할 db 우클릭 > 도구 > dump databases 클릭 모든 테이블 선택 경로와 이름설정

이런 오류 뜨면 로컬에 mysql-client 깔기 이거는 덤프할때 mysql-client를 쓰는데 그경로를 지정해주지 않아서 발생하는것 mariaDB는 mysql-client@8.0을 깔아야 함.

$ brew install mysql-client@8.0 $ which mysql-client

local client로 경로 추가해주기 홈추가 > Finder떴을때 /opt 경로 접근할때는 단축어 command+shift+G 눌러서 접근하기 경로는 /opt/homebrew/Celler/mysql-client/8.0버전 폴더를 선택하기

그럼 이렇게 추가가 잘 되었습니다.

그래서 Start를 하면 ? 잘되었습니다.

Finder를 켜서 잘 저장되었는지 확인

DB Restore하기

restore할 db우클릭 > 도구 > Resotre database > 파일설정하고 > start

만약 아래와 같은 에러가 난다면

Task 'MySQL restore' started at Sat Oct 18 21:10:56 KST 2025 ERROR 1227 (42000) at line 762: Access denied; you need (at least one of) the SET USER privilege(s) for this operation

터미널을 열어서 덤프에서 DEFINER 제거/치환 후 복원하는 작업을 진행해주어야 한다. 이 에러는 덤프 파일 안에 DEFINER/SQL SECURITY DEFINER가 들어 있어 복원 시 현재 사용자에게 SET USER 동적 권한이 없어서 나는 에러다.

sed -E -i ''
-e 's/DEFINER=[^]+@[^]+/DEFINER=CURRENT_USER/g'
-e 's/SQL SECURITY DEFINER/SQL SECURITY INVOKER/g'
/path/to/dump_db.sql

그리고 재시도 하면

retore완료

CLI로 덤프 하는법

간혹 DBeaver로 하다가 도저히 안되면 CLI로도 할 수도 있다. 이건 참고용

sudo /opt/homebrew/Cellar/mysql-client/8.0/bin/mysqldump
--skip-lock-tables --column-statistics=0 --add-drop-table --disable-keys --extended-insert
-u admin -p --host=127.0.0.1 --port=3306 prod > /Users/jinkyeong/dumpDB/prod_backup.sql

mysqldump경로 MySQL 데이터를 SQL 파일로 백업하는 CLI 도구 보통 /opt/homebrew/Callar 하위에 있습니다. --skip-lock-tables 테이블 잠금 방지 (읽기 전용 백업 시 사용) --column-statistics=0 일부 MySQL 버전 호환성 해결용 옵션 --add-drop-table 테이블 생성 전에 DROP TABLE을 먼저 넣음 --disable-keys 덤프 중 키 인덱스 비활성화 (성능 개선) --extended-insert 여러 행을 한 INSERT문에 담아 SQL 사이즈 줄임 -u admin -p admin 유저로 로그인, -p는 비번은 나중에 입력 --host=127.0.0.1 로컬 호스트 (AWS RDS라면 엔드포인트 적기) --port=3306 로컬에서 포트 3306으로 MySQL 접속 prod 백업 대상 DB 이름 > /Users/jinkyeong/dumpDB/prod_backup.sql 덤프할 경로 이름

• FE 프로젝트 (React)

1. S3 생성하기

1-1. 버킷 생성

이름이랑 ACL 비활성화됨 체크해주기 모든 퍼블릭 엑세스 차단 체크해제 해주기 나머지는 디폴트값 으로 설정해주고 만들기

1-2. 버킷 정적 웹사이트 호스팅 설정

버킷 상세 > 속성 > 정적 웹사이트 호스팅 설정해주기

위 사진에 Amplify Hosting이라는 것이 있다. 이는 CI/CD 파이프라인, 다양한 프레임워크 지원, 서버리스 백엔드 통합 기능을 제공해주는 것인데 이번 포스팅은 github actions연동이기에... Amplify Hosting는 다음 포스팅에 다뤄보도록 하겠습니다. 🤓

정적 웹 사이트 호스팅 활성화 체크해주기

인덱스 문서- index.html 써주고 변경 사항 저장하기, 엔드포인트 확인

1-3. 버킷 정책 설정

버킷 권한 > 버킷 정책 편집

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Statement1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucketname/*"
        }
    ]
}

"Version": "2012-10-17" 정책 버전. 항상 "2012-10-17"을 사용하면 됨 (현재 기준 최신이자 안정된 버전).

"Sid": "Statement1" Statement ID로, 사람이 구분하기 쉽게 붙이는 이름 (필수는 아님).

"Effect": "Allow" 이 정책의 효과를 설정. "Allow": 허용, "Deny": 거부

"Principal": "*" 누가 접근 가능한지 지정. *은 사용자(익명 사용자 포함)를 의미. 인터넷에 공개된 공개 버킷이라는 뜻

"Action": "s3:GetObject" 허용하는 작업의 종류. GetObject-브라우저에서 정적 파일을 읽는 것만 허용

"Resource": "arn:aws:s3:::bucketname/*" 정책이 적용되는 리소스

2. AWS SSL 무료 인증서 생성

Q1. 왜 SSL인증서를 발급받아야 하나요? ✅ S3의 정적 웹사이트 호스팅 기능을 사용하면, http://bucketname.s3-website-<region>.amazonaws.com 형태의 엔드포인트가 생성됩니다. 이 엔드포인트는 HTTP만 지원하고 HTTPS는 지원하지 않습니다. 사용자가 https:// 로 접속할 수 있도록 하려면 CloudFront를 이용해 S3 버킷을 프록시 처리하고, SSL 인증서를 연결해야 합니다. 예) https://mydomain.xxx -> http://bucketname.s3-website-<region>.amazonaws.com 따라서 SSL 인증서는 https:// 도메인으로 접속하기 위해 CloudFront 배포에 연결되어야 하며, 일반적으로는 AWS Certificate Manager(ACM)를 통해 발급받아 사용합니다.

Q2. CloudFront는 뭐고 왜 사용하는거죠? ✅ CloudFront란? 컨텐츠(파일, 동영상 등)를 빠르게 전송하게 해주는 서비스 입니다. 컨텐츠(파일, 동영상)는 S3라는 곳에 저장이 됩니다. 하지만 그 S3 저장소가 한국에 있다고 가정했을때, 한국 사용자는 S3와 거리가 가까우므로 데이터를 빠르게 전송받을 수 있습니다. 하지만 미국에 있는 사용자가 S3로부터 데이터를 전송받으려면 거리가 멀어 시간이 오래 걸리게 됩니다.

이런 문제를 해결하기 위해 전세계 곳곳에 컨텐츠(파일, 동영상)의 복사본을 저장해놓을 수 있는 임시 저장소를 구축합니다. 그러면 미국에 있는 사용자가 컨텐츠를 전송받고 싶을 때, 가장 가까운 임시 저장소에서 컨텐츠를 가져오면 훨씬 속도가 빨라진다. 이런 형태의 서비스를 보고 CDN(Content Delivery Network)이라고 합니다. 그래서 CloudFront를 CDN 서비스라고도 표현합니다.

✅ CloudFront는 왜 사용하는 걸까? 위의 설명에 따르면 CloudFront는 컨텐츠를 전송 받는 성능을 향상시키기 위해 사용하게 됩니다. 그리고 HTTPS를 적용하려면 CloudFront를 사용해야만 합니다. S3에는 HTTPS를 적용시키는 기능을 제공하지 않습니다. HTTPS를 적용함으로 보안을 한층 강화할 수 있다는 장점이 있습니다.

이러한 장점들 덕분에 S3와 CloudFront를 같이 써서 웹 서비스를 배포할 수 있는 것입니다.

2-1. ACM에서 인증서 발급받기

CloudFront에서 사용 가능한 인증서는 반드시 미국 동부(버지니아 북부) 리전(us-east-1) 에 있어야 하므로 리전을 버지니아 북부로 이동한 후 인증서 생성하기.

퍼블릭 인증서 요청 체크하고 다음 완전히 정규화된 도메인이름에 본인의 도메인 이름 넣기 키 알고리즘은 RSA 2048 선택하고 요청하기 이제 이 만들어진 인증서를 검증해야 합니다. 3분~10분정도 기다리면

발급 완

3. CloudFront 생성

3-1. CloudFront 배포생성하기

싱글 웹사이트 앱 선택

Origin domain에서 내가 만든 s3버킷 선택 선택하면 웹사이트 엔드포인트 사용 노티가 뜨는데 사용한다고 버튼 클릭하기

HTTP만 해당, 80번포트 선택 대체 도메인 이름에 본인 도메인 넣기 항목이 너무많아서 위 사진대로 선택 후 배포 생성 클릭

4. Route53에 레코드 추가

별칭 on하고 트래픽 라우팅 대상을 CloudFront 배포에 대한 별칭 추가 선택하고 하단에 배포 선택란을 누르면 자동으로 이전에 등록했던 cloud front가 뜹니다.

5. IAM Secret Key 발급

S3에 코드 또는 파일을 올릴 수 있는 권한은 ec2(backend)와 github actions입니다. ec2(backend)에서는 클라이언트에서 이미지를 업로드 했을때, 프로필 사진을 변경했다거나, 이미지가 들어간 게시물을 업로드 했다거나 했을때 api를 통해서 업로드를 할 수 있게 됩니다. 이번 포스팅은 github actions설정을 하여서 자동배포 환경을 만들어 볼 것입니다.

5-1. 사용자 그룹 만들기

IAM > 사용자 > 사용자 생성하기

직접 정책 연결로 하나씩 관리할 수 있지만 그룹으로 그룹 전체에 권한을 적용할 수 있습니다.

추가할 정책: AmazonS3FullAccess , AWSCodeDeployFullAccess , AmazonSSMFullAccess, AmazonSSMReadOnlyAccess, cloudfront_createInvalidation권한 추가 cloudfront_createInvalidation 이 항목은 위 사진의 '정책 설정' 버튼틀 클릭해서 직접 설정해줍니다.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowCIWrite",
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:DeleteObject",
        "s3:ListBucket"
      ],
      "Resource": [
        "arn:aws:s3:::bucketname",
        "arn:aws:s3:::bucketname/*"
      ]
    },
    {
      "Sid": "AllowCloudFrontInvalidation",
      "Effect": "Allow",
      "Action": "cloudfront:CreateInvalidation",
      "Resource": "*"
    }
  ]
}

이렇게 생성해주면

권한 정책에 검색하면 뜨게 됩니다. 그리고 추가해줍니다.

잘 만들어졌네요

5-2. 엑세스 키 발급받기

생성한 사용자 → 보안 자격 증명 → 액세스 키 → 액세스 키 만들기

AWS 외부에서 실행되는 애플리케이션 선택

생성한 후 페이지는 다시 올 수 없으니 .csv파일 다운로드 해두기

6. github actions 설정하기

6-1. Secrets 설정하기

레포지토리 설정 > Secrets And Variables > Actions로 이동 해서 Repository secrets 항목에다가 추가해주기 AWS_ACCESS_KEY = S3 권한이 있는 유저 엑세스 키 (.csv에 있음) AWS_SECRET_ACCESS_KEY = S3 권한이 있는 유저 비밀 엑세스 키 (.csv에 있음) AWS_REGION = ap-northeast-2 S3_DEV_REPO = 정적 리소스 배포할 S3 버킷 이름 (예. myS3Bucket) CLOUDFRONT_DEV_ID = CloudFront ID이름 (예. E43YM3452OA)

배포 성공/실패 여부를 slack이나 디스코드같은 메신저로 자동 발송해주는 기능을 추가할때도 여기다가 key를 넣는데 이거는 다음 포스팅에서 다뤄보도록 하겠습니다. 👀

6-2. 프로젝트 내부에 .yml파일 만들기

.github/workflows/filename.yml 경로에 .yml 만들기

name: ELLIE WEB DEVELOPMENT DEPLOY

# Controls when the workflow will run
on:
  push:
    branches: [main] #push 반응을 할 브런치

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build_dev:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v3

      # node 버전 통일해야 할 경우 이와 같이 노드 버전 지정.
      - uses: actions/setup-node@v3
        with:
          node-version: 20.17.0
          cache: npm

      # aws credentials 생성
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: Install dependencies
        run: npm install

      # npm 패키지 설치 & 리액트 빌드
      - name: install npm dependencies & build react
        env:
          AWS_ENV: dev
          CI: false
          REACT_APP_AWS_SSM_ACCESS_KEY: ${{ secrets.AWS_ACCESS_KEY }}
          REACT_APP_AWS_SSM_SECRET_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          REACT_APP_AWS_SSM_REGION: ${{ secrets.AWS_REGION }}
        run: |
          CI=false
          npm ci 
          npm run build

      # AWS S3에 빌드 결과 업로드
      - name: Deploying to S3 BUCKET
        run: aws s3 sync ./dist/ s3://${{ secrets.S3_DEV_REPO }} --delete

      # cloudfront 캐시 무효화
      - name: Invalidate cache for CloudFront
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DEV_ID }} --paths "/*"

.yml파일을 푸시하고 레포지토리의 Actions 탭으로 가면 Actions이 도는것을 확인할 수 있습니다.

5트만에 성공했네요. 🤓 성공하고 도메인 치면 잘 들어가집니다.

7. 결과적으로

BE배포와 FE배포를 나눠서 하나의 도식화로 보자면 이런 구조입니다.

실제 현업에서는 dev와 prod를 나눠서 위 구조보다 좀더 복잡하게 되는데 일단 한 사이클은 돌았으니, 위 내용 기반으로 업그레이드 하면 됩니다.

• 가비아에서 구매한 도메인

1. Route 53에 도메인 연결

이전 포스팅에서 http://3.36.34.232:8080/swagger-ui/index.html# 와 같이 날것의 URL로 접속 해보고 마무리가 되었는데, 이번에는 https로 설정해주면서 도메인까지 적용해보도록 할것이다.

Q1. 날것의 URL에서 https만 적용하면 안되나요? -> 안된다. https는 SSL/TLS 인증서 기반의 암호화를 사용하는데, 이 인증서는 도메인(domain name)에 발급되는 것이지, IP 주소에 발급되지 않기 때문이다.

Q2. 왜 IP에는 인증서를 못받나요? -> Let's Encrypt, DigiCert, GlobalSign 등 주요 인증기관(CA)은 도메인 소유권을 확인한 뒤에만 인증서를 발급합니다. IP 주소는 소유권을 증명하기 어렵기 때문에 인증서를 발급해주지 않습니다.

1-1. Route 53에 호스팅 영역 생성

호스팅 영역 체크

도메인 이름에 가비아에서 구매한 도메인 이름 넣기

호스팅 영역 생성 완

호스팅 영역에 들어오면 이미 2개의 레코드가 생성되어있다. ✅ NS는 도메인을 등록한 등록기관(예: 가비아) 에 설정해줘야 해당 도메인 질의가 Route 53으로 위임됩니다. ✅ SOA는 도메인의 기본 정보와 권한을 가진 DNS 서버에 대한 정보를 포함합니다. 포함 정보:

• 권한을 가진 네임서버(NS) 주소
• 관리자 이메일 주소
• 시리얼 번호 (변경 시 증가)
• 캐시 TTL, 재시도 시간 등 DNS 운영 관련 값들 보통은 SOA 레코드를 직접 수정하지 않으며, Route 53에서 자동 관리됩니다.

✅ A는 도메인 이름을 IPv4 주소로 연결해주는 DNS(Domain Name System) 레코드입니다. 예를 들어서 api.ellieworld.shop을 3.36.34.232로 바꿔주는겁니다.

1-2. 가비아에 네임서버 등록

도메인을 가비아에서 발급받았기때문에 Route53의 호스팅영역의 NS코드를 가비아의 네임서버에 등록시킵니다.

이 값을 이렇게 셋팅해주고 셋팅해줄때 뒤에 .은뺍니다.

1-3. 생성된 호스팅 영역에 EC2 연결

api.ellieworld.shop 레코드 추가

레코드 유형은 A, 값은 EC2의 public IP

nginx를 80번 포트로 실행할것이라 보안그룹의 인바운드 규칙에 80번을 열어줍니다. IPv4와 IPv6 규칙을 둘다 추가해주어야 합니다.

Q. 왜 그렇게 해야하나요? -> AWS 보안 그룹이 각 IP 프로토콜 버전에 대해 별도로 규칙을 처리하기 때문입니다. 하나의 규칙에 0.0.0.0/0(IPv4)와 ::/0(IPv6)을 같이 넣을 수 없습니다.

1-4. nginx 리버스 프록시 서버 설정

서버에 접속해서 nginx를 설치 해줍니다.

$ sudo apt install nginx

/etc/nginx/sites-available 이 위치에 가면 default파일이 있는데 이 파일을 수정해야합니다.

$ sudo vi /etc/nginx/sites-available/default

vi를 해서 안에 내용을 보면 뭔가 엄청많습니다. 그렇지만 하나씩 수정해보도록 하겠습니다.

upstream dev-api-server {
    server 3.36.34.232:8080;
}

위코드를 server{} 상단에 추가해줍니다. 물론 저 ip는 ec2 public ip입니다.

그리고 80포트 옆 default_server변수를 지워줍니다.

그리고 아래로 내려가서 location{} 을 찾습니다.

location변수 위에 server_name이 있는데 여기에 api 도메인을 적습니다. 저는 api.elieworld.shop입니다. 가비아에서 500원주고 샀습니다.

그리고 location{} 내부에 proxy정보들을 넣어줍니다.

root /var/www/html; 줄부터 index index.html... 요 줄도 삭제해줍니다.

최종적으로 이렇게만 수정하면 됩니다.

✅ 이 작업의 의미: api.ellieworld.shop으로 들어오는 요청을 받아서 실제로는 http://3.36.34.232:8080 (즉, 백엔드 서버)로 전달 그리고 결과를 다시 클라이언트에게 응답 👉 이게 바로 리버스 프록시 역할

default파일을 저장하고 여기서 /etc/nginx 경로로 가서 폴더 리스트를 보면 sites-available, sites-enabled가 있죠 방금 제가 수정한 파일은 sites-available/default 입니다. 이미 심볼릭 링크가 sites-enabled에 있을겁니다.

심볼릭 링크는 windows의 바로가기와 비슷한 개념입니다. enabled한 사이트의 conf파일을 지정해주는거죠. Nginx는 sites-enabled/ 안의 설정 파일만 읽기 때문에, 실제 설정은 sites-available/에 두고, 쓸 설정만 링크로 연결해주는 방식입니다.

원래는 default를 쓰지않고 커스텀 해서 사용하겠다 하면 저 심볼릭 링크를 연결해주어야 합니다.

새로 conf를 만든 후에 심볼릭 링크 연결 CLI

sudo ln -s /etc/nginx/sites-available/new_setting.conf /etc/nginx/sites-enabled/

구성이 잘 되었는지 테스트 해봅시다.

$ sudo nginx -t

nginx 재시작을 합니다.

$ sudo systemctl restart nginx

nginx가 다시 켜졌는지 확인합니다.

$ systemctl status nginx.service

1-5. Let's Encrypt 인증서 발급받기

certbot을 설치합니다 ✅ Let's Encrypt: 무료 인증서를 발급해주는 인증 기관(CA) ✅ Certbot: Let's Encrypt와 통신하여 인증서를 신청, 갱신, 설치하는 프로그램(도구)

$ sudo apt install certbot python3-certbot-nginx -

발급받기전에 Route53 > api도메인 A레코드로 등록해놓았는지 체크

https인증서를 발급받습니다.

sudo certbot --nginx -d api.ellieworld.shop

email을 적을때는 aws로그인 계정을 적습니다.

그러면

발급받은 인증서 위치

/etc/letsencrypt/live

원하는 url이 나왔네요 👏 https://api.ellieworld.shop/swagger-ui/index.html#

• 새로만든 aws계정
• github BE 프로젝트 (spring boot 3.x.x, jdk 17)

1. EC2 생성

1-1. 리전 선택하기

서울로 선택

1-2. 인스턴스 생성하기

인스턴스 시작

서버 이름 짓기

os선택하기 ami는 프리티어로

[2025.10 업데이트] 프리티어 6개월 + 200USD 크래딧으로 바뀌면서 AMI선택 범위가 늘어났다. 그렇지만 DeepLearning은 아직 써보진 않았기때문에 24.04또는 22.04 를 선택. 두가지의 차이는 아래와 같다

22.04 LTS

• 이미 2년 이상 서비스되어 가장 안정적인 LTS 버전으로 평가받습니다.
• 대부분의 서버용 패키지(Spring Boot, Nginx, Docker, Node, Java 등)가 공식적으로 완벽 호환됩니다.
• 기업 환경이나 운영 서버에 많이 사용됩니다.

24.04 LTS

• 최신 기술 스택(예: Python 3.12, Kernel 6.8, systemd 255)을 지원하지만, 일부 패키지(특히 오래된 배포판 기준으로 빌드된 것들)는 아직 완벽히 검증되지 않았을 수 있습니다.
• 최신 버전 테스트나 개인 프로젝트용엔 적합하지만, 운영 안정성이 절대적으로 중요하면 22.04를 추천합니다.

인스턴스 유형은 t2.micro 프리티어 선택

keypair 생성

VPC설정은 기본값 그대로. 보안그룹도 설정된 값 그대로. 나중에 추가할것임

스토리지는 최대 30GB를 지원해주기때문에 30으로 해주기

결과적으로

만들기

2. EC2 접속

2-1. vscode에서 ~/.ssh/config수정 후 접속

단축키: command + shift + P

필자는 root directory에 awsSSH를 모아놓고 관리하는 편이다.

이런식으로 복붙하면 편하다

Permission Denied뜨면 .pem권한 바꿔주기

% chmod 400 myKey_250523.pem

접속 성공

3. 탄력적 IP 설정

인스턴스를 껐다가 키면 public IP가 변경된다. 이를 방지하기 위해 고정 IP를 받는것이다. 이 기능은 원래 무료였으나, 2024년 2월부터 과금 대상이 되었다. aws 공식지원 홈페이지 정말 슬프게도 계속 서비스를 돌릴 계획이면 한달에 약 5천원(0.005 USD × 24시간 × 30일 = 3.6 USD/월) 정도 나오는 셈이다. 무료티어인듯 무료티어 아닌 무료티어인 셈이다.

그래서 필자가 운영 중인 Wepin 서비스도 개발과 운영 두 개의 서버를 분리하여 사용하고 있었지만, 어느 순간부터 퍼블릭 IP 사용에 대한 과금이 발생하는 것을 확인하고, 운영 서버의 퍼블릭 IP는 과감히 해제하고 터널링 방식으로 전환하게 되었다.

그럼에도 불구하고 설정해보자

3-1. EC2 > 네트워크 및 보안 > 탄력적 IP 할당 받기

전부 기본값으로 셋팅하고 할당받기

3-2. 탄력적 IP 연결하기

방금 생성한 인스턴스 선택하고 연결

4. 배포 전 준비

4-1. git clone하기

먼저 git설치하기

$ sudo apt-get install git

ssh키 만들기

$ ssh-keygen -t rsa -C github계정 메일(mygitgubid@github.com)

만든 id_rsa.pub을 cat 명령어로 확인 후 github의 setting에 추가하기

$ cat id_rsa.pub

그리고 git clone 을 해줍니다.

$ git clone 레포지토리ssh주소

4-2. jdk다운로드 받기

jdk-17.0.1을 사용했기때문에 서버에도 똑같은 버전을 받아줍니다.

wget으로 다운로드

$ wget https://github.com/adoptium/temurin17-binaries/releases/download/jdk-17.0.1+12/OpenJDK17U-jdk_x64_linux_hotspot_17.0.1_12.tar.gz

압축 해제

$ tar -xvzf OpenJDK17U-jdk_x64_linux_hotspot_17.0.1_12.tar.gz

/usr/lib/jvm 폴더로 이동시키기

$ sudo mv jdk-17.0.1+12 /usr/lib/jvm/jdk-17.0.1

java 설정

sudo update-alternatives --install /usr/bin/java java /usr/lib/jvm/jdk-17.0.1/bin/java 1100

java 버전 확인하기

$ java -version

4-3. application.yml 파일 만들기

application.yml 와 같은 민감한 정보가 포함된 파일은 Git으로 버전 관리를 하지 않는게 일반적이다. 따라서 application.yml 파일은 별도로 EC2 인스턴스에 올려주어야 한다. src/main/resources/application.yml 경로에 만들어주도록 하자.

4-4. 메모리 스왑 해주기

작고 소중한 서버의 Ram용량을 늘려주지않으면 빌드중 서버가 먹통이 될 수 있다. 1GB를 4GB로 늘려주자.

$ sudo fallocate -l 4G /swapfile $ sudo chmod 600 /swapfile $ sudo mkswap /swapfile $ sudo swapon /swapfile $ sudo swapon --show

위 명령어들을 차례대로 실행해주자

정상적으로 스왑이 되었는지 확인

$ free -m

혹시나 재부팅 할 경우가 생길수도 있으니 부팅 되었을때 자동으로 스왑 되도록 설정

$ sudo vi /etc/fstab 맨 마지막줄에 아래 한줄 추가하고 저장 /swapfile swap swap defaults 0 0

4-5. RDS연동하기

RDS검색해서 데이터베이스 생성하기

자신이 사용하는 DB선택하기

엔진 버전은 로컬MariaDB와 맞추면 좋겠지만 현재 로컬은 11.7.2이므로 제일 높은 버전으로 선택

db이름 적어주고 자체관리 체크

암호 지정해주기

인스턴스 구성 기본값 해주기

스토리지 기본값 해주기

연결도 기본값으로 셋팅하고 퍼블릭 엑세스만 예 체크

데이터베이스 인증, 모니터링 기본값 해주기

생성후 DB전용 인바운드 규칙 만들기 ec2 > 보안그룹 > 보안그룹 생성

다시 RDS로 와서 DB인스턴스 수정을 클릭하고 3306 인바운드가 들어가있는 보안그룹 추가

파라미터 그룹 추가

생성후 편집 클릭 > character검색어에 쳐서 아래 속성들 utf8mb4로 설정

• character_set_client
• character_set_connection
• character_set_database
• characater_set_filesystem
• characater_set_results
• character_set_server utf8mb4를 사용하는 이유는 ‘한글’ 뿐만 아니라 ‘이모티콘’도 지원이 가능하도록 하기 위해서다.

collation검색어에 쳐서 아래 속성들 utf8mb4_unicode_ci로 설정

• collation_connection
• collation_server utf8mb4_unicode_ci은 정렬, 비교 방식을 나타냅니다. timezone을 Asia/Seoul로 설정

DB인스턴스 수정해서 파라미터 그룹을 방금 만든 그룹으로 설정

DBeaver로 잘 연결되나 확인

4-6. EC2 인바운드 규칙 수정

api 포트를 8080으로 했기때문에 인바운드 규칙에 8080을 추가 TCP, 8080, 0.0.0.0/0 (또는 허용된 IP 범위) 으로 추가해주기

5. 배포하기

5-1. build하기

$ ./gradlew clean build $ cd build/libs/ $ java -jar anything-0.0.1-SNAPSHOT.jar

5-1. 접속해보기

https는 아직 설정을 안해주었기때문에 http로 접속해야한다.

서론

master 브랜치에서는 정상 작동하던 API가 develop 브랜치에서는 오류를 뿜어낸다는 점이었습니다. 처음에는 어디서 문제가 발생했는지 전혀 감을 잡지 못했는데, 그 이유는 바로 JDK 버전이 11에서 17로 업그레이드되며 대대적인 변화가 있었기 때문입니다. Deprecated된 코드들도 전부 교체되었고, 이로 인해 변경된 코드의 양이 너무 많아 단순히 diff만으로는 원인을 찾기 어려운 상황이었습니다. 그래서 "일단 이 버그부터 해결해보자!"는 마음으로 파고들었고, 결국 원인을 찾아 해결까지 해냈습니다! 😂 yml파일에 connections 수를 늘려보아도 해결이 되지 않았습니다. 결과적으로는 코드내에 버그가 원인이었습니다.

1. 원인: 불필요한 DB 커넥션 증가

처음에는 다른 누군가가 계속... 우리 개발DB에 연결 시도를 하는걸까?? 라는 생각을 했지만 그건 아니었습니다.ㅎ 알고 보니 특정 객체에서 너무 많은 커넥션을 소모하고 있었습니다.

그 중 하나는 바로 @Data 어노테이션이었습니다.

@Data는 @ToString()도 포함하기 때문에 연관된 객체를 계속 불러오면서 예상보다 많은 쿼리가 실행되는 문제가 있었습니다.

특히 Feed ↔ Pin 간 양방향 연관관계에서 순환 참조로 인해 디버깅도 느려졌고, 예상치 못한 DB 접근이 생겼습니다. 이 부분을 제가 단번에 캐치해내지 못했었죠..! 🤨

1. @ToString 같은 메서드에서 무한 루프 발생 Feed.toString() → Pin.toString() → 다시 Feed.toString()...
2. 디버깅 시 불필요한 필드 조회로 지연 로딩 발생 가능성 매우 큼

-> 여기서 엄~청 느린 디버깅 속도를 체감하였습니다. 한줄 내려갈때 약 15초 정도 걸린거같습니다. ➡ 해결: @Data 대신 @Getter, @Setter를 명시적으로 사용하고, @ToString은 필요한 곳에만 명시적으로 적용을 하였습니다.

결과적으로 @Data → @ToString() 포함됨 → 불필요한 DB 접근 + 순환참조 -> 지연 로딩 → 성능 저하 또는 예외 발생 Too many Connections........ 로그를 찍게 된 것이었습니다.

이 내용은 실제로 Lombok 공식 홈페이지에 기재되어있는걸 확인하실수 있습니다.

2. 원인: 연관관계 필드 설정 누락

Feed 객체 내부에 setPinList()로 데이터를 주입하는 과정에서 각 Pin 객체에 Feed를 역으로 설정하지 않아 feed_id가 null로 남아 있었습니다.
해당 컬럼은 NOT NULL 제약 조건이 있었기 때문에, JPA가 이를 채우기 위해 지속적으로 DB 접근을 시도했던 것으로 추정됩니다. 저 에러로그가 API호출 할때마다 계속 발생했었죠. 😤 어디서 계속 null값을 넣고있을까...

❗ 약식으로 오류가 발생했던 객체의 구조를 명시해보면

Feed {
    ...
    Pin: {
        ...
        FeedID: xxx  <- 이게 Not null
    }
    ...
}

요런 형식이 됩니다. 여기서 feedService.createFeed()을 호출을 하고 pinService.createPin(pinList, feed)를 호출하게 되는데 이때 PIN객체를 구성하는 코드에서 pin.setFeedId(feed.id) <- 이 코드가 없었던 것이었죠!!

즉, PIN 테이블에 insert 하려는 시점에 feedId가 null이라서 DB에서 NOT NULL 오류가 발생한겁니다. 참 간단한 내용이었지만.. 이 Feed_Id column을 많은 테이블에서 참조하고 있었던것이 문제였네요.

➡ 해결: pin.setFeedId(feed.id) 호출을 추가하여 연관관계를 명확히 하였고 결과적으로는 Too many Connection...에서 벗어나게 되었습니다. 👏

📌 교훈

• @Data는 편하지만, 연관관계가 많은 엔티티에는 피하자.
• @ToString은 조심해서 사용하고, 지연 로딩(LAZY) 필드는 절대 포함하지 말자.
• 연관관계 설정은 양방향일 경우 양쪽 모두 정확히 설정해야 한다.
• Too many connections는 커넥션 풀 설정 문제가 아닌 코드의 잘못된 DB 접근일 수 있다.

📚 참고사이트

Lombok 공식사이트

💡 스레드는 프로세스의 작업 단위로, 여러 스레드가 하나의 프로세스 내에서 CPU를 공유하면서 동시에 실행될 수 있습니다.

2️⃣ 컨텍스트 스위칭이란?

컨텍스트 스위칭(Context Switching)은 운영체제가 CPU를 A 스레드에서 B 스레드로 전환할 때 발생하는 상태 저장/복원 작업입니다. 스레드마다 레지스터, 프로그램 카운터 등의 상태(컨텍스트)를 가짐 A 스레드의 상태를 저장하고 B 스레드의 상태를 불러오는 과정 이 과정에서 CPU 리소스를 소비하므로 너무 잦으면 오버헤드 발생

💡 멀티태스킹이 가능하게 해주는 기술이지만, 너무 잦으면 성능 저하의 원인이 됩니다.

3️⃣ 멀티스레드 환경에서 동기화는 왜 필요한가?

멀티스레드 환경에서는 여러 스레드가 공유 자원(예: 전역 변수, 파일, DB)에 동시에 접근할 수 있기 때문에, 데이터 충돌이나 상태 불일치(race condition)가 발생할 수 있습니다.

class ThreadEx21 {
    public static void main(String args[]) {
        Runnable r = new RunnableEx21();
        new Thread(r).start();
        new Thread(r).start();
    }
}

class Account {
    private int balance = 1000;

    public  int getBalance() {
        return balance;
    }

    public void calc(int data){
        if(balance >= data) {
            try { Thread.sleep(1000);} catch(InterruptedException e) {}
            balance -= data;
        }
    }
}

class RunnableEx21 implements Runnable {
    Account acc = new Account();

    public void run() {
        while(acc.getBalance() > 0) {
            int randomData = (int)(Math.random() * 3 + 1) * 100;
            acc.calc(randomData);
            System.out.println("balance:"+acc.getBalance());
        }
    } // run()
}

실행 결과:
balance:800
balance:700
balance:500
balance:500
balance:200
balance:0
balance:-200

위 코드를 실행하면 balance값이 음수가 된다. 한 쓰레드가 calc()의 if문에서 조건식을 만족해서 data를 뺀순간, 다른 스레드에게 제어권이 넘어가서 다른 쓰레드가 또 if문의 조건식을 만족해서 data를 빼버리는 순간이 온다. 그래서 결국 balance값은 음수가 되서 프로그램이 종료된다. -> calc() 함수에 synchronized키워드를 붙여서 한 번에 하나의 스레드만 임계 영역을 실행할 수 있게 만듭니다.

임계 영역(Critical Section)은 둘 이상의 스레드가 동시에 접근할 경우 문제를 일으킬 수 있는 코드 구간입니다.

...
public synchronized void calc(int data){
    if(balance >= data) {
        try { Thread.sleep(1000);} catch(InterruptedException e) {}
        balance -= data;
    }
}
...

실행결과
balance:900
balance:700
balance:400
balance:200
balance:100
balance:100
balance:100
balance:100
balance:100
balance:100
balance:100
balance:0
balance:0

이렇게 해줌으로써, calc()가 호출되면 calc()가 종료되어 lock이 반납될때까지 다른 쓰레드는 calc()를 호출하더라도 대기 상태에 머무르게 된다.

💡 동기화는 여러 스레드가 동시에 공유 자원에 접근할 때 데이터 정합성을 보장하기 위해 필요합니다.

4️⃣ 데드락(Deadlock)이란? 방지 방법은?

데드락(Deadlock)은 두 개 이상의 스레드가 서로가 가진 자원을 기다리며 무한 대기 상태에 빠지는 현상입니다.

예시:

class Shared {
    synchronized void methodA(Shared other) {
        System.out.println(Thread.currentThread().getName() + " calls methodA");
        try { Thread.sleep(100); } catch (InterruptedException e) {}
        other.methodB(this);  // 여기서 데드락 가능
    }

    synchronized void methodB(Shared other) {
        System.out.println(Thread.currentThread().getName() + " calls methodB");
        try { Thread.sleep(100); } catch (InterruptedException e) {}
        other.methodA(this);  // 여기서 데드락 가능
    }
}

public class DeadlockExample {
    public static void main(String[] args) {
        Shared s1 = new Shared();
        Shared s2 = new Shared();

        new Thread(() -> s1.methodA(s2), "Thread-1").start();
        new Thread(() -> s2.methodB(s1), "Thread-2").start();
    }
}

→ 서로가 서로를 기다리며 무한 대기 → 데드락 발생

✅ 데드락 발생 4가지 조건 (전부 충족 시 발생)

상호 배제(Mutual Exclusion) – 자원은 한 번에 하나의 스레드만 사용 가능 점유 대기(Hold and Wait) – 자원을 점유한 상태에서 다른 자원을 기다림 비선점(No Preemption) – 자원을 강제로 뺏을 수 없음 환형 대기(Circular Wait) – 자원을 서로 물고 물고 있는 순환 대기 상태

방지 방법

1. 자원 획득 순서를 일관되게 정함

   class Shared {
    void methodA(Shared other) {
        synchronized (this) {
            System.out.println(Thread.currentThread().getName() + " acquired lock on this");
            try { Thread.sleep(100); } catch (InterruptedException e) {}
   
            synchronized (other) {
                System.out.println(Thread.currentThread().getName() + " acquired lock on other");
            }
        }
    }
   
    void methodB(Shared other) {
        // methodA와 동일한 순서로 락 획득
        synchronized (this) {
            System.out.println(Thread.currentThread().getName() + " acquired lock on this");
            try { Thread.sleep(100); } catch (InterruptedException e) {}
   
            synchronized (other) {
                System.out.println(Thread.currentThread().getName() + " acquired lock on other");
            }
        }
    }
   }
   

2. 타임아웃 설정

Lock lock1 = new ReentrantLock(); Lock lock2 = new ReentrantLock();

if (lock1.tryLock(1, TimeUnit.SECONDS)) { try { if (lock2.tryLock(1, TimeUnit.SECONDS)) { try { // 작업 } finally { lock2.unlock(); } } } finally { lock1.unlock(); } }

```

💡 데드락은 리소스를 차례로 요청하다가 서로 물고 물려서 아무 것도 못하는 상태로, 이를 방지하려면 자원 접근 순서나 타임아웃 설정이 중요합니다.

📚 참고 링크

• 남궁성의 코드초보스터디

React에서 상태 관리는 언제나 중요한 고민거리다.
그동안 계속 Redux를 사용해왔지만, 복잡한 보일러플레이트와 러닝커브 때문에 다른 대안을 찾기도 합니다.

오늘은 그런 대안 중 하나인 Zustand에 대해 소개하고, 왜 Zustand가 요즘 주목받고 있는지, Redux와 비교해서 어떤 점이 더 좋은지 알아보자.

🌿 Zustand란?

Zustand(독일어로 "상태"라는 뜻)는 Poimandres 팀에서 만든 작고 빠르며 직관적인 상태 관리 라이브러리이다.

• React 전용 상태 관리 라이브러리
• Context API 없이도 전역 상태를 관리할 수 있음
• Redux보다 훨씬 간단한 문법과 사용법

🤔 왜 Zustand를 사용할까?

1. 간단한 사용법

Redux처럼 action, reducer, dispatch 같은 복잡한 구조가 필요 없다.
단일 파일로 상태 관리 가능하며, 코드 양도 매우 적다.

2. Provider 불필요

Context 없이도 전역 상태를 사용할 수 있어서 코드가 더 간결해진다.

3. 불필요한 리렌더링 최소화

필요한 상태만 구독할 수 있기 때문에 성능 최적화가 자연스럽게 된다.

4. 중간 크기 프로젝트에 최적

복잡한 아키텍처 없이도 빠르게 상태 공유가 가능하므로 중소 규모 프로젝트에 특히 적합하다.

실제로 회사에서 앱 소개용 웹페이지를 소규모로 구축하게 되면서 프론트엔드 개발을 담당하게 되었다. 무료 이용권 등록, 앱스토어 이동 등 비교적 단순한 기능 위주였지만, UI 상의 상태 관리가 필요한 부분이 있어 Zustand를 도입해 실무에 적용해보았다. 🤓

🆚 Redux vs Zustand 비교

🛠 Zustand 기본 예제

// store.js
import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

export default useCounterStore;

// App.jsx
import useCounterStore from './store';

export default function App() {
  const { count, increase, decrease } = useCounterStore();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increase}>+1</button>
      <button onClick={decrease}>-1</button>
    </div>
  );
}

💾 persist 미들웨어로 상태 유지하기

Zustand는 persist 미들웨어를 통해 localStorage에 상태를 저장할 수 있다.

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({
      token: '',
      setToken: (token) => set({ token }),
    }),
    {
      name: 'auth-storage', // localStorage key 이름
    }
  )
);

🔍 Devtools 연결도 가능

import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools((set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
  }), { name: 'CounterStore' })
);

✅ 마무리

Zustand는 복잡한 상태 관리 없이도 충분히 강력한 전역 상태를 구성할 수 있게 해줍니다.
Redux가 너무 무겁거나, 작은 프로젝트에서 빠르게 전역 상태를 다뤄야 할 때 Zustand는 매우 훌륭한 선택이다.

📚 참고 링크

• Zustand 공식 문서
• Zustand GitHub

• github 로그인 > settings > email 탭으로 이동해서 학생 email등록하기

2. education에 학생신분 증명서 업로드하기

• https://education.github.com/discount_requests/application 위 링크에 접속해서 학생신분 증명
• 캡처하지는 못했지만 사진해상도가 1024x960 이하여야 하고 jpeg 또는 png여야하고, 크기가 1mb 이하여야 함 😇
• 나는 무려 5트만에 성공함 4번실패

3. 사진이 업로드되면 2일정도 기다리기..

• 그로부터 약 2일후에 승인메일이 오고 승인메일 오면 상태가 이렇게 바뀜
• 내 레포지토리 메인에도 pro 뱃지가 생김 ㄲ ㅑ

4. intellij에 로그인해서 승인코드 받기

• github로 로그인하고 학생인증을 클릭함 (캡쳐를 못했어유) 그럼 이런 이메일을 받고 인증을 하고 ... 인증 코드를 겓또..... ㄲ ㅑ

잘 쓰겟 읍니다 !

Apple developer사이트에 앱을 등록했다는 가정하에 진행하도록 하겠다.

1. APNs 인증서 발급하기

Services의 Apple Push Notification service SSL을 선택 앱 ID 선택하기 키체인 접근 프로그램 열기 인증 기관에서 인증서 요청 클릭해서 진행하기 (dev, prod 나뉘어져있으면 두번 발급받아야함) 사용자 이메일주소 : apple 계정 일반 이름: 본인 앱 이름 적기 (이름_dev, 이름_prod) CA 이메일은 안적어도되고 디스크에 저장됨 으로 선택하면 다운로드 받아짐 이런식으로 요청키가 받아진다 위 페이지에 요청키를 업로드한다 그러면 APNs 인증서가 생성되었다. Download를 눌러서 파일로 저장하자.

Certificates, Identifiers & Profiles > keys로 넘어가서 새로운 키 발급받기 다운로드 받아서 .p8 파일 받기

Identifiers > 앱 이름클릭 > push Notifications edit 눌러서 SSL 키 설정해주기 아까 다운받은 cer파일 업로드하기 (dev, prod 각각 업로드하기)

2. xcode 설정해주기

xcode > project name > target > signing & Capabilites 선택하고 +Capability 해서 Push Notification, Background Modes 추가해주기 Background Modes 에 Background fetch, Remote notification 체크해주기

3. firebase console 에서 설정하기

firebase 콘솔 > 프로젝트 설정 > 클라우드 메시징 탭 > Apple 앱 구성에 인증키(.p8) 업로드하기

4. 코드 추가해서 메시징 처리가 잘 되는지 확인해보기

• ios badge 카운트 처리시 사용한 라이브러리는 'notifee' 라는 라이브러리를 사용함

• App.tsx

  • foreground처리부

    const unsubscribe = messaging().onMessage(async remoteMessage => {
    //console.log('get message!!!');
    Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
    const channelId = await createChannel();
    
    await notifee.displayNotification({
      title: remoteMessage.notification?.title,
      body: remoteMessage.notification?.body,
      android: {
          channelId: channelId,
      },
    });
    });

• index.js

  • background 처리부

    messaging().setBackgroundMessageHandler(async remoteMessage => {
    await notifee.incrementBadgeCount();
    const count = await notifee.getBadgeCount();
    console.log('Badge count incremented by 1 to: ', count);
    });

foreground

background

보통 웹을 RN으로 말아서 앱으로 만들경우, 해당 webView에 설정된 uri의 인증서 이슈가 조금이라도 있으면 해당 Url로 절대 들여보내주지 않는다. 그렇지만 웹은 신뢰할 수 없는 페이지 입니다 ! 라고 하면서 들여는 보내주는걸 간간히 봤을것이다.

당연한거 아닌가? 라고 생각할지 모르겠지만 !! 개발자들은 당연한게 아니다 !! 왜냐면 RN통신부를 작업할때는 RN에 로컬호스트를 띄워야 좀더 편한 테스트가 가능하기 때문이다.

일단 필자의 개발 환경이다. 웹뷰: jsp, os: macos, simulator: iphone 16 pro

차근차근 실행했던 단계별로 나열해보도록 하겠다.

1. http를 https 로 바꿔주기 이것은 말그대로 로컬환경의 인증서를 만들어서 해당 인증서를 가지고 로컬실행을 하는것이다.

• mkcert, nss 깔기

  $ brew install mkcert $ brew install nss

brew가 없다면 깔아주도록 하자.

• mkcert 환경 등록해주기

  $sudo mkcert -install

• 인증서 발급받기 Java에서는 PKCS 형식의 인증키, 공개키가 하나로 묶인 형식을 이용하기때문에 .p12로 생성

  $ mkcert -pkcs12 -p12-file keystore.p12 localhost 127.0.0.1 "*.myexample.domain"

이렇게 하면 이런식으로 만들어졌다고 뜨고 기본 password는 'changeit'이다.

• 해당 인증서를 프로젝트에 추가하기 필자의 프로젝트는 springboot/jsp 형태였어서 myapp-local.yml 파일에 추가해주었다. 추가 예시

  server:
  ssl:
    enabled: true
    key-store: ${user.home}/keystore.p12
    key-store-type: PKCS12
    key-store-password: changeit

• app코드에 uri셋팅하기

  <WebView
    source={'https://myip:8083'}
  />

  ip는 public ip 로 집어넣기 wifi 설정 > 현재 연결된 wifi 세부사항에 들어가면 현재 public ip를 알수있다.

그렇게 하면 일단 오류메시지만 덩그러니 있는 페이지가 뜬다.

• node_module/react-native-webview 다이렉트로 수정해버리기 저거는 인증서가 유효하지 않다 라는것이고.. 나는 단지.. 로컬로 띄워서 RN메시징을 테스트 해보고싶었을 뿐이고... 로컬환경에서 인증서도 만들었고.... 흑흑흑흑 그냥 무시 해주면 안돼 ??? 외않되?

그래서 아예 ssl유효 인증을 구분하는 코드를 바꿔버렸다. ㅎㅎ react-native-webview 라이브러리는 버전마다 코드가 바뀔수도 있으니 필자가 수정한것을 토대로 코드를 찾아서 직접 수정하길 바란다.. ! 굳럭 ㅠ

• RNCWebViewImpl.m 파일 수정하기
• didFailProvisionalNavigation*를 전체검색해서 그안의 내부를 다 주석처리 해버리자. 이 코드들은 에러가 나타나면 화면에 흰화면+에러로그를 출력해주는 코드들이다.

didReceiveAuthenticationChallenge를 전체검색해서 내부를 바꾸자

if ([[challenge protectionSpace] serverTrust] != nil && customCertificatesForHost != nil && host != nil) {
...
if ([[challenge protectionSpace] authenticationMethod] == NSURLAuthenticationMethodHTTPBasic) {
...

저 위의 두개의 if문을 전체 주석처리 해버리자. 그리고 아래의 코드를 집어넣기

// 모든 서버 인증서를 신뢰하도록 설정
  if ([[challenge protectionSpace] serverTrust] != nil) {
    SecTrustRef trust = [[challenge protectionSpace] serverTrust];
    NSURLCredential *credential = [NSURLCredential credentialForTrust:trust];
    completionHandler(NSURLSessionAuthChallengeUseCredential, credential);
    return;
  }

  // 기본 인증 처리 (HTTP Basic)
  if ([[challenge protectionSpace] authenticationMethod] == NSURLAuthenticationMethodHTTPBasic) {
    NSString *username = [_basicAuthCredential valueForKey:@"username"];
    NSString *password = [_basicAuthCredential valueForKey:@"password"];
    if (username && password) {
      NSURLCredential *credential = [NSURLCredential credentialWithUser:username password:password persistence:NSURLCredentialPersistenceNone];
      completionHandler(NSURLSessionAuthChallengeUseCredential, credential);
      return;
    }
  }

그러고 빌드하면 화면이 잘 나온다....

• web에서 팝업 형태로 뜨던것이 앱으로 빌드를 하면서 팝업형태가 아닌 인앱브라우저 내부 탭 전환이 이루어져 나이스 인증 페이지가 뜨지 않음
• 결과적으로는 흰 화면만 노출됨
• RN내부 webview는 jsp로 구성되어있음

🥹 해결 방법

1. 나이스인증 전용 webView 스택을 하나 만든다

   <RootStack.Screen
    name="NicePayWebView"
    component={NicePayWebViewConitainer}
    options={{
        animationEnabled: true, // 애니메이션 비활성화
    }}
   />

2. webview > RN으로 나이스페이 창을 열것이다 라는 postMessage를 보낸다 encData를 같이 넘겨준다

   window.ReactNativeWebView?.postMessage(
    JSON.stringify({type: 'callCheckPlusSubmit', value: encData})
   );

3. RN에서 webview로부터 받은 encData를 가지고 source를 구성해서 NicePayWebView 스택을 쌓는다

   const sourceURL = (
   {
    uri: 'https://nice.checkplus.co.kr/CheckPlusSafeModel/checkplus.cb',
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: `m=checkplusService&EncodeData=${data.value}`,
   });
   

const pushAction = StackActions.push('NicePayWebView', { sourceURL: sourceURL, encodeData: data.value }); navigation.dispatch(pushAction);

4. 인증진행이 완료되면 인증 완료 URL로 이동되면서 encodeData, successYn 데이터를 받는다. 데이터를 받아서 다시 RN으로 넘긴다

// mobile일때 if(util.getUserAgent() === 'android' || util.getUserAgent() === 'ios') { window.ReactNativeWebView?.postMessage( JSON.stringify({type: 'nicePayInSignin', value: { encodeData: encodeData, successYn: successYn }}) ); } else { // web일때 opener.resultCheckPlus(encodeData, successYn); }

5. RN에서 인증 완료 데이터를 받으면 NicePayWebView에서 기존의 WebView로 이동한다

navigation.navigate('defaultWebView', { encodeData: data.value.encodeData, success: data.value.successYn });

6. defaultWebView로 이동되면서 전달받은 param 값을 webview로 내려준다

webview?.current?.postMessage( JSON.stringify({ type: 'nicePayInSignin', encodeData: route.params.encodeData, success: route.params.success }), );

![](https://velog.velcdn.com/images/e_jink0/post/b7fcd57b-268e-4d88-86fd-b557b6ee4b2e/image.gif)

✅ 문제 현상

React Native android 빌드 중 Cmake관련 오류가 잔뜩 발생.

🔍 원인 분석

• React Native가 0.71 이후 버전에서 JSI, Hermes, TurboModules 등 C++ 기반의 네이티브 기능을 도입하면서 CMake 설정이 필수적으로 요구되는 경우가 많아짐.
• 에러 로그를 보면 ".../node_modules/react-native-gesture-handler/android/build/generated/source/codegen/jni/" which is not an existing directory. 라고 하는 것을 보아하니 해당 경로에 jni폴더가 없어서 나는 에러였다.
• 결과적으로 npm install을 해서 자동적으로 source/codegen/jni/ 이 경로까지 만들어져야하는데 그러지 못했던 것임.

🛠️ 해결 방법

node_modules 및 설정 관련된 폴더들 초기화 및 generateCodegenArtifactsFromSchema 실행

$ rm -rf node_modules $ npm install $ cd android $ ./gradlew clean $ ./gradlew generateCodegenArtifactsFromSchema $ npx react-native run-android

✅ 결과

warning은 많지만 일단 성공 😬

💡 참고 팁

• 결과적으로 ./gradlew generateCodegenArtifactsFromSchema 이 명령어를 통해서 해결하였는데, 이 명령은 React Native 프로젝트의 GraphQL 또는 TypeScript schema 등을 기반으로 자동 생성되는 코드/헤더 파일과 jni 폴더 구조를 만들어 줍니다. https://reactnative.dev/docs/the-new-architecture/using-codegen 위 공식문서를 보면 일단 1차적으로 codegen에 대해서 나옵니다. 쉽게 얘기해서 네이티브 모듈과 컴포넌트를 자동으로 연결해주는 코드 생성도구입니다. 수동으로 작성하면 번거로운 C++, Java, Objective-C 코드를 Flow나 TypeScript 기반의 JS 사양(spec) 파일만 작성하면 자동으로 생성해 주는 것 입니다. 쉽게 말해, "JS로 네이티브 연동 구조를 선언하면, 나머지 연결 코드는 자동 생성된다" 는 개념입니다. 내부적으로 TurboModules와 연동되는 코드, CMakeLists.txt 등이 이 명령을 통해 생성됩니다. jni하위에 CMakeLists.txt를 포함한 폴더 및 파일들의 구조가 doc에 있으니 한번 훑어보시길 바랍니다. 😎

2. Duplicate Class Error

✅ 문제 현상

React Native 프로젝트 빌드 중 다음과 같은 에러가 발생했다

Execution failed for task ':app:checkDebugDuplicateClasses'. A failure occurred while executing com.android.build.gradle.internal.tasks.CheckDuplicatesRunnable Duplicate class android.support.v4.app.INotificationSideChannel found in modules core-1.9.0.aar -> core-1.9.0-runtime (androidx.core:core:1.9.0) and support-compat-26.1.0.aar -> support-compat-26.1.0-runtime (com.android.support:support-compat:26.1.0) Duplicate class android.support.v4.app.INotificationSideChannel$Stub found in modules core-1.9.0.aar -> core-1.9.0-runtime (androidx.core:core:1.9.0) and support-compat-26.1.0.aar -> support-compat-26.1.0-runtime (com.android.support:support-compat:26.1.0) ...

🔍 원인 분석

에러 메시지를 보면 두 가지 라이브러리 간의 클래스 충돌이 원인이다

androidx.core:core:1.9.0 com.android.support:support-compat:26.1.0

이 두 라이브러리는 각각 androidx와 android.support 계열이다. AndroidX로 마이그레이션한 프로젝트에서 여전히 일부 종속 라이브러리나 코드가 android.support를 참조하고 있다면 이러한 충돌이 발생한다.

즉, AndroidX와 android.support 라이브러리를 동시에 사용할 수 없기 때문에 충돌이 발생한다.

🛠️ 해결 방법

React Native 프로젝트를 완전히 AndroidX로 전환하기 위한 설정을 android/gradle.properties 파일에 추가한다

android.useAndroidX=true android.enableJetifier=true

android.useAndroidX=true AndroidX 라이브러리를 사용하도록 설정 android.enableJetifier=true 기존 android.support 기반 라이브러리를 AndroidX로 자동 변환해줌 (Jetifier)

추가로 build.gradle에서 혹시 com.android.support 계열 라이브러리가 명시적으로 추가되어 있다면 제거하거나 androidx 버전으로 교체해주어야 한다.

✅ 결과

위 설정을 적용한 후 ./gradlew clean 후 다시 빌드를 실행하니, 충돌 없이 정상적으로 앱이 빌드되었다.

💡 참고 팁

Jetifier는 마이그레이션 호환성을 위해 존재하지만, 이후 사용하는 라이브러리가 모두 AndroidX를 지원한다면 enableJetifier는 false로 설정해도 된다.

가능하면 외부 라이브러리도 최신 AndroidX 지원 버전으로 유지하는 것이 좋다.

1. hermes-engine error

message: Command PhaseScriptExecution failed with a nonzero exit code

보통 빌드할때 react-native start CLI로 실행하는데, building... 이후로 아무 동작하지 않을때는 xcode로 빌드하게 된다.

빌드할때 hermes-engine error가 뜨면서 아무 동작하지 않을때는 xcode 의 env파일을 지워보자.. (이걸로는 해결했지만 다른 해결법이 있다면 그 해결법도 포스팅해보겠음.)

root디렉토리 터미널에서 아래 커맨드 실행하기

$ rm ./ios/.xcode.env.local

이걸로도 안된다면 로그를 확인하기

Showing Recent Messages

/Users/jklee/myreactproj/myapp/ios/Pods/../../node_modules/react-native/scripts/react-native-xcode.sh: line 175: /Users/jklee/myreactproj/myapp/ios/Pods/hermes-engine/destroot/bin/hermesc: No such file or directory

필자는 계속 Pods/hermes-engine/destroot/bin/hermesc 파일을 찾지 못한다는 에러와 함께 Command PhaseScriptExecution failed with a nonzero exit code 에러가 떴기때문에...

targets > myapp > Build Settings > User-Defined 에서 Use_HERMES = false로 바꿔서 빌드해보았더니 거짓말처럼 빌드가 잘되서 다시 true로 바꿨더니 거짓말처럼 또 폴더를 잘찾아서 빌드가 되었다

👾 기타 명령어 모음

Xcode의 캐시 데이터(빌드 캐시)를 완전히 삭제하는 명령어

rm -rf ~/Library/Developer/Xcode/DerivedData

window 추가하기

<div class="window">
    <div class="title-bar">
        <div class="buttons">
            <div class="close"></div>
                <div class="minimize"></div>
                <div class="zoom"></div>
            </div>
            <div class="title">Window Title</div>
        </div>
        <div class="content">
            Window Content
        </div>
    </div>
</div>

css 스타일 추가하기

.window {
    width: 300px;
    height: 300px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    transition: 
        transform 1s ease-in-out, 
        opacity 1s ease-in-out,
        right 1s ease-in-out,
        bottom 1s ease-in-out;
}
.window.minimized {
    opacity: 0 !important;
    z-index: 2;
}
.window.minimized.hidden {
    display: none;
}

• 움직이면서 투명해져야하고 우측 하단에 있는 floating메뉴 뒤로 숨어야 하기때문에 transition 속성에 transform, opacity, right, bottom 을 준다.

javascript 코드 추가하기

const minimizeButton = $('.minimize');
const photoContainer = $('.photo-container');
const myWindow = $('.window');

minimizeButton.on('click', function(e) {
     if (!myWindow.hasClass('minimized')) {
        const chatbotRect = photoContainer[0].getBoundingClientRect();
        const containerRect = myWindow[0].getBoundingClientRect();

        const translateX = chatbotRect.right - containerRect.right - 20;
        const translateY = chatbotRect.bottom - containerRect.bottom - 40;

        myWindow.css('display', 'block');
        myWindow.css('transform', `translate(${translateX}px, ${translateY}px) scale(0.1)`);
        myWindow.css('right', '20px');
        myWindow.css('bottom', '98px');
    }

    myWindow.addClass('minimized');

    setTimeout(() => {
        myWindow.addClass('hidden');
    }, 100);
});

photoContainer.on('click', function(e) {
    myWindow.css('transform', 'translate(-50%, -50%)');
    myWindow.css('right', 'unset');
    myWindow.css('bottom', 'unset');

    myWindow.removeClass('minimized');

    setTimeout(() => {
        myWindow.removeClass('hidden');
    }, 100);
});

• 반응형이기때문에 window와 우측 하단의 floating메뉴 사이의 거리를 구해야 한다. 어떤 화면에서든 floating메뉴 쪽으로 샥~ 숨어야 한다.
• getBoundingClientRect()를 사용해서 window와 floating메뉴의 right, bottom 값을 각각 구하고 움직여야 할 translateX값과 translateY값을 구한다.
• translateX값과 translateY값을 transform값에 설정한 후 myWindow.addClass('minimized')하면!! 스르륵 하면서 minimize가 된다.
• 다시 maximize하고싶으면 window를 화면 중앙에 보여줘야 하니까 translate(-50%, -50%)를 주면서 right, bottom 값을 unset으로 주면 다시 maximize가 된다.

텍스트 추가

<div style="padding: 100px;">
    <span class="kmi-chat-content-loading">
        매우매우 로딩중입니다....
    </span>
</div>

css 추가

@keyframes gradient-move {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
.kmi-chat-content-loading {
    background: linear-gradient(90deg, rgba(72, 78, 86, 0.2) 0%, rgba(72, 78, 86, 1) 50%, rgba(72, 78, 86, 0.2) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    animation: gradient-move 5s linear infinite;
}

• 일단 background에 gradient를 주는데 애니메이션으로 background-position값을 계속 바꿀것이기 때문에 이어지는 효과를 주기 위해서 50% 가운데부분을 제일 opacity를 높게주고 0퍼센트와 100퍼센트는 opacity를 작게준다.

• 속성 설명

-webkit-background-clip: text; 설명: 이 속성은 요소의 배경 이미지나 그라데이션이 텍스트의 형태를 따라 잘려나가도록 설정한다. 즉, 배경이 텍스트의 모양에 맞춰져서 표시된다.

-webkit-text-fill-color: transparent; 설명: 이 속성은 텍스트의 색상을 투명하게 만든다. 이렇게 하면 텍스트의 색상은 보이지 않고 배경이 텍스트를 통해 보이게 된다.

background-clip: text; 설명: -webkit-background-clip: text;의 표준 속성으로, 동일하게 배경 이미지나 그라데이션을 텍스트 모양으로 잘라서 적용한다.

text-fill-color: transparent; 설명: -webkit-text-fill-color: transparent;의 표준 속성으로, 동일하게 텍스트 색상을 투명하게 만든다.

서랍 효과를 줄 div 추가하기

<div class="drawer-container">
    <div class="drawer-text-wrapper">
        <span>서랍 효과ㅏㅏㅏㅏㅏㅏㅏㅏ</span>
    </div>
</div>

css 적용하기

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateX(30px);
        width: 196px;
    }
    20% {
        opacity: 1;
        transform: translateX(0);
        width: 246px;
    }
    80% {
        opacity: 1;
        transform: translateX(0);
        width: 246px;
    }
    100% {
        opacity: 0;
        transform: translateX(30px);
        width: 196px;
    }
}
.drawer-container {
    bottom: 105px;
    right: 46px;
    position: fixed;
    z-index: 1;
    opacity: 0;
    animation: fadeInOut 6s forwards infinite;
    width: 196px;
}
.drawer-text-wrapper {
    background-color: #3f659b;
    padding: 10px 68px 10px 12px;
    border-radius: 50px;
    display: flex;
    white-space: nowrap;
}
.drawer-text-wrapper span{
    font-size: 1rem;
    font-family: "NotoSansKRMedium";
    color: #ffffff;
}

• 서랍이 열렸다가 닫히는 느낌을 주기위해 0, 20, 80, 100 으로 나눠서 효과를 줌.

bg를 넣을 div 넣기

 <div>
        <div class="photo-container" style="--direction:normal;">
            ...
        </div>

        <div class="bg-animation"></div>
    </div>

css 적용하기

@keyframes animloader {
    0% {
        transform: scale(0.65);
        opacity: 0.9;
    }    
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
.bg-animation {
    bottom: 166px;
    right: 88px;
    position: fixed;
    z-index: 1;
}
.bg-animation::after,
.bg-animation::before {
    content: '';  
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(56, 155, 247);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    animation: animloader 1.8s linear infinite;
}
.bg-animation::after {
    animation-delay: 0.8s;
}

• ::before, ::after 이것은 CSS에서 사용하는 가상 요소로서, 이 가상 요소들은 주로 추가적인 디자인 요소를 추가하거나, 스타일링을 위해 사용된다.
• 필자는 ::after 가상 요소에 0.8초 딜레이를 주어서 두겹으로 보여지게 하는(?) 효과를 주었다.

사진 넣기

 <div class="photo-container" style="--direction:normal;">
    <div class="photo-wrapper">
        <img class="a"/>
        <img class="b"/>
        <img class="a"/>
        <img class="b"/>
    </div>
 </div>

• 필자는 2장을 할것이라 2장을 이어서 2번 넣었다.

css적용하기

@keyframes slide {
    0% { transform: translateX(0); }
    25% { transform: translateX(-25%); }
    50% { transform: translateX(-25%); }
    75% { transform: translateX(-50%); }
    100% { transform: translateX(-50%); }
}
.photo-container {
    width: 56px;
    height: 56px;
    bottom: 98px;
    right: 20px;
    position: fixed;
    border-radius: 50%;
    overflow: hidden;
    background-color: #C7EAFF;
    box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.2);
    z-index: 2;
}
.photo-wrapper {
    display: flex;
    width: calc(100% * 4);
    height: 100%;
    animation: 3s linear infinite 2s slide;
}
.photo-wrapper img {
    width: 25%;
    height: 100%;
    object-fit: cover;
}
.photo-wrapper img.a {
    content: url(./images/example1.png);
}
.photo-wrapper img.b {
    content: url(./images/example2.jpg);
}

• photo-wrapper에 적용된 animation 디테일

• 2장의 사진이 이동하면서 끊어지지 않아야 하기 때문에 0, 25, 50, 75, 100 으로 끊어서 translateX값을 적절히 주도록 한다.

• slide애니메이션이 적용되는 모습

svg이미지에 클릭 이벤트를 주는 방법

1. svg를 img태그가 아닌 object태그로 넣기

html

<object class="key" data="./images/key.svg" type=""></object>

object태그로 넣으면 개발자 도구에서 svg내부 코드를 확인할 수 있음

2. svg 파일을 열어서 수정하기

• svg 파일 기본 형태

  <?xml version="1.0" encoding="UTF-8"?>
  <svg class="key" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392.87 486.05">
  
  <defs>
      <style>
    </style>
  </defs>
  
  <g>
      <path class="key-blade cls-3" d="M223.23,20.53h-22.68c-6.26,0-11.34,5.08-11.34,11.34V213.28s45.35,0,45.35,0V31.87c0-6.26-5.08-11.34-11.34-11.34Z"/>
    <path class="cls-2" d="M349.01,167.61H218.22c-30.28,0-54.82,24.54-54.82,54.82v220.05c0,11.27,9.13,20.4,20.4,20.4h130.8c30.28,0,54.82-24.54,54.82-54.82V188.02c0-11.27-9.13-20.4-20.4-20.4Z"/>
    <circle class="key-btn cls-1" cx="211.89" cy="213.45" r="22.68"/>
  </g>
  
  <script>
  </script>
  </svg>

viewBox 속성: 4개의 숫자 중에서 첫번째와 두번째 숫자는 왼쪽 위 (x,y)의 좌표를의미하고 세번째와 네번째 숫자는 오른쪽 아래의 좌표(width, height)를 의미함.

defs 태그: 스타일 정의, 그라디언트, 클리핑 등 스타일 선언 후 g태그 내부 코드들에 적용할 수 있음.

script태그: 내부에 javascript로 svg에 이벤트를 적용할 수 있음.

• svg파일 내부에 style 코드 수정하기

  .key-blade {
    transform: rotate(-180deg);
    transform-origin: 211.89px 213.45px;
    transition: 0.3s;
  }
  

.key-blade-flipped { transform: rotate(0deg); }

* javascript로 클릭 이벤트 주기

const keyBtnElement = document.querySelector('.key-btn'); const bladeElement = document.querySelector('.key-blade'); keyBtnElement.addEventListener('click', e => { bladeElement.classList.toggle('key-blade-flipped'); });

```

보통의 트랜지션 작업하듯이 작업하면 됨.

• key.svg 동작 확인

<참고 사이트> 인프런 1분코딩-웹 애니메이션의 새로운 표준, Web Animations API