그럼에도 불구하고

 크고 작은 프로젝트를 진행하다 보면, 우리는 백엔드 또는 서드파티 API에 네트워크 요청(HTTP Requests)이 필요한 애플리케이션을 개발할 때 Fetch 혹은 Axios와 같은 HTTP 클라이언트를 사용합니다. 이 글에서는 Fetch와 Axios에 대한 간단한 설명과 차이점에 대해 알아보겠습니다. 🧑🏻‍💻 Fetch Fetch API는 네트워크 요청을 위해 fetch()라는 메서드를 제공하는 인터페이스입니다. 모던 브라우저 자체에 내장되어 있어 따로 설치할 필요가 없으며, promise 기반의 HTTP 클라이언트로 resolve 혹은 reject 할 수 있는 promise가 반환됩니다. 📌 문법 Fetch는 두 개의 인자를 받습니다. 첫 번째 인자는 내가 필요로 하는 리소스의 URL이며, 두 ..

IntersectionObserver API에 대해 알아보겠습니다. 🧑🏻‍💻 IntersectionObserver API IntersectionObserver는 웹 API 중 하나로, 요소의 가시성 여부를 비동기적으로 감지하는 기능을 제공합니다. 이를 통해 무한 스크롤, 화면 리사이징, 이미지 로딩 지연, 트래킹 및 애니메이션 효과 등에서 유용하게 활용됩니다 Intersection Observer의 주요 개념과 사용법을 설명해 드리겠습니다. 📌 사용법 1. InterSection Observer 생성 const observer = new IntersectionObserver(callback, options); Intersection Observer를 생성하려면 콜백 함수(callback)와 옵션(opti..

오늘은 NodeList에 대해 알아보겠습니다. 목차 [ NodeList ] NodeList 객체는 일반적으로 element.childNodes와 같은 속성(property)과 document.querySelectorAll와 같은 메서드에 의해 반환되는 노드의 컬렉션입니다. ※ 참고: NodeList가 Array는 아니지만, forEach()를 사용하여 반복할 수 있습니다. 또한 Array.from()을 사용하여 Array로 변환할 수도 있습니다. 그러나 일부 오래된 브라우저는 아직 NodeList.forEach() 또는 Array.from()를 사용할 수 없는데 이럴 때는 Array.prototype.forEach()를 사용하면 됩니다. 경우에 따라 NodeList는 라이브 컬렉션으로, DOM의 변경 사..

오늘은 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 ..

폴리필(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() 메서드는 인수를..

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

자바스크립트 엔진은 도달 가능한 (그리고 추후 사용될 가능성이 있는) 값을 메모리에 유지합니다. 예시: HTML 삽입 미리보기할 수 없는 소스 자료구조를 구성하는 요소도 자신이 속한 자료구조가 메모리에 남아있는 동안 대개 도달 가능한 값으로 취급되어 메모리에서 삭제되지 않습니다. 객체의 프로퍼티나 배열의 요소, 맵이나 셋을 구성하는 요소들이 이에 해당합니다. 만약 어떤 배열에 객체 하나를 추가한다면, 이때 배열이 메모리에 남아있는 한, 배열의 요소인 이 객체도 메모리에 남아있게 됩니다. 이 객체를 참조하는 것이 아무것도 없어도 남게 됩니다. 예시: HTML 삽입 미리보기할 수 없는 소스 맵에서 객체를 키로 사용한 경우 역시, 맵이 메모리에 있는 한 객체도 메모리에 남습니다. 즉, 가비지 컬렉터의 대상이 ..

ES5에서는 배열 내의 검색을 위해서 indexOf()라는 배열 메서드를 사용했습니다. ES6에서는 좀 더 강력한 배열 검색을 지원하기 위해서 find(), findIndex() 두가지의 새로운 메서드를 지원합니다. 기존에 indexOf가 배열 내의 특정 값을 찾는데에 사용되었다면, find, findIndex는 callback 함수를 통해서 좀 더 복잡한 조건의 검색이 가능합니다. [ Array.prototype.find() ] find() 메소드는 주어진 테스트 함수의 조건을 만족하는 첫 번째 요소 값을 반환합니다. 조건에 맞는 요소를 찾을 수 없다면 undefined를 반환합니다. find()는 호출되는 배열을 변경하지 않습니다. HTML 삽입 미리보기할 수 없는 소스 Parameter Descri..