tailwind 설치~빌드 까지 심심풀이로 퍼블리싱을 할 때 tailwind 를 사용해 보고 싶어서 알아봄 https://tailwindcss.com/docs/installation Installation: Tailwind CLI - Tailwind CSS Documentation for the Tailwind CSS framework. tailwindcss.com 1. npm install tailwindcss => npm 을 이용하여 tailwindcss를 설치한다. 2. npm tailwindcss init => npx를 이용하여 custom을 위한 tailwind.config.js를 생선한다. 3. tailwind는 한번 bulid 하여 라이브러리 css를 생성했다고 해서 모든 소스가 있는 것이 아니다. 참조할 html파일을 t.. 2022. 3. 26. [vue] 이벤트 버블링 관련 수식어 공식문서에 이벤트 핸들링 중 버블링과 관련된 수식어 들이 보여 정리함. https://vuejs.org/guide/essentials/event-handling.html#event-modifiers Event Handling | Vue.js vuejs.org click.stop 위 코드를 실행할 시엔 문제가 한 가지 있다. 바로 click.stop을 우클릭하였을시 부모,자신,자식 총 세번의 abc함수가 호출이 됨 의도와 맞다면 문제가 없겠지만 의도와 다를시 이를 다룰 수 있어야됨 수식어를 정리하기전 이벤트 전파 현상에 대해 알아야하는데 이벤트 전파 현상이란 위의 예시처럼 클릭한 DOM(이벤트가 발생한 DOM)과 겹쳐있는 부모나,자식 DOM까지 같이 선택이 되어서 이벤트가 발생하는 것을 이벤트 전파 현상이.. 2022. 3. 17. [vue] debounce 사용하기 feat.(throttle) debounce와 throttle의 공통 키워드로는 '연속성' 입니다. 우리는 특정 함수를 호출할 시, 이벤트리스너와 관련된( ex: scroll )함수를 호출할 시 해당 이벤트들이 너무 연속적으로 수행될 때가 있습니다. debounce와 throttle은 이를 방지하기 위한 기술입니다. - debounce 이벤트를 호출한 후, 일정시간이 지나야 해당 실행문장을 실행합니다 => 키를 입력하면 값이 출력되는 이벤트를 호출한다 가정했을시, 마지막에 입력했을 때를 기점으로 설정한 시간만큼 재호출이 없어야 실행문장이 실행됩니다. - throttle 이벤트를 호출한 후, 실행문장을 한 번 실행하고, 설정한 시간만큼은 재호출을 해도 응답하지 않습니다. 1. lodash를 설치 후 가져와 사용 2. debounce는.. 2022. 3. 16. [vue] $nextTick 사용하기 가끔 우리가 Dom을 그려줄때나 접근할 때, Dom을 그려주고 접근하는 것이 비동기적으로 처리가 되어 귀찮아 질 때가 있습니다. 예시론, 바인드완료 위 코드와 같이 mount된 후 1. isBind에 true값을 주어 2. #spanEle Dom을 그리고 3. 그 후에 #spanEle를 console.log로 접근해 보면 위 사진과 같이 null이란 결과가 나옵니다. 이 이유는 맨 첫 문단에 작성했던 Dom을 그린 후, 다음 실행문장이 동기적으로 진행되는 것이 아닌 비동기로 진행되어 #sapnEle Dom이 그려지기 전에 console.log로 접근하기였기 때문입니다. 공식문서에서 살펴보니 이와 같은 상황에 nextTick을 사용하라 나와있네요. https://vuejs.org/guide/essentia.. 2022. 3. 16. 웹 사용자 인증방식 [ 쿠키 , 세션 , 토큰 ] 우리가 웹에서 서버와 통신할때는 http라는 통신 프로토콜을 이용하여 통신합니다. 인증방식의 존재이유부터 설명하자면 이 http는 보통 지속적이지 않습니다. 그래서 서버에 요청이 들어올때마다 사용자에 대한 정보가 없다면 서버측은 누가 보낸 요청인지 알 수가 없음 ex) 서버입장에선 페이지 넘버, 목록번호 등 만 포함하여 서버에 요청한다면 얘가 누군데 요청하는거야? 하고 알 수가 없고 거절할 것 보안이 중요한 케이스로 병원의 환자정보를 열람하는 시스템을 들어갔다 하면, 클라이언트가 서버에 요청을 할때마다 인증여부를 포함해주지 않는다면 / 서버는 요청한 클라이언트가 인증된 사용자인지 알 수가 없습니다. 이것을 서버가 사용자를 식별하지 못하는 무상태(Stateless) 라고 하고, http 통신의 이 특징때문.. 2022. 3. 9. vue3 script 구현방법 (setup) vue3 스크립트 구현방법 1.options(기존의) 2.composition 3.script setup 메모용 3.script setup은 2.실행 시 composition로 빌드해 주기 때문에 2와 3은 비슷하다 https://vuejs.org/api/sfc-script-setup.html | Vue.js vuejs.org 2022. 3. 1. 이전 1 ··· 7 8 9 10 11 12 13 ··· 15 다음
