FIF's 코딩팩토리

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 ..

관리자 화면 목록 API를 만들면서 검색 조건을 처리한 방법에 대한 정리 검색 조건 if문 지옥..관리자 화면 만들어 본 사람은 알텐데 목록 화면마다 검색 조건이 꼭 붙는다.제목 검색, 조회수 몇 이상, 등록일 기간, 사용여부 등등..보통은 조건 하나 늘때마다 파라미터 추가하고 리포지토리에 if문을 하나씩 추가한다.if (searchTitle != null) { builder.and(post.title.contains(searchTitle));}if (minViewCnt != null) { builder.and(post.viewCnt.goe(minViewCnt));}if (regStartDate != null) { builder.and(post.regDttm.goe(regStartDate..

자바스크립트에서 배열을 다룰 때 자주 사용하는 map, filter, some, every 함수에 대한 정리 map()map 함수는 배열 내의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.원본 배열은 변경되지 않습니다. 사용법const newArray = array.map(callback); 매개변수callback: 배열의 각 요소에 대해 호출할 함수. 이 함수는 세 가지 인수를 받습니다.currentValue: 처리할 현재 요소index (선택적): 처리할 현재 요소의 인덱스array (선택적): map을 호출한 배열 자체예제const numbers = [1, 2, 3, 4]; const doubled = numbers.map(num => num * 2); console..