본문 바로가기
반응형

javascript91

[JavaScript] console API에 대해 얼마나 알고있을까? console 자바스크립트 환경에서 코드의 결괏값을 출력하거나 테스트를 하기 위해 아마 나를 포함하여 대부분의 사람들이 console.log() 를 주로 사용하고 있을 것이다. 뭐 사실 현업에서도 그렇고 console.log()만을 사용함에도 딱히 불편함을 느끼거나 하는 것은 없다. 단순하게 console.log()만으로 충분해서 그것만 사용하는 걸까? 아니면 그것밖에 모르기때문에 그것만 사용하는걸까? 개인적인 생각으로는 그것만 아는 사람보다는 "익숙하지 않아서" 사용하지 않은 경우가 더 많다고 생각된다. 콘솔 API의 모든 기능을 알 필요는 없다고 생각되며, 가볍게 이런 게 있구나 정도로만 알아두는 것도 나쁘지 않다 생각된다. log level 딱! 이 정도만 알아둬도 일하는데 지장 없을 정도의 로그.. 2024. 1. 9.
[ES6+] arr.with() - 특정 인덱스에 위치한 값 변경하기 배열의 특정 인덱스에 위치한 값을 바꾸는 Array.prototype.with() 메서드에 대해 알아보자. 이 함수는 ECMAScript 2023에 소개된 배열 메서드이다. 이 메서드의 역할은 제목과 본문 첫 줄에 적혀있는 것과 마찬가지로 지정된 인덱스에 위치한 값을 대체하고 새 배열을 반환하는 기능을 제공한다. 사실 무슨 기능인지는 알겠는데 어디서 활용할 수 있을지 감이 안 잡힌다. ▷ 구문 arr.with(index, value) index : 변경할 인덱스의 값을 의미하며, 음수로 사용 시 배열의 끝부터 역산한다. value : index에 위치한 값을 대체할 값을 의미한다. ▷ 예제 1) Array.prototype.with() 기본 사용법 const arr = [0, 1, 2, 3, 4, .. 2023. 7. 21.
[JavaScript] BF캐시 (Back Forward Cache) 사실 BF캐시 관련한 내용을 JavaScript 카테고리에 넣는 게 맞으려나 하고 망설여지지만 카테고리가 다양하지 못해 일단 여기에 넣어두고자 한다. BFCache BFCache란 뭘까? 이 녀석의 풀 네임은 Back Forward Cache이다. 즉, 이름 그대로 뒤로/앞으로 가기 버튼을 눌었을 때 화면을 바로 보여주기 위한 브라우저에서 발생하는 최적화 기능이다. 페이지를 이동할 때 페이지 전체의 스냅샷을 저장하는 캐시라고 생각하면 된다. BFCache는 무조건 발생하는 건가? 결론부터 말하자면 '무조건 발생하는 건 아니다'라고 말할 수 있다. 주요 브라우저인 크롬/사파리/파이어폭스 등 BFCache를 제공하지만 특히 크롬 같은 경우에는 BFCache에 최적화된 사이트만 캐싱하려고 노력하는 듯하다. 개.. 2023. 5. 30.
[ES6+] structuredClone() - 객체 "깊은" 복사를 도와주는 메서드 javascript 개발을 진행하게 되면 객체를 복사해서 사용하는 경우가 빈번하게 발생하는데, 방법에 따라 흔히들 알고 있는 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)가 존재한다. 이 게시글에서는 깊은 복사를 도와주는 메서드인 structuredClone()에 대해 알아보고자 한다. ▷ 구문 structuredClone(value) structuredClone(value, transferables) value: 복사할 대상인 원본 객체이다. 이는 구조화된 복제가 가능한 모든 유형을 포함한다. transferables: An array of transferable objects in value that will be moved rather than cloned to the retu.. 2022. 9. 26.
[ES6+] 옵셔널 체이닝(optional chaining) 옵셔널 체이닝(optional chaining) 연산자 (?.)을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. ▷ 구문 obj?.prop obj?.[expr] arr?.[index] func?.(args) 옵셔널 체이닝 연산자는 결국 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식으로 사용할 수 있다. 즉, '앞'의 평가 대상이 undefined 나 null이면 평가를 멈추고 undefined를 반환한다. 예제를 통해 알아보자. 옵셔널 체이닝이 등장하기 이전 let user = {}; // 주소 정보가 없는 사용자 // 1. 에러 발생 alert(user.address.street); // TypeError: Cannot read prop.. 2022. 9. 23.
[ES6+] nullish 병합 연산자 (??) nullish 병합 연산자는 왼쪽 연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. 개념은 대충 알겠고 예제를 통해 좀 더 자세히 알아보자. nullish 기본 사용법 let firstName = null; let lastName = undefined; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 console.log(firstName ?? lastName ?? nickName ?? "무명"); // 바이올렛 본문 시작할 때 설명한 것처럼 null이거나 undefined가 아닌 값이 나올 때 해당 값이 출력되는 구조이다. 우리가 흔히 사용하는 논리연산자는 OR을 의미.. 2022. 8. 31.
[ES6+] Promise 메서드 사용하기 (ft. all/allSettled/race) Promise 메서드에 대해 알아보기 전에 만약 Promise를 모른다면 아래 링크를 통해 대략적으로 이해하고 오자. [ES6+] Promise란? - 비동기 처리를 위한 객체 [ES6+] Promise란? - 비동기 처리를 위한 객체 ES6부터 정식으로 지원해주기 시작한 Promise 객체에 대해 알아보자. Promise란 말 그대로 '약속(프로미스)'을 의미하는데, 이는 최종 결과를 반환한다기보다는 미래의 어떤 시점에 결과를 제공하겠 mine-it-record.tistory.com Promise 자체에서 제공하는 메서드에 대해 알아볼 건데, 전체적으로 알아보면 내용이 길어지니 알아두면 좋을 메서드에 대해서만 알아보고자 한다. 1. Promise.all Promise.all은 매개변수로 주어진 배열의 .. 2022. 7. 26.
[ES6+] Array.from() - 유사 배열을 가지고 새로운 배열 만들기 Array.from() 메서드는 제목 그대로 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만들어주는 메서드이다. ▷ 구문 Array.from(arrayLike[, mapFn[, thisArg]]) arrayLike: 배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체. mapFn: 배열의 모든 요소에 대해 호출할 맵핑 함수 (배열의 map 메서드와 동일하다 생각하면 된다.) thisArg: mapFn 실행 시에 this로 사용할 값 유사 배열이란 length 속성과 인덱싱 된 요소를 가진 객체를 의미하며, 반복 가능한 객체는 Map, Set 등 객체의 요소를 얻을 수 있는 객체를 의미한다. (Set을 A.. 2022. 7. 26.
[JavaScript] Array.isArray() - 배열(Array)이 맞는지 판별/확인하기 Array.isArray() 메서드는 제목 그대로 배열인지 확인하기 위한 메서드이다. 배열인지를 확인할 때 instanceof나 typeof 대신에 Array.isArray()를 사용하는 것이 더 정확한 결과를 얻을 수 있다. ▷ 구문 Array.isArray(obj) obj: 검사할 객체 ▷ 예제 1) Array.isArray() true/false 판별 // 모두 true 반환 Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); Array.isArray(new Array('a', 'b', 'c', 'd')); Array.isArray(new Array(3)); // Array.prototype은 스스로도 배열입니다 Array.isAr.. 2022. 7. 13.
반응형
TOP