본문 바로가기

자바스크립트54

vscode prettier 설정하기

prettier는 여러 사람이 함께 코드를 작성할 때, 코드의 띄어쓰기, 개행 또 뭐,... 컨벤션이나 format을 자동으로 맞추기 위해서 사용하는 에디터 확장 플러그인입니다. 이번에는 ESLint와 Prettier를 함께 사용하기 위한 설정도 포함되어 있으니 쭉 따라가시면, ESLint+Prettier설정을 모두 마치실 수 있을 겁니다. 일단, VSCode에 eslint에 대한 아무런 설치나 설정이 안되어 있다면, 다음 링크를 참고하시고, 글을 읽으시길 바랍니다. ESLint 설정하기 VSCode에서 prettier plugin을 설치해야 합니다. 설치가 끝난 후에는 약간의 설정을 해주어야 합니다. 이제, ESLint와 함께 사용하기 위해서 vue-cli로 생성한 프로젝트 폴더에서 .eslintrc... 2021. 1. 23.

[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.

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

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

티스토리툴바