728x90 프론트엔드111 [JavaScript / 자바스크립트] 기준 날짜로 부터 시간 차이 구하기 feat. moment js [Javascript / 자바스크립트] 기준 날짜로 부터 시간 차이 구하기 feat. momentjs (방금전 초전 분전 시간전 달전 년전) // 날짜 차이 export const getDiffStr = (start, end) => { const startTime = moment(start); const endTime = moment(end); const years = startTime.diff(endTime, "years"); const months = startTime.diff(endTime, "months"); const days = startTime.diff(endTime, "days"); const hour = startTime.diff(endTime, "hour"); const minutes .. 2022. 4. 28. [Vue JS] Vue ref / $refs 속성으로 엘리먼트 선택하기 [뷰 / VUE] ref / this.$refs vue 에서 자바스크립트의 엘리먼트 선택자를 사용하는 경우가 많은데 Ref 속성을 통한 엘리먼트의 제어도 사용성이 높다 결과 창 2022. 1. 31. [typescript / 타입스크립트] class 내 static 사용하기 [Typescript / 타입스크립트] Class 내 Static 사용하기 class 내 객체 생성시마다 함께 생성되는 멤버 변수를 static 화 하여 생성시마다 생기는 메모리 누수를 막아보자 type InCoffee = { shots : number; } ////멤버 변수만 사용한 경우 class Coffee { gram_per_shot :number = 10; beans :number = 0; constructor (beans:number) { this.beans = beans; } makeCoffee(shots:number):InCoffee { if(this.beans < shots * this.gram_per_shot){ console.error('원두 부족'); } return { shots .. 2021. 11. 16. [TypeScript / 타입스크립트] unknown 과 any 의 차이점 [TypeScript / 타입스크립트] unknown 과 any의 차이 any와 unknown의 차이점을 분명히 알기 위해서는 any 타입에 대한 정의를 달리하자 any는 모든 타입을 뜻하는게 아니라 기존 타입스크립트의 타입에 대한 제한과 확정이라는 실드를 해제한다고 생각하자 다시말해 타입스크립트의 목적은 타입을 확정하거나 변수의 타입의 변경을 제한함으로써 디버깅을 명확히 하기 위함인데 any타입은 그런거 없이 실드를 해제하는 키워드이다 반면 unknown 이라는 키워드는 any와 같이 유연하게 여러가지 타입의 값을 변수에 대입할수 있지만, unknown 타입이 지정된 변수의 값과 다른 타입의 변수에 대입을 하려고할때 컴파일 에러가 발생한다. 아래 예제 코드를 참고하자 let str : unknown =.. 2021. 11. 3. [TypeScript | 타입스크립트] 콜백 함수 타입 선언 CallBack Function Type 타입스크립트 함수에 인자로 전달되는 콜백 함수의 타입 선언 방법 🌈 기본 형태 function 함수이름 (콜백함수명 : (콜백함수 전달인자 : 타입) => 콜백함수 리턴 타입) { //함수 기능... } 기본형태에서 볼수 있듯 타입 스크립트에서 콜백 함수의 타입은 arrow function 의 외형과 유사하다 🌈 샘플 예제 const sampleFunction = (callback : (str:string) => void):void=>{ setTimeout(() => { callback('1초 지남!'); }, 1000); } const callbackSample = (msg)=>{ console.log(`메시지 : ${msg}`); } sampleFunction(callbackSample) 실행 결과 .. 2021. 10. 26. [Vue.js] 뷰 라우터 params 전달 feat. vue-router [Vue.Js] 뷰 라우터 Params 전달 feat. vue-router 뷰 라우터를 통해 SPA를 구현하였다면 이제는 어떻게 분기된 라우터 간 구분값(?)을 전달할수 있을까 이다 위에서 언급한 구분값은 데이터가 될수도 있고 단순히 페이지 로딩에 필요한 해당 페이지의 아이디 정보가 될수도 있다. 기본 형태 [routes 설정] //라우터 path 에 id 입력 가능 설정 const routes = [ { path : '/blog/:id', component : Detail }, { path : '/List', component : List } ] [라우팅페이지.vue] //url에 입력한 params 중 id 값 $route.params.id 샘플 예제 아래 예제에서는 라우터에 param을 전달하여 해.. 2021. 8. 19. [Vue.js] 뷰 라우팅 feat. npm vue-router [Vue.Js] 뷰 라우팅 feat. npm vue-router 🌈 라우팅이란 ? 서버에서 웹 페이지를 미리 받아 놓고 새로고침 없이 원하는 부분만 해당 화면을 갱신하는 기술, 다른 말로 SPA (Single Page Application) 🌈 vue-router? 뷰에서 라우팅을 사용할수 있도록 공식 라이브러리로 지원 ⭐️ 설치 (vue-router 4 버전 이후 설치) npm i vue-router@4 ⭐️ 기본 형태 [router.js 파일] import { createWebHistory, createRouter } from "vue-router"; import 컴포넌트1 from './components/.....vue' import 컴포넌트2 from './components/.....vue' .. 2021. 8. 18. [Vue.js] 뷰 라이프 사이클 VUE Life Cycle [Vue.js] 뷰 라이프 사이클 Vue Life Cycle 뷰를 통한 UI 구현에 있어서 알맞은 타이밍에 서버에서 데이터를 전달 받거나 전달 해주어야 하는데 뷰의 라이프 사이클을 통해 해당 '타이밍'에 데이터를 전달하거나 받을 수 있다 ⭐️ 기본 형태 ⭐️ 라이프 사이클은 크게 Create - Mount - Update - Unmount로 나뉘는데 1️⃣ Create 는 컴포넌트 UI 랜더 이전에 데이터를 구성하는 단계, 2️⃣ Mount 는 UI 랜더 단계, 3️⃣ Update 는 Vue의 State [Data()]가 바뀔때, 4️⃣ Unmount 는 컴포넌트 종료시를 뜻한다. ⭐️ 뷰에서는 이를 이전 / 이후 단계로 세분화하여 구현이 가능하다. 🌈. beforeCreate() Create 단계 직전.. 2021. 8. 18. [Vue.js] 뷰 조건부 랜더링 v-if v-else-if v-else [Vue.js] 뷰 조건부 랜더링 v-if v-else-if v-else ⭐️ VUE 조건부 랜더링 뷰에서 조건부 랜더링시 v-if를 쓰면 편하다 즉, 자바스크립트 없이 그냥 해당 문법만으로 해당 태그를 포함하여 랜더하거나 제외시킬수 있다 ⭐️ 샘플 예제 (로직) 간단한 예제를 위해 dropdown내 짱구 선택시, 짱구 이미지가 나오고 흰둥이 선택시 흰둥이 이미지 등 선택한 이미지가 출력되는 예제이다 ⭐️ App Component 짱구 흰둥이 철수 영희 맹구 🌈 출력 결과 2021. 8. 14. [HTML] 볼륨 조절 효과 만들기 feat. input type="range" [HTML] 볼륨 조절 하는 것 같은 태그 만들기 feat. input range 해당 효과를 input에 타입만 range로 하면 될것을 예전 포트폴리오 만들적에 이렇게 간단한걸 css 와 javascript 로 하나하나 순수 구현했던 기억이 난다 ⭐️ 기본 형태 ⭐️ 샘플 예제 🌈 출력 결과 2021. 8. 14. 이전 1 2 3 4 ··· 12 다음 728x90
