코드존 코드존

채팅 Textarea 깨끗하게 만들기!     채팅 컴포넌트를 만들고 있는데 Textarea에 불-편한 이슈를 발견해서 수정해보았다!쭉쭉 늘어나는 Textarea 의 높이...현재 적용된 기능은Shift + Enter 로 줄바꿈Enter로 채팅 전송Auto height resize인데, Enter키를 꾹- 누르고 있으니 해당 영상과 같은 현상이 나타났다..         적용된 코드를 살펴보니..  @input에서는 shiftKey가 true인지 false인지 알 수 없으니,@keydown 으로 shifKey 발생 여부를 onShiftKey 변수에 저장@input과 @keyup.enter 이벤트가 발생했을 때, onShiftKey가 false면 채팅 전송.으로 코드를 짰는데.. @keydown 코드 수정..

기존에 구현했던 Editable Text 컴포넌트를 수정해보았다..!회고: 내가 왜이렇게 어렵게 했찌..? (어리둥절)  결과물    뭔가.. 옛날의 나는 입력받은 Text와 Input Box Text의 스타일도 다르고, 지금은 기억 안나는 또 다른 이유(가 있겟지..?)에 의해 아래의 코드를 작성했던 것 같다. {{ defaultText }}  검토해 보자면...Props로 defaultText가 들어온다면, 기본 텍스트를 보여준다.기본 텍스트 클릭 시, onClickText이벤트를 사용해서 onEdit의 값을 바꿔주고,onEdit이 true면 컴포넌트를 보여준다. ( 기본 텍스트는 숨김 )VaInput 컴포넌트의 이벤트 핸들링을 사용해서- input: ..

Composition API의 활용 Composition API 란? : 대규모 Vue 애플리케이션에서의 컴포넌트 로직을 효과적으로 구성하고 재사용할 수 있도록 만든 함수 기반 API setup 메서드를 이용한 초기화 기존 옵션 API의 생명주기와 비교하자면 beforeCreate, created 단계에서 setup() 메서드 호출 setup 메서드 내부에서 작성한 데이터나 메서드를 템플릿에서 이용하고 싶다면 객체 형태로 리턴 setup() 메서드는 2개의 인자 사용 - props : 부모 컴포넌트로부터 전달 받는 속성 - context : 기존 옵션 API 에서 this 컨텍스트가 제공하던 정보, emit( this.$emit ) 등.. 반응성을 가진 상태 데이터 - ref 기본 타입(string, n..

1. 단일 파일 컴포넌트에서 스타일 사용 2. 동적 컴포넌트 적용 3. provide와 inject 4. 비동기 컴포넌트 전역 스타일 : 다른 컴포넌트에서 동일한 CSS 클래스명을 사용한다면 충돌 발생 가능 태그 안에 작성한 스타일 main.js에서 import한 css 스타일 => 앱 전체의 공통 스타일 적용에 편리 동일한 CSS 클래스 이름이 여러 컴포넌트에서 사용되면 마지막 import된 컴포넌트의 스타일 또는 css 파일 속성 적용 범위 CSS 사용 클래스 이름을 기반으로 스타일 적용 => 클래스명이 내부의 $style 옵션에 객체로 등록되었고 객체의 속성은 작성한 CSS 클래스명 Child 등록해야 할 CSS 클래스가 여러 개라면 배열로 바인딩 동적 컴포넌트 : 화면의 동일한 위치에 여러 컴포넌..

Vue 인스턴스와 다양한 옵션 📌 Vue (애플리케이션) 인스턴스 - Vue.createApp 메서드를 호출하여 만들어진 객체 - 전체 컴포넌트 트리는 애플리케이션 인스턴스를 마운트할 때 렌더링 - 루트 인스턴스(애플리케이션 인스턴스의 최상위 컴포넌트)는 DOM 트리에 마운트되어야 화면으로 렌더링 => mount('id') 메서드 사용 const vm = Vue.createApp({ name: 'App', data () { return {} } }).mount('#app') 📌 옵션(options) 객체 - Vue 인스턴스를 생성할 때 전달하는 속성들을 담은 객체 data 옵션 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용 반드시 객체를 리턴하는 함수로 부여 data에 대한 Proxy 직접 접..

VUE3 와 Typescript를 사용하여 토이 프로젝트 만들기 회사에서 2년 넘게 Vue2와 Javascript로 개발하다가 자기 개발 겸.. 공부 겸.. Vue3와 Typescript로 해보려고 하니 Vue3에 추가된 기능도 많아보이고.. Typescript는 또 나름대로 낯설고 하니.. 블로그에 정리를 해봐야 겟다..! 1. npm을 사용하여 Vue3 + Typescript 세팅하기 // cmd 창 P:\> npm init vue@latest 2. 원하는 옵션 선택 Project name - 폴더 이름 Package name - 프로젝트 생성 후 package.json 파일에서 name 3. 그 이후는 그냥 하라는 대로 진행 끗-!

$router.push() 를 사용하여 페이지를 이동, params 데이터를 함께 전달하자! 특정 버튼 클릭 시, 특정 페이지로 이동하는 로직을 적용하는 도중, 해당 페이지에 탭이 생겨버렸고... 1번 버튼 클릭 -> A 페이지 A-1 탭으로 이동 2번 버튼 클릭 -> A 페이지 A-2 탭으로 이동 을 적용하기 위해, 현재 적용한 로직 $router.push에 params로 type값(A-1, A-2)을 넣어주기로 했다. switch (key) { case '1번': { this.$router.push({ path: '/page/A', params: { type: 'A' } }) break; } case '2번': { this.$router.push({ path: '/page/A', params: { t..

Bootstrap Table에 Filter 기능 추가 - 테이블에서 원하는 리스트만 조회 - write 기능이 있는 select box - selected된 조건이 중복 filter가 아니라 각각 filter