본문 바로가기
반응형

분류 전체보기324

Vue.js Custom Directive 사용 vue 템플릿에서 많이 사용되는 내장된 디렉티브(ex. v-bind, v-for 등) 외에 사용자가 직접 Custom Directive를 생성해서 사용할 수 있다. Simple 예시 먼저 간단한 샘플코드는 아래와 같다. directives 옵션을 사용해서 focus라는 디렉티브를 선언해주고 input 엘리먼트에서는 v-focus로 사용을 하면 된다. 컴포넌트를 로딩하면 아래와 같이 input에 포커스가 자동으로 적용된다. 전역(Global) 설정 위에 방법은 컴포넌트 내에서 사용가능한 선언 방법이고 전역(Global) 설정을 위해서는 아래와 같이 main.js에 directive("focus", focus)로 선언을 해준다. 앞에 "v-"는 작성 할 필요없다. const focus = { mounted:.. 2022. 4. 4.
Vue.js Composition API 알아보기 Composition API 컴포넌트에서 사용하는 특정 기능의 코드를 유연하게 구성할 수 있는 함수 기반의 API Vue3에서 가장 중요한 핵심 기능 [기존]개발 방식은 연관성 있는 로직들이 data, computed, methods 등에 흩어져 있어서 프로젝트 규모가 커질수록 관리, 추적에 어려움 => Composition API의 setup()을 사용하여 관련 코드들을 묶어서 구현할 수 있어서 코드 관리, 추적이 용이 [기존] Mixin을 통한 컴포넌트 기능 재사용 부분도 오버라이딩 문제나 다중 Mixin 상속 시 컴포넌트 관리가 어려워 짐 => Composition API를 통해서도 공통기능 제공 가능 setup() 메소드 - 샘플 코드 {{ count }} {{ countDouble }} Plus.. 2022. 4. 3.
18시간 몰입의 법칙 - 이지성 예전에 한번 읽었던 책인데 다시 한번 보면서 마음에 와닿는 얘기들을 정리해본다. 다시 읽으면서 어떤 용기와 해보자 하는 동기를 얻게 되었다 성공한 사람치고 '3~4시간 수면의 법칙'과 '18시간 몰입의 법칙'을 실천하지 않은 사람은 단 한 사람도 없다. '꿈'은 '또 다른 나'가 알고 있는 진정한 자신의 모습이다 - 꿈의 속삭임에 귀 기울려라 - 당신이 이룰 수 없는 꿈이라면 그것은 단 한 장면도 당신의 마음속에 그려지지 않는다 - 눈앞에 닥쳐오는 현실의 모습은 모두 허상에 불과하고, 오직 내 마음속에 있는 '꿈'만이 진실이다. - '꿈이 없는' 노력과 재능이란 가장 열심히, 가장 빠르게 도는 쳇바퀴이다 보지 못한다는 것이 장애가 아니다. 할 수 없다고 생각하는 것이 진정한 장애다 18시간 몰입의 법칙 .. 2022. 4. 3.
Vue.js refs로 자식컴포넌트, html 엘리먼트 접근 refs 자식컴포넌트나 일반적인 html 엘리먼트에 직접 접근 가능(getElimentById, querySelector 등 과 유사) 컴포넌트가 랜더링이 된 이후 적용되기 때문에 반응형으로 구성하기 위한 computed, template 에서 사용 제약 ref 속성과 $refs 키워드를 통해서 사용 ... // $refs를 사용해서 접근 this.$refs.child_component this.$refs.test_input 자식 컴포넌트 샘플 코드 테스트용 자식 컴포넌트 코드를 간단하게 작성한다 Child 클릭 이벤트 버튼 {{ msg }} 부모 컴포넌트 샘플 코드 부모컴포넌트가 mounted 되었을 때 간단히 엘리먼트 정보를 콘솔로 한번 조회하고, input 엘리먼트에 focus를 준다. 그리고 "테.. 2022. 4. 2.
Vue.js props 사용 샘플 props 부모컴포넌트에서 자식컴포넌트로 데이터를 전달할 때 사용 자식컴포넌트에서 전달받을 데이터를 "props"로 선언 부모컴포넌트에서 "v-bind:" 또는 ":" 를 사용하여 데이터 전달 // 부모컴포넌트 데이터 전달 // 자식컴포넌트 props 선언 props: { message: String, } 부모 컴포넌트 샘플 코드 자식 컴포넌트 샘플 코드 string: {{ message }} number: {{ number }} bool: {{ bool }} array: {{ array }} user: {{ user.name }}, {{ user.age }} valid: {{ valid }} 테스트 결과 화면 2022. 4. 2.
Postman Mock Server로 샘플 API 만들기 프론트엔드 개발 시 실제 백엔드 API가 개발이 안된 상황에서 개발이 진행되는 경우가 많이 있다. 이때 백엔드 인터페이스 부분을 개발 시 Postman의 Mock Server 기능을 사용하면 원하는 형식, 내용의 Example API를 쉽게 만들어 테스트가 가능하다, 먼저 Postman을 실행하고 계정 로그인이 필요하다. 그리고 아래와 같이 좌측의 Mock Servers 메뉴를 클릭하고, "Create Mock Server" 링크를 클릭한다. Mock Server를 등록하는 화면이 나오는데 [Request URL] 항목만 간단히 'test'로 입력하고 하단에 Next를 클릭한다. 다음으로 [Mock server name]을 입력하고 하단에 Create Mock Server를 클릭한다. 생성을 하면 URL.. 2022. 4. 1.
왜 나쁜 기억은 자꾸 생각나는가 - 김재현 요즘 부쩍 우울? 불안한 생각이 많아져서 제목이 눈에 들어와 한번 읽어 본 책이다. 나쁜 기억이라는 것이 사실 생존에 있어서 나빴던 기억, 위협이 됐던 기억을 오랫동안 하고 있어야 나중에라도 그런 위험을 회피 또는 벗어날 수 있는게 아닌가 하는 간단한 생각만 가지고 읽어봤는데 생각을 많이 바꿀 수 있는 계기가 된 책이었다. 뇌를 방해하는 것은 '나' 자신이다. '힘이 부족한 사람은 중도에 그치기 마련이다. 그런데 너는 해보기도 전에 스스로 한계를 긋는구나 - 공자' 뇌는 '나 자신'이 구속하지만 않으면 자연스럽게 좋아진다. 우리는 사실이 아니라 해석된 사건을 기억한다. 그래서 기억은 불완전해질 수 밖에 없다. 기억이 불완전 할 수 밖에 없는 이유는 사물 자체가 아니라 사물의 특징을 기억하기 때문이다. 사.. 2022. 3. 26.
Vue.js Lazy Load(비동기 컴포넌트) 및 prefetch Vue와 같은 SPA에서는 빌드 시 소스 코드가 하나의 파일로 합쳐지는데 이 파일의 크기가 커질수록 화면이 처음 로딩될 때 시간이 그만큼 많이 걸려서 렌더링 속도가 느려진다. 이러한 문제점을 보완하기 위한 방법이 Lazy Loading 인데, 한마디로 필요한 시점에 로딩이 되도록 로딩 시점을 늦추겠다는 의미이다. Lazy Load 리소스를 Component 단위로 분리하여 Component or Router 단위로 필요한 것들만 그때 그때 다운받는 방법 Lazy Load 적용 Lazy Load가 적용될 컴포넌트 impot 시 아래와 같이 /* webpackChunkName: "이름" */ 구문을 추가해준다. 1. Router 단위 적용 - '/about' URL로 이동을 할 경우 about.js(webp.. 2022. 3. 25.
반응형

티스토리툴바