분류 전체보기 (42) 썸네일형 리스트형 Vue router 이동 시, 페이지 최상단으로 이동 1. 문제 정의 Vue.js 를 이용하여 프로젝트를 진행하고 있습니다. 이와 같이 모집안내, 지원하기를 클릭 시 vue router를 이용하여 페이지 이동을 진행하고 있는데, 여기서 문제점이 있습니다. 바로 페이지를 이동하면 그 카테고리에 해당하는 최상단을 보여주는 것이 아닌, 현재 스크롤 위치 그대로 페이지를 랜더링 한다는 점입니다. 이번 포스팅에서는 이러한 문제를 해결해보도록 하겠습니다. 2. Scroll Behavior Vue3를 이용한 현재 프로젝트는, 페이지간 이동을 Vue Router를 이용해서 진행하고 있습니다. src/router/index.js 에서 스크롤 설정을 추가해주도록 하겠습니다. import { createRouter, createWebHistory } from 'vue-.. Java Record 1. Java record 그동안 Java 11 버전을 주로 사용하다보니, 이후 버전에 추가된 것들에 대해 잘 알지 못해서, 학습해보려 합니다. Java Record는 Java 14에서 JEP 359의 일부로 프리뷰 기능으로 도입되었고, Java 16에서 정식 기능으로 승격되었습니다. Record는 데이터만을 담는 불변의 단순한 클래스를 간결하게 생성하기 위한 새로운 타입입니다. 2. 왜 Record를 사용하는가? Java에서는 데이터 전송 객체 DTO, VO 등과 같이 데이터만을 저장하는 클래스를 많이 사용합니다. 그러나 이러한 클래스를 작성할 때 마다 생성자, 게터, equals(), hashCode(), toString() 등의 메서드를 반복적으로 작성해야 합니다. Record는 이러한 반복을 줄이.. Multi-word component names Error 1. 문제 정의 이름을 축약하지 않는 선에서 간단히 지으면 가독성에 좋다고 생각하여 한 단어로 표현할 수 있으면 한 단어로 표현하려고 하였습니다. 하지만 홈 화면과 같이 Home.vue 로 이름을 지으니 에러가 발생하였습니다. 2. 문제 분석 📖 Rule Details This rule require component names to be always multi-word, except for root App components, and built-in components provided by Vue, such as or . This prevents conflicts with existing and future HTML elements, since all HTML elements are single wor.. Header, Footer 상단 하단 고정 1. 문제 정의 이전 포스팅을 통해 상하좌우에 있는 기본적인 vue 공백을 제거하는데 성공했지만, 여전히 문제가 남아있습니다. 본문의 내용이 짧을 경우 footer가 위로 올라온다는 문제가 있습니다. 이를 다음 코드를 통해 해결해보겠습니다. 2. 문제 해결 다음 코드를 App.vue style 영역에 추가해보겠습니다. 3. 코드 설명 #app # 기호는 css에서 id 선택자를 나타냅니다. Vue.js 프로젝트의 기본 구조에서는 주로 최상위 컴포넌트를 나타냅니다. display : flex Flexbox 모델을 사용하여 #app 내의 자식 요소들을 유연하게 배치합니다. flex-direction : column Flexbox의 주 방향을 수직(column)으로 설정합니다. 기본값은 row로 수평 방향입니.. vue 여백 1. 문제 정의 Vue 프로젝트를 생성해서 헤더와 푸터를 만들어서 화면 테스트를 하는 도중에 문제를 발견했습니다. 사진과 같이 상하좌우 여백이 생기는 것을 볼 수 있습니다. 2. 문제 해결 처음엔 헤더와 푸터에 css 요소를 잘못 적용했다고 판단하여, 헤더 푸터와 관련된 글들을 구글링 해보았습니다. 하지만 저와 같은 현상을 찾아보기 힘들었습니다. Vue의 특성인가 고민이 돼서 다시 찾아보니, Vue 프로젝트는 상하좌우 8px 씩 margin을 두는 것을 알 수 있었습니다. 이를 해결하기 위해 Root 컴포넌트인 App.vue의 style 영역에 다음 코드를 추가해주었습니다. body { margin: 0; } 이를 적용하니 다음과 같이 문제가 해결되었습니다. == & Equals public class Equals { public static void main(String[] args) { String a = "abc"; String b = "abc"; String c = new String("abc"); System.out.println("a : " + System.identityHashCode(a)); System.out.println("b : " + System.identityHashCode(b)); System.out.println("c : " + System.identityHashCode(c)); System.out.println("a == b : " + a == b); System.out.println("a == c : " + a == c); System.out.pri.. 협업지점 조회 성능 개선, N+1 해결 1. 문제 정의 기존 코드는 개발 일정을 맞추기 위해 성능의 이슈를 감안하더라도 기능 완성에 초점을 두었습니다. 또한 프론트엔드와의 개발 일정이 맞지 않아 기능을 개발한 후 바로 최적화할 수 없는 상황이었습니다. 현재는 양 측이 모두 개발이 완료된 상황이라 코드를 분석해보니 많은 문제점을 발견할 수 있었습니다. 기존 코드 public List findAllStores() { return queryFactory .selectFrom(storeDetail) .join(storeDetail.storeMeta, storeMeta).fetchJoin() .join(storeMeta.classification, classification).fetchJoin() .join(storeMeta.subClassificat.. HashMap & Hash Collision HashMap HashMap은 key-value를 쌍으로 저장하는 비선형 자료구조입니다. 일정한 크기의 배열을 생성한 후에 Key 값을 Hash 함수를 통해 index로 변환하여 해당 index에 Key와 Value를 저장합니다. 시간복잡도 i 번째 데이터에 접근 : O(N) x 라는 데이터(Key)가 있는지 탐색 : O(1) x 라는 데이터(Key)에 접근 : O(1) x 라는 데이터의 삽입 / 삭제 : O(1) HashMap은 무한에 가까운 Key 값을 유한한 메모리에 저장해야 하기 때문에 아무리 뛰어난 성능의 Hash 로직을 사용하더라도, Hash Collision(해시 충돌)이 발생합니다. Hash Collision (해시 충돌) 해시 충돌이란 서로 다른 Key 값에 대해서 Hash 함수의 반환 .. Array vs Dynamic Array Array 배열은 메모리 상에서 데이터가 연속적으로 연결되어 있는 선형 자료구조 이처럼 크기는 고정되어 있으며 변경될 수 없습니다. Dynamic Array Dynamic Array는 메모리 상에서 데이터가 연속적으로 연결되어 있는 선형 자료구조 입니다. 크기가 동적으로 변경될 수 있으나, 근본적으로 Array 기반으로 구현되어 있습니다. 여유 공간이 없으면 사이즈를 2배(Java) 혹은 50%씩 늘립니다. Java의 경우 사이즈를 2배씩 늘리도록 구현되어 있어, 데이터를 20억개 넣기 까지 30번만 resizing 하면 되기 때문에 큰 부하가 오지 않습니다. Resizing에 걸리는 시간을 알아보도록 하겠습니다. 초기 사이즈 지정 X public class Resizing { private static.. 캐시를 통한 성능 최적화 이 포스팅은 제가 작성한 UPbrella 프로젝트의 기술 블로그에 작성한 캐시를 통한 성능 최적화 포스팅을 옮겨온 것입니다. 1. 문제 정의 업브렐라 서비스의 특성 상 협업지점의 CUD는 자주 일어나지 않지만, 조회 API는 자주 호출되고 있습니다. 협업지점 조회 API는 여러 테이블이 조인을 하고, 자주 호출되는데 이것이 매번 호출되면 DB의 부하 증가로 이어지게 됩니다. 이를 개선하기 위한 방법으로, Read Replica 와 Redis 중 고민을 하였는데, 서비스의 규모가 작고, 데이터가 적다는 점을 고려하여 Redis를 이용하여 DB 데이터를 캐싱하기로 결정하였습니다. 2. Redis 2 - 1. Redis 설치 아래의 명령어를 통해 redis를 설치해줍니다. sudo apt install red.. 이전 1 2 3 4 5 다음