그럼에도 불구하고

 크고 작은 프로젝트를 진행하다 보면, 우리는 백엔드 또는 서드파티 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의 변경 사..

목차 [ 유효성 검사 ] 💡 사용자의 입력 값이 유효한지 검증하는 것 💡 유효성 검사는 할 수 있는 모든 곳에서 다 처리하는 게 좋다. 사용자의 입력 => 클라이언트 (HTML, JavaScript) => 백엔드에서 처리 사용자와 상호작용 => 사용자의 입력을 받거나 그것을 통해서 무언가 하게 된다. 📌 이메일인 경우 - 사용자의 입력이 이메일 포맷에 맞는지 검증한다. - 이메일 포맷이 맞는 경우 **그때서야 서버와 통신을 한다.** ※ 어떻게 할까? - 정규식 - JavaScript 문법 (문자열 검사) - 웹 표준 API (Browser API) [ try - catch ] try-catch를 사용할 때 가장 많이 실수하는 경우 중 하나가 예상하지 못한 에러가 발생할 수 있는 부분을 try {} 안에..

목차 [ Magic Number ] 숫자를 직접 기입하는 것보다는 변경 후와 같이 상수를 만들어서 쓰는 것이 유지보수하는데 훨씬 용이합니다. HTML 삽입 미리보기할 수 없는 소스 // 변경 전 const PRICE = { MIN: 1000000, // 1백만원 MAX: 100000000, // 1억원 }; // 변경 후 const PRICE = { MIN: 1_000_000, // 1백만원 MAX: 100_000_000, // 1억원 }; 변경 전의 수치를 보면 0의 개수가 많아질수록 실수할 확률이 높아집니다. 이럴 때는 _를 이용하면 숫자를 보기 편하게 입력하여 사용할 수 있습니다. [ 네이밍 컨벤션 ] 💡 저장소, 폴더, 파일, 함수, 변수, 상수, 깃 브랜치, 커밋 등 * 프로그래밍 전반적으로 이..

목차 [ 함수, 메서드, 생성자 ] HTML 삽입 미리보기할 수 없는 소스 [ argument & parameter ] 매개변수: 함수 정의에 나열된 이름을 말한다. 인수: 함수에 전달된 실제 값을 의미한다. 매개변수는 제공된 인수 값으로 초기화된다. HTML 삽입 미리보기할 수 없는 소스 [ 복잡한 인자 관리하기 ] 매개변수의 개수는 몇 개가 적당한가? 보통 2개까지를 적절하다고 보지만, 명시적으로 그 쓰임의 용도가 명확하다면 그 이상도 상관없습니다. 맥락과 흐름을 파악할 수 있다면, 많다고 무조건 나쁜 건 아닙니다. HTML 삽입 미리보기할 수 없는 소스 [ Default Value ] HTML 삽입 미리보기할 수 없는 소스 [ Rest Parameters ] HTML 삽입 미리보기할 수 없는 소스 ..

