본문 바로가기

분류 전체보기369

[Javascript] window.sessionStorage

sessionStorage란? 참고 : 모질라 window.sessionStorage는 localStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고, sessionStorage의 데이터는 페이지 세션이 끝날 때 제거되는 차이가 있습니다. - 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있습니다. - 탭/창을 닫으면 세션이 끝나고 sessionStorage안의 객체가 초기화됩니다. - 같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 sessionStorage를 생성합니다. 사용할 때 알아야 하는 점은 키와 값 모두 String형태로 저장해야 합니다. 키와 값은 항상 각 문자에 2바이트를 할당하는 UTF-16 DOMString의 형태로 .. 2020. 12. 29.

[Javascript] DOM의 정보와 Javascript 스펙을 가지는 window 객체 알아보기

브라우저는 서버에서 받은 html, CSS는 랜더링 엔진을 사용해서 화면에 표시합니다. Javascript는 랜더링 엔진에서 해석하지 않고, Javascript 엔진으로 처리합니다. 화면에 표시된 요소를 조작하는 이벤트를 발생시키는 건 Javascript입니다. 이 Javascript는 DOM을 조작하고 다시 랜더링을 일으킵니다. 그니까, DOM을 조작하기 위해서 브라우저는 Javascript를 사용하는 것입니다. 그래서 개발자가 DOM을 조작하기 위한 정의를 내리기 위해서 Javascript를 사용합니다. 브라우저에서 사용하는 Javascript에서 DOM의 정보와 Javascript의 함수나 이벤트 함수 정보를 가지는 객체가 window 객체입니다. 아무 사이트에서 개발자 도구를 열고, console.. 2020. 12. 29.

macOS 특정 포트 찾아서 port kill 죽이기

80 포트를 사용하는 프로세스를 죽이려면... 1. 터미널 열기 2. 다음 명령어를 입력 : lsof -i :80 3. 목록 중에 pid 찾기 4. sudo kill -9 프로세스 번호 2020. 12. 29.

Vue에서 $nextTick이란

Vue.js는 컴포넌트가 새로 생성이 되거나, 화면에 그려지는 데이터가 변경될 경우, Virtual DOM에 변경사항을 반영하고, 실제 DOM과 비교해서 달라진 부분만 교체합니다. 이 교체가 모두 완료되고 난 시점에서 실행되는 훅이 mounted입니다. mounted는 사용자가 사용하는 브라우저의 DOM에 모든 변경사항을 반영하고나서 실행되는 훅입니다. 그런데, Javascript의 비동기 처리 특성때문에 DOM을 탐색하거나 수정하는 로직이 있을 경우, DOM이 갱신이 되기 전에 DOM을 탐색해서 undefined나 null 에러가 발생하는 경우가 있습니다. 이런 상황때문에 Vue.js 프레임워크에서는 DOM에 모든 변경사항이 완전히 반영이 된 후에 사용자 정의 로직을 실행할 수 있도록하는 함수를 가지고.. 2020. 12. 22.

[Vue.js] mixin이란

mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”됩니다. 공식 문서 참고 여러 컴포넌트가 created, methods, data 같은 옵션을 공통적으로 사용하는 것처럼 컴포넌트마다 동일한 코드를 중복으로 작성할 필요 없이, 하나의 Mixin객체를 생성해서 여러 컴포넌트가 참조해서 사용하도록 하는 방법입니다. 공식문서에서는 property를 사용자 정의하는 데에만 사용하도록 권장하고 있습니다. 사용 방법 다음 예시는 공식 문서를 참고한 코드입니다. created와 methods 요소 옵션을 가지는 객체와 이 객체를 사용할 컴포넌트를 정의한 코드입니다. 전역 Mixin 사용 mixin을 전역으로 적용.. 2020. 12. 22.

Javascript로 클라이언트 디바이스및 브라우저 확인하기

