자바스크립트에서 객체의 값을 사용할 때 객체가 존재하는지 확인하는 경우가 있다. const data = axios.get(~); const list = data && data.list; async await을 사용하는 방법도 분명 존재하지만 React Query를 사용하는 경우 isSuccess 가 되기 전까지 data는 null이 된다. React Query를 갑자기 꺼냈는데, 간단하게 async await을 사용하지 않는 경우를 말한 것이다. &&를 쓰는 행위 자체가 문제가 되지 않지만 이것을 더 간단하게 처리해줄 수 있다. ? 옵셔널 체이닝 옵셔널 체이닝은 중첩된 객체의 속성이 존재하는가에 대한 조건을 간단하게 처리할 수 있다. const data = axios.get(~); const list =..

Array에서는 at이라는 메서드를 사용할 수 있다. 정수값을 받아 해당 인덱스에 있는 항목을 반환하며, 양수와 음수를 사용할 수 있다. 우리가 일반적으로 배열의 특정 인덱스 값을 조회하기 위해서는 index를 사용한다. const array = ["first", "second", "third"]; const first = array[0]; 순차적으로 조회를 하는 경우 등에는 전혀 문제가 없다. 하지만 마지막 요소를 조회하는 경우 우리는 어떤 방식을 사용할까? const array = ["first", "second", "third"]; const last = array[array.length - 1]; array.length를 구한 다음 -1을 통해서 마지막 값을 가져온다. 해당 방법이 문제는 아니지만..

sort 로 문자열을 정렬하는 작업을 쉽게해주는 것을 알아냈다. 일반적으로 sort로 문자열을 정렬할 때는 function solution(strings, n) { return strings.sort((a, b) => { if(a[n] b[n]) { return 1; } else if (a < b) { return -1; } else { return 1 } }); } 이런식으로 계산했다. 숫자의 경우 a - b 같은 방식으로 정렬을 쉽게하였는데, 문자열에선 이런 방법이 불가능하다. 이것을 쉽게해주는 것이 localeCompare이다. string.localeCompare(compareString) 사용 방법이 아주 간단한데, string..

html에서 는 공백을 나타낸다. 하지만 자바스크립트에서 똑같이 를 넣으면 문자열로 출력된다. 알아보니 자바스크립트에서 공백을 넣어야하는 경우에는 유니코드 문자열을 사용해야 한다고 한다. 유니코드에서 공백은 \u00A0 이다. React에서도 변수에 \u00A0을 넣고 컴포넌트에서 출력하면 공백으로 나오니 자바스크립트에서 공백이 필요한 경우 유니코드를 사용하자!

JavaScript로 개발하다보면 Date 함수에서 사소한 불편함을 느끼는 경우가 있다. 바로 시간이다. new Date를 사용해서 현재 시간을 가져와서 확인한다면 바로 알 수 있다. // 현재 시간 : 2023-04-13 09:00:00 const curr = new Date(); console.log(curr); // 2023-04-13 00:00:00 Date의 기준이 영국시간으로 9시간 전이기 때문이다. 크게 보면 문제가 없을 수 있다. 모든 시간을 Date를 기준으로 사용한다면? 하지만 어떤 경우에는 9시간 차이로 인해서 13일이라면 12일로 나오는 경우도 있다. 프론트엔드에서 이런 차이가 얼마나 크겠냐 싶지만 크리티컬한 문제를 발생시킬 수 있는 부분이기도 하다. 그럼 이것을 한국 시간으로 어떻..

JavaScript로 개발하다보면 값의 결정을 내려야 하는 경우가 있다. const getValue = () => { return value ? value : "" } 다음과 같이 value의 값이 있을 때 value 없을 때 다른 값을 넘기는 경우이다. 이때 예시와 같이 삼항 연산자를 사용할 수 있다. 하지만 다른 방법으로는 제목처럼 || 또는 ?? 를 사용할 수 있다. 지금까지는 그냥 손이 가는데로 사용했지만 이 둘의 차이가 뭘까? || 연산자 먼저 || 연산자는 논리 OR 연산자이다. 왼쪽의 피연산자가 truthy인 경우 왼쪽 피연산자를 반환하고 아니라면 오른쪽 피연산자를 반환한다. truthy라는 것은 뭘까? 이것은 조건식에서 true로 간주되는 모든 값을 의미한다. 대표적인 truthy 값으론 ..

자바스크립트로 개발을 하다보면 Promise 함수, 비동기 작업을 해야하는 경우가 많다. 이때 습관적으로 Async/Await을 많이 사용한다. 하지만 비동기 작업을 하기 위해서는 then이라는 친구도 있고 이 둘의 차이를 머리로는 알고 있지만 따로 정리해본 적은 없어서 이번에 정리해보려고 한다. then console.log("1"); const promise = new Promise(function (resolve, reject) { setTimeout(() => { resolve("success"); }, 1000); }); console.log("2"); promise.then(function (value) { console.log(value); }); console.log("3"); then을 ..

알고리즘 문제를 풀다가 Array의 every와 some에 대해서 알게 되었다. every 배열의 모든 요소가 특정 조건을 충족하는지 확인한다. const array = [10, 20, 30, 40, 50]; const result1 = array.every(num => num num >= 10); console.log(result2) // true 인자로 특정 조건을 확인하는 callback 함수를 전달한다. 이때 배열의 모든 요소가 해당 조건을 충족한다면 true / 아니라면 false가 리턴된다. some 배열의 1개의 요소라도 특정 조건을 충족하는지 확인한다. const..