오늘은 객체를 다루는 여러 가지 방법에 대해 알아보겠습니다. 목차 [ Shortan Properties Name ] 객체를 사용하여 key : value를 지정할 때 변경 전과 같이 지정하는 경우를 종종 볼 수 있는데요. ( 저만 그런가요..? ㅎㅎ ) 변경 후와 같이 더 깔끔하게 지정해 줄 수 있습니다. 그리고 ES2015 이후부터는 key와 value의 이름이 같다면 한 번만 써도 된다는 거 잊지 말아 주세요!! 📌 예시 HTML 삽입 미리보기할 수 없는 소스 [ Computed Property Name ] HTML 삽입 미리보기할 수 없는 소스 react에서 자주 사용하는 구문의 예시를 가져와봤습니다. handleChange 메서드의 setState안에 지정하는 객체의 값을 보면 key를 [e.ta..

오늘은 배열에 대한 여러 가지 특징에 대해 알아보겠습니다. 목차 [ JavaScript의 배열은 객체다. ] JavaScript의 배열은 객체와 마찬가지입니다. 그렇기 때문에 내가 확인하고 싶은 값이 정말 배열인지 확인하고 싶을 때는 Array.isArray() 메서드를 사용하는 게 좋습니다. 위와 같이 array를 arr.length와 같이 비교해서 그 값이 배열인지 확인하는 경우가 종종 있는데 배열뿐 만 아니라 문자열의 경우도 length로 비교할 수 있으니 오류를 유발할 수 있습니다. 그렇기에 2번과 3번의 방법으로 비교하는 방법도 있는데 2번보다는 3번이 가장 확실한 비교 방법입니다. [ Array.length는 배열의 길이를 보장하지 못한다. ] 배열은 내가 원하는 index에 값을 자유롭게 넣..

오늘은 분기 다루는 법에 대해 알아보겠습니다. 목차 [ 값식문 ] 1. () : 함수와 관련되어 있습니다. 주로 함수를 호출할 때 사용합니다. 2. {}: 중괄호 내부에는 값과 식만 넣어야 합니다. 3. 값과 식을 이용하면 if문을 대체할 수 있습니다. 4. 함수의 인자 안에는 값과 식만 넣을 수 있습니다. 다음 예시를 보겠습니다. 📌 예시 1 HTML 삽입 미리보기할 수 없는 소스 변경 전의 코드를 보면 중괄호 안에서 for문을 이용해 rows라는 객체에 값을 초기화시키고 있습니다. 이는 변경 후의 코드와 같이 map 함수를 이용하면 리팩토링 할 수 있습니다. 📌 예시 2 HTML 삽입 미리보기할 수 없는 소스 변경 전의 코드에서는 조건문을 이용하여 conditionOne, conditionTwo의 여..

오늘은 경계를 다루는 법에 대해 알아보겠습니다! 목차 [ 경계 다루기 ] 1. 명확하게 최소와 최댓값을 다룬다. 2. 최솟값과 최댓값 포함 여부를 확실하게 결정한다. (이상-초과 / 이하-미만) 3. 혹은 네이밍에 최솟값과 최댓값 포함 여부를 표현한다. 4. 누가봐도 명시적인 코드를 작성하자  아래의 예시를 보겠습니다. HTML 삽입 미리보기할 수 없는 소스 이 코드의 경우 매개변수로 최솟값과 최댓값을 넣어주면 그 사이에서 무작위로 숫자를 선정해 주는 함수입니다. min 값과 max 값을 직접적으로 숫자를 기입해서 적는 방식은 여러 가지 단점이 있습니다. 첫 번째로 만약 min과 max가 바뀐다면, 직접 숫자를 바꿔야 합니다. 두 번째로 이 함수를 여러 곳에서 사용한다면 사용하는 곳마다 찾아가서 min..

오늘은 isNaN (is Not A Number)에 대해 알아보겠습니다. 목차 ???????????? NaN은 Not A Number를 뜻합니다. 직독직해하면 "숫자가 아니다."를 뜻하는데요 실제로 이런 결과가 나와요 🤣 NaN은 Not A Number이고 isNaN은 is Not A Number입니다. NaN은 숫자가 아닌데, 타입은 숫자이지만 숫자가 아닌...? isNaN에 대해 같이 알아보겠습니다. [ isNaN ] isNaN() 함수는 어떤 값이 Not A Number인지 판별해줍니다. 자바스크립트의 다른 값들과 달리, NaN은 동등 연산자 (==, ===)을 통해 판별할 수 없기 때문에, NaN을 판별할 수 있는 무언가가 필요했고 이로 인해 탄생한 것이 isNaN이라고 합니다. 위에서 말했듯이 ..

오늘은 undefined와 null의 차이에 대해 알아보겠습니다. 목차 [ Undefined & Null ] 위의 사진은 JavaScript의 헷갈리는 타입들에 대해 나타내는 대표적인 사진입니다. Undefined와 Null 잘 구분하고 계신가요? 위의 console.log의 값, 전부 납득이 가시나요? null과 undefined를 보이는 그대로 해석하면 '빈 값'과 '없는 값'을 의미하는 것처럼 보이지만 사실 큰 차이가 있습니다. 간단하게 말하자면 저는 다음과 같이 정의 내리고 있습니다. undefined: 무언가 만들어 놓고 정의하지 않음 null: 없다는 것을 명시적으로 표현함 [ undefined와 null의 공통점 ] 둘 다 각각의 타입명(undefined, null)의 값이 유일하다. => ..