VSCode 디렉토리 구조 보기 방식 변경 VSCode 탐색기 영역에 작업 하고있는 디렉토리 구조를 볼 수 있다. 해당 디렉토리 구조를 보고 재빠르게 현재 작업하고 있는 디렉토리 위치를 알 수 있고 다른 디렉토리 위치도 파악 할 수있다. 하지만 아래와 같이 디렉토리 계층(java/com/example/demo)이 많을 경우 VSCode에서는 한줄로 표시 된다. 생각보다 한눈에 디렉토리 구조를 파악하기 힘들다. 설정을 변경해서 디렉토리 나열 방식을 변경 해보자. VSCode 설정에 가서(단축키: Ctrl + ,) Compact Folders를 검색하자. 기본 default로 Compact Folders가 체크 된 상태다. 해당 체크를 해제하면 아래와 같이 디렉토리구조가 나열되어 표시 된다. 추가로 Ctrl..

Cookie 쿠키(영어: cookie)란 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 일컫는다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다. 쿠키는 소프트웨어가 아니다. 쿠키는 컴퓨터 내에서 프로그램처럼 실행될 수 없으며 바이러스를 옮길 수도, 악성코드를 설치할 수도 없다. 하지만 스파이웨어를 통해 유저의 브라우징 행동을 추적하는데에 사용될 수 있고, 누군가의 쿠키를 훔쳐서 해당 사용자의 웹 계정 접근권한을 획득할 수도 있다. - 위키백과 - 쿠키에 대한 개념은 위키백과의 설명글을 참고하면 이해..

모든 에러가 그렇겠지만 이번에 만난 에러도 상당한 답답함을 안겨줬다. 페이지에서 다른 페이지로 이동하여 특정 조건을 체크해서 충족되면 정상 이동하고 불충족되면 다시 이전 페이지로 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..

// 참고 1. tocbot https://www.npmjs.com/package/tocbot 1. https://depast.tistory.com/40#1-html-%EC%88%98%EC%A0%95 // header " target="_blank" rel="noopener">https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"> https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css"> // body TOC // script // css .toc-wrap{ z-index: 100; } .toc-wrap-absolute{ position: absolute; right: 1.5re..

개념 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은 여전히 감이 잡히지..