서버로 요청을 한 클라이언트가 브라우저(웹)인지 앱(폰)인지 어떤 OS인지 등을 header를 통해서 클라이언트 정보를 전달받아 볼 수 있는 API가 있습니다. 바로, window.navigator.userAgent객체를 확인하면 됩니다. 보통 클라이언트의 디바이스 정보와 브라우저 종류를 확인하고, 보여지는 웹 페이지의 css나 기능 처리를 클라이언트에 맞춤해서 제공해 주기 위해서 사용합니다. 자바스크립트로 알아보는 방법은 간단합니다. let us = window.navigator.userAgent // 위의 방법을 쓰지 않아도 기본 브라우저의 너비를 가져와서 일정 값 이하이면 모바일로 판단할 수도 있습니다. this.isMobile = (window.innerWidth 2020. 12. 22.

[vue.js] 맨날 까먹는 props와 emit으로 컴포넌트 간에 값 전달하기

props 사용법 공식 문서 props는 상위 컴포넌트의 데이터를 하위컴포넌트로 전달할 때 사용합니다. props로 받을 때에는 camel 표기법을 사용해선 안됩니다. 대신, kebab 표기법(xx-xx)을 사용합니다. emit 사용법 emit을 사용할 때, 이벤트 이름이나 메소드 이름도 props와 마찬가지로 camel 표기법을 사용해선 안됩니다. 대신, kebab 표기법(xx-xx)을 사용합니다. 공식 문서에 따르면, 다음과 같이 나와있습니다. 컴포넌트 및 props와는 다르게 이벤트 이름은 자바스크립트 변수나 속성의 이름으로 사용되는 경우가 없으며, 따라서 camelCase나 PascalCase를 사용할 필요가 없습니다. 또한, (HTML의 대소문자 구분을 위해) DOM 템플릿의 v-on 이벤트리스.. 2020. 12. 20.

[Vue 실전편]props의 데이터 변화 감지를 위한 watch 사용법

상황은 다음과 같습니다. watch 속성을 사용하는데, props로 받아온 값의 변화를 감지하는 상황의 코드입니다. 부모 컴포넌트 변경 감지 자식 컴포넌트 Vuex store의 값의 변화를 감지하는 watch export default { watch : { } } 2020. 12. 19.

[CORS] 가장 먼저 직면하는 문제. 개념 알고 해결하기

CORS (CROSS-ORIGIN-RESOURCE-SHARE) 보안을 위해서 아무 클라이언트 가서버로 XRH 요청을 할 수 없게 하기 위한 것입니다. 클라이언트는 서버와 같은 도메인을 사용하거나 서버에서 설정한 도메인으로 요청을 하지 않으면 데이터를 받을 수 없습니다. 서버에서 요청을 거절하기 때문입니다. 서버에서 응답을 승인할 도메인을 지정하고 클라이언트 쪽에서 승인받을 수 있는 URL로 요청을 보내야지 데이터를 성공적으로 받을 수 있습니다. CORS 에러 문제 해결하기 1. express 서버에 CORS 허용 URL 설정하기 cors 노드 패키지를 설치합니다. npm i cors //app.js const exrpess = require('express'); const cors = require('c.. 2020. 12. 3.

401에러 해결 방법

다음과 같이 401 에러가 발생할 때가 있습니다. 저는 웹 애플리케이션에서 데이터를 요청할때 사용하는 api를 애플리케이션의 요청이 아닌 로컬에서 그냥 부라우저에 url로 요청을 해봤을 때, 401에러를 운명처럼 만나게 되었습니다. 401에러가 정확히 뭔지 알아보기 위해서 401에러를 검색해 봤습니다. 출처 : MDN 해결하는 방법은 요청 헤더에 Authentication을 키로하고, api에서 인증을 요구하는 value값을 함께 넣어서 요청을 보내보면, 상태코드 200의 응답을 정상적으로 받을 수 있습니다. 저는 url요청을 날릴 때, 브라우저로 하지 않고, postman으로 사용해서 간편하게 header에 키와 값을 넣어서 요청을 시도해 볼 수 있었습니다. 감사합니다.. 2020. 12. 3.

티스토리툴바