모든 에러가 그렇겠지만 이번에 만난 에러도 상당한 답답함을 안겨줬다. 페이지에서 다른 페이지로 이동하여 특정 조건을 체크해서 충족되면 정상 이동하고 불충족되면 다시 이전 페이지로 Redirect하는 기능을 구현하는 중 만났다. 만들고 싶은 기능을 예를 들면 : A페이지에서 B페이지로 router이동을 하는데 query정보가 없거나 잘못된 경우 A페이지로 Redirect하는 것 이다. 해당 기능을 구현하기 위해 라우터가드인 beforeRouteEnter()를 사용하여 B페이지에 접근 시 제일 먼저 query를 체크 한다. query조건이 만족되면 정상적으로 B페이지를 화면에 출력하고 불충족되면 next()를 이용해 A페이지로 Redirect을 한다. 하지만 Redirect를 하게 될경우 오늘 주제인 에러를..

여러 블로그를 보면 LocalStorage와 SessionStorage를 함께 비교하며 이해하기 쉽게 작성된 글이 많다. 처음에는 나도 다른 블로그와 다르지 않게 LocalStorage와 SessionStorage를 비교하면서 덤으로 Cookies까지 곁들이려고 했으나..... 문해력이 턱없이 부족해서.... 쉽지가 않았다.... LocalStorage, SessionStorage, cookies 각각 따로 정리하고 3개 모두 비교하는 정리글을 추가로 작성할 것 이다. 다소 중복되는 내용이 많겠지만 글쓰기 능력이 딸리니깐.... 뭐 어쩔수 없다는 예전부터 LocalStorage와 SessionStorage를 자주 사용했지만 단순 저장소로 생각하고 서로 구분없이 그때그때 마음에 끌리는 저장소를 선택해서 사..

LocalStorage 대부분 데이터 저장을 위해 DB를 사용한다. DB만큼 큰 용량을 가진건 아니지만 데이터를 저장할 수 있는 저장소를 브라우저에서 지원한다. 저장소 종류는 LocalStorage, SessionStorage가 있으며, Cookies도 저장소와 같은 역할을 할 수 있다. LocalStorage, SessionStorage는 HTML5에서 추가된 저장소이며, 데이터 저장 시 key=value의 쌍으로 저장 되고 key를 기반으로 데이터를 조회 한다. 보통 localStorage와 sessionStorage를 많이 비교한다. 그도 그럴것이 동일한 기능(데이터 저장)을 가지고 있지만 확연한 차이점을 가지고 있기 때문이다. 이번 편에서는 로컬스토리지만 파헤처본다. 세션스토리지, 쿠키에 대해서는..

시작하기 파일 다운받기 구현 방법은 대표적으로 2가지가 있는 것 같다. 하나는 Front에서 Blob로 변환 시켜 a태그의 download속성을 사용해 구현하는 방법. 하나는 Back에서 byte로 파일을 읽어 응답하면 Front에서 바로 다운받게 하는 방법. 처음에 말한 Front에서 Blob로 변환시켜 다운받는 방법은 IE, Edge, Firefox, Chrome, Safari등 일부 버전에서 지원하지 않는다. 브라우저 지원에 영향을 받지 않는다면 download속성을 사용해 Front에서 작업을 해도 상관 없지만 브라우저 신경을 쓰고 싶지 않다면 Back에서 기능을 구현하는게 좋을 것 같다. Front 파일 다운로드 👉 파일 다운로드 예제를 간단하게 하기 위해 하드코딩으로 파일 다운로드 주소를 hr..

Spring boot로 파일 다운로드를 구현 하던 중 Content-Type을 보게 되었다. Content-Type? Content-Type?? Content-Type???????????? 컨텐트 타입???????????? HTTP Header에 Conent-Type을 이래저래 지정하고 File을 Byte으로 읽어서 응답하면 브라우저에서 다운 받을 수 있는 것 같은데...... Content-Type에 대한 개념이 없으니 코드를 봐도 이해할 수 없다. 그래서 먼저 Content-Type을 공부하고 기능 구현을 하기로 했다. 개념 Content-Type이란, HTTP 통신에서 전송되는 데이터의 타입을 나타내는 header정보 중 하나 이다. Content-Type에 따라 데이터를 받는 측에서는 데이터를 어..

개념 Vue를 사용하면 직접 Dom요소에 접근할 경우가 거의 없다. 하지만 가끔 Dom을 직접 접근하여 컨트롤 해야 될 경우가 생길 수 있다. (아마 특정 영역에 focus를 주기 위해 많이 사용하지 싶다.) 이때 사용하는 속성이 $ref 이다. (자바스크립트의 querySelector와 같은 역할) $ref 기본기 👉 ref="target" 접근하고 싶은 태그에 ref속성명을 할당 한다. ref는 id처럼 중복이 불가능 하다. 👉 console.log('target', this.$refs.target) $refs로 해당 태그에 접근 할 수 있다. 콘솔에는 가 출력 된다. 👉 mounted(){ ... } $refs는 component가 렌더링 된 후에 접근이 가능하다. 만약, beforeCreate또는..

개념 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..

