짧은 기록

1. Intro 이슈 발생: "분명히 PATCH로 데이터를 수정했는데, 왜 GET으로 조회하면 어떨 땐 수정된 데이터가, 어떨 땐 옛날 데이터가 나오지?"현상 요약:동일한 API 요청임에도 200(정상)과 404(데이터 없음/과거 데이터)가 번갈아 발생.DB를 직접 까보면 데이터는 정상적으로 수정되어 있음.현상이 불규칙적(간헐적)으로 발생하여 재현이 까다로움.2. 장애 발생 환경 정리인프라 제약: Oracle 9i라는 레거시 DB 환경.상태 관리: MySQL을 글로벌 상태 저장소로 활용하여, 특정 DB 접속 실패가 5회 누적되면 MySQL의 상태 값을 'N'으로 변경하고 다른 DB로 우회(Failover)하도록 AOP(ControllerAspect)와 전역 설정(CommonDao)에 구현.3. 원인 분석..

프론트와 통신하는 과정에 있어서 핵심은 보안이라고 할 수 있음.SpringBoot로 로그인하는 과정에 있어서 JWT토큰을 발급하고, 들어오는 요청마다 토큰을 검증하고, 만료시 갱신 하는 로직을 구현하고 해당 내용을 복기하며 정리하였다. JWT 토큰 생성 및 검증HttpOnly 쿠키로 Refresh Token 안전하게 전송CORS 설정 및 SameSite 속성토큰 재발급 API 구현RTR (Refresh Token Rotation) 개념SpringBoot 기본 버전은 3.4.4에 Java17 그리고 maven을 사용했음1. 프로젝트 설정1-1. 의존성 추가 maven org.springframework.boot spring-boot-starter-w..

기존에 회사 서비스를 배포할때는 jar로 패키징 하여 sftp를 이용해 수동으로 배포를 하였다.이는 매우 번거롭고 로컬 환경과 배포 환경의 차이때문에 배포 시 오류가 발생할 경우도 있었다. 이를 해결하고자 CI/CD 파이프라인을 구축하였다. 우선 기본적인 형상관리는 Git으로 하였고 개인 branch를 두어 각자 맡은 부분을 개발하여 commit하고 develop 으로 merge. jenkins을 이용하여 git 소스를 빌드 한 다음 docker로 배포하는 구조를 잡았다. 먼저 흐름은 다음과 같다. 1688 대표번호 웹 서비스를 마이그레이션 하면서 위의 파이프라인대로 배포를 진행하였다. 먼저 구동시키는 서버의 nginx에 9000포트를 방화벽을 열어서 외부 사용자가 웹 사이트에 접속할 수 있도록 한다.호..

기존에 운영하는 Django 프로젝트를 인수받아 유지보수, 요구사항 추가해야할 일이 생겨서 급하게 프로젝트를 받아서 로컬에서 구동시켰다. 먼저 venv 가상환경에서 구동시켰는데 vsCode 툴이 불편해서 도중에 pyCharm으로 변경했다.두가지 구동 방식을 메모한다. 1. venv로 직접 실행하기1) 프로젝트 폴더 이동manage.py가 있는 루트 디렉토리2) 가상환경 생성python -m venv venv프로젝트 내부에 venv 폴더가 생긴다.3) 가상환경 활성화venv\Scripts\activate 프롬프트 앞에 (venv)가 붙으면 성공.4) 패키지 설치Django 프로젝트에서 사용하는 의존성을 설치(스프링부트에서 pom.xml 이라고 이해함)requirements 디렉토리에 txt 파일 pip i..

Client ── HTTPS(443) ──> Node.js (PM2)Nginx 없이 PM2로 실행 중인 Node 서버에 SSL 인증서를 적용하는 법 정리현재 서버 구조 확인먼저 Node가 직접 웹 서버 역할을 하고 있는지 확인sudo ss -tulpn | grep node LISTEN 0 511 0.0.0.0:443 users:(("node",pid=1234)) LISTEN 0 511 0.0.0.0:8080 users:(("node",pid=1234)) 👉 Node가 직접 443(HTTPS)과 8080(HTTP)을 리스닝 중즉,Nginx ❌Apache ❌Node가 웹 서버 + HTTPS 직접 처리 Node 서버에 SSL 적용Node 코드에서 https.createServer로 HTTPS 서버를 띄운다...

