TIL

TIL

https://stackoverflow.com/questions/19329978/change-selects-option-and-trigger-events-with-javascriptnew CustomEvent('')링크 : https://develop

: 대상 Route 객체?: main에서 Store객체를 적용해줘야지 사용할 수 있다. : https://lovemewithoutall.github.io/it/npm-audit-fix/ : https://gent.tistory.com/62 : htt

dl,dt,dd: https://velog.io/@raram2/dl-dt-dd%EB%8A%94-%EC%96%B8%EC%A0%9C-%EC%93%B0%EB%8A%94-%EA%B1%B8%EA%B9%8C이미지 처리: https://www.eastflag.co

1. Promise return 방식 Promise를 return해서 계속 연결 Tip 1. 상품 별점 주기 링크 : https://codepen.io/joannashin3/pen/RwabEOv 2. 정규 표현식 링크 : https://poiemaweb.co

https://velog.io/@yaytomato/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2

공식 문서 : https://developer.mozilla.org/ko/docs/Web/API/Window/prompt값을 입력하지 않을 경우 null을 리턴공식 문서 : https://kr.vuejs.org/v2/guide/custom-direc

: https://www.w3schools.com/tags/tag_address.asp: href="javascript:void(0)"w3school : https://www.w3schools.com/css/css_background_repeat.as

https://www.zerocho.com/category/JavaScript/post/57433645a48729787807c3fdhttps://velog.io/@josworks27/%ED%95%A8%EC%88%98%ED%98%B8%EC%B6%9C-c

handlebarsejs : https://m.blog.naver.com/PostView.nhn?blogId=rwans0397&logNo=220676539841&proxyReferer=https:%2F%2Fwww.google.com%2F

출처 : https://www.zerocho.com/category/JavaScript/post/573c2acf91575c17008ad2fc코드Person.apply(this, arguments) : Person의 생성자에 Teacher의 this와 argum

링크 : https://kr.vuejs.org/v2/guide/components-slots.html : slot의 이름값에 대응하여 html과 같은 템플릿 조각을 넣을 수 있다.V-slot:slot name, slot="name"을 통해서 템플릿 조각을 대응

링크 : https://kr.vuejs.org/v2/guide/custom-directive.html#%EC%8B%9C%EC%9E%91

링크 : https://router.vuejs.org/kr/guide/advanced/navigation-guards.html예제 코드beforEnter : 라우터 경로 이동 전에 실행할 핸들러를 정의할 수 있음네비게이션가드 함수는 to, from, next를

김정환님 글 : https://jeonghwan-kim.github.io/2018/05/31/vue-form-validation.html공식 문서 : https://kr.vuejs.org/v2/cookbook/form-validation.html이메일

Node.contains : 어떤 엘리먼트가 다른 엘리먼트 안에 속하고 있는지 여부를 확인하기 위해 사용: https://developer.mozilla.org/ko/docs/Web/API/Node/contains

: https://javascript.info/promise-chaining : https://ko.javascript.info/try-catch

Redirected when going from "/login" to "/" via a navigation guard: https://stackoverflow.com/questions/62223195/vue-router-uncaught-in-promise-er

package.json파일과 같은 레벨에 vue.config.js 파일을 생성 후, 아래와 같이 작성한 다음 다시 서버를 구동하면 된다.v-bind:data- 를 이용해서 바인딩값을 가져올 때엔, element.dataset.cardId => card-id로 쓴 부분을

$el은 컴포넌트가 마운트가 된 이후에 생겨난다!따라서 created 훅에서는 찾지 못하고, mounted훅에서 DOM을 조작해야한다.: https://wormwlrm.github.io/2018/12/29/Understanding-Vue-Lifecycle-ho

table-cell을 이용한 가로, 세로 중앙 정렬: http://blog.302chanwoo.com/2016/07/vertical-center/커스텀 로딩바 만들기: https://www.w3schools.com/howto/tryit.asp?file

