Dev.FrontEnd/Vue10 [Vue] Redirected when going ... via a navigation guard. 모든 에러가 그렇겠지만 이번에 만난 에러도 상당한 답답함을 안겨줬다. 페이지에서 다른 페이지로 이동하여 특정 조건을 체크해서 충족되면 정상 이동하고 불충족되면 다시 이전 페이지로 Redirect하는 기능을 구현하는 중 만났다. 만들고 싶은 기능을 예를 들면 : A페이지에서 B페이지로 router이동을 하는데 query정보가 없거나 잘못된 경우 A페이지로 Redirect하는 것 이다. 해당 기능을 구현하기 위해 라우터가드인 beforeRouteEnter()를 사용하여 B페이지에 접근 시 제일 먼저 query를 체크 한다. query조건이 만족되면 정상적으로 B페이지를 화면에 출력하고 불충족되면 next()를 이용해 A페이지로 Redirect을 한다. 하지만 Redirect를 하게 될경우 오늘 주제인 에러를.. 2021. 8. 29. [Vue] Dom접근 하기 - $ref, $refs 개념 Vue를 사용하면 직접 Dom요소에 접근할 경우가 거의 없다. 하지만 가끔 Dom을 직접 접근하여 컨트롤 해야 될 경우가 생길 수 있다. (아마 특정 영역에 focus를 주기 위해 많이 사용하지 싶다.) 이때 사용하는 속성이 $ref 이다. (자바스크립트의 querySelector와 같은 역할) $ref 기본기 👉 ref="target" 접근하고 싶은 태그에 ref속성명을 할당 한다. ref는 id처럼 중복이 불가능 하다. 👉 console.log('target', this.$refs.target) $refs로 해당 태그에 접근 할 수 있다. 콘솔에는 가 출력 된다. 👉 mounted(){ ... } $refs는 component가 렌더링 된 후에 접근이 가능하다. 만약, beforeCreate또는.. 2021. 8. 9. [Vue] 이벤트 전달 - Props 개념 Vue component와 component의 데이터 전달을 하기 위한 방법 중 하나 이다. Props의 주요 성격은 아래와 같다. component와 component는 부모와 자식 관계가 성립 되어야 한다. 단반향 데이터 흐름을 가진다.(one-way-down binding) component와 component는 부모와 자식 관계가 성립 되어야 한다. // parent component 👉 현재 parent component에 Child component를 불러와 주입 시켰다. 이렇게 parent compoent와 Child component를 부모와 자식 관계로 만들었다. 이제 Props를 사용 할 수 있게 된다. Props는 부모(parent compoent)에서 자식(Child compo.. 2021. 8. 8. [Vue] 조건부 렌더링(v-if, v-show) 조건부 렌더링(Conditional Rendering) 개념 조건부 렌더링이란, 조건에 따라 화면에 렌더링 하는 것을 말한다. 조건이 참(true)일 경우 화면에 렌더링되고 거짓(false)일 경우 렌더링 되지 않는다. Vue에서는 v-if, v-show가 조건부 렌더링 역할을 한다. v-if The directive v-if is used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value. - vue 공식문서 - vue 공식문서에 따르면, "v-if는 조건에 따라 블록을 렌더링하기 위해 사용되며, true값을 반환할 때만 렌더링 된다." 소개 .. 2021. 8. 4. [Vue] input에 숫자만 입력 가능하게 하기 예제 👉 👉 bindNumber(event) { ... } @input로 사용자가 input에 값을 입력 할때 마다 number에 할당한다. event에서 사용자가 입력한 값을 가져올 수 있다. v-model을 사용할 경우 number에 바로 바인딩이 가능하다. 하지만 현재 input이벤트로 bindNumber method를 한번 거친 후 number에 바인딩 한다. 그 이유는 아래에서 확인 가능하다. 👉 number(val){ ... } bindNumber method가 실행 되면, number에 값이 할당 되고, watch에서 number을 감지 해서 내부 로직이 실행 된다. 👉 const reg = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]/ 한글, 영어를 감지하는 정규표현식 이다. 정규표현식에 따라 감지하.. 2021. 8. 2. [Vue] Naver 간편 로그인 (naverLogin_implicit-1.0.3.js) 구현 "SNS 간편 로그인을 언젠가 한번 만들어 봐야지" 생각은 있었다. 생각은 있었지만 계획은 없었는지 계속 미루고 있다가 만들어야만 하는 경우가 생겨, 자의가 아닌 타의에 의해 만들게 되었다. 그러다 보니 프로세스가 약간 이상할 수 있다. 그래도 SNS 간편 로그인에 대해 많은 공부를 하게 되었다. (Google, Kakao 간편 로그인도 했는데 대부분 프로세스는 같고 용어만 살짝 다르다.) Vue를 이용해 구현한 예제가 많다. 대부분 SDK를 사용한 예제들 이다. 하지만 Naver 개발 문서에 튜토리얼은 naverLogin_implicit-1.0.3.js를 사용한 예제로 짜여있어 참고하여 만들었다. SDK랑 크게 다르지 않는 것 같다. 예제 시퀀스 다이어그램 사용자가 Naver 계정으로 로그인 시 Nav.. 2021. 7. 31. [Vue] Watch 개념 While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That’s why Vue provides a more generic way to react to data changes through the watch option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data. - vue공식문서 - 공식문서에 따르면 대부분 "computed 속성이 적합하지만, 사용자가 특정 지정한 값을 감시하는 경우을 위해 w.. 2021. 7. 21. [Vue] Lifecycle Hooks Lifecycle Hooks은 Vue에서 아주 중요한 개념 이다. 감히 내가 생각컨데 Lifecycle Hooks를 알고 코드를 작성하는 것과 모르고 코드를 작성하는 것은 큰 차이가 있다. Lifecycle Hooks을 이해하지 않아도 크게 문제 되지 않지만 규모가 커지면서 component간 통신이 다양해 질 수록 Lifecycle Hooks의 이해도가 절실해 진다. (대충 알고 코드 짜다가 분명 "이 왜 안돼노? 아.. 맞는데!" 이런 말 나오면서 칼퇴근은 빠이~ 하게 됨) Lifecycle Hooks을 공부하다 보면 Dom, Virtual Dom 같은 개념이 출몰? 하는데 사뿐히 무시해 버렸다. Dom은 개발 시 수없이 듣고 찾아봐서 어느정도 감은 잡히지만 Virtual Dom은 여전히 감이 잡히지.. 2021. 7. 18. [Vue] class 동적 바인딩 Class 동적 바인딩 Vue로 Front 개발을 하다 보면 동적으로 Class를 추가 또는 삭제를 해야 될 때가 있다. JQuery는 잘모르지만 JQuery에서 addClass(), removeClass()와 비슷한 개념 이다. 딱히 어렵지 않아 예제를 보면 쉽게 이해할 수 있다. 문법 :class="{ '클래스이름' : '조건' }" 조건이 true경우 클래스이름이 바인딩 되고 false경우 바인딩된 클래스이름이 제거 된다. 기초 사용법 Class Bind 바인딩 👉 isBind값이 true경우 red클래스가 바인딩 되어 스타일이 적용되고 false경우 red클래스가 바인딩에서 해제되어 적용된 스타일이 사라진다. red는 아래 style에 정의 되어 있다. 👉 버튼을 클릭하면 setBind()가 실행.. 2020. 11. 4. [Vue] 동적라우팅 route변화 감지 동적 라우팅의 문제점 동일한 레이아웃에 데이터만 달라질 경우 동일한 component를 재사용하는 것이 효율적이다. 한 개의 component에 params로 구분해 데이터 값만 변경하면 된다. 그런데 한번 렌더링 된 component는 route가 변경되더라도 라이프사이클 훅을 한번 더 호출하지 않아 문제가 발생한다. 예를 들어 라우터 1로 렌더링 된 component는 다음 라우터 2가 랜더링 될 때 라이프사이클 훅이 호출되지 않아 component는 params가 바뀐지 몰라 created 등이 실행되지 않는다. 문제 해결 router-link 코드 라우터1 라우터2 👉 라우터1 라우터 1, 라우터 2는 home component를 같이 사용한다. component를 같이 사용을 하지만 사용자가 라.. 2020. 11. 1. 이전 1 다음
