그럼에도 불구하고

오늘은 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 {} 안에..

목차 [ 함수, 메서드, 생성자 ] 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에 값을 자유롭게 넣..

오늘은 firebase를 이용하여 react와 연동된 애플리케이션을 만들어 보겠습니다. [ 브라우저와 데이터베이스는 직접 소통하면 안 됩니다. ] 브라우저에서 실행되는 자바스크립트 코드가 데이터베이스와 직접 통신하면 안 됩니다. 리액트 앱이 있고, 어떤 종류의 데이터베이스가 있다면 이런 데이터베이스를 데이터베이스 서버에서 실행하는 것은 문제가 되지는 않습니다. 하지만, 매우 불안정하거나 잘못 작성된 애플리케이션이 아니고서야 앱으로 직접 데이터를 가져오거나 저장하고, 연결을 맺는 행위는 외부 환경에서는 절대 해서는 안 되는 일 중 하나입니다. 기술적으로는 어려울 수 있겠지만, 클라이언트 내부에서 데이터베이스에 직접 연결을 하거나, 브라우저의 자바스크립트 코드를 통해 직접 연결을 한다면 이는 이 코드를 통해..

오늘은 SWAPI를 이용한 애플리케이션을 만들어보겠습니다. [ SWAPI ] SWAPI에는 각종 실습을 할 수 있는 더미데이터가 존재합니다. https://swapi.dev/ SWAPI - The Star Wars API What is this? The Star Wars API, or "swapi" (Swah-pee) is the world's first quantified and programmatically-accessible data source for all the data from the Star Wars canon universe! We've taken all the rich contextual stuff from the universe and formatted swapi.dev 📌 App.j..

redux를 사용하다 보면 스토어를 만들기 위해 createStore를 사용합니다. 하지만 직접 사용해 보면 아래와 같이 밑줄이 그어집니다. 왜 그럴까요? 취소선이 그어진 곳에 마우스를 갖다대면 @reduxjs/toolkit에서 제공하는 configureStore를 쓰라고 합니다. 결과적으로 deprecated로 나오지만, 기능에 문제없이 잘 동작합니다. 하지만 RTX(Redux Tookit)을 쓰는 것을 권장하고 있습니다. redux github에 따르면 https://github.com/reduxjs/redux GitHub - reduxjs/redux: Predictable state container for JavaScript apps Predictable state container for Jav..

오늘은 경계를 다루는 법에 대해 알아보겠습니다! 목차 [ 경계 다루기 ] 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이라고 합니다. 위에서 말했듯이 ..

자바스크립트 내에서 유효성 검사를 할 때 흔히 타입 검사를 하고는 합니다. 타입 검사에 대해 알아보겠습니다. 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..