JS에서 undefined는 - 값이 할당되지 않고 초기화만 된 변수 - 명시적인 반환 값이 없는 함수 - 표현식의 결과가 없을 때 위 상황에서 사용됨. 값이 할당되지 않음을 정의함 그러하여 의도적으로 undefined를 변수에 할당하는 것은 undefined 타입의 의도에 어긋나게 사용하며 혼란을 가져올 수 있음 본인은 데이터의 로딩 상태를 나타내기 위해 데이터 상태를 관리할 때 data가 fetch되기 전 상태를 undefined로 두곤 했었는데, loading state를 따로 빼는게 바람직해 보임
Optional chaining, Nullish coalescing operator를 사용하여 코드를 단순하고 명확하게 구성할 수 있습니다. 코드를 구성함에 있어 많은 변수를 참조하게 됩니다. 변수를 참조함에 있어 사용되어지는사용되는 구조 분해 할당 등의 표현식 정도는 대중적으로 편리하게 사용되는 표현식이라고 할 수 있습니다. 하지만 구조 분해 할당을 사용하여 변수를 참조하다 보면.. 구조 분해 대상이 Null, undefined 등의 객체가 아닌 데이터일 경우 아래와 같이 코드를 작성하게 됩니다. // Case. 1 const { name } = people ? people : {} // Case 2 let name = null if (people) { name = people.name } // .....
브라우저에서 보이스웨어를 사용하기 위한 방법에는 SpeechSynthesis를 사용하는 방법이 있다. SpeechSynthesis는 말 하고싶은 단어나 문장을 사용자의 언어 환경에 맞추어 보이스웨어로 실행시킬 수 있다. const speech = new SpeechSynthesisUtterance('안녕하세요!') speechSynthesis.speak(speech) 하지만 아직 실험 기능인 것과, 브라우저의 정책에 막혀 실행할 수 없는 경우가 있다. 사용자의 인터렉션이 일어나지 않았을 경우에는 각 브라우저의 정책에 의해 SpechSynthesis가 동작하지 않는다. 왜냐하면 내가 아무것도 하지 않았는데 갑자기 브라우저에서 소리가 들린다면 그것은 조금 무서운 경험, 좋지 않은 경험이 될 것이기 때문이다...
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/ckLjG8/btraFElqWgS/B5ta648h7MJnqe8BqIGzWk/img.png)
currentTarget은 EventListener가 등록된 대상이고 target은 Event가 원천적으로 일어난 대상입니다. 개발하며 EventListener를 등록한 후 이벤트를 trigging 하는 과정은 흔하게 사용됩니다. 이 때 Event 인터페이스를 구현한 객체가 argument로 들어오게 되는데요, 이때 우리는 currentTarget 혹은 target을 참조하여 이벤트가 발생한 대상 element를 참조하고 변경을 일으킬 수 있습니다. 이런 두 Property에 대한 차이를 알아보면 아래와 같습니다. currentTarget: EventListener가 등록되어 있는 element target: 원천적으로 Event가 발생한 대상 위의 설명으로는 감이 잘 안 오실 수 있습니다. 아래 예제를..
개발 중 number로 indexing이 되어있는 element를 가져와야 했었습니다. 저는 querySelector 메서드를 선호하기 때문에 CSS3의 선택자를 사용하는 querySelector를 사용했습니다. (이유는 이 게시글을 참조해주세요!) > document.querySelector('#1') Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector. at :1:10 하지만 위와 같이 실행했을 때 에러가 발생하게 됩니다 왜 안 될까요? 앞서 querySelector는 CSS3의 선택자를 사용한다는 언급이 있었는데요 CSS3 선택자는 "숫자로 시작하는 id에 대해 selec..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/CQbb7/btq96Fs1jJF/tWB4TjHqKMBku7QVA4ib30/img.png)
내가 생각한 것을 코드로 구현하고 작성하면서 많은 고민을 하게 된다. 그 중 "나중에 이 코드를 읽게 되었을 때 의도파악이 쉽게 될 까?"에 대해 생각해보면 '결과물' 기준으로 코드를 작성하는 것이 아닌 '코드' 기준으로 '의도를 가진 코드'를 작성하는 것이 중요하다고 생각한다. 간단하게 DOM 구조를 통해 예를 들자면 Root element인 'Frame'이 있고 동일 선상(depth)에 'div#popup' element와 'div#content' element가 있다. 'div#content' element의 자식으로는 'div#chat-stack' element가 있다. 각 Elements들의 의도는 아래와 같다. - 'div#popup' element는 Top-down 방식으로 보여주기 위한 e..
JS는 lexical scope를 따릅니다. JS의 변수 스코프를 이해하기 위해 관련된 개념을 알아봅니다. Global scope 글로벌 스코프는 Global 객체인 Window 객체의 Scope를 말합니다. JS는 별 다른 Main 함수가 없기 때문에, JS를 처음 접하시는 분들은 Global scope에 변수를 선언하기 쉽습니다. Global scope에 변수를 선언하게 되면, 다른 변수와 변수명이 겹쳐 충돌할 가능성이 있습니다. let testWord = "Global scope hello world!" // Global scope const functionScope = () => { let testWord = "Local scope hello world!" // Function scope cons..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/RJtg2/btqZox6VWRS/h7K2YlQ4iUrKCFjxKKO6tK/img.png)
평소에 사용하던 NodeSelector 들을 명확하게 정의하고자 합니다. NodeSelector 는 JavaScript 코드에서 DOM에 존재하는 하나이거나 여러개의 Node(Element)를 선택하기 위해 사용하는 method 입니다. NodeSelector 의 종류로는 - getElementsByClassName() - getElementById() - getElementsByName() - getElementsByTagName() - querySelector() - querySelectorAll() 등이 있습니다. getElementsByClassName() 파라미터로 넘긴 String을 전체 Elements의 class를 대상으로 탐색을 실행합니다. 반환값은 HTMLCollection 입니다. -..
- Total
- Today
- Yesterday
- ts(2564)
- event delegation
- CRA
- NodeSelector
- start with digit
- url mapping order
- getElementsByTagName
- getElementById
- leftJoin
- save-exact
- android-licenses
- getElementsByClassName
- SMUI
- Lexical scope
- Nullish coalescing operator
- code technic
- Function scope
- Global scope
- querySelectorAll
- undefined
- js
- craco-alias
- tsconfig
- state_undefined
- querySelector
- jsconfig
- flutter doctor
- webpack
- DOM API
- hmr
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |