그럼에도 불구하고

자바스크립트 내에서 유효성 검사를 할 때 흔히 타입 검사를 하고는 합니다. 타입 검사에 대해 알아보겠습니다. HTML 삽입 미리보기할 수 없는 소스 위의 결과 값, 모두 납득이 가시나요? [ PREMITIVE vs REFERENCE ] PREMITIVE value의 경우 typeof로 잘 구분할 수 있지만 REFERENCE value의 경우는 typeof로 구분하기가 어렵습니다. 자바스크립트는 동적으로 변하는 언어이기 때문에 타입도 동적입니다. 이로 인해 동적인 타입까지 검사하기가 어려워서 주의를 해야 합니다. 따라서 REFERENCE value를 검사할 때는 typeof 보다는 instanceof를 사용하는 것이 객체를 확인하는 데 있어 더 용이합니다. 하지만 instanceof도 완벽하게 검사를 해내..

CleanCode를 작성하기 위한 과정 중 변수에 대해 알아보겠습니다. 목차 [ var를 지양하자 ] 📌 var : 함수 단위 스코프 📌 let & const : 블록 단위 스코프 let과 const의 경우 블록 단위 스코프와 + TDZ (Temperal Dead Zone)으로 안전한 코드 작성이 가능합니다. https://despiteallthat.tistory.com/46 [JavaScript] 변수 선언 / 변수 호이스팅 / 값의 할당 오늘은 변수 선언 / 변수 호이스팅 / 값의 할당에 대해 알아보자 [ 변수 선언 ] 변수 선언(variable declaration)이란 변수를 생성하는 것을 말한다. 좀 더 자세히 말하면 값을 저장하기 위한 메모리 공 despiteallthat.tistory.com..

