JavaScript
-
[JavaScript] globalThisJavaScript 2023. 12. 14. 17:42
globalThis는 ES11 (ES2020)에 추가된 기능으로 자바스크립트 환경에서 전역 객체를 가리킨다. 이전 브라우저 환경에서는 window, Node.js 환경에서는 global을 사용해야 하는 등 각각의 환경에 따라 전역 객체에 접근하는 방법이 다르기 때문에 통일성이 없었다. globalThis는 이러한 차이를 해결하고 어디에서나 동일한 방법으로 전역 객체에 접근할 수 있도록 만들어졌다. console.log(globalThis === window) // 브라우저: true console.log(globalThis === global) // Node.js: true globalThis를 사용하면 특정 환경에 의존하지 않는 코드를 작성할 수 있다. + import { PrismaClient } f..
-
[JavaScript] ??=JavaScript 2023. 12. 1. 18:53
x ??= 2 ??= 코드를 처음 보았다. 추측을 하면 '아마 x가 null이나 undefined (널 병합 연산자) 면 x에 2로 할당한다는 의미이지 않을까?'는 생각이 들었고 찾아보니 내 예상이 맞았다. Nullish coalescing assignment (??=) - JavaScript | MDN The nullish coalescing assignment (??=) operator, also known as the logical nullish assignment operator, only evaluates the right operand and assigns to the left if the left operand is nullish (null or undefined). developer.moz..
-
[JavaScript] 이벤트 전파 중단하기JavaScript 2023. 11. 23. 15:28
이벤트 전파에 대한 예시를 생각하다 트위터 서비스의 예시가 이해하기 적절하다고 생각했다. posts 페이지에서 여러 트윗 목록을 볼 수 있다고 가정하자. 하나의 트윗에 답글 기능, 리트윗 기능, 마음 기능, 북마크 기능 등 여러 버튼이 하단에 배치해 있고 각각의 클릭 이벤트에 대한 콜백 함수가 등록되어 있을 것이다. 그리고 그 외의 공간을 클릭하면 해당 트윗에 대한 post 페이지로 이동하는 콜백함수가 등록되어 있다. 코드로 작성한다면 다음과 같이 될 것이다. router.push(`/post/${postId}`)}> // ... 상위 요소에 클릭 시 post 페이지로 이동하는 콜백 함수가 등록되어 있고, 하위 버튼 요소에 각각의 클릭 이벤트에 대한 콜백함수가 등록되어 있는 구조이다. 우리는 각 버튼을 ..
-
[PWA] Next.js 프로젝트에 PWA 적용하기JavaScript 2023. 10. 25. 19:11
PWA(Progressive Web App)이란 모바일 및 웹 애플리케이션 개발의 접근 방식 중 하나로, 네이티브 모바일 앱과 유사한 경험을 제공하는 기술이다. PWA를 적용하면 브라우저나 모바일 홈에서 웹 앱을 설치하여 사용할 수 있고 푸시 알림, 오프라인 등의 기능도 하여 풍부한 사용자 경험을 제공할 수 있다. Next.js 프로젝트에 PWA를 적용을 해보았다. Next.js를 위한 PWA 플러그인인 next-pwa가 있어 사용하기로 하였다. npm install next-pwa yarn add next-pwa 1. withPWA next.config.js 파일에 다음과 같이 적용한다. // next.config.js const withPWA = require("next-pwa")({ dest: "p..
-
[JavaScript] XState 기초 이해하기JavaScript 2023. 10. 20. 18:43
Stately Studio + XState docs | Stately Stately Studio and XState docs stately.ai 1. 상태 관리 라이브러리 XState는 상태 관리 라이브러리 중 하나이다. 유한 상태 기계(Finite State Machine, FSM) 기반으로 상태 기계 개념에 기초하여 만들어졌다. 2. 상태 기계(State Machines)란 상태 기계는 애플리케이션 로직을 구성한다. 만약 개 상태 기계를 만들었다고 하다면, 개 상태 기계의 상태를 asleep, awake으로 구성할 수 있다. 즉, 개는 자고 있거나 깨어있다라는 두 가지 상태를 가진다. 이는 개는 잠을 자는 동시에 깨어 있을 수 없으며, 개가 잠을 안 자고 깨어 있는 것도 불가능하다. 이처럼 상태 기계..
-
[JavaScript] 다중 조건 정렬JavaScript 2023. 10. 12. 21:16
const array = [[3,5,4], [1,4,3], [1,2,5]] array 배열을 정렬할 때, 배열의 첫번째 값을 기준으로 오름차순 정렬을 하면 다음과 같이 할 수 있다. array.sort((a,b) => a[0]-b[0]) console.log(array) //[[1,4,3], [1,2,5], [3,5,4]] 첫번째 값이 동일할 시 두번째 값을 기준으로 정렬하고 싶을 때가 있다. 그럴 땐 간단하게 다음과 같이 할 수 있다. array.sort((a,b) => a[0]-b[0] || a[1]-b[1]) console.log(array) //[[1,2,5], [1,4,3], [3,5,4]] 앞의 연산이 0일 경우 두 값이 동일하다고 판단되어 다음 조건으로 판단된다. array.sort((a,b..
-
[JavaScript] 커링이란?JavaScript 2023. 9. 20. 00:12
커링이란? 커링이라는 단어를 처음보고 찾아보게 되었다. 만약에 function(a,b)와 같이 두 개의 매개 변수를 받는다고 가정하자. 이 함수는 매개 변수를 한 번에 받아 한 번만 호출하도록 구현됐음을 알 수 있다. 하지만 커링은 function(a)(b)처럼 인수를 하나씩 받는 방법을 의미한다. function hello(name){ return function(age){ return function(job){ return `이름: ${name}, 나이: ${age}, 직업: ${job}` } } } hello('아이유')(30)('가수') // 이름: 아이유, 나이: 30, 직업: 가수 다음과 같이 사용할 수 있다. 커링된 함수는 첫 번째 인수를 받아서 그에 따른 함수를 반환하고, 그 반환된 함수에..
-
[JavaScript] Array.fill() 사용 시 주의할 점JavaScript 2023. 8. 13. 00:44
[ [0,0,0,0], [0,0,0,0], [0,0,0,0], [0,0,0,0] ] 위와 같은 다차원 배열을 만들어야 할 때가 있었다. const board = Array.from({length: 4}).fill(Array.from({length: 4}).fill(0)) 배열을 만드는 방법은 여러가지가 있었지만 나는 위와 같이 작성했었다. 원래 Array.from()의 두번째 인자에 매핑함수를 작성했어야 했는데 작성 시에 실수로 뒤에 fill() 메서드를 붙여 작성했던 것 같다 아무튼 배열 board는 위와 같은 배열과 똑같이 만들어졌다. 이때 어느 한 요소를 변경하고 싶었다. board[0][0] = 1 // 예상 결과 [ [1,0,0,0], [0,0,0,0], [0,0,0,0], [0,0,0,0] ]..