조건부 렌더링(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값을 반환할 때만 렌더링 된다." 소개 ..

예제 👉 👉 bindNumber(event) { ... } @input로 사용자가 input에 값을 입력 할때 마다 number에 할당한다. event에서 사용자가 입력한 값을 가져올 수 있다. v-model을 사용할 경우 number에 바로 바인딩이 가능하다. 하지만 현재 input이벤트로 bindNumber method를 한번 거친 후 number에 바인딩 한다. 그 이유는 아래에서 확인 가능하다. 👉 number(val){ ... } bindNumber method가 실행 되면, number에 값이 할당 되고, watch에서 number을 감지 해서 내부 로직이 실행 된다. 👉 const reg = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]/ 한글, 영어를 감지하는 정규표현식 이다. 정규표현식에 따라 감지하..

"SNS 간편 로그인을 언젠가 한번 만들어 봐야지" 생각은 있었다. 생각은 있었지만 계획은 없었는지 계속 미루고 있다가 만들어야만 하는 경우가 생겨, 자의가 아닌 타의에 의해 만들게 되었다. 그러다 보니 프로세스가 약간 이상할 수 있다. 그래도 SNS 간편 로그인에 대해 많은 공부를 하게 되었다. (Google, Kakao 간편 로그인도 했는데 대부분 프로세스는 같고 용어만 살짝 다르다.) Vue를 이용해 구현한 예제가 많다. 대부분 SDK를 사용한 예제들 이다. 하지만 Naver 개발 문서에 튜토리얼은 naverLogin_implicit-1.0.3.js를 사용한 예제로 짜여있어 참고하여 만들었다. SDK랑 크게 다르지 않는 것 같다. 예제 시퀀스 다이어그램 사용자가 Naver 계정으로 로그인 시 Nav..

개념 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..

Lifecycle Hooks은 Vue에서 아주 중요한 개념 이다. 감히 내가 생각컨데 Lifecycle Hooks를 알고 코드를 작성하는 것과 모르고 코드를 작성하는 것은 큰 차이가 있다. Lifecycle Hooks을 이해하지 않아도 크게 문제 되지 않지만 규모가 커지면서 component간 통신이 다양해 질 수록 Lifecycle Hooks의 이해도가 절실해 진다. (대충 알고 코드 짜다가 분명 "이 왜 안돼노? 아.. 맞는데!" 이런 말 나오면서 칼퇴근은 빠이~ 하게 됨) Lifecycle Hooks을 공부하다 보면 Dom, Virtual Dom 같은 개념이 출몰? 하는데 사뿐히 무시해 버렸다. Dom은 개발 시 수없이 듣고 찾아봐서 어느정도 감은 잡히지만 Virtual Dom은 여전히 감이 잡히지..

시작하기 아마 javascript 개발 중 사용 빈도가 높은 코드가 console.log()다. console.log()를 사용하는 이유는 여러가지가 있지만 그 중에서 간단한 디버깅을 위해 제일 많이 사용하는 것 같다. 그런데 매번 console.log()를 처음부터 적기란 앵간 귀찮은 일이 아니다. 그래서 찾아봤다. 몇글자만 입력하면 console.log()가 자동으로 생성되는 방법을! 간단한 설정으로 코드 작성시 효율성이 높아진다😆 자동완성 단축키 추가 및 사용법 👉 파일> 기본설정> 사용자 코드 조각 👉 자동완성을 적용시킬 언어 선택 언어마다 자동완성을 설정 할 수 있다. 👉 "console.log print" : { ... } prefix는 자동단축키 약어를 설정 body는 위 자동단축키 약어를 ..

Express.js, 또는 간단히 익스프레스(Express)는 Node.js를 위한 웹 프레임워크의 하나로, MIT 허가서로 라이선스되는 자유-오픈 소스 소프트웨어로 출시되었다. 웹 애플리케이션, API 개발을 위해 설계되었다. Node.js의 사실상의 표준 서버 프레임워크로 불리고 있다. -위키백과- 역시 위키. 간단 명료하지만 핵심적인 설명! Express의 기본개념은 위키설명으로 대신하고 Express로 프로젝트 생성하는 방법을 찾아봤다. 이래저래 구글링을 통해 Express로 프로젝트를 구성하는 방법을 찾아보니 대표적으로 2가지로 나뉜다. Express를 설치하고 한땀한땀 필요한 구성을 직접 잡아가는 방법 express-generator를 사용해 프로젝트 생성하는 방법 express-generat..

Vuepress 란? 간단하게 정의 하면 "Vue기반으로 정적 사이트를 생성해주는 도구!" 정적 사이트의 자세한 개념은 넘어 가겠습니돠. 나도 잘 몰라서....😅 Vuepress 이 외 정적사이트 생성기는 1. Gatsby(React) 2. Hugo(Go) 3. Hexo(Javascript) 4. Jekyll(Ruby) 5. Gridsome(Vue) 6. GitBook(Javascript) 이 외에도 다양하게 있다. Vuepress프로젝트 생성하기 Vuepress프로젝트 생성방법은 총 2가지가 있다. Quick Start Vuepress프로젝트 생성과 동시에 기본적인 구조를 자동 생성해주는 방법 Manual Installation 직접 구조를 처음부터 만드는 방법 Manual Installation 방법..