eunas blog

스크롤이 내려간 상태에서, 라우터로 페이지를 이동하는 이벤트를 발생시킬 때 전환된 페이지의 스크롤 위치가 그대로 남아있는 문제 발생 해결은 매우 간단하다. 라우터 인스턴스에 해당 메서드를 추가한다. 나의 경우에는 스크롤을 최상단으로 올려야해서 좌표를 저렇게 주었다. const router = new VueRouter({ ... scrollBehavior(to, from, savedPosition) { return { x :0, y: 0}; } }) 참고 (예시에 top을 0으로 주라고 적혀있으나, 에러 표기가 나길래 x, y 좌표로 주었음) https://router.vuejs.org/guide/advanced/scroll-behavior.html Vue Router | The official Route..

input 박스를 이용하여 데이터를 입력했을 때, 기존 값과 새롭게 입력한 값을 비교하여야하는 경우 처음엔 하단과 같이 v-model에 걸어 데이터를 셋팅한 후, @input 이벤트를 이용하여 받아오려고 했으나 계속해서 new 값만 받아올 뿐, old 값은 전달되지 않았다. 기존코드 해결 v-model 대신, :value로 데이터를 셋팅해준 후, @change 이벤트를 걸어 가져올 수 있다. input 엘리먼트에서 v-model을 사용하는 경우, 데이터를 바인딩하며 입력 내용에 대한 양방향 모델 바인딩이 바로 가능하지만, :value(v-bind)을 사용하는 경우에는 그렇지 못하기 때문에 $event를 걸어 target value를 가져온 후, 데이터 값을 따로 변경해주어야 한다. v-model = v-..

Router를 이용하여 화면 전환을 하면서 데이터를 보내주는 경우 보통 아래와 같은 방식을 사용한다. const pageNm = 'FileName'; const param = {}; const router = useRouter() router.push({ name: pageNm, params: param }); }) 그리고 받아오는 쪽은 route를 이용하여 전달받은 데이터를 꺼내 사용할 수 있다. 그런데, param에서 중첩된 객체를 보내니 받는 쪽에서 제대로 꺼내오지 못하는 문제가 발생했다. 예를 들어 아래와 같은 형식의 데이터를 보내면 데이터 송신 부분 const fileName = 'Page'; const param = { a : 'A', b : 'B', bundleData: { c : 'C', ..

쓸 때 마다 찾아야해서 헷갈림 일단 여기에 모아놓고, 계속 추가 예정 0. 공통 데이터 포맷 유형 (YYYY-MM-DD) const getFormatDate = (date) => { let month = date.getMonth() + 1; month = month >= 10 ? month : '0' + month; let day = date.getDate(); day = day >= 10 ? day : '0' + day; return date.getFullYear() + '-' + month + '-' + day; } 1. 오늘 getFormatDate(new Date()) 2. 올해 1월 1일 getFormatDate(new Date(state.now.setFullYear(state.now.getFu..

Set 1. 중복 값이 없는 유일한 값들의 집합 2. 순서에 의미가 없음 3. index로 접근 불가 1. Set 객체 생성 const set = new Set(); console.log(set); //Set(0) {} const set1 = new Set([1, 2]); //Set(2) {1,2} const set2 = new Set('hello'); //Set(4) {"h", "e", "l", "o"} ※ 배열의 중복제거 기능으로 사용 //기존 const uniq = array => array.filter((v, i, self) => self.indexOf(v) === i); console.log(uniq([1, 1, 2, 2, 3])); // [1, 2, 3] //Set이용 const uniq = ..

/** * 3개의 타입 중, 2개의 타입 선택 시 해당 name 값 join을 이용해 하나의 문자열로 뽑아오기 */ const types =[ {name : '추천', value : 1}, {name : '묶음', value : 2}, {name : '단일', value : 3} ]; const values = [1, 2]; let arr = []; for(let i in values) { const data = types.filter((item) => item.value === values[i]).map(item => item.name); for(let n in data) { arr.push(data[n]); } } console.log(arr.join()); // "추천,묶음"

방법은 2가지가 있다. (css는 모두 제거한 상태이므로 모양이 예쁘지 않음) 1. FileReader()를 사용하는 방법 - 비동기적으로 실행된다. - base64로 인코딩된 값을 반환 2. URL.createObjectUrl()을 사용하는 방법 - 동기적으로 실행된다. 실행 속도가 조금 더 빠르다. - hash 형태의 url을 반환 ■ FileReader 사용 const uploadImg = (e) => { var input = e.target; if (input.files && input.files[0]) { //사진 1개인 경우 (multiSelect 하려면 for문 돌려야함) var reader = new FileReader(); reader.onload = (e) => { state.imgUr..

새로 옮긴 팀에서 타입스크립트를 쓴다. 예 그렇습니다. 뭐든 배워두면 좋으니까 ■ 타입스크립트(TypeScript)란? 마이크로소프트에서 개발한 자바스크립트의 슈퍼셋(superset) 오픈소스 프로그래밍 언어. 즉, 타입스크립트 ≥ 자바스크립트 타입스크립트(이하 TS)는 자바스크립트로 트랜스 컴파일된다. 1. 자바스크립트(이하 JS)는 매우 관대한 언어다. 이와 반대로 TS는 언어에 미리 타입을 부여하여 엄격하게 변수를 제한하는 것이므로 컴파일 시, 에러를 잡기에 용이하다. 2. 또한 실행 속도 시 장점이 있다. 런타임 시, 에러를 체크하는 대신 그 전에 사람이 직접 오류를 체크하기 때문에 JS에 비해 속도가 매우 빠르다. 3. 안전하며, 협업에 용이하다. 타인의 코드를 읽었을 때에 한 눈에 어떤 타입인..

// App.vue : 최상위 outlet 이 곳에 렌더링되는 컴포넌트가 최상위 outlet이 될 수 있다. 렌더링된 하나의 컴포넌트 안에 여러개의 중첩된 컴포넌트가 포함될 수 있다. // About.vue About App.vue라는 가장 바깥의 컴포넌트 안에 About.vue가 렌더링되고 About.vue 안에서 또 Info1.vue, Info2.vue가 렌더링되는 구조이다. children을 사용하여 중첩 라우팅을 할 수 있다. import Main from "@/views/Main.vue"; import DiarydWrite from "@/views/DiaryWrite.vue"; import Info1 from "@/views/Info1.vue"; import Info2 from "@/views/..

■ 동적 라우팅 URL이 필요에 따라 바뀌어야하는 경우 아래와 같이 콜론(:)을 사용하여 파라미터를 넣어줄 수 있다. 파라미터의 이름이 id 인 것은 필수는 아니나, 컨벤션이라고 함 const routes = [ { path: '/user/:id', component: UserAuth, }, { path: '/main', component: Main, }, ] export default routes 물론 두 개 이상의 동적 파라미터를 가질 수도 있다. { path: '/user/:id/auth/:pageNm', component: UserAuth, }, {{ item.user }} 해당 컴포넌트에서 파라미터의 변경 시점을 잡고 싶다면? 방법 1. watch로 $route 객체를 감지하면 된다. watch..