토큰 저장, 어디에?리액트로 JWT 로그인을 구현하면서 토큰을 어디에 저장하는게 안전하고 일반적일까?일단 각각의 저장소와 단점을 확인해보면localStorage: localStorage.getItem('token')으로 XSS 공격 시 쉽게 탈취당함일반 쿠키: CSRF 공격으로 사용자 몰래 요청 위조 가능메모리: 새로고침하면 날아가서 다시 로그인해야 함1. 설계 : 용도별 토큰 분리토큰의 수명과 용도에 따른 저장소 위치 구분짓기 Access Token짧음 (30분~1시간)JS 메모리 (Zustand)매 API 요청마다 헤더에 사용짧은 수명으로 탈취 피해 최소화Refresh Token길음 (2주)HttpOnly CookieAccess Token 재발급 전용JS 접근 불가 (XSS 원천 차단)2. 상태 관리..

리액트와 스프링 부트로 프로젝트를 진행하면서 로그인(인증) 기능을 구현하려다 보니, 머릿속에서 용어들이 뒤죽박죽 섞이기 시작함..."쿠키랑 세션이랑 다른 건 알겠는데, 그럼 JWT는 뭐지?""요청 헤더(Header)에는 또 뭘 담는 거지?"오늘 드디어 이 복잡한 개념들의 **'관계'**를 명확하게 정리했다. 결론부터 말하자면, 이것들은 서로 싸우는 개념이 아니라 **'역할'**이 다른 것!1. 가장 중요한 개념: "내용물" vs "포장지"가장 헷갈렸던 이유는 "무엇을(Content)" 보내는지와 "어디에(Wrapper)" 담아 보내는지를 구분하지 않았기 때문이었다. 이 둘을 분리해서 생각하니 모든 게 명확해졌다.📦 내용물 (Content): "나를 증명하는 데이터는 무엇인가?"서버가 나를 알아보기 위해..

AngularJS 프로젝트를 React로 마이그레이션하면서 SCSS 파일을 CSS로 변환하는데 필요한 내용 정리📋 목차왜 CSS로 변환하나?SCSS → CSS 문법 변환CSS 파일 구조화 및 ImportReact 프로젝트에 적용하기주의사항1. 왜 CSS로 변환하나?React에서 SCSS 그대로 사용npm install sass// main.tsximport './styles/_main.scss'; // SCSS 그대로 사용하지만 CSS로 변환한 이유?> 프로젝트에 SCSS 컴파일러를 추가하고 싶지 않았고, 기존 레거시 파일을 정리하고싶어서 변환하면서 쓰레기 코드 날림2. SCSS → CSS 문법 변환2.1. 변수SCSS:$primary-color: #5c6bc0;$header-height: 60px;..

리액트를 이용한 웹 프로젝트 업무를 맡았다.초기 세팅을 위해 Vite 빌드방식을 이용한 React+TypeScript 프로젝트를 생성하고 디렉토리 구조를 잡는다. 1. 프로젝트 생성# npm create vite@latest [프로젝트명] -- --template [템플릿]npm create vite@latest my-react-app -- --template react-ts 2. 의존성 설치 및 실행cd my-react-appnpm installnpm run dev터미널에 뜨는 Local: http://localhost:5173/ 주소로 접속하여 React 로고가 뜨면 초기 세팅 완료 3. 디렉토리 구조디렉토리 구조는 정해진건 없으나 역할,기능별로 나누어 구성해보았다.my-react-app/├── 📁..

폐쇄망(인터넷이 차단된 환경)에서 Node.js 개발 환경을 구축하려한다.node 버전이 다를때마다 해당 버전을 다운로드하여 옮기는 번거로움이 있어서 Nexus Repository Manager를 활용하여 폐쇄망 환경에서 Node.js와 npm 패키지를 설치하는 방법을 알아내어 시도해보았다. 준비사항 NVM(Node Version Manager) 설치 완료Nexus Repository Manager 접근 가능Nexus에 다음 저장소 설정 완료nodejs-dist: Node.js 바이너리 프록시 저장소npm-group: npm 패키지 그룹 저장소(Window pc 환경에 맞추어 세팅하였다) NVM 설치 및 설정NVM은 Node.js의 여러 버전을 쉽게 관리할 수 있는 도구이다. 하지만 기본적으로 공식 사이..