웹/JavaScript

Bunjs가 v1.1을 출시 했습니다. 공식블로그 공식홈페이지 🟦Bun 이란? bun는 node, deno 같은 javascript 런타임 및 패키지 관리자 입니다. node, deno와 달리 bun은 빠릅니다. v8엔진을 사용하는 node, deno와 달리 Zig로 작성되고 JavaScriptCore로 구동되어 속도가 굉장히 빠릅니다. 🟦 Bun의 특징 node가 있는데 bun을 쓸 이유가 있을까요? 좀더 빠른 것을 원하면 bun을 선택하는 것이 좋습니다. 걱정되는 것은 node에서 사용되었던 것들이 호환이 안될 수 있다는 것 입니다. 걱정 안하셔도 됩니다. bun 개발자들이 가장 중요하게 생각하는 것이 node와 호환성입니다. Bun을 썼을 때 더 편리한 방법중 몇가지 알려드리겠습니다. npx — 5..

🟩 왜 flatMap에 관심을 가지셨나요? 프로젝트나 코딩하다가 쓸일이 있어서 알게된건 아닙니다. next에 유용한 12가지 라이브러리들 이라는 글을 읽고 있었는데 lodash 라는 라이브러리를 소개해주었습니다. 소개 문구에서 flatMap이라는 것을 지원해주기 전에 이 라이브러리를 써서 유용하게 썻다 라고 이해했습니다. "어? flatMap이 뭐지? 하다가 찾아본 것입니다." ✅ js의 flatMap에 대해서 ✨ map은 알고있다고 가정하겠습니다 Array.prototype.flatMap() - JavaScript | MDN (mozilla.org) map와 flatMap은 차이가 있습니다. map을 이미 알고있다면 한번에 이해가 갈 예시가 있는데요. const arr1 = ["it's Sunny in..

🟩 고차 함수(Higher-Order Function) 고차 함수는 함수를 인자로 받거나 또는 함수를 반환함으로써 작동 하는 함수를 말합니다. 간단히 말하자면, 고차 함수는 함수를 인자로 받거나 함수를 출력(output)으로 반환하는(return) 함수를 말합니다. 일단 함수형 프로그래밍에 대해서도 알아봅니다. 🟩 함수형 프로그래밍이란 무엇일까요? 함수형 프로그래밍은 함수를 다른 함수의 파라미터로 넘길 수도 있고 반환(return) 값으로 함수를 받을 수도 있는 프로그래밍 형태를 말합니다. js를 다루게 되면 다른 함수에 콜백으로 들어가는 거나, return 받을 때 변수에 그대로 넣을 수 있는거를 자연스럽게 지나갔던거 같습니다. 이게 가능할 수 있게되는 이유가 고차 함수라는 계념인 것을 최근에 알았습니..

🟦 curried funciton는 어떻게 쓸까? ItemDataFind: (state) => (id) => { return state.ItemList.rows.find(row => { if (row.id === id) { return 1 } }) } 다른사람의 코드를 보다가 이게 어떻게 동작하는거지?? 하는 궁금한 마음과 이건 뭐라 부르지 하는 마음에 chatGpt에게 물어보니 이건 curried function이라고 알려주었습니다. 그래서 스택오버플로우를 검색해보았습니다. 스택오버플로우에서 가져왔습니다. curreid의 정의 수학과 컴퓨터 과학에서 커링이란 다중 인수을 갖는 함수를 단일 인수를 갖는 함수들의 함수열로 바꾸는 것을 말한다. 예를 들어, 세 개의 인수를 가지는 함수f를 커링하면 다음과 같..

Math.max에서 Nan가 뜨는 이유 If at least one of arguments cannot be converted to a number, the result is NaN. 배열에 하나라도 진짜 숫자형(number) 가 아니면 Nan이 뜨게 됩니다. 아래와 같은 경우에 혼란스럽습니다 Math.max([1,2,3])분명 배열을 주고 max를 돌렸으니 최대 값을 찾아주는거 아닌가? java에서는 바로 찾아줬는데? 하지만 js에서는[1,2,3]을 "1,2,3"으로 convert합니다. "1,2,3"중에 최대값을 찾으라 하니 NaN이 뜨게됩니다. Math.max([23]) // return 23이건 재대로 작동합니다. 왜냐하면 [23] -> "23" -> 23 숫자로 재대로 변형하기 때문입니다. 우리..

🟥 JSON.Parse()와 JSON.stringify()는 언제, 왜 쓸까요? const jsonStr = '{"Age": "30"}'; 이렇게 되어있는 문자열을 Json형태로 바꿔서 객체로 활용할고 싶을때! 더보기 const obj = JSON.parse(jsonStr); console.log(obj); parse로 객체로 만들 수 있습니다. 반대로 Json 형태로 되어있는 객체(Object형태)를 문자열로 보내고 싶을 때! 더보기 const obj = {Age: 30, Name: "Kang"}; const jsonStr = JSON.stringify(obj); console.log(jsonStr); //{"Age":30,"Name":"Kang"} 문자열로 바꿀 수 있습니다. 💠JSON 객체의 par..

포인터의 개념을 다시 되새기기 위해서 js에서 얕은 복사와 깊은 복사를 알아보겠습니다. 원시 타입에는 Number, BigInt, String, Boolean, Null, Undefined, Symbol 7개의 타입이 있습니다. 그 외 모든 데이터는 객체 타입입니다. ❗️얕은 복사(shallow copy)란? const obj1 = { a: 1, b: 2}; const obj2 = obj1; console.log( obj1 === obj2 ); // true 위의 예시처럼 객체를 직접 대입하는 경우 참조에 의한 할당이 이루어지므로 둘은 같은 데이터(주소)를 가지고 있습니다. 이것이 얕은 복사 const obj1 = { a:1, b:2 }; const obj2 = obj1; obj2.a = 100; con..

js에서 '==' 과 '==='의 차이는? ==는 Equal Operator이고, ===는 Strict Equal Operator입니다. ==는 a == b 라고 할때, a와 b의 값이 같은지를 비교해서, 같으면 true, 다르면 false라고 합니다.(값만 같으면 true입니다.) ===는 Strict, 즉 엄격한 Equal Operator로써, "엄격하게" 같음을 비교할 때 사용하는 연산자입니다. ===는 a === b 라고 할때, 값과 값의 종류(Data Type)가 모두 같은지를 비교해서, 같으면 true, 다르면 false라고 합니다. 기본자료형(Primitive) 값은 똑같이 1이지만 값의 종류가 숫자냐, 문자열이냐에 따라 === 연산자를 사용할 때 결과가 false라고 나옵니다. var a ..