Reference : https://www.smashingmagazine.com/2016/07/how-to-use-arguments-and-parameters-in-ecmascript-6/Parameter : 함수 선언시에 정의된 변수Argument : 함수

Reference : https://backback.tistory.com/382공식 문서 : https://kr.vuejs.org/v2/api/왜 사용?: 한 마디로, 데이터를 변경한 후, DOM이 업데이트 되기를 기다리기 위해 사용!!: 오류 코드에

vue-cli: $ winpty vue.cmd create <project-name> : https://where-i-go.tistory.com/135 : https://stackoverflow.com/questions/43784202/how-t

* Vue * Vue-Router 동적 라우트 매칭 코드 예시 /user/foo, /user/bar와 같이 같은 패턴에 따라서 동일한 컴포넌트를 재사용해야하고, 매칭된 id값에 따라서 정보를 변경하고 싶을때 사용한다. 여기서 id를 동적 세그먼트라고하고, 동적

10/14Reference : https://dragoner.tistory.com/18https://beans9.tistory.com/154https://poiemaweb.com/js-regexp: 영문 대소문자, 특수문자(-), 숫자만 입력

잘못된 경로로 이동했을 경우를 처리하기 위해서, 라우트 테이블의 제일 마지막에 선언한다.코드 예시1.번의 경우, data가 변경되어도, 동일한 여러개의 컴포넌트가 각각 개별적으로 동작한다.2.번의 경우, 하나의 컴포넌트의 데이터가 변경되면 다른 컴포넌트의 데이터도 같이

Idea : Board를 생성하려면, 서버에 데이터를 전송해야한다.=> Api를 호출해서 서버에 데이터를 전송하고, 다시 서버로부터 보드 리스트에 대한 데이터를 호출해서 화면을 렌더링한다.Slot ? Vue Modal 컴포넌트 : https://kr.vuejs

브랜치 : card/addIdea : 카드 생성하는 부분이 반복 => 컴포넌트화!컴포넌트 구조 : Board > List > AddCardAddCard가 보여지는 지 여부를 List의 isAddCard 속성으로 관리AddCard에서 $emit("close") 이벤트를

Idea : AddCard의 마운트 될 때(mounted 훅) window에 이벤트를 바인딩!그리고 destroyed훅에서 이벤트를 해제한다.addEventListener & removeEventListener익명함수를 사용하지 않으면, 이벤트핸들러를 바인딩하고 삭제할

코드branch : card/drag해체 문법(spread syntax)으로 인자로 전달되는 event객체로부터 필요한 데이터를 뽑아낸다.to === 드롭된(도착한) 컨테이너로 부터 "listId"값을 추출한다 => api에 전달할 데이터!드롭된 컨테이너에서 자신을 포

: getBoundingClientRectdomRect = element.getBoundingClientRect();: 부모 엘리먼트가 아닌 뷰포트를 기준으로 position을 계산한다.element.offsetTop, element.offsetLeft: 부모 엘리먼트

branch : board/colorIdea색상 컴포넌트의 색상 클릭 시 api를 통해 보드의 배경색 데이터를 변경한다.body의 background-color 속성을 보드의 색상으로 변경한다.nav의 변경해서 dim처리 한다.다시 홈 컴포넌트로 이동 시 body, n

AddList.vue 컴포넌트를 생성, AddCard 컴포넌트를 재사용했다. => 추후 Slot을 통해 리팩토링 해보자api/index.js에 list관련 로직을 생성, actions에 등록한다.list 생성 api 호출 성공 시 => board 데이터를 다시 Fetc

: calendar.destroy() & calendar.render(): https://fullcalendar.io/docs/Calendar-addEvent: calendar.addEvent({ title : "금요일", // 이벤트

: https://github.com/SortableJS/Vue.Draggable: 이전 카드 이동 소스를 작성할때 라이브러리 이용 방법에 대한 설명을 적어놓지 않아서, 이번 기회에 다시 정리하려고 소스를 처음부터 다시 뜯어봤다.npm i -S vuedragg

