아무거나

computed vs watch computed 이미 정의된 계산식에 따라 결과값을 반환할 때 사용 종속 대상을 따라 저장(캐싱) 됨 (단, Date.now() 같이 아무곳에도 의존하지 않는 computed 속성의 경우 절대로 업데이트가 안됨 즉, 캐싱을 원하지 않을 때 메소드를 사용하면 된다.) [example vuejs code] computed: { now: function () { return Date.now() } } 샘플코드 [example html code] 뒤집힌 메시지: "{{ reversedMessage() }}" [example vuejs code] // 컴포넌트 내부 methods: { reversedMessage: function () { return this.message.spl..

Props? Emit? 그리고 Vuex, Eventbus Vue 에서 컴포넌트간 통신은 props 와 emit 을 통하여 전달한다. 먼저 비교하기전에 props 와 emit 에 대해 모르는 사람들이 있을 수 있으니 간단하게 정리하자면 아래와 같다. props: 상위 컴포넌트의 데이터를 하위 컴포넌트에 전달하는 특성이며 하위 컴포넌트에서 전달받기 위해서는 props 를 명시적으로 선언해야 한다. emit: 최상위 컴포넌트가 하나 이상인 경우, 이벤트를 직접 컴포넌트에 할당하는 것을 의미 앞서 말했듯이 props 와 emit 이 많아지면 관리가 복잡해져 사이드 이펙트가 발생할 확률이 높아지므로 이러한 문제점을 해결하기 위하여 주로 상태 관리 패턴 라이브러리를 활용하며 Vue 에서는 보편적으로 Vuex 나 E..

Exception 을 개선하다가 예전에 포스팅을 작성해야지 하면서 깜박했던 부분이 있어 다시 작성하게되었다. @ControllerAdvice 를 통한 Global Exception Handler 처리 에러 객체 생성 [ErrorResponse.java] import java.util.ArrayList; import java.util.List; import java.util.stream.Collectors; import org.springframework.validation.BindingResult; import org.springframework.web.method.annotation.MethodArgumentTypeMismatchException; import com.example.bkjeon.enum..

Soft Limit, Hard Limit 각 계정 마다 하나의 프로세스가 가질 수 있는 file descriptor에 제한이 있다. Soft limit 는 새로운 프로그램이 생성되면 디폴트로 적용되는 제한 값 Hard limit 는 Soft limit 부터 늘릴 수 있는 최대 값 (root만 조정 가능) aws ec2 기준으로는 인스턴스 타입에 따라 limit가 조정된다. 즉, 서버 사양에 따라 limit를 증가시킬 수 있다. Java는 hard 옵션까지 파일오픈이되고 Python에서는 soft옵션까지만 file이 오픈되는 이유 openjdk에서는 -XX:+MaxFDLimit 옵션이 true 인 경우 setrlimit 으로 limit를 증가시키므로 hard 옵션까지 파일이 오픈된다. 설치된 java의 M..

오래전에 작성된 글을 복사해온거라 직접 테스트 해보는 것을 권장 ( 참고용 정도로만 올렸음 ) Scroll Down 구현 // Render DOM // ref가 지정된 곳으로 포커싱이 될 예정이다. forEach({ .... }) // 스크롤 다운 함수 async handleScrollDown() { if (this.scrollLocationRef && this.scrollLocationRef.current) { this.scrollLocationRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' }) } } // 실행되는 함수 // 동적 추가할 때 마다 새로 생성된 행의 Ref를 찾을 수 없어서 우선 재귀함수로 해결.. (__) this.h..

오래전에 작성된 글을 복사해온거라 직접 테스트 해보는 것을 권장 ( 참고용 정도로만 올렸음 ) Fragments: DOM에 별도 노드를 추가하지 않고 자식 목록을 그룹화 할 수 있다. // 1. Fragments를 사용하면 아래와 같이 된다. render() { return ( ) } // 2. Fragments를 짧은 구문으로 사용한 예시이다. // 짧은 구문은 많은 도구에서 아직 지원하지 않기 때문에 명시적으로 를 사용하자. render() { return ( ) } // 3. key가 있는 Fragments // Fragments에 key가 있다면 문법으로 명시적으로 선언해야 합니다. 예를 들어 정의 목록을 만들기 위해 컬렉션을 fragments 배열로 매핑하는 사용 사례이다. return ( {p..

오래전에 작성된 글을 복사해온거라 직접 테스트 해보는 것을 권장 ( 참고용 정도로만 올렸음 ) useRef 리액트를 사용하면서 가끔씩 직접 DOM을 선택해줘야하는 상황이 발생할 수 있다. 예를 들어 Element의 크기를 가져온다는지, 스크롤을 제어 한다는지 등 다양한 상황에 대해 대응하기 위하여 react에서는 ref를 사용하고 Functional Component에서 ref를 사용하기 위해선 useRef라는 React Hook 함수를 사용한다. import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const..

로컬세팅시 자주 사용하는 명령들을 귀찮아서 한 번에 저장하였다. Docker 설치(CentOS8) sudo yum install -y yum-utils device-mapper-persistent-data lvm2 sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo yum install docker-ce Elasticsearch + Kibana + Cerebro 설치 (Docker Compose 또는 Docker 중 선택) Docker Compose [docker-compose.yml] version: '3.6' services: elasticsearch: image: 'docker.e..

최근에 JVM 관련 대화를 나누던 도중 메모리 영역에 대한 잘못된 설명을 해버린적이 있다. 반성하는겸 다시 정리하고자 해당 포스팅을 작성하게 된다. Java 메모리(with. JVM) 정의 Stack: 정적 할당된 메모리 영역 boolean, char, short, int, long, float, double.. 등과 같은 데이터 즉, 원시타입의 데이터가 값이랑 같이 Stack 에 할당된다. Heap 영역에서 Object 타입 데이터의 참조값이 Stack 에 할당된다. Stack 의 메모리는 Thread 당 하나씩만 할당된다. 즉, 새로운 Thread 생성시 그 해당 Thread 에 대한 Stack 이 또 새롭게 생성된며 각 Thread 끼리는 Stack 영역을 접근 할 수 없다. 간단한 사용예시 pub..

Garbage Collection 기존글: https://bkjeon1614.tistory.com/249 GC(=Garbage Collection) 불필요한 또는 더이상은 사용하지 않는 객체들을 메모리에서 제거함으로써 Java 프로세스가 한정된 메모리를 효율적으로 사용할 수 있게 해준다. JVM Heap 구조 대부분의 객체는 금방 접근 불가능 상태(unreachable)가 된다. // 10,000 건의 NewObject 객체는 Loop 내에서 생성되고, 사용되지만 Loop 밖에서는 더이상 사용할 일이 없어진다. 이런 객체들이 메모리를 계속 점유하고 있다면, 다른 코드를 실행하기 위한 메모리 자원은 지속적으로 줄어들기만 할 것이다. // GC는 이렇게 한번쓰이고 버려지는 객체들 즉, 접근 불가능 상태가 된..