HTTPS 적용 및 Mixed Content 해결기

1. Certbot SSL 인증서 발급설치sudo apt install -y certbot python3-certbot-nginx인증서 발급sudo certbot --nginx -d [도메인] -d www.[도메인]트러블슈팅에러 원인 해결NXDOMAIN looking up A for www.[도메인]Route53에 www A 레코드 없음Route53에 www A 레코드 추가https://[도메인] 접속 불가Route53 A 레코드 누락Route53에 루트 도메인 A 레코드 재등록Certbot이 자동으로 수정한 Nginx 설정server { server_name [도메인] www.[도메인]; location / { proxy_pass http://localhost:3000; ..

• format_list_bulleted 프로그래밍
• · 2026. 3. 19.
• textsms

GitHub Actions Docker Hub 빌드/배포 분리 전략

왜 분리했는가기존 방식은 EC2 서버에서 직접 docker compose up --build를 실행했다.기존 방식의 문제점 git push→ EC2 SSH 접속→ git pull→ docker compose up --build ← EC2에서 직접 빌드→ 완료문제원인배포 시간 20분t3.medium CPU로 Next.js 빌드command_timeout 초과node_modules COPY만 145초 소요EC2 CPU 100% 점유빌드 중 서비스 응답 불가새로운 방식: 빌드와 배포 분리 git push→ GitHub Actions 서버에서 docker build ← GitHub 서버 CPU 사용→ Docker Hub push→ EC2에서 docker pull + 실행만 ← 빌드 없음→..

• format_list_bulleted 프로그래밍
• · 2026. 3. 19.
• textsms

EC2 Docker 배포 + GitHub Actions CI/CD + 도메인 연결기

1. Jenkins 제거 결정 배경문제t3.medium (4GB RAM) 에서 Jenkins 334MB 고정 점유메모리 사용률 89%, Swap 196MB 사용페이지 로딩마다 느림원인 분석JVM 힙 제한 없이 기본값 실행 → GC 폭탄호스트에 Jenkins 프로세스 이중 실행 (컨테이너 + 호스트 직접 실행)JAVA_OPTS 대신 JAVA_TOOL_OPTIONS 써야 했음 (이미지 특성)해결# JVM 힙 고정JAVA_TOOL_OPTIONS=-Xms512m -Xmx512m -XX:+UseG1GC# 호스트 이중 프로세스 제거kill -9 Jenkins → GitHub Actions 전환 이유항목 Jenkins GitHub ActionsRAM 점유334MB 고정0MB설정 복잡도높음낮음포트폴리오 가시성낮음Git..

• format_list_bulleted DB
• · 2026. 3. 17.
• textsms

[React] Redux Middleware를 활용한 웹소켓 중앙 집중 관리

웹소켓 로직을 미들웨어로 옮기면 컴포넌트는 오직 **"액션을 디스패치"**하고 **"스토어의 데이터"**를 가져다 쓰기만 하면 됩니다.1. 웹소켓 미들웨어의 흐름미들웨어는 리덕스 액션을 가로채서 서버와 소켓 통신을 수행하고, 서버로부터 받은 데이터를 다시 액션으로 발행하여 스토어를 업데이트합니다.2. 미들웨어 구현 예시 (stompMiddleware.js)간결한 관리를 위해 액션 타입에 따라 소켓 동작을 수행하는 커스텀 미들웨어 구조입니다.JavaScript import SockJS from 'sockjs-client';import Stomp from 'stompjs';// 액션 타입 정의export const WS_CONNECT = 'WS_CONNECT';export const WS_DISCONNECT..

• format_list_bulleted react
• · 2026. 3. 11.
• textsms

[React/Next.js] 왜 우리는 CSS-in-JS, 그 중에서도 Emotion을 선택했는가?

안녕하세요! 오늘은 현대 프런트엔드 개발에서 스타일링의 표준으로 자리 잡은 CSS-in-JS의 개념과, 수많은 라이브러리 중 저희 프로젝트가 Emotion을 선택하게 된 기술적 배경을 공유하고자 합니다.1. CSS-in-CSS의 한계와 새로운 대안과거에는 CSS 파일과 JS 파일을 분리해서 관리하는 CSS-in-CSS 방식(BEM, CSS Modules 등)이 주를 이뤘습니다. 하지만 프로젝트 규모가 커질수록 다음과 같은 고질적인 문제들에 직면하게 됩니다.Global Namespace: 모든 스타일이 전역에 선언되어 클래스명 충돌을 피하기 위한 복잡한 명명 규칙(BEM 등)이 필요했습니다.Dependencies: 어떤 컴포넌트가 어떤 CSS에 의존하는지 파악하기 어렵고, 코드 수정 시 사이드 이펙트가 두..

• format_list_bulleted Javascript
• · 2026. 3. 10.
• textsms

😇 [번역] useEffect 무한 루프의 늪에서 탈출하는 5가지 방법

안녕하세요! 오늘은 리액트 개발자라면 누구나 한 번쯤 겪어봤을, 아니 지금 이 순간에도 누군가를 괴롭히고 있을 **'useEffect 무한 루프'**에 대해 다뤄보려 합니다.저 또한 무한 루프에 빠져 골머리를 앓던 중, 큰 깨달음을 주었던 해외 기술 블로그 글을 탐독하고 그 내용을 우리말로 정리해 공유합니다. 레스 기릿! 🚀🧐 왜 useEffect를 사용할까?useEffect는 리액트 컴포넌트에서 **부작용(Side Effects)**을 제어하기 위한 핵심 도구입니다.네트워크 데이터 페칭 (API 호출)UI 직접 조작 및 이벤트 리스너 등록타이머 설정 및 해제하지만 이 강력한 도구는 양날의 검과 같습니다. 잘못 사용하면 브라우저를 멈추게 하는 '무한 루프'라는 재앙을 불러오죠. 그 원인과 해결책을 단..

• format_list_bulleted react
• · 2026. 3. 10.
• textsms