그럼에도 불구하고

목차 [ 유효성 검사 ] 💡 사용자의 입력 값이 유효한지 검증하는 것 💡 유효성 검사는 할 수 있는 모든 곳에서 다 처리하는 게 좋다. 사용자의 입력 => 클라이언트 (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)의 값이 유일하다. => ..

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