leteu / 개발 블로그

프로그래밍/Vuejs

[Vuejs] Expose로 ref에서 함수 꺼내 쓰기

사실 expose 하는 방법에 대한 글이라기 보단typescript로 작성할 때 자동완성 때문에  글 쓰게 됨난 vscode 쓰기 때문에 jetbrains에서는 원래 잘 나오고 있는지는 모른다.그래도 그냥 이렇게 해라https://leteu.dev/posts/vue-expose#1 일단 하는 방법 간단하다. 우선 setup 써서 하는 놈 먼저...... optional API는 ...expose: ['something'],...  이렇게 해주면 끝이다. 이제 사용 방법이다. #2 어떻게 쓰냐위에서 작성한 Component를 `Child` 컴포넌트라고 하고 시작하겠다. ...import Child from 'src/components/path/to/ChildComponent.vue'const ChildRe..

프로그래밍/Javascript & TypeScript

[JS] 네비게이션 타이밍 가져오기 (새로고침, 뒤로가기, 네비게이트)

페이지 새로고침을 통해 화면에 왔을 경우 뭔가 처리를 하고 싶었다.죄다 beforeunload만 알려주길래 그냥 MDN 뒤져서 찾음. https://leteu.dev/posts/js-navigation-timing#1 PerformanceNavigationTiming 이거 쓰면 다 해결됨 window.performance.getEntriesByType('navigation’) #2  사용법 우리는 바로 전 화면의 타입을 봐야하니 위 코드에서 이렇게 바꿔줄거다 window.performance.getEntriesByType('navigation’)?.[0]?.type #2-1 navigate a태그나 location.href로 넘어왔거나 아래 3개의 경우가 아니면 이거다.   #2-2 reload 내가 원..

프로그래밍/Javascript & TypeScript

[JS] 배열 활용 map, filter, reduce, forEach, find 메소드

https://leteu.dev/posts/js-array-higher-order-function자바스크립트를 하다 보면 엄청 자주 쓰게 되는 배열 조작 메소드들을 소개해보려고 한다.알아두면 두고두고 쓸 일이 많다.아래 링크에서 더 자세하고 많이 볼 수 있다.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array - JavaScript | MDNJavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.developer.mozilla.org * 아래 나오는 친구들 모두 원래의 배열은 변형하지 않는다.#1 Map arr.map(callback(curr..

프로그래밍/Javascript & TypeScript

[ JS ] 조건문 - If, Switch

안녕하세요. 공부한 것 복습하려 올리는 블로그입니다. 첫 포스팅은 간단한 조건문으로 해보려 합니다. 처음 자바스크립트를 접하는 분들이 최대한 이해하기 쉽게 노력해보겠습니다. 재밌게 읽어주세요 :) # If ##1 문법 if ( 조건1 ) { } else if ( 조건2 ) { } else if ( 조건3 ) { } else { } ##2 설명 if ( 만약 …면 ) { 실행할 코드 } else는 조건문 없이 상위의 if문이 거짓일 때 실행하고 싶은 경우 사용합니다. else if는 계속 늘려줄 수 있습니다. ##3 예시 // 예시 코드 const 기분 = "happy"; if ( 기분 === "tired" ) {// 만약 기분이 "tired"라면 console.log("😩"); } else if ( 기분..

프로그래밍/Vuejs

[vuejs] Component 기초 - template, render, setup, slot

컴포넌트는 Vue에서 가장 기초가 되는 부분이다. 컴포넌트 하나 잘 만들어두면 비슷한 화면은 계속 가져다 쓸 수 있다. Vue 3를 기준으로 작성하였다. #1 참고 https://kr.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 일단 공식 문서를 보자. 답은 저기에 있다. 결론만 보고 싶다면 넘어가자 #2 화면 일단 제일 중요한 건 화면이다. 일단 뭐가 보여야 재밌으니 화면부터 들어가겠다. Template, Setup, Render 이렇게 3곳 중 한 군대를 골라서 화면을 만들어줄 수 있다. ## template 제일 익숙한 html로 짤 수 있다. pug 언어로도 가능하다. ( 이 포스..