728x90 프론트엔드3 로컬스토리지, 세션스토리지, 쿠키 정리 [1] 로컬스토리지, 세션스토리지, 쿠키 차이점 1. 쿠키의 단점을 보완해 HTML5에서 '웹스토리지'라는 기술 탄생. 1-1) 웹스토리지 : 로컬스토리지, 세션스토리지. 1-2) 웹스토리지는 Key와 Value 형태로 이루어짐. 1-3) 웹스토리지는 클라이언트에 대한 정보를 저장. 1-4) 웹스토리지는 로컬에만 정보를 저장, 쿠키는 서버와 로컬에 정보를 저장. 2. 로컬스토리지는 클라이언트에 대한 정보를 영구적으로 저장 ex) 자동 로그인 저장 3. 세션스토리지는 세션 종료 시(브라우저 닫을 경우) 클라이언트에 대한 정보 삭제 ex) 입력 폼 정보 저장 3-1) 로컬&세션스토리지 장점1 : 서버에 불필요하게 데이터를 저장하지 않는다. 3-2) 로컬&세션스토리지 장점2 : 용량이 크다. (약 .. 2022. 8. 30. [Vue] Babel이란? 바벨에 대해서 이야기하기 전에, 먼저 크로스 브라우징(Cross Browsing)에 대해서 설명이 필요하다. 크로스 브라우징은 브라우저나 플랫폼마다 보이는 모습이 다른 경우가 많은데, 이러한 차이를 최소화하여 브라우저, 환경에 영향을 최소한으로 받고 해당 웹 서비스를 사용할 수 있게 최적화를 하는 작업을 말한다. 일부 최신 브라우저에서만 동작하는 기능을 그렇지 않은 브라우저에서 구현해야 할 경우, 기능을 단순화 하거나 생략해야 하는 경우가 발생하기도 한다. 프런트엔드 개발자들에게 크로스 브라우징 이슈는 코드의 일관성을 망가트리고 혼란스럽게 만드는 요소중 하나이다. 이러한 크로스 브라우징 이슈를 해결하기 위해 생겨난 툴이 바벨이다. ES6+ 버전의 자바스크립트나 타입스크립트, JSX 등 다른 언어로 분류되.. 2021. 8. 10. [Vue.js] 컴포넌트 통신 (Props, Event emit) 1. 컴포넌트 통신이란? 컴포넌트 간의 통신에는 규칙이 있습니다. 부모에서 자식으로 데이터를 전달하기 위해서는 props를 사용한다. 자식이 부모에게 데이터를 전달하기 위해서는 event를 발생시킨다. 이와 같은 규칙은 컴포넌트가 독립적으로 작동할 수 있도록 하기 위함이며, 데이터의 flow를 좀 더 규칙적으로 바라보기 위함입니다. 1-1. 컴포넌트 통신 규칙이 필요한 이유 Vue의 경우 컴포넌트로 화면을 구성하기 때문에 같은 웹 페이지라고 하더라도 데이터를 공유할 수 없습니다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위(Scope)를 가지기 때문입니다. 따라서, 직접적으로는 다른 컴포넌트의 값을 참조할 수 없기 때문에 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 규칙을 따라야 합니다. .. 2021. 8. 9. 이전 1 다음 728x90
