티스토리

매일 꾸준히, 더 깊이
검색하기
블로그 홈

블로그 홈

매일 꾸준히, 더 깊이

engineer-mole.tistory.com/m
신고

개발자 두더지 님의 블로그입니다.

구독자
88
방명록 방문하기
구독하기
공지 블로그 소개 모두보기
728x90

주요 글 목록

  • [TypeScript] Partial타입과 그외 기타 유틸리티타입 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 어느 데이터 타입에서 다른 데이터 타입으로 변환을 쉽게 해주는 것을 유틸리티 타입이라고 한다. 타입 스크립트에는 Partial이 외에 몇 가지 유틸리티 타입을 제공하고 있다. Partial타입 Partial 타입은 오브젝트를 변환하는 타입 중 하나로 Partial 형태로 사용하며 T의 모든 속성을 옵셔널 타입으로 만들어준다. type Human1 = Partial const human1_1: Human1 = { name: "nao", age: 18 } const human1_2: Human1 = { name: "nao" } Human1에는 옵셔널 속성을 선언하기 위한 "?"가.. 공감수 0 댓글수 0 2023. 10. 15.
  • [Vue3] Composition API Best Practices ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. https://www.youtube.com/watch?v=6D58SI9P-aU&t=1237s 영상의 내용을 번역했다. ref() vs reactive() ref()와 reactive() 중 어느 쪽을 쓰는 것이 좋을까? Composition API를 이용한 라이브러리의 코드를 집계한 결과는 다음과 같다. 거의 ref()를 사용하고 있다는 것을 알 수 있다. 생각할 수 있는 주된 이유는 "일관성(consistency)"일 것이다. reactive에는 제한이 있지만 ref는 어디에서 사용할 수 있으며 대부분의 개발자들은 일관성을 중시하기 때문에 ref를 선택하는 경우가 많다고 예.. 공감수 0 댓글수 0 2023. 10. 3.
  • [TypeScript] (React의 사용없이)실전적인 기술 모음 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 지금까지 알게 된 사소하고 자잘한 TypeScript관련 테크닉을 모은 포스트이다. 자신이 정의한 타입에 대해 타입 가드하기 유저 정의 타입 가드에 대해서 TypeScript에서는 typeof, instanceof, in등의 연산자를 이용하여 변수에 대해 타입 가드할 수 있지만, 이러한 연산자로는 자신이 정의한 타입을 가드할 수 없다. type Hoge = "hoge" | "fuga"; const attr = document.querySelector(".hoge")?.getAttribute("name") ?? ""; if (typeof attr === Hoge) { // NG.. 공감수 1 댓글수 1 2023. 9. 21.
  • [TypeScript] 즉시 실행 함수 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 즉시 실행 함수란? 먼저 즉시 실행 함수의 기본부터 설명하도록하겠다. 즉시 실행 함수란 정의된 직후에 실행되는 함수를 의미한다. 보통의 함수와 다른 점은 이름을 가지지 않고, 바로 실행된다는 특징이 있다. 기본적으로는 다음과 같이 쓸 수 있다. (function() { console.log("이것은 즉시 실행함수입니다！"); })(); 이 코드에서는 함수가 정의된 직후, 콘솔에 메시지가 출력된다. 인수를 가진 즉시 실행 함수의 사용법 다음은 즉시 실행함수에 인수를 전달하는 방법에 대해서 소개하도록 하겠다. 인수를 전달하여 외부의 데이터를 함수 안에서 이용할 수 있게 된다. 그럼.. 공감수 0 댓글수 0 2023. 9. 18.
  • [Vue3] computed/watch/watchEffect ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Vue에서 리액티브한 데이터의 변경을 검지하여 어떠한 처리를 하고 싶을 때, computed나 watch, 혹은 watchEffect이라는 Composition API에서 제공하고 있는 편리한 기능을 이용할 수 있다. 그러나 "computed와 watch, 어느쪽을 써야 좋을까?"라던가, "watch랑 watchEffect의 경우는?"과 같이 망설이게 되는 순간이 온다. 이럴 때를 위해 어떤 것을 쓰는 것이 좋은지에 대해 조사한 내용을 이번 포스트를 통해 정리하고자한다. 작성법 각각의 기본 사용법에 대해서 살펴보자. computed 2배의 금액：{{priceDoubleValue.. 공감수 0 댓글수 0 2023. 9. 17.
  • [Vue3] Provide/Inject 사용법 ※ 일본의 한 블로그 글을 번역한 포스터입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이번 포스트의 대상 독자는 다음과 같다. Vue3의 상태 관리에 대해서 알고 싶은 분 Vue3의 작성법에 대해서 알고 싶은 분 실무에서 사용할 것같으니, 당장 습득할 필요가 있는 분 만들고자 하는 어플리케이션 이미지 이번에는 버튼을 누르면 숫자가 올라가거나 내려가는 어플리케이션을 만들고자한다. Vuex를 이용한 경우와 비교하면 꽤 알기 쉬울 것이다. Vuex를 이용하는 경우 다음과 같이 구성하게 될 것이다. store/index.ts state오브젝트안에 초기값을 설정한다. count: 0 mutation 오브젝트안에는 이와 같이 count 업과 다운 메소드를 준비한다. inc.. 공감수 0 댓글수 0 2023. 9. 14.
  • [React] 커스텀 훅 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 커스텀 훅이란? 커스텀 훅은 여러 개의 컴포넌트 내에서 존재하는 공통 처리를 빼내어 만든 함수이다. 범용적인 커스텀 훅을 만들면 1개의 어플리케이션 내에서 재이용할 수 있을 뿐만 아니라 React, Next.js, Remix를 제약없이 다른 어플리케이션에서도 재이용할 수 있다는 장점이 있다. 커스텀 훅에는 범용적인 커스텀 훅을 모아둔 Rooks이라는 사이트가 있는데, 자체 제작하지 않고 다른 사람이 만들어 놓은 커스텀 훅을 이용할 수 있다. 또한 View(컴포넌트)와 로직을 분리하게 되므로 하나의 파일에 작성된 코드 양이 많아지지 않도록 조절할 수 있다는 것도 이점이다. 커스텀.. 공감수 0 댓글수 0 2023. 9. 10.
  • [SCSS] SCSS의 mixin 기초 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주세요. 이 포스트에서는 자신의 프로젝트에 맞게 mixin을 만들 수 있는 최소한의 지식에 대해 설명하고자한다. mixin이란? 속성이나 값을 세팅하여 정리할 수 있는 기능이다. @mixin mixin명 { 속성: 값; } @mixin mixin명으로 {}내에 정리하고 싶은 속성과 값을 기재한다. 이것으로 아이템화된다. 정리된 mixin은 @include mixin명으로 기재하면 호출할 수 있다. @mixin p-center { position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); } div { @include p-ce.. 공감수 0 댓글수 0 2023. 8. 20.
  • [Vue3] Vue3 베이스의 밸리데이션 프레임워크 VeeValidate(v4) ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며, 틀린 내용은 지적해주시면 감사하겠습니다. Vue에서 대표적인 밸리데이션 워크 프레임으로 말하자면 VeeValidate가 있다. VeeValidate는 기능이 많고 사용하기 쉬운 프레임워크이지만, Vue2계에 대응하는 v3와 Vue3계에 대응하는 v4는 완전 다른 것이라고 이야기될 정도로 사용방법이 많이 바꼈다. 이번에는 이러한 VeeValidate v4의 사용 방법에 대해서 정리하고자한다. VeeValidate의 사용 스타일 VeeValidate(v4)의 사용을 하기 위해는 아래의 두 개의 구현 스타일이 존재한다. Composition API Higher-order components(HOC) 첫 번째의 Compo.. 공감수 1 댓글수 0 2023. 8. 17.
  • [Vue3] Suspense 기능의 간략한 사용법 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Suspense이란? 비동기 처리가 해결되기까지 폴 백 컨텐츠 (예를 들어 Loading중 아이콘)을 표시해주는 특별한 컴포넌트이다. 지금까지는 v-if = "loading === true" 등의 상태 변수를 사용하여 제어한 것을 상태 변수를 사용하지 않고 간략하게 쓸 수 있게 해준다. Suspense의 작성법 아래와 같이 컴포넌트로 감싸서 내부의 내에 비동기 컴포넌트를 내에, 그 비동기 컴포넌트가 해결 될 때까지에 나타낼 것 (폴 백 컨텐츠)을 기재한다. 이러한 작성으로, 간략하게 비동기 컴포넌트의 처리가 해결 될 때 까지의 폴 백 컨텐츠를 구현할 수 있다. 이 코드는 의 비.. 공감수 1 댓글수 0 2023. 8. 15.
  • [Java] 정규표현 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Java의 정규표현 Java에는 정규표현에 관련된 기능을 구현하기 위한 패키지 java.util.regex가 있으며, 그 안에 Pattern 클래스와 Matcher 클래스가 있다. Pattern 클래스는 정규표현의 "패턴"을 나타내고, Mather 클래스는 검색하고 싶은 문자열과 정규표현과의 "매칭"을 실행한다. Pattern 클래스 Pattern 클래스는 정규표현의 "패턴"을 나타내는 클래스이다. Java에서 정규표현을 사용할 때는 java.util.regex.Pattern클래스의 compile메소드를 호출하여, 정규표현을 컴파일한다. 정규표현의 구문 규칙에 따르지 않은 경우.. 공감수 0 댓글수 0 2023. 7. 26.
  • [JavaScript] Blob의 사용법 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Blob이란? Blob이란 Binary Large Object의 약어로, 단순히 이진 데이터 덩어리를 표현한 것이다. Blob(데이터의 배열, 파일의 종류（MIME타입）) 데이터의 배열 (첫 번째 인수) 첫 번째인수에는 Blob으로 변환할 데이터의 배열을 전달한다. 파일의 종류 (MIME 타입, 두 번째 인수) 두 번째인수에는 데이터의 종류를 문자열의 MIME 타입으로 지정한다. MIME 타입에 대해는 이 사이트에 가장 잘 나와있으므로 참고하길 바란다. 예를 들면, 다음과 같은 것을 지정한다. text/plain application/json 텍스트 파일을 Blob으로 다운로드.. 공감수 0 댓글수 0 2023. 7. 21.
  • [Junit] static 메소드의 Mock화 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 테스트 대상 코드 테스트 대상 클래스 import org.springframework.stereotype.Service; @Service public class SampleService { public String sampleMethod() { // static메소드를 호출 return SampleStatic.staticMethod(); } } static 메소드를 가진 클래스 public class SampleStatic { public static String staticMethod() { return "real method"; } } 테스트 코드 build.gradle에 .. 공감수 0 댓글수 0 2023. 7. 11.
  • [Junit] private 메소드 테스트하는 방법 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 테스트용 코드 준비 public Sample { public int add(int x, int y) { return (x + y); } protected int minus(int x, int y) { return (x - y); } private int multiplication(int x, int y) { return (x * y); } } public 메소드의 테스트 코드 import org.junit.Test; public class SampleTest { @Test public void testEqual() { Sample sample = new Sample(); int.. 공감수 0 댓글수 0 2023. 5. 31.
  • [Java] String.format 사용법 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 개요 Java에는 String.format이라는 메소드가 있다. 이 메소드는 인수에 지정한 문자열(서식)을 원래 규칙에 따른 문자열을 반환하는 메서드이다. 설명만으로는 제대로 이해하기 힘들 수 있다고 생각하므로, 바로 코드를 살펴보자. int hoge = 1; String str = String.format("변수hoge의 내용은%d이다.", hoge); System.out.println(str); 실행시키면 다음과 같다. 변수hoge의 내용은1이다. String.format의 첫 번째 인수는 정해진 룰(서식)에 따라 쓸 필요가 있다. 그리고 두 번째 인수 이후는 첫 번째 인수.. 공감수 2 댓글수 0 2023. 5. 30.
  • [Java] 자주 사용되는 Lombok 어노테이션 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Lombok이란? 어노테이션을 부여하는 것으로 Java의 상용구 코드를 쓰지 않도록 해주는 라이브러리이다. 어노테이션을 부여하는 것만으로 모든 필드에 대해서 getter, setter을 구현해주거나, 생성자를 구현해주거나한다. 데이터 클래스의 작성이나 생성자 인젝션이 편해지므로, Spring-Boot와 매우 궁합이 좋다고 개인적으로 생각한다. 그리고 immutable 객체를 쓰고 싶을 때에도 도움이 되므로, 써보길 바란다. Getter, Setter 클래스 혹은 필드에 @Getter, @Setter을 부여하면 getter, setter이 자동적으로 구현된다. 예를 들면 다음과 .. 공감수 0 댓글수 0 2023. 5. 15.
  • [Java] 생성자(Constructor)의 기본과 사용법 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 1. 생성자(Constructor)의 기본 Java의 생성자(Constructor)란 클래스로부터 인스턴스를 만들 때 에 실행되는 처리이다. 생성자(Constructor)이라는 단어는 영어의 “만들다”와 “사람”이므로, 건설업자, 제조업자 등과 같은 의미를 지닌다. 인스턴스를 만드는 사람과 같은 의미이다. 1-1. 생성자(Constructor)는 특별한 메소드와 같은 것 생성자(Constructor)는 인스턴스가 만들어질때에 실행되는 특별한 메소드라고 자주 설명된다. 그러나 메소드와 다르게 다음과 같은 특징이 있다. 클래스명과 동일한 이름을 가진다. 메소드로서 반환값을 가지지 .. 공감수 0 댓글수 2 2023. 5. 13.
  • [Vue3] 이제는 Vuex나 Pinia를 사용하지 않아도 되지 않을까? (Composition API) ※ 일본의 한 블로그 글을 번역할 포스트입니다. 오역 및 의역,. 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Vue의 상태 관리로 Vuex나 Pinia를 사용합시다라는 말이 많지만 외부의 라이브러리를 사용하지 않고 Vue3 자체의 기능으로 충분하지 않은가에 대한 이야기이다. 상태 관리 라이브러리를 사용하지 않고 어떻게 스토어(상태과 액션)을 정의하는가? Vue3에서 도입된 Composition API를 사용하면 된다. 예를 들어 다음과 같다. // ~/composables/todo.js import { reactive, computed, readonly } from 'vue'; export function useTodo() { const items = reactive([]); con.. 공감수 4 댓글수 0 2023. 5. 6.
  • [Vue.js] VueRouter에서 생성한 루트에 이름을 붙이는 방법 (router-link 사용하는 방법) ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Vue.js의 공식 툴인 VueRouter에는 하고 싶은 이름으로 설정할 수 있는 방법이 있다. 이름을 지정하면 router-link로 링크처를 지정했을 때 루트명으로 지정하는 것이 가능해진다. 패스가 긴 경우 등, 루트명으로 한다면 가독성이 높아진다. 그러니, 보통의 패스를 지정하는 방법과 기재방법이 달라진다. 특히, URL 파라미터를 설정하고 있는 루트에 이름을 붙이는 경우는 주의가 필요하다. 이번 포스트에서는 VueRouter로 생선한 루트에 이름을 붙이는 방법에 대해서 예시를 통해서 설명하고 한자. 루트에 이름을 붙일 때의 포인트와 주의점 루트에 이름을 붙일 때의 포인트.. 공감수 0 댓글수 0 2023. 5. 4.
  • [Vue.js] Vue.js 이벤트 수식자 .stop과 .prevent ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Vue.js의 이벤트 수식자 이벤트 수식자로 아래의 여섯 종류가 있다. .stop .prevent .capture .self .once .passive 이 중에서도 사용빈도가 높은 .stop과 .prevent와 사용 방법에 대해서 간단하게 소개하려고 한다. 사용법 .stop .stop은 JavaScript의 stopPropagation을 호출한다. 용어 그대로 현재 이벤트의 추가 전파(propagation)을 중지한다는 의미이다. Vue.js의 공식 문서에는 부모 요소로의 전달을 멈춘다고 기재되어 있다. 즉, Vue.js의 이벤트 수식자 .stop은 자식 요소의 이벤트가 부모의.. 공감수 1 댓글수 0 2023. 5. 3.
  • [Vue.js] <template> 태그의 몇 가지 역할 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 공식 문서에 template 태그의 다양한 역할에 대해 기재되어 있지만, 적혀 있는 곳들이 다 분산되어 있기 때문에 혼란되기 쉽다. 따라서 이번 포스트를 통해서 정리하고자한다. 태그는 다음과 같은 역할이 있다. 조건이 붙은 랜더링으로 여러개의 요소를 대상으로 하는 경우(v-if) 리스트 랜더링으로 여러개의 요소를 대상으로 하는 경우 (v-for) 이름이 붙은 스코프 (v-slot) 단일 파일의 컴포넌트 조건이 붙은 랜더링으로 여러 개의 요소를 대상으로 하는 경우 (v-if) 공식 문서의 예를 인용해보자면 다음과 같다. Title Paragraph 1 Paragraph 2 v-i.. 공감수 2 댓글수 0 2023. 4. 19.
  • [Vue.js/Vuetify] v-slot:activator="{ on, attrs }"에 대해 이해하기 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. slot이란? 어제 포스팅에서 이미 설명한 내용이지만, 한번 더 복습하는 의미에서 한 번 더 확인해보고자한다. slot은 부모 컴포넌트에서 자식 컴포넌트로 사용할 컴포넌트를 전달할 수 있는 Vue의 기능이다. 가벼운 예제로 살펴보자. Hello World message: message: Hello World가 표시된다. 그리고 스코프가 있는 슬롯은 자식 컴포넌트가 가지고 있는 속성을 부모 컴포넌트의 slot 부분에서 참조할 수 있게 된다. {{ parentComponentUser.user.name }} name:{{ user.age }} child-component에서 user.. 공감수 1 댓글수 0 2023. 4. 19.
  • [Vue.js] slot에 대해 이해하기 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. slot이란? slot이란 부모가 되는 컴포넌트쪽에서 자식 컴포넌트의 템플렛의 일부를 삽입하는 기능이다. 참고로, Vue.js Version2.5 이후는 slot-scope, Version 2.6이후는 slot-scope와 v-slot이 준비되어 있다. slot은 크게 기본 slot, 이름이 붙은 slot, 스코프가 있는 slot 세 개로 나눠서 볼 수 있다. 기본 slot /src/components 바로 아래에 매우 간단한 컴포넌트를 작성한다. name: Mirai Taro /src/views/About.vue에는 만든 컴포넌트를 호출한다. 아래의 코드에서는 의 태그로 컴포.. 공감수 0 댓글수 0 2023. 4. 18.
  • [Vue.js] Vuex를 가볍게 배워보자 Vuex란? vue.js의 기본을 알고있다는 전제에 한해서 설명하도록 하겠다. 수 많은 컴포넌트가 있는 어느 정도 규모가 있는 프로젝트가 있다고 가정하자. 이 그림에서 ComponentA의 데이터를 ComponentC나 ComponentE에 전달하고자 한다면 어떻게 할까? 일반적인 vue.js라면 부모 컴포넌트에서 자식 컴포넌트로, 다시 자식 컴포넌트에서 부모 컴포넌트로의 데이터를 전달하는 는 과정을 여러번 걸쳐야한다. 여기서 Vuex를 사용하면 글로벌 변수와 같은 느낌으로 데이터를 다룰 수 있게 된다. 이것으로 복잡했던 컴포넌트 간의 데이터 송신 과정을 줄일 수 있다. Vuex의 도입 Vuex의 패키지를 설치한다. vue cli으로 프로젝트를 생성하면 세트로 설치되므로 이러한 경우에는 필요하지 않다. .. 공감수 0 댓글수 0 2023. 4. 13.
  • [Java] Java에서 자주 사용하는 Collection 구현 클래스의 구조와 특징 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이번에 설명할 구현 클래스 자주 사용되는 Collection계 클래스는 다음과 같다. ArrayList LinkedList HashSet HashMap HashMap은 Collection이 아닌 Map의 구현 클래스이지만, 자주 사용되는 점과 HashSet과 관계가 깊기 때문에 이번에 함께 설명하도록 하겠다. 클래스 그림은 다음과 같다. 그리고, 인터페이스의 역할은 다음과 같다. 인터페이스 역할 List 요소의 순서가 부여된 그룹. 기본적으로 중복이 허가된다. Set 요소의 중복을 허가하지 않은 그룹(집합). 순서는 구현 클래스에 따른다. ArrayList ; 배열에 의한 Li.. 공감수 0 댓글수 0 2023. 4. 9.
  • [Java] Stream의 map과 flatMap의 차이점 결론 먼저 결과를 말하자면, map(T -> R)은 T 데이터 형을 R의 데이터형으로 1:1 변환 flatMap(T -> R)은 T 데이터형에서 Stream으로 1:N 변환 Stream의 map() List nameList = Arrays.asList("Tanaka", "Suzuki", "Takahashi"); Stream stream = nameList.stream().map(x -> x.length()); System.out.println(stream.collect(Collectors.toList())); 실행 결과는 다음과 같다. [6, 6, 9] Tanaka Suzuki Takahashi ↓ ↓ ↓ 6 6 9 위와 같이 문자열에서 문자열 길이로 1:1변환하고 있다. Stream의 flatMap().. 공감수 0 댓글수 0 2023. 4. 8.
  • [Java] Stream API의 anyMatch(), allMatch(), noneMatch() ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. anyMatch: 판정 (일부 일치) anyMatch 메소드는 filter 메소드에도 사용할 수 있으며, 판정하기 위해 함수형 인터페이스인 Predicate를 인수로 받아, boolean(1개라도 조건에 일치하는 값이 있다면 true)를 반환한다. 조건에 일치하는 값이 발견됐을 시점에 처리를 종료하므로 ||와 동일하다. anyMatch의 사용법 String의 Collection에서 문자열을 검색하는 샘플 코드를 살펴보자. List strs = Arrays.asList("hoge", "fuga", "bars"); // 람다식 boolean b = strs.stream().anyM.. 공감수 0 댓글수 0 2023. 4. 6.
  • [Vue.js] v-if와 v-show의 차이 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Vue.js에서 프론트엔드 요소를 조건문으로 나타낼 때 v-if나 v-show를 사용한다. 그러나 이 두 가지의 차이점을 잘 몰랐기에 이번 기회에 정리하고자 한다. v-if v-if="조건"으로 쓰면 조건의 참거짓에 따라 요소를 표시할지 안 할지는 컨트롤 할 수 있다. Vue is awesome! Oh no! 여러 가지 요소의 표시/비표시를 한꺼번에 컨트롤 할 때는 v-if를 태그에 기재한다. Title Paragraph 1 Paragraph 2 조건이 참일 때에 요소 전체가 표시되며, 거짓일 때는 요소 전부가 비표시하게 된다. v-show v-if와 동일하게 v-show="조.. 공감수 0 댓글수 0 2023. 3. 31.
  • [Vue.js] 부모 컴포넌트에서 자식 컴포넌트의 메소드 실행시키기 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 자식 컴포넌트에서 부모 컴포넌트 메소드등을 실행시킬 때 $emit을 사용하지만, 반대의 경우는 refs를 사용한다. refs를 사용하는 방법은 다음과 같다. 부모 컴포넌트 자식 컴포넌트 정리 포인트는 다음과 같다. $refs를 사용 ref="xxx"를 자식 컴포넌트에 설정 this.$refs.xxx.some_method()로 자식 컴포넌트의 메소드를 호출 참고자료 https://r17n.page/2020/07/07/vue-call-child-component-method-from-parent/ https://proglearn.com/2021/03/12/vue-js%E3%81%A.. 공감수 1 댓글수 0 2023. 3. 31.
  • [Vue.js/Vuetify] v-tooltip 사용법 ※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. v-tooltip v-tooltip을 사용하면 Vuetify 홈페이지를 보면 알 수 있듯, 마우스를 특정 요소에 올리면 tip이 표시되도록 할 수 있다. v-tooltip 사용법 v-tooltip 태그로 감싸, template내에서 tooltip이 반응했으면 하는 요소를 쓴다. icon이나 span등 어떤 태그여도 가능하다. 그리고 커서를 맞출 때 표시하는 tooltip의 내용을 v-tooltip태그 바로 아래에 쓴다. v-image나 h1태그 등에도 사용 가능하다. 위에 팝업 tooltip에 표시할 것 작성했듯 위에 팝업이라는 문자에 커서를 올리면 "tooltip에 표시할 것.. 공감수 0 댓글수 0 2023. 3. 29.
    728x90
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.