오늘은 Puppeteer에 대해 알아보겠습니다. [ Puppeteer ] puppeteer은 구글에서 만든 노드 라이브러리로 Headless Chrome 또는 Chrominum을 제어할 수 있습니다. * headless 백그라운드에서 작동하는 브라우저입니다. 때문에 일반 사용자가 브라우저를 사용할 때처럼 화면에 창이 시각적으로 보이지 않습니다. 보이는 화면은 없지만, 실제로 띄워진 화면에서 화면 테스트를 하듯이 테스트를 할 수 있습니다. puppeteer에서는 옵션 설정을 통해 headless모드와 non-headless모드 둘 다 사용할 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 [ Puppeteer의 용도 ] 1. 화면을 스크린샷 하거나 PDF를 생성할 수 있습니다. 2. SPA(Singl..

오늘은 Jest에 대해 알아보겠습니다. [ Jest란? ] Jest는 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들로 부터 좋은 반응을 얻고 있는 테스팅 라이브러리입니다. 출시 초기에는 프런트앤드에서 주로 쓰였지만 최근에는 백앤드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있습니다. Jest는 라이브러리 하나만 설치하면, Test Runner와 Test Mathcher 그리고 Test Mock 프레임워크까지 제공해 주기 때문에 현재 대세라고 말할 수 있습니다. [ Jest 설치 ] // 설치 npm install jest --save-dev package.json HTML 삽입 미리보기할 수 없는 소스 test 커맨드 지정하기 package.json 파일을 열고 test ..

Google maps platform API 사용하여 내 위치 찾기, 위치 검색, 위치 공유 할 수 있는 페이지를 만들어보겠습니다. Google Maps Platform 문서 | Google Developers Google Maps Platform 문서 developers.google.com API Key 발급받기: https://developers.google.com/maps/gmp-get-started?hl=ko index.html HTML 삽입 미리보기할 수 없는 소스 구글 Maps API 스크립트 불러오기 원격에 있는 구글 서버로부터 Google Maps API의 코드를 내려받기 위함입니다. 에는 내가 발급받은 고유 API 키를 넣어주시면 됩니다. HTML 삽입 미리보기할 수 없는 소스 Share..

폴리필(Polyfill)이란 무엇인지 알아보겠습니다. [ 폴리필 Polyfill ] 브라우저에서 지원하지 않는 코드를 사용 가능한 코드 조각이나 플러그인으로 변환환 코드를 의미합니다. 즉, 최신 자바스크립트의 기능을 구식 자바스크립트 코드로 똑같이 구현한 코드를 말합니다. 아래는 pollyfill.io의 공식 레퍼런스입니다. 해당 사이트에선 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주고 있습니다. 아래 글은 해당 사이트에서 Pollyfill에 대해서 말해주고 있습니다. 📌 세계적으로 다양한 브라우저와 브라우저 버전을 사용하고 있으며, 각 브라우저에는 나머지 기능 집합이 약간씩 다릅니다. 이것은 브라우저용 개발을 어려운 작업으로 만들 수 있습니다. 인기 있는 브라우저의 최신 버전은 이전 브..

webpack-dev-server 서버를 사용하다 오류가 발생했습니다. package.json { "name": "eslint_webpack_study", "version": "1.0.0", "description": " ", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "build:dev": "webpack-dev-server" }, "author": "", "license": "ISC", "devDependencies": { "eslint": "^8.38.0", "eslint-config-google": "^0.14.0", "webpack": "^5.78..

오늘은 Cookie에 대해 알아보겠습니다. [ Cookie ] 쿠키는 브라우저에 저장되는 작은 크기의 문자열로 HTTP 프로토콜의 일부입니다. 쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장합니다. 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달합니다. 쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰입니다. 사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정합니다. 사용자가 동일 도메인에..

오늘은 scrollIntoView()에 대해 알아보겠습니다. 가끔 웹페이지를 보다 보면 화면 바깥으로 빠져나가있어 스크롤해야만 볼 수 있는 메뉴 탭이 있습니다. 살짝 화면을 빠져나간 메뉴를 클릭하면 메뉴 탭은 빠져나간 그 자리 그대로 있고, 내용만 바뀌게 됩니다. 하지만, 메뉴를 누르게 되면 자연스러운 애니메이션과 함께 스크롤되는 동작을 보이는 웹페이지도 있습니다. [ scrollIntoView() ] scrollIntoView() 메서드는 특정 요소가 화면에 보이도록 스크롤을 이동시키는 메서드입니다. 이 메서드는 요소의 상위 컨테이너를 스크롤하는 것이 아니라, 요소 자체를 스크롤합니다. 이 메서드를 호출하면 해당 요소가 현재 뷰포트에 보이도록 스크롤됩니다. scrollIntoView() 메서드는 인수를..

카메라 기능을 사용하는 웹 페이지를 만들어보자 ● 웹 카메라를 사용해 사이트 내 유저의 카메라 화면을 표시하고 싶을 때 웹 카메라로 영상과 사운드의 사용이 가능하며, 반응형 콘텐츠와 실시간 비디오챗 등에 이용한다. 웹 카메라는 getUserMedia()를 사용한다. video 요소 srcObject 속성에 웹 카메라 스트림을 지정하고, video 요소에는 autoplay 속성을 지정한다. autoplay 속성을 지정하지 않으면 브라우저에 따라 화면의 포기가 지연되는 경우가 있다. HTML HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미리보기할 수 없는 소스

오늘은 DOMContentLoaded과 load의 차이점에 대해 알아보겠습니다. [ HTML 생명주기 ] HTML 문서의 생명주기에는 다음과 같은 3가지 주요 이벤트가 관여합니다. DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않습니다. load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다. beforeunload/unload – 사용자가 페이지를 떠날 때 발생합니다. 세 이벤트는 다음과 같은 상황에서 활용할 수 있습니다. DOMContentLoaded – DOM이 준비된 것을 확인한 후 원하..

이미지 로딩을 지연시키는 코드를 작성해 보자 ● 이미지 로딩 중인 상태를 표시하고 싶을 때 사용 ● 이미지 로딩 후 이미지 데이터에 액세스 하고 싶을 때 사용 웹 페이지 내 이미지 로딩을 지연시키기 위해서는 DomContentLoaded 이벤트에서 img 요소 data-src 속성의 값을 Map에 보관한 뒤 요소의 속성 값을 비워야 합니다.. src가 아닌 data-src를 사용하는 이유는 src 속성에 공백 값이 들어가면 네트워크 통신이 발생하기 때문입니다. 로딩하고 싶은 시점에 Map에 보관한 값을 src 속성에 넣어 작업을 처리합니다. 해당 작업을 사용하여 버튼 클릭 시 이미지를 로딩하는 샘플을 확인해 보겠습니다. HTML HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미..