select.selectedIndex : select 태그의 현재 선택된 값의 인덱스를 가져올 수 있다.select.selectedIndex = 3 이렇게 값을 줘서 원하는 아이템을 선택할 수도 있다.=> 만약 인덱스에 아이템이 없을 경우, 아무것도 선택되지 않는다.s

참고: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIsHTMLMediaElement: 오디오와 비디오 엘리먼트를 포함하는 미디어

: 로그인(인증) 결과로 얻은 토큰 값을 브라우저 레벨에 저장해서 페이지를 새로고침해도 로그인 상태를 유지하기 위해서 사용한다.: 개발자 도구 > application 탭의 cookies에서 쿠키를 확인할 수 있다.: 로그인 결과로 얻은 토큰과 유저 이름을 쿠키(브라우

: throw를 통해서 강제로 에러를 발생시킬 수 있고, 다음 catch문에 에러 제어를 넘길 수 있다.✔ 잘 못 했던 점정상적으로 동작하지 않던 코드비동기로 동작하는 FETCH_SELECTED_MOVIE 함수에서 발생한 에러를 감지하지 못했다.이유는, try c

: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange: https://happy-coding-day.tistory.com/128: https://

: extends가 먼저 실행, 그 후 mixins에 선언된 순서대로 실행된다.: 각 히스토리 별로 state가 존재":" 뒤에있는 계산식이 true가 될 경우에만 active 클래스 적용: https://ko.javascript.info/task/shuffl

: https://potensj.tistory.com/122숫자 입력 받아서 소숫점 3자리까지 반올림한 값 반환하는 함수: 모바일에서 특정 위치로 scrollTo하고, 그 엘리먼트가 가진 paddingTop, 그리고 fixed된 헤더의 높이값 만큼 top 값을

HTMLCSSJavascript

: https://soraji.github.io/front/2020/10/19/jsheapmemory/

: https://stackoverflow.com/questions/12690107/clone-object-without-reference-javascript: https://stackoverflow.com/questions/6316979/select

: https://stackoverflow.com/questions/16908476/object-property-name-as-number

: https://thiago6.tistory.com/11: https://stackoverflow.com/questions/597588/how-do-you-clone-an-array-of-objects-in-javascriptclearTimeou

:https://ui.toast.com/weekly-pick/ko_20190430: https://webruden.tistory.com/224: https://blog.jungbin.kim/web/2020/01/11/js-vue-global-

: https://m.blog.naver.com/PostView.nhn?blogId=mdown&logNo=220162562200&proxyReferer=https:%2F%2Fwww.google.com%2F: https://developer.m

router-view에 따라 그려지는게 아닌 컴포넌트created훅에서 '$route.path'확인 결과 "/"가 나왔다.router-view를 통해 변경된 경로에 따라 그려지는 컴포넌트Vue Router에서 정의된 해당 컴포넌트를 그리는 path.검색 버튼 클릭검색

: https://stackoverflow.com/questions/7376598/in-javascript-how-do-i-check-if-an-array-has-duplicate-values: https://kr.vuejs.org/v2/guide/r

✨ 믹스인의 created 훅에서 컴포넌트 안에있는 메소드를 사용할 수 있다.

position: absolute; right: 0;을 통해서 오른쪽에 정렬시키면 된다.적용한 소스lengthen 클래스를 가진 엘리먼트는 길이가 0px에서 200px까지 증가한다.참고트랜지션이 안먹히는 이유오른쪽에서 시작해서 왼쪽으로 길어지는 트랜지션 적용하기CSS

목록(리스트) 태그 앞의 마커를 정하는 속성참고 : CSS list-style-type 속성✨ if()문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 변환한다.불린 형으로 변환 시 false가 되는 값 : 숫자 0, 빈 문자열 "", null, undefined

App.vue에 각 컴포넌트 마다 발생하는 API 요청을 체크해서 로딩 상태를 표시하는 AppLoading.vue 컴포넌트 생성하기 ✔현재 접근하는 컴포넌트에서 발생하는 API 요청이 모두 완료되었는지 체크할 수 있는 로직 찾아보기방문한 적 있는 컴포넌트에는 캐시 데이

App.vue에 각 컴포넌트 마다 발생하는 API 요청을 체크해서 로딩 상태를 표시하는 AppLoading.vue 컴포넌트 생성하기 ✔현재 접근하는 컴포넌트에서 발생하는 API 요청이 모두 완료되었는지 체크할 수 있는 로직 찾아보기방문한 적 있는 컴포넌트에는 캐시 데이

App.vue에 각 컴포넌트 마다 발생하는 API 요청을 체크해서 로딩 상태를 표시하는 AppLoading.vue 컴포넌트 생성하기 ✔현재 접근하는 컴포넌트에서 발생하는 API 요청이 모두 완료되었는지 체크할 수 있는 로직 찾아보기방문한 적 있는 컴포넌트에는 캐시 데이

immediate변경과 관계없이 최초 한번 실행되도록 하기위한 옵션deep배열이나 객체의 내부 속성 변화를 감지하기 위해서 사용하는 옵션handler속성이 변화할 때 실행될 메소드를 지정handler: "fetchData"와 같이 뷰 인스턴스 내의 method 명을 전

flex-direction 속성position: sticky2.0 문제 발생: sticky 포지션으로 화면 상단에 고정시켰는데, fixed처럼 정확히 지정한 위치에 고정되어 있지않고, 스크롤 할 때마다 조금씩 흔들리는 이슈가 발생했다.2.1 sticky로 지정하면 고정

2021.05.20 🎉 TIL XSS(Cross Site Scripting) 찾아보게 된 계기 : 프로젝트 진행 중에 어드민 쪽에서 에디터에 스크립트 태그 삽입을 허용해달라는 요청이 들어왔다. 기본적으로 켄도 UI 에디터에서는 스크립트 태그가 입력되면 k-scr

: 1번의 경우에 하나의 API당 한 개의 에러 컴포넌트가 필요하다. 따라서, 여러개의 API 함수의 상태를 공통으로 관리하는 방법이 필요했다.우선, 페이지의 구조를 다음과 같이 바꿨다.isReloading 적용한 경우

: 이미지 위에 dimmed처리된 반투명 배경 적용하기이슈: 특정 태그의 childNodes를 순회하면서 script 태그인지 확인 후, 페이지에 createElement를 통해서 해당 스크립트 태그를 추가하는 로직이 필요했다.하지만, childNodes가 있는지, c

참고참고: 프로퍼티가 없을 경우를 대비해서 기본 값을 설정할 수 있다.: transform 속성 중에서 rotate, skew의 기준점을 지정하는 속성

: IE에서 element.remove() 메소드를 지원하지 않아 에러가 발생했다.따라서, 모든 브라우저에서 지원하는 로직으로 수정했다.: document.querySelectorAll()을 통해 얻은 NodeList에서는 forEach는 존재하지만, map 메소드는

top: 0; bottom: 0;을 통해 height: 100%와 같은 효과를 적용했다.변경 사항infinite-loading에 identifire props 추가기존에 우리가 사용한대로 infiniteHandler에서 $state를 인자를 받아서 $state.rese

이번에 회사에서 진행하는 프로젝트에 vue3와 타입스크립트를 도입했습니다.화면에 사용할 UI 컴포넌트를 만드는 작업을 담당했는데, 그 중에서 테이블을 만들면서 vue와 타입스크립트에 대한 이해도를 높이는 좋은 경험을 했습니다. 작업하면서 느꼈던 점을 정리하려고 합니다.

데이터를 호출하지 않았다.이유 : 최초 '/browse/movie'로 이동하면, MoviePage 컴포넌트가 생성되고, created() 훅에 있는 fetchData 함수가 실행되어서 데이터를 가져온다.하지만, 라우터 링크를 클릭해서 다시 기존 경로로 이동하면, 컴포넌