99duuk

mounted() { this.preventNavigation(); // 네비게이션 방지 추가 }, methods: { preventNavigation() { history.pushState(null, null, location.href); window.onpopstate = () => { history.go(1); }; },},

사용자는 뒤로 가기 버튼을 통해 이전 화면으로 이동하길 기대합니다.라우터를 사용한 일반적인 경우라면 화면 전환에서 굳이 뒤로 가기 버튼 같은 걸 신경 쓸 필요가 없이브라우저 뒤로가기 누르면 이전 페이지로 이동함니다... 하지만 라우터와 url없이 페이지가 이동하는 컴포넌트라...게다가 모바일 웹을 위한 컴포넌트 였기에...컴포넌트 내 '닫기' 버튼 같이 버튼으로 관리하면 될 듯 싶었으나... 막상 핸드폰으로 열어봤더니 드럽게 불편하다......  지피티가 vuex니 뭐니 무슨무슨 방법이 있다고 했는데 최대한 뭐 덜 붙이고 popstate를 활용해  {{ headerTitle }}  화면 전환 (changeView)change..

데이터베이스에서 테이블 조회할 때, 대부분 컬럼(AAA, BBB, CCC, DDD, EEE)은 값이 같은데, 딱 하나(JJJ)만 여러 값을 가지는 상황이 생겼음AAA~EEE 값이 같아도 JJJ 값이 다르면 별도의 행으로 나옴    우선, SQL에서 JSON_ARRAYAGG 함수를 써서 여러 값 가진 컬럼을 JSON 배열로 바꿨음.SELECT AAA, BBB, CCC, DDD, EEE, JSON_ARRAYAGG(DISTINCT JJJ) AS JJJFROM TABLE...GROUP BY AAA, BBB, CCC, DDD, EEE이렇게 하니까 쿼리 결과는 원했던 대로  [10, 20, 30] 이런 식으로 잘 나왔음      다음으로, 이 데이터 담을 DTO를 만들었음. RestController 사용해서 응..

MyBatis의 쿼리 결과 매핑 방식에 대해 알게 된 점 정리해봄.MyBatis는 쿼리 결과를 DTO에 매핑할 때 setter 메소드를 사용함.이 방식 때문에 매핑하는 DTO가 다른 DTO를 상속받았을 경우, 상속받은 DTO의 필드도 매핑에 사용할 수 있음.// 부모 클래스 B@Getter@Setterpublic class B { private String x; private String y; private String z;}// 자식 클래스 A@Getter@Setterpublic class A extends B { private String a; private String b; private String c;}// MyBatis 매퍼 인터페이스public interfac..

막상 개발 서버에 올리니까 첫번쨰 요청은 30초가 걸리고, 캐싱된 두번째 요청도 20초가 걸렸다. 로컬은 2초 걸렸는데...네트워크 들어가보니 정적 리소스가 하나도 캐싱되지 않았다. 같은 jar인데 ...  @Configurationpublic class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/css/**", "/js/**", "/images/**", "/fonts/**") .addResourceLocations("classpath:..

다시 AOP로 돌아왔다. @Aspect@Component@Log4j2public class CacheControlAspect { @Around("@annotation(com.portal.util.annotation.CacheControl)") public Object handleCacheControl(ProceedingJoinPoint joinPoint) throws Throwable { log.info("handleCacheControl method invoked ????????????"); // HTTP 응답 가져오기 ServletRequestAttributes attrs = (ServletRequestAttributes) RequestContextHo..

Spring Boot와 Vue로 구성된 프로젝트에서 서버 요청이 많아 브라우저 속도가 느려지는 문제가 생겼다. 반복되는 요청을 최소화하고 성능 개선을 위해 캐시를 선택했고, 먼저 클라이언트에 캐싱할지 서버에 캐싱할지 선택했다. [ 캐싱의 장점 ]더보기응답 시간 단축:자주 요청되는 데이터를 빠르게 제공사용자 경험 향상서버 부하 감소:반복적인 연산과 데이터베이스 쿼리 감소서버 리소스 절약네트워크 트래픽 감소:불필요한 데이터 전송 최소화대역폭 사용 효율화확장성 개선:동일한 하드웨어로 더 많은 요청 처리 가능비용 효율적인 성능 향상가용성 향상:서버 장애 시에도 캐시된 데이터로 부분적 서비스 제공 가능일관된 성능:트래픽 급증 시에도 안정적인 응답 시간 유지캐싱을 효과적으로 구현하기 위한 몇 가지 팁:캐시 계층 다..

초기접근일단 지난 주에 공부했던 AOP로 어노테이션을 만들어서 간단하게 Cache-Control: public, max-age=300 → 서버가 브라우저에 300초(5분) 동안 응답을 캐시하라고 지시. 를 설정해보았다.@GetMapping("/api/data")@CacheControl(maxAge = 3600)public ResponseEntity getData() { // ...}200 대신 304 응답이 오는 걸 확인했고, 일단 캐시가 되긴 했다  수백 개의 컨트롤러에 일일이 어노테이션을 추가해야 하는 번거로움캐시 정책의 일관성 유지가 어려움유지보수의 어려움 모든 컨트롤러에 캐싱 처리하려고 했기 때문에 어노테이션을 모든 컨트롤러마다 달아주기 귀찮아서방법을 떠올리다 인터셉터로 처리해버리는 방안을 ..

1. 동기 vs 비동기 방식동기(Synchronous) 방식작업이 순차적으로 실행됨한 작업이 완료될 때까지 다음 작업은 대기FIFO(First In First Out) 큐와 유사한 동작비동기(Asynchronous) 방식작업이 병렬적으로 실행 가능한 작업의 완료를 기다리지 않고 다음 작업 시작 가능JavaScript의 이벤트 루프 모델을 따름Web API, 태스크 큐, 이벤트 루프의 상호작용2. API 호출: 동기 vs 비동기동기적 API 호출의 문제점화면 멈춤: API 응답 대기 중 UI 동결사용자 경험 저하: 사용자가 앱이 멈춘 것으로 인식리소스 낭비: 대기 시간 동안 다른 작업 불가성능 저하: 여러 API 호출 시 전체 로딩 시간 증가비동기적 API 호출의 장점반응성 유지: API 호출 중에도 UI..

1. LPAD 함수LPAD(str, len, padstr) str: 패딩을 적용할 원본 문자열len: 결과 문자열의 총 길이padstr: 왼쪽에 채울 문자 또는 문자열 LPAD 함수는 지정된 길이 len에 도달할 때까지 str의 왼쪽에 padstr을 반복해서 채움 SELECT LPAD('MariaDB', 10, '*');-- 결과: '***MariaDB' 2. NEXTVAL 함수NEXTVAL(sequence_name)NEXTVAL은 지정된 시퀀스의 다음 값을 반환함 CREATE SEQUENCE sample START WITH 1 INCREMENT BY 1;SELECT NEXTVAL(sample);-- 결과: 1 (첫 번째 호출 시)LPAD와 NEXTVAL 함께 사용하기LPAD와 NEXTVAL을..