FIF's 코딩팩토리

Caffeine 로컬 캐시를 서버 여러 대에서 같은 값으로 맞추는 방법에 대한 정리 로컬 캐시의 문제공통코드, 메뉴, 메시지 같은건 거의 안 바뀌는데 화면마다 읽는다.그래서 서버 메모리에 올려두고 쓴다.스프링에서는 spring-boot-starter-cache 에 Caffeine 을 붙이면 금방 된다.근데 서버가 2대 이상이면 얘기가 달라진다..관리자 화면에서 코드를 바꾸면 요청을 받은 서버 캐시만 바뀌고 나머지 서버는 옛날 값을 그대로 들고 있다.보통은 Redis 같은 공유 캐시를 쓰거나 메시지로 갱신 이벤트를 뿌린다.여기서는 그런거 없이 DB 테이블 하나로 해결했다. 구조캐시 이름마다 "기준일시"를 둔다.DB 기준일시 : 관리자가 갱신을 요청한 시각. 모든 서버가 같이 봄서버 기준일시 : 이 서버가 ..

로그인 같은 POST 요청의 JSON body 를 브라우저에서 AES 로 암호화하고, 서버에서는 서블릿 Filter 로 풀어서 컨트롤러에 넘기는 방법에 대한 정리 왜 하나?HTTPS 면 전송 구간은 이미 암호화된다.그런데 보안 점검을 받다보면 "개발자도구 Network 탭에 비밀번호가 평문으로 보인다" 는 항목이 종종 나온다.이걸 막으려고 body 자체를 한번 더 암호화해서 보낸다.cf. HTTPS 를 대신하는게 아니다. 키가 결국 브라우저에 내려가기 때문에 마음먹고 보면 풀 수 있다. 평문 노출을 막고, 오래된 요청을 다시 보내는걸 막는 정도로 생각하자. 전체 흐름1. 페이지를 그릴때 서버가 키와 시간값을 만들어 세션에 넣고, 화면에도 내려준다2. 브라우저는 JSON 뒤에 시간값을 붙이고 CryptoJ..

Nuxt2 프로젝트에서 로그인 안 한 사용자를 막고, API 가 401 을 주면 로그인 페이지로 보내는 구조에 대한 정리 하고 싶은 것로그인이 필요한 화면은 대충 이런게 필요하다.토큰 없이 페이지에 들어오면 /login 으로 보낸다페이지에 들어올때마다 메뉴, 사용자 정보를 다시 불러온다API 호출 중에 세션이 끊겨서 401 이 오면 /login 으로 보낸다API 호출할때 로딩바를 띄우고 끝나면 내린다Nuxt2 에서는 이걸 라우트 미들웨어 하나, 플러그인 하나로 나눠서 처리한다.페이지 이동은 미들웨어가, API 호출은 axios 플러그인이 맡는 식이다. 1. 토큰은 쿠키에Nuxt2 는 SSR 이라 서버에서도 코드가 돈다.localStorage 는 서버에 없어서 토큰을 쿠키에 넣었다.cookie-univer..

화면에서 등록한 배치 스케줄을 Quartz 로 돌리는 방법에 대한 정리 Quartz 란?자바에서 쓰는 잡 스케줄링 라이브러리다."매일 새벽 2시에 이거 돌려줘", "10초마다 이거 돌려줘" 같은걸 맡기면 된다.스프링의 @Scheduled 로도 되긴 하는데 @Scheduled 는 코드에 시간이 박혀있다.사용자가 화면에서 스케줄을 등록 ㆍ 수정 ㆍ 삭제하는 경우엔 Quartz 쪽이 맞다. org.quartz-scheduler quartz 2.3.2cf. 스프링 부트라면 spring-boot-starter-quartz 를 쓰면 된다. 아래 내용은 Quartz API 를 직접 쓰는 방식이다. 기본 구성 3가지Job : 실제로 할 일. Job 인터페이스의 execute() 하나만 구현하면 된다Tr..

Vue, React 없이 퍼블리싱 받은 정적 HTML 에 목록 조회 같은 동작을 붙인 방법에 대한 정리 왜 프레임워크를 안썼나관리자 화면은 Vue 로 만드는데 사용자 화면은 그냥 HTML + JS 로 만들고 있다.퍼블리싱 업체가 피그마 시안을 HTML 로 만들어서 넘겨주기 때문이다.여기에 Vue 를 얹으면 받은 HTML 을 전부 컴포넌트로 다시 옮겨야 하고, 디자인이 바뀔때마다 또 옮겨야 한다.페이지도 20장 정도고 동작이라고 해봐야 목록 조회, 상세 조회, 문의 등록 정도라 프레임워크 없이 가기로 했다.대신 몇 가지 규칙을 정했다. 1. 우리 코드와 퍼블리싱 코드 폴더 나누기src/ index.html news/news-list.html 퍼블리싱 HTML layout/header.ht..

리액트에서 상태관리를 어떻게 하는지, 어떤 라이브러리가 있고 요즘은 뭘 쓰는지에 대한 정리 상태관리가 왜 필요한가Vue 는 Vuex, Pinia 처럼 공식에 가까운 상태관리 라이브러리가 하나 있는데리액트는 공식 상태관리 라이브러리가 없다.리액트 자체는 useState 랑 Context 만 주고 나머지는 알아서 고르라는 식이라 라이브러리가 엄청 많다.Redux, MobX, Recoil, Jotai, Zustand, Valtio, XState.. 이름만 들어도 뭘 써야할지 헷갈린다.그래서 작은거부터 순서대로 정리해봤다. 1. useState - 컴포넌트 하나 안에서제일 기본이다. 컴포넌트 안에서만 쓰는 값은 이걸로 충분하다.import { useState } from 'react'function Counte..

Vue3 상태관리 라이브러리 Pinia 의 기본 사용법과 Vuex 랑 뭐가 달라졌는지에 대한 정리 Pinia 란?예전에 Vuex 글을 쓴 적이 있는데 요즘 Vue3 프로젝트는 거의 다 Pinia 를 쓴다.Vue 공식 문서에서도 상태관리는 Pinia 를 권장하고 있고 Vuex 는 유지보수만 되는 상태다.이번에 하는 프로젝트도 Pinia 를 쓰고 있어서 정리해봤다.Pinia 는 Vuex 만든 팀에서 Vuex5 로 하려던걸 따로 뺀 라이브러리다.그래서 개념은 비슷한데 쓰는 방식이 훨씬 단순해졌다. 설치npm install piniamain.js 에서 등록한다.// main.jsimport { createApp } from 'vue'import { createPinia } from 'pinia'import Ap..

p6spy SQL 로그에 그 쿼리를 실행한 서비스 메서드를 같이 찍는 방법에 대한 정리 이 쿼리 어디서 나간거지?JPA 쓰면 콘솔에 SQL이 줄줄이 찍힌다.p6spy 를 붙이면 ? 대신 실제 바인딩 값까지 들어간 SQL을 볼 수 있어서 편하다.근데 화면 하나 열었는데 쿼리가 10개씩 나가면 이게 어느 서비스에서 나간건지 알 수가 없다..그래서 SQL 로그 첫줄에 쿼리를 실행한 메서드를 같이 찍게 바꿨다.2026-10-06 11:02:13 ... com.example.auth.service.AuthService.getUser(AuthService.java:85) select u.user_id, u.user_nm from app_user u where ..