분류 전체보기 52

distinct 로 중복 제거 시 속도 저하 문제

요구사항 : 결과값에서 중복 제거 구현된 기능 중 약 100만 건 가량의 데이터가 조회되는 기능이 있었다. left join 문이지만 단순 조회라서 위 이미지에서 보는 것처럼 시간 성능은 126ms 근처를 오가는 수준. 중복 결과를 제거해야 될 요구사항이 생겨 distinct를 이용해 간단히 해결하려고 했다. 하지만, 문제 발생 속도 저하라는 더 큰 문제에 직면했다. (0.1초에서 14초로 늘어나다니...😱) 참고로 중복 제거 결과 데이터의 양은 약 31만건. 문제 원인 DB 조회 후 응답 객체로 도메인 객체를 바로 사용하고 있었다. 도메인은 건드릴 수 없는 상황이고, 기존의 도메인 객체는 이미 컬럼이 엄청 많은 상태다. 그래서 인덱스를 태워도 Distinct 사용 시 압도적으로 높은 cost가 발생할 ..

개발/Java|Spring 2023.01.18

Spring Security 개념, 아키텍처, 필터 순서, 예제

[목차] 1. Spring Security 개념 2. 아키텍처 3. 필터 순서 4. 샘플예제 스프링 시큐리티는 한 번에 이해가 쉽지 않다. 지금도 마찬가지지만, 공부하는 마음으로 조금씩 정리해 본다. 참고로 문서는 Spring Security 5.7.6 버전 기준이며, Java 8 이상의 런타임 환경이 필요하다. Spring Boot with Gradle 환경이다. 스프링 부트는 스프링 시큐리티 관련 의존성을 모두 묶어 'spring-boot-starter-security' 라는 스타터를 제공한다. 스타터는 스프링 이니셜라이저를 사용하면 쉽고 간단히 만들 수 있고, 아래처럼 수동으로 gradle 설정을 추가할 수도 있다. dependencies { compile "org.springframework.bo..

개발/Java|Spring 2023.01.17

웹 성능 개선 - 폰트편

[TL;DR] 기본적으로 사용하는 폰트를 최소화하고, 폰트 사이즈를 줄여 'woff2' 포맷 파일로 'preload' 한다. 폰트가 적용된 글자수가 적다면 불필요한 글자를 제거한 서브셋 폰트를 사용하자. 잘 모르겠다면 구글 웹폰트를 사용하자. 쓰려는 폰트가 없거나 더 욕심나면 커스텀 하자. 디자이너와 개발자 모두 읽을 수 있도록 가벼운 수준으로 작성했으니 참고 부탁드립니다. [목차] 1. 사용 폰트 최소화 2. font-display - FOUT vs FOIT 3. 폰트 사이즈 줄이기 4. 폰트 호출 시점 앞당기기 5. 구글 웹폰트 1. 사용 폰트 최소화 기본적으로 사용하는 폰트는 최소화하는 게 좋다. 당신이 디자인을 하든 개발을 하든 모두 해당된다. 나처럼 열심히 공부하지 않은 날라리라도 모던 디자인을..

개발/Etc 2023.01.12

Cumulative Layout Shift(누적 레이아웃 이동, CLS)

layout shift는 영상 예시를 보면 쉽게 이해할 수 있다. 영상은 이곳에서 가져왔다. 웹에 접속해서 페이지를 로드할 때 서버에서 아직 응답을 받지 못한 데이터가 있을 수 있다. 그때 ui 상으로는 더 하단에 있더라도 더 빨리 렌더링 되는 순서대로 차곡차곡 다른 데이터들이 먼저 자리를 차지하게 된다. 결국 뒤늦게 도착한 데이터는 정해진 영역에 마치 비집고 들어가는 것처럼 보이게 된다. html 구조상에 위차한 영역에 들어가는 것 뿐인데도 말이다. 이 문제는 해당 영역에 공간을 별도로 설정해 두지 않아서 발생한다. 위 영상에서도 버튼 클릭처럼 중요한 이벤트를 처리하는데, 클릭 순간 갑자기 안보이던 영역이 추가로 생기면서 버튼이 밀리는 현상이 발생한다. 사용자가 전혀 원하지 않은 다른 버튼을 클릭하게 ..

개발/Etc 2023.01.11

npm trends _ 라이브러리 선택할 때 유용한 서비스

앞서 웹 성능 개선 - 이미지편(1MB에서 10KB가 되기까지) 글을 작성을 마치고 imagemin이라는 새로운 라이브러리를 알게 됐다. 살펴보니 괜찮아 보여서 이걸 알았다면 먼저 써봤을 텐 데라는 생각이 들었다. 그렇다면 처음부터 라이브러리가 필요할 때나 사용하기 전, 라이브러리 선택에 도움이 되는 건 없을까 싶어서 찾아봤다. 원래 라이브러리 선택은 개발 환경과 운영 상황에 따라 달라지는 거라곤 하지만, 나처럼 개발이라곤 쥐뿔도 모르는 뽀시래기들에게 그나마 선택 장애를 줄여줄 수 있지 않을까 싶어 공유한다. 세상엔 역시 있을 것 같다고 생각하면 다 있다. npm trends 라는 사이트가 나름 요구사항을 충족하고 있었다. npm에 배포된 라이브러리들의 기간별 다운로드 추이를 그래프로 쉽게 비교해 볼 수..

개발/Etc 2023.01.11

웹 성능 개선 - 이미지 lazy loading(리액트)

[TL;DR] 리액트 환경이라면 react-lazyload 라이브러리가 참 좋다. 이미지 lazy loading에 앞서 뷰포트라는 개념을 알고 있는가? 1. 뷰포트(viewport) MDN 뷰포트 문서에 따르면 아래와 같다. 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않습니다. 뷰포트 중에서도 지금 볼 수 있는 부분을 '시각적 뷰포트'라고 부릅니다. 스마트폰에서 사용자가 화면을 확대했을 때와 같은 특정 상황에서 '레이아웃 뷰포트'의 크기는 변하지 않지만 시각적 뷰포트는 더 작아집니다. 간단히 말..

개발/Etc 2023.01.10

웹 성능 개선 - javascript편

https://dalichoi.tistory.com/32 웹 성능 개선 - 이미지편(1MB에서 10KB가 되기까지) 바쁜 현대인을 위한 간단 요약(TL;DR) 무손실 이미지를 압축하고 썸네일 이미지를 만들어 index 화면 로딩 속도를 개선한다. 대략 1mb 짜리 이미지를 100~200kb로 압축하고 또 그 이미지를 다시 줄여 결 dalichoi.tistory.com 이미지편에 이어 웹 성능 개선을 이어가보자. 이번에는 자바스크립트를 정리하는 편이다. 참고로 CRA로 만든 리액트 환경이다. 1. 사용하지 않는 의존성 제거 먼저 코드 중 사용하지 않는 의존성을 싹 걷어내는 작업부터 진행했다. 사용하지 않는 의존성을 확인하기 위해 npm-check 라이버러리를 이용했다. https://www.npmjs.co..

개발/Etc 2023.01.09

웹 성능 개선 - 이미지편(1MB에서 10KB가 되기까지)

바쁜 현대인을 위한 간단 요약(TL;DR) 무손실 이미지를 압축하고 썸네일 이미지를 만들어 index 화면 로딩 속도를 개선한다. 대략 1mb 짜리 이미지를 100~200kb로 압축하고 또 그 이미지를 다시 줄여 결론적으로 10~20kb 용량의 썸네일 이미지로 대체하는 과정을 기록했다. 참고로 DB는 구글 파이어베이스(Firebase) 8 버전을 사용하고 있다. 새해에는 뭔갈 해야 할 것만 같은 초조함에 시달리다 못해 결국 미뤄놨던 숙제를 꺼냈다. 매일 보는 뉴스와 그날의 날씨를 다시 꺼내보기 쉽도록 취미삼아 만든 사이트가 하나 있다.(하지만 꺼내보기 어려움) 아래 링크한 '오늘의 날씨와 경제'라는 아주 직관적이고 재미없있는 이름의 사이트다.(weather&economy라서 weaco) https://w..

개발/Etc 2023.01.08

bash shell looping (반복문)

[목차] 1. 산술연상 expr, let 2. while and until loop 3. for-loop 1. 산술연상 expr, let expr - 정수형 산술연산(+,-,*,/,%), 논리연산(|,&), 관계연상(=,!=,>,>=, /dev/null echo $? # 2 cat > newuser #!/bin/bash #Description: Create a user account. echo -n "New username: " read username while getent passwd $username &> /dev/null do echo "Sorry, that account $username is already taken. Please pick a different username." echo -n..

개발/Linux 2023.01.02

bash shell branching (조건문)

[목차] 1. exit 2. test 3. if-then-fi 4. case 1. exit - 실행된 프로그램이 종료된 상태를 전달 exit 0 프로그램 또는 명령이 성공으올 종료했음을 의미 1-255 프로그램 또는 명령이 실패로 종료했음을 의미 ( 1 일반 에러 2 Syntax Error 126 명령을 실행할 수 없음 127 명령 (파일) 이 존재하지 않음 128+N 종료 시그널+N (kill -9 PID 로 종료 시 128+9=137) $? 종료 값 출력 cp file1 echo $? # 1 sleep 100 echo $? # 130 : 128 + 2(KILL:SIGINT) kill -l 2. test - 비교연산자 test or [ 명령어 ] - 명령어 실행결과를 true(0) 또는 false(1)..

개발/Linux 2023.01.02
728x90
반응형