하수도키의 성장일기

개발일기/Vue.js

[Vue.js] textarea 자동 높이 조절 하는법(autosize)

textarea를 사용할때 내용 길이에 따라 자동으로 높이가 조절 되는 방법을 살펴보자. 개요 Vue를 기반으로 설명한다. 총 3개의 방법을 알려준다. 이 포스팅은 번역/의역/오역 다수 같으므로 이해가 되지 않거나 자세히 알고 싶으면 아래 링크를 통해 살펴보자. Vuejs-auto-size 1번째 방법 : window.addEventlistener 사용 // 자동 높이 조절을 하고 싶은 textarea가 있는 컴포넌트 // 여기서는 ResizeByClass.vue 이다. // auto-resize.js function resize() { this.style.height = "auto"; this.style.height = `${this.scrollHeight}px`; } export const setRe..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 2(Methods, Computed, The Reactive Syntax)

Vue3 Composition API에 대해 알아보자 - 2 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Methods Computed Properties The Reactive Syntax Methods 메서드는 Vue 인스턴스에서 사용된다.(함수라고 생각하면 된다.) 아래 코드에서 capacity를 1씩 증가시키는 메서드를 만들어보자. Capacity: {{ capacity }} vue2에서 메서드 사용은 아래 코드와 같다.(data()사용했을시) methods: { increase_capacity() { this.capacity++; } } vue3에서는 setup 메서드 안에서 만든 다음 return 내..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 1(setup, reactive,methods, computed)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Vue2 한계 Setup & Reactive References Methods Computed Properties The Reactive Syntax Vue2 한계 컴포넌트가 커지면 커질수록 가독성이 떨어짐 예를 들면, 검색어를 입력하고 해당 검색어로 찾은 정렬된 결과를 보여주는 컴포넌트를 살펴보자. // Vue2 export default { data() { return { 검색어 로직(Search) 결과 정렬(Sorting) } }, methods: { 검색어 로직(Search) 결과 정렬(Sorting) } ..

개발일기/알고리즘

알고리즘 빅 오 표기법 살펴보기

알고리즘 빅 오 표기법 살펴보기 개요 알고리즘을 문제 은행에서 푼 기억은 있어도 알고리즘에 대해 공부한 적이 없어서 이 참에 공부하면서 정리하기로 마음 먹었습니다. 어려운 내용은 제가 이해를 못하니 간단하게 한번 살펴 보겠습니다. 처음으로 살펴볼 내용은 빅 오 표기법입니다. 빅 오 표기법이란 시간 복잡도(알고리즘의 시간 효율성)를 쉽게 소통할 목적으로 자료 구조와 알고리즘의 효율성을 간결하고 일관된 언어로 설명하기 위해 수학적 개념을 차용했습니다. 이러한 개념을 형식화한 표현을 빅 오 표기법이라고 부릅니다. 지금 설명은 수학적 관점을 최대한 배제하고 있습니다.(아주 쉬운 버전) 빅 오: 단계 수 계산 O(1) "빅 오1", "차수 1"이라고 부르며, 오 1이라고 편히 부르겠습니다. O(1)은 데이터 크기..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 7 - 유연한 함수를 만들어라)

자바스크립트 코딩의 기술(시리즈 7 - 유연한 함수를 만들어라) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 대지는 진행하면서 가늠잡아 보겠다. 개요 이 장에서는 함수의 사용법을 다룰 예정이며, 기본기는 다루지 않을 예정이다. 테스트 가능한 코드 작성법 화살표 함수의 매개변수에 대한 개념 함수를 반환하는 고차함수와 재사용 가능한 함수 화살표 함수의 문맥 개념 테스트하기 쉬운 함수를 작성하라(TIP32) 테스트를 작성하면 코드를 쉽게 리팩토링 가능 오래된 코드를 쉽게 이해 가능 마지막으로 명확하고 버그가 적은 코드를 작성 가능 위와 같은 장점들이 있지만 현실을 테스트를 작성하는것 쉽지 않다.(테스트 작성의 어려움, 코드가 외부 의존성이 강하게 결합..