[Javascript] nullish 병합 연산자 (nullish coalescing operator)
nullish nullish 병합 연산자 (nullish coalescing operator) ?? 를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어 있는' 변수를 찾을 수 있다. a ?? b 의 평가 결과는 아래와 같다. - a가 null도 아니고 undefined도 아니면 a - 그 외의 경우에는 b nullish 병합 연산자 ?? 없이 x = a ?? b 와 동일한 동작을 하는 코드는 다음과 같다. x = (a !== null && a !== undefined) ? a : b; 아래의 예시를 살펴보자. let firstName = null let lastName = undefined let nickName = 'zubetcha' console.log(firstName ?? lastNa..
[TIL] 2022/02/22 Tue - emotion, Recoil 사용해보기
Today I Learned 얼마만의 TIL인지..! 그동안 공부를 안 하거나 코딩을 안 한 건 아니지만, 블로그에 글을 쓸 만큼의 양은 아니었던지라 못 쓰고 있었는데 사전 과제를 하면서 새로운 것들을 사용하게 돼서 정말 오랜만에 TIL을 쓴다. 사전 과제에서 요구하는 건 크게 세 가지 정도로, 1) (필수) React 또는 Next.js를 사용할 것, 2) (필수) 차트 라이브러리를 사용할 것, 3) (선택) Redux, Recoil 등 상태 라이브러리 사용이다. 스타일에 대한 건 없었지만 지금까지 항상 css-in-js로 styled-components만 사용했었기 때문에 이번에는 다른 걸 사용해 보고 싶어서 @emotion/react 와 @emotion/styled를 설치했다. 상태 관리 툴도 항상..
[Error] @emotion/react useInsertionEffect 참조 에러
항상 css-in-js로 styled-components만 사용하다가 emotion을 써보고 싶어서 라이브러리를 설치했다. emotion에서도 styled-components와 동일하게 GlobalStyle과 ThemeProvider API를 제공하고 있어서 우선 theme과 global 파일을 생성하여 간단한 설정을 마친 후 index.js에 임포트하였다. 그런데 임포트 하자마자 아래와 같이 export 'useInsertionEffect' (imported as 'useInsertionEffect$1') was not found in 'react' 라는 문구와 함께 에러가 발생했다. 'useInsertionEffect'라는 API가 export 할 수 있는 API 리스트에 없어서 발생하는 문제인 듯 ..
[Javascript] Promise.all & Promise.race
Promise.all Promise.all은 파라미터로 주어진 Iterable 객체(보통은 배열의 형태가 많음)의 모든 프로미스를 이행한 후 새로운 프로미스를 반환한다. 이 때 반환되는 프로미스는 파라미터로 받은 배열 안의 프로미스의 결과값을 담은 새로운 배열을 result로 가지게 된다. 새로운 프로미스의 result 배열의 요소 순서는 Promise 이행 완료의 순서와는 상관 없이 Promise.all의 파라미터 배열의 요소 순서와 상응한다. Promise.all은 서로 관련된 여러 프로미스의 결과를 집계할 때 유용하며, 다음 코드를 실행하기 전에 연관되어 있는 비동기 작업들이 모두 이행이 완료되어야 하는 경우에 사용된다. 구문 Promise.all(iterable) // iterable은 배열 등과..
[알고리즘] 프로그래머스 - 두 개 뽑아서 더하기 (자바스크립트)
Link https://programmers.co.kr/learn/courses/30/lessons/68644 코딩테스트 연습 - 두 개 뽑아서 더하기 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 제한 programmers.co.kr 문제 설명 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 제한사항 numbers의 길이는 2 이상 100 이하입니다. numbers의 모..
[Javascript] 실행 컨텍스트(Execution Context), 스코프 체인(Scope Chain), 호이스팅(Hoisting)
실행 컨텍스트 (Execution Context) 실행 컨텍스트는 코드를 실행하는 데 필요한 조건이나 환경 정보 등을 수집해 놓은 객체를 뜻한다. 실행 컨텍스트는 1) 전역 공간에서 익명 함수 실행 시, 2) eval 함수 실행 시, 3) 함수 실행 시, 4) {} 코드 블럭 사용 시 생성된다. if문, for문, switch문, while문 등의 반복문이나 조건문은 let과 const 키워드에 대해서는 별개의 독립된 공간으로서의 역할을 하지만 별도의 실행 컨텍스트가 생성되지는 않으며, 함수라 하더라도 함수의 실행 내용을 정의해 놓은 정의부가 아닌 실행문을 만나야 실행 컨텍스트가 생성된다. 아래 코드의 실행 순서와 출력값을 예측해보자. var a = 1; function outer () { console..