분류 전체보기

[Devops] ELK Stack 8.x 설치 - ubuntu 22.04

환경 Elastic Search 와 Kibana는 같은 인스턴스, Logstash, filebeat 총 3개의 인스턴스로 테스트를 진행했다. aws ec2 ubuntu 22.04 1-1. Java 설치 sudo apt-get update sudo apt install openjdk-17-jdk 1-2. Nginx 설치 sudo apt install nginx 2. APT repository 추가 wget -qO - https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo gpg --dearmor -o /usr/share/keyrings/elasticsearch-keyring.gpg sudo apt-get install apt-transport-https ec..

[JPA] N+1의 모든 것

JPA N + 1의 모든것 모든 코드는 github에 있습니다. JPA를 사용하면 한번쯤 접하게 되는 N+1 문제에 대해서 다양한 해결책을 공부하려고 한다. 1. N + 1 문제란? 연관 관계가 설정된 엔티티를 조회(1)할 경우 조회된 데이터의 갯수(n)만큼 연관관계의 조회 쿼리가 추가로 발생하여 1 + n개 만큼의 쿼리가 발생하는 현상이다. 2. 프로젝트 기본 세팅 (1) Member.java @Entity @Getter @NoArgsConstructor(access = AccessLevel.PROTECTED) @ToString(of = { "id", "username" }) public class Member { @Id @GeneratedValue(strategy = GenerationType.IDE..

[React] styled-components에서 Pseudo selector &을 생략하면 오류

sytled-components에서 Pseudo selector로 사용되는 &을 생략한 코드들의 css가 적용되지 않는 오류를 발견했다. "styled-components": "^6.0.4" 버전은 다음과 같이 사용하고 있었다. 일단 아래에 있는 코드들을 찾아서 급한대로 모든 코드에 &을 붙여 임시적으로 해결한 상태이다. :nth-child :first-child :last-child ::before ::after :focus styled-components github issues 첫 이슈 - v5 에서 v6 으로 마이그레이션 문제 Migration problems from v5 to v6 · Issue #4096 · styled-components/styled-components Hi! Found a..

[React] React.memo 최적화

React 최적화 - React.memo 모든 코드는 github에 있습니다. React는 부모가 렌더링 될때마다 자식들도 렌더링 되는 특징을 가지고 있다. 이러한 렌더링을 최적화하는 방법은 여러가지가 있다. 그 중 React.memo, useMemo, useCallback등이 있지만 React.memo를 소개하려고 한다. React.memo React.memo는 props가 변하지 않으면 리렌더링을 스킵한다. memo로 감싼 컴포넌트는 메모이제이션으로 이전 props와 새로운 props를 비교하여 같은 값이라면 리렌더링을 하지 않고 기존 컴포넌트를 반환한다. 여기서 props를 비교하는 함수로는 Object.is 를 사용하기 때문에 Object를 props로 넘기는거 보단 primitive 타입을 넘기..

[React] react-csv + recoil 로 csv다운로드 구현

React-CSV-Download + React recoil 모든 코드는 github에 있습니다. react-csv를 선택한 이유 여러 라이브러리중 react-csv를 선택한 이유는 사용이 간편해보여서이다. react-csv의 마지막 업데이트는 2022년 1월이지만 지금도 문제없이 사용된다. react-csv 사용 Install npm install react-csv --save; Import import { CSVLink, CSVDownload } from "react-csv"; CSVLink : 클릭시 다운로드 CSVDownload : 마운트시 다운로드 보통 다운로드 버튼으로 구현을 하기 때문에 CSVLink만 사용할 것이다. Import 후 해당 컴포넌트를 사용하면 끝이다. Download me ;..

[IntelliJ] 단축키 (MacOS)

cmd + option + v : return 값 빼주기 cmd + shift + t : test 코드 바로 만들기 cmd + alt + p : 변수로 바꿔주기 f2 : 오류난 부분으로 바로 이동 pvsm : public void static main method 만들기 iter : for문 생성 cmd + option + m : 메소드로 추출 shift + shift : 하위 파일들 안에서 검색 cmd + o : 클래스 조회 cmd + b : 해당 메소드로 이동 cmd +l : 라인으로 찾기 cmd + shift + option + f7 : 변수나 메서드가 사용된 위치 전부 보기 cmd + option + [ : 괄호 시작지점으로 cmd + option + ] : 괄호 끝지점으로 cmd + 7 : 현재..