frontend6 210625 Javascript Textarea Input 이벤트에 맞춰 길이 늘리기 Javascript Textarea Input 이벤트에 맞춰 길이 늘리기 Vanilla Javascript const textarea = document.querySelector('textarea') textarea.addEventListener('input', e => { textarea.style.height = textarea.scrollHeight + 'px' }) Vue.js const textareaWrap = this.$refs.textarea.$el const textarea = textareaWrap.querySelector('textarea') textarea.style.height = 'auto' textarea.style.height = textarea.scrollHeight + '.. 2021. 11. 25. 210708_Virtual DOM 이 빠른 이유 VirtualDOM 이 빠른 이유 브라우저 렌더링 에 대한 이해 VirtualDOM 이 빠른 이유 프론트앤드를 공부하다보면, "Virtual DOM" 이라는 단어를 한번씩 마주치게 됩니다. 많이 사용되는 프레임워크들은, 주로 Virtual DOM 을 사용해서 속도를 올립니다. 어떻게 이렇게 빠른걸까요? 그리고 왜 실제 DOM 은 느리고 비효율적일까요? 브라우저 렌더링 에 대한 이해 사실 프론트앤드 개발자들은 복잡하더라도 DOM 을 기본적으로 이해할 필요가 있습니다. HTML/CSS 페이지만 서버에서 요청해온다고 가정해보겠습니다. JS 는 여기서 필요하지 않습니다. HTML/CSS 형식의 파일을 응답으로 받은 후에는, 아래와 같은 일들이 일어납니다. 1. HTML 파싱 브라우저는 HTML 파일들을 파싱하고.. 2021. 7. 8. 210425_Jest 사용법 Jest 기본 사용법 Test 파일 구성 Test File 이름 짓기 Jest 코드 작성 Jest 로 스냅샷 테스트하기 비동기 테스트 패턴 테스트 더블 (Test double) 모의 함수 만들기 (Mocking) SpyOn 사용하기 (Spying) Jest 기본 사용법 Spharos CMP 프로젝트의 Jest 는 package.json dependencies 내부에 @vue-plugin-e2e-cypress 로 정의되어있으며, 하단 스크립트로 실행 할 수 있습니다. --mode 는, 개발기 dev, 배포용 prod 으로 변경할 수 있습니다. "scripts": { "test:unit": "vue-cli-service test:unit --mode prod" }, "devDependencies": { "@.. 2021. 5. 28. Vue3 에 Tailwind CSS 설치하기 How to setup Tailwind CSS in Vue 3 How to Setup Tailwind CSS in Vue 3 A streamlined walkthrough if you hate docs so much. devjavu.space tailwind - vue3 vite Install Tailwind CSS with Vue 3 and Vite - Tailwind CSS Setting up Tailwind CSS in a Vue 3 and Vite project. tailwindcss.com 2021. 5. 10. Cookie, Session, Token 의 차이점 Cookie, Session, Token 의 차이점 Cookie, Session, Token 의 차이점 계정 정보를 요청 Header 에 넣는 방식 Session / Cookie 방식 인증 절차 Session 과 Cookie 의 차이점 장단점 Token 기반 인증 방식 JWT Token 인증절차 장단점 출처 : tanfil.tistory, Dev.to 계정 정보를 요청 Header 에 넣는 방식 절대 이렇게 하면 안됩니다. 보통 앱에서는 서버로 HTTP 요청을 할 때 따로 암호화 되지 않으므로, 해커가 HTTP 요청을 가로채서(intercept) 사용자의 계정정보를 알 수 있습니다. Session / Cookie 방식 Session/Cookie 방식 인증은 기본적으로 세션 저장소를 필요로 합니다. 세션 .. 2021. 5. 9. 디렉토리 구별 - "./file" vs "file" 의 차이점 src = "images/file.png" - 현재 디렉토리에서 찾기 src = "./images/file.png" - 현재 디렉토리에서 찾기 src = "../images/file.png" - 상위 디렉토리에서 찾기 src = "/images/file.png" - 루트('/') 디렉토리에서 찾기 "images" 와 "./images" 의 모두 현재 디렉토리에서 찾는것이고, 지극히 개인적인 취향입니다. 그러나 번들러 bundler 또는 빌드build 프로그램을 사용하는 경우, "images" 와 "./images" 는 다르게 동작할 수 있습니다. Parcel bundler 의 경우, "./images" 는 현재 디렉토리에서 상대적 위치에서 으로 취급 하지만 "node_modules" 폴더에서 파일을 찾습.. 2021. 1. 8. 이전 1 다음
