분류 전체보기

Spring SpEL: Spring Expression Language 스프링 표현 언어

SpEL: Spring Expression Language Expression Lanuage(표현 언어)는 값 또는 식을 조작하거나, 데이터나 설정 값을 가져올 수 있게 하는데 사용되는 표현식에 가까운 언어입니다. SqEL은 Spring Framework에서 사용되는 EL의 한 종류로, 스프링 모든 영역에서 사용 가능한 언어 형식입니다. 주로 설정 파일에서 값 설정, 빈 생성 조건, 프로퍼티 접근 등을 위해 활용됩니다. 프로퍼티 접근: 빈의 프로퍼티 값을 가져오거나 설정 가능 메서드 호출: 빈의 메서드를 호출하고 결과 가져오기 수학 및 논리 연산: 산술, 비교, 논리 연산 가능 조건문 및 반복문: 조건문과 반복문을 지원 컬렉션 처리: 리스트, 맵 등의 컬렉션을 처리할 수 있음 코드 내에서 SqEL 사용 ..

Spring WebClient를 활용하여 HTTP 요청 처리하기

WebClient란? WebClient가 도입되기 전에는 주로 RestTemplate을 사용하여 HTTP 요청을 보냈었습니다. RestTemplate은 Spring의 기본적인 HTTP 클라이언트 라이브러리로, 동기적으로 동작합니다. 즉, RestTemplate을 사용하면, 요청과 응답을 처리하기 위해 Blocking I/O 방식을 사용하여 스레드를 블로킹하고 기다립니다. 이는 스레드 자원의 낭비를 초래할 수 있고, 이로 인해 서버의 응답성이 저하될 수 있습니다. `WebClient`는 RestTemplate의 단점을 개선하기 위해 비동기적인 방식으로 동작하여, 동시에 여러 요청을 처리할 수 있습니다. 또한 리액티브 프로그래밍과 함께 사용하기에 적합합니다. 비동기 처리 (동기적인 처리도 가능) 리액티브 프..

Vue.js this.$set 반응성 유지를 위한 방법

this.$set: 반응성 유지 위한 방법 Vue.js는 반응성 시스템을 통해 데이터의 변경을 감지하고 자동으로 화면을 업데이트 해줍니다. 객체의 속성을 변경하는 경우 Vue의 반응성이 정상 작동하지만, 특정 상황에서는 반응성이 제대로 작동하지 않을 수 있습니다. 이런 경우, `this.$set`을 사용하여 Vue에 변경 사항을 명시적으로 알려주어 반응성을 유지할 수 있습니다. 💁‍♂️ 객체의 속성을 변경은 아래 코드 처럼 간단히 값을 할당하면 됩니다. {{ message }} Change Message ​ this.$set을 사용하는 경우 1. 배열에 인덱스로 값을 추가할 때 Vue는 배열의 길이를 관찰할 수 있지만, 배열에 값을 추가할 때 일반적인 `인덱스로 할당`하면 반응성이 제대로 작동하지 않을 ..

Vue.js Vuex store: Vue.js 어플리케이션의 상태 관리를 해결하는 방법

Vuex Vue.js 어플리케이션을 개발하면서 여러 상태 값을 사용하거나, 여러 컴포넌트 간의 공유 상태 공유를 하게 되면 상태 관리가 어려워지고, 상태 변경 추적도 어려워집니다. 이때 Vuex 라이브러리를 사용하면 복잡한 상태를 중앙 집중식으로 관리하여 효율적으로 상태 관리할 수 있게 도와줍니다. Vue.js에서 컴포넌트는 [부모-자식] 관계를 갖기 때문에 props를 통해 데이터를 주고받지만, Vuex를 통해 따로 빼놓음으로 데이터를 중앙 집중식으로 관리하기 때문에 [부모-자식] 관계에 얽매이지 않을 수 있습니다. 물론 Event Bus를 사용하면 이 역시 [부모-자식] 관계에 얽매이지 않을 수 있지만 어플리케이션의 볼륨이 커질수록 관리가 어려워지기 때문에 규모가 큰 경우 Vuex를 사용합니다. 💁‍..

SVN 이클립스에서 SVN 사용법

