시작하기 파일 다운받기 구현 방법은 대표적으로 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은 여전히 감이 잡히지..