학부 시절에 프로젝트를 진행할 때 형상 관리 툴로 Git을 사용해왔는데, 회사에서는 Git 대신 SVN을 사용하여 이에 대해 간략하게 포스팅 하도록 하겠습니다. SVN은 Git과 마찬가지로 소스코드 버전 관리 시스템(VCS) 중 하나로, 여러 사용자가 동시에 소스 코드를 공유하고 변경내역을 추적할 수 있도록 도와주는 툴입니다. 이클립스는 SVN과의 통합을 지원하기 때문에 손쉽게 사용할 수 있습니다. 이클립스에서 SVN 설치하는 방법 1. 이클립스에 SVN 플러그인 설치 이클립스에서 대표적인 SVN 플러그인으 Subclipse와 Subversive가 있습니다. 이 중 사용할 클라이언트를 선택하여 설치하면 됩니다. 이때 에서 검색하면 됩니다. (저는 Subclipse를 설치하였습니다. ) 2. SVN 저장소..

Vue.js Vue에서 배열(Array) 변경 감지하기

Vue의 반응성 시스템으로 데이터의 변경을 감지하고 화면에 다시 렌더링해줍니다. (ex. v-model 등) 하지만 배열의 변경을 Vue의 반응성 시스템이 감지할 수 있게 해주기 위해서는 배열의 특정 메서드를 사용해야 합니다 변경을 감지하는 배열(Array) 메서드 아래 메서드들은 Vue가 배열의 변경을 감지하고 반응형 시스템을 작동시킬 수 있게합니다. Vue에서 요소를 직접 수정하는 것이 아니라 아래 메서드를 이용하면 데이터를 업데이트 해줍니다. push: 배열의 끝에 요소 추가 pop: 배열의 마지막 요소 제거 shift: 배열의 첫 번째 요소 제거 unshift: 배열의 맨 앞에 요소 추가 splice: 배열에서 요소 추가 또는 제거 sort: 배열의 요소 정렬 reverse: 배열의 요소 순서 뒤..

JS 깊은 복사와 얕은 복사: JS에서 객체 복사 방법과 차이점

요약 깊은 복사: 깊은 복사는 객체를 완전히 새로운 객체로 복사합니다. 즉, 객체의 속성들과 중첩된 객체까지 재귀적으로 복사됩니다. 복사된 객체와 원본 객체는 독립적인 개체가 되어 중첩된 객체를 수정해도 서로에게 영향을 주지 않습니다. 얕은 복사: 얕은 복사는 객체를 복사할 때, 객체의 속성들은 복사되지만 중첩된 객체는 참조로 복사됩니다. 복사된 객체와 원본 객체는 동일한 중첩된 객체를 참조하게 됩니다. 즉, 중첩된 객체를 수정하면 복사된 객체와 원본 객체 모두에 영향을 줍니다. 참조 복사: 참조 복사는 객체를 복사하는 대신, 원본 객체를 참조하는 방식입니다. 복사된 객체와 원본 객체는 동일한 객체를 참조하게 됩니다. 즉, 하나의 객체를 수정하면 다른 객체에도 영향을 줍니다. 깊은 복사 (Deep Cop..

Vue.js ref 속성으로 요소와 컴포넌트에 쉽게 접근하기

ref 속성 ref 속성은 Vue 컴포넌트에서 DOM 요소나 자식 컴포넌트에 쉽게 접근하기 위한 핵심적인 기능입니다. ref 사용법 1) 요소 접근 출력 템플릿에서 요소에 `ref` 속성을 추가하여 해당요소를 참조할 수 있습니다. 위 예제 코드에서는 `Input`으로 지정하였습니다. 당연히 참조할 때 구분이 되어야하기 때문에 `ref` 속성에 지정하는 값은 유니크해야 합니다. `this.$refs`를 사용하여 `ref`로 지정한 요소에 접근(참조)할 수 있습니다. 위 예제는 `this.$refs.Input.value`으로 `ref="Input"`인 요소에 접근하여 value 속성 값을 가져와 console에 로그를 남기는 코드입니다. 속성은 단순히 값 뿐만이 아니라 이벤트도 실행할 수 있습니다. 아래 예..