분류 전체보기59 [JS] Optional chaining, Nullish coalescing operator 🛒 Optional chaining, Nullish coalescing operator를 사용하여 코드를 단순하고 명확하게 구성할 수 있습니다. 코드를 구성함에 있어 많은 변수를 참조하게 됩니다. 변수를 참조함에 있어 사용되어지는사용되는 구조 분해 할당 등의 표현식 정도는 대중적으로 편리하게 사용되는 표현식이라고 할 수 있습니다. 하지만 구조 분해 할당을 사용하여 변수를 참조하다 보면.. 구조 분해 대상이 Null, undefined 등의 객체가 아닌 데이터일 경우 아래와 같이 코드를 작성하게 됩니다. // Case. 1 const { name } = people ? people : {} // Case 2 let name = null if (people) { name = people.name } // ..... 2021. 8. 4. [JS] Live collection, Static collection 📑 Live collection은 DOM의 실시간 변경사항에 따라 언제든지 바뀔 수 있고, Static collection은 DOM의 실시간 변경사항에 따라 바뀌지 않습니다. DOM API(querySelectorAll, getElementsByClassName, getElementsByTagName)를 통해 Element list를 가져올 수 있습니다. 'querySelectorAll' method는 'NodeList' 형태로 element list가 반환되고 'Static collection'입니다. 'getElementsByClassName', 'getElementsByTagName' method는 'HTMLCollection' 형태로 element list가 반환되며 'Live collection'입.. 2021. 8. 3. [JS] 브라우저에서 말 하기 👄 | SpeechSynthesis 브라우저에서 보이스웨어를 사용하기 위한 방법에는 SpeechSynthesis를 사용하는 방법이 있다. SpeechSynthesis는 말 하고싶은 단어나 문장을 사용자의 언어 환경에 맞추어 보이스웨어로 실행시킬 수 있다. const speech = new SpeechSynthesisUtterance('안녕하세요!') speechSynthesis.speak(speech) 하지만 아직 실험 기능인 것과, 브라우저의 정책에 막혀 실행할 수 없는 경우가 있다. 사용자의 인터렉션이 일어나지 않았을 경우에는 각 브라우저의 정책에 의해 SpechSynthesis가 동작하지 않는다. 왜냐하면 내가 아무것도 하지 않았는데 갑자기 브라우저에서 소리가 들린다면 그것은 조금 무서운 경험, 좋지 않은 경험이 될 것이기 때문이다... 2021. 7. 30. [JS] EventObject currentTarget, target | 이벤트 위임 | event delegation currentTarget은 EventListener가 등록된 대상이고 target은 Event가 원천적으로 일어난 대상입니다. 개발하며 EventListener를 등록한 후 이벤트를 trigging 하는 과정은 흔하게 사용됩니다. 이 때 Event 인터페이스를 구현한 객체가 argument로 들어오게 되는데요, 이때 우리는 currentTarget 혹은 target을 참조하여 이벤트가 발생한 대상 element를 참조하고 변경을 일으킬 수 있습니다. 이런 두 Property에 대한 차이를 알아보면 아래와 같습니다. currentTarget: EventListener가 등록되어 있는 element target: 원천적으로 Event가 발생한 대상 위의 설명으로는 감이 잘 안 오실 수 있습니다. 아래 예제를.. 2021. 7. 27. querySelector가 동작하지 않아요 :( | id started with number 개발 중 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.. 2021. 7. 26. 의도에 따른 코드 작성 방법론 내가 생각한 것을 코드로 구현하고 작성하면서 많은 고민을 하게 된다. 그 중 "나중에 이 코드를 읽게 되었을 때 의도파악이 쉽게 될 까?"에 대해 생각해보면 '결과물' 기준으로 코드를 작성하는 것이 아닌 '코드' 기준으로 '의도를 가진 코드'를 작성하는 것이 중요하다고 생각한다. 간단하게 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.. 2021. 7. 21. npm i -E (--save-exact) Option 기본적으로, npm i command를 실행하게 되면 dependency package들은 자동 업데이트가 됩니다. 이 때 일부 패키지들에 한하여 자동 업데이트가 진행되지 않도록 해야 하는 경우가 있습니다. 가끔 버전 업데이트에 따라서, 다른 환경에서 npm i 를 통해 dependency package를 다운받아 실행하는데 오류가 발생하는 경우들이 있기 때문입니다. 이럴 경우 해당 패키지를 install할 때 `-E`(혹은 `--save-exact` - 정확한 버전만 저장) 옵션을 추가하여 해당 package는 자동 업데이트를 하지 않도록 설정할 수 있다. 기존에 설치된 패키지들에 대해서 -E(--save-exact)설정을 하고싶다면 해당 패키지를 삭제 `npm i @ -E` 실행 위와 같은 방법으로 .. 2021. 6. 21. Element.scrollLeft 메서드가 작동하지 않아요 :( 개발 도중에 일어난 사례를 가지고 작성한 가벼운 에러 리포트 입니다. A 라이브러리는 받은 정보를 바탕으로 Tempalte을 랜더링 하여 Return 한다. 이 랜더링된 템플릿에는 Horizontal slider가 있고, 사용자는 UI와 상호작용 하며 해당 Horizontal slider를 좌, 우로 움직일 수 있다. 하지만 사용자가 UI와 상호작용할 때 라이브러리에서 Template를 재 랜더링 하여 반영해야 하는 상황이 발생했다. Template를 재 랜더링 하여 반영하면, 사용자가 Horizontal slider에서 스크롤한 만큼의 값은 초기화되고, 0으로 돌아온다. 그러하여 사용자는 알 수 없는 시점에 Horizontal slider가 계속 왼쪽 끝으로 이동하는 현상을 경험할 수 있는 것이다. 이.. 2021. 6. 14. Business logic에 대한 생각 비즈니스 로직이란 어떤 서비스나 프로그램의 Core 한 부분을 이루는 중요한 요소중 하나이다. 모든 프로그램이나 서비스에는 추상적인 '개념'이나 '콘셉트'가 있다. 프로그램이나 서비스의 본질을 파고들다 보면, 결국에는 사전에 정의한 구조화된 데이터를 잘 컨트롤할 수 있느냐이다. 이러한 개념이나 콘셉트, 구조화된 데이터를 기반으로 비즈니스 로직이 작성된다. 그러하여 비즈니스 로직은 추상적인 개념이나 콘셉트를 실제 세계에 구현할 수 있는 것이며 개념과 콘셉트를 유지시킬 수 있는 것이다. 실제 비즈니스 로직은 개념과 콘셉트를 지키기 위한 규칙 위에서 작성되며 어떠한 Action이 수행될 때 여러 인터셉터들을 거치며 생성/수정/삭제 되는 데이터들의 유효성을 검증할 수 있다. 위와 같은 작업으로 인해 비즈니스 로.. 2021. 5. 26. [Study] 스코프 | Lexical scope, Scope chain, Global scope, Function scope 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.. 2021. 4. 22. [Study] this keyword | call, apply, bind this 키워드는 실행 컨텍스트를 참조합니다. 실행 컨텍스트는 각 상황별로 나뉩니다. 각 상황별 this 키워드가 어떤 객체를 참조하는지 정리 하였습니다. 전역 컨텍스트 global 객체(window) 참조 전역 컨텍스트 에서는 global객체인 window 객체를 참조합니다. console.log('this', this) // window object console.log('this === window', this === window) // true this.a = 13 console.log('window.a: ', window.a) 함수 컨텍스트 전역 컨텍스트의 함수 에서는 global 객체를 참조합니다. 객체의 함수에서는 현재 이 함수(메서드)가 속한 객체를 실행 컨텍스트로 잡고 참조합니다. 함수 .. 2021. 4. 19. [Design] 제품 디자인의 한계 편익 한계 편익이 이 경우에 쓰이는 단어인지 모르겠지만. 내가 그렇게 느끼니 일단 사용하겠다. 갤럭시 버즈 프로의 가죽(폴리카보네이트) 케이스의 디자인은 아래와 같이 생겼다. 디자인도 그렇고 재질도 폴리카보네이트로 선택함으로써 가죽 느낌을 주되, 가죽만큼 마모가 되지 않아 좋다고 생각한다. 가죽 마감의 특징인 모서리 부분의 가죽이 말려 들어가는 것까지 잘 구현했다고 생각한다. 여기서 충전기 케이블을 꽂아 버즈 프로를 열 시, 이전의 90도로 열리는 것과는 다르게 약 85도 정도로 열리게 된다. 프리스탑 힌지가 들어가지 않은 부분은 무선 이어폰 케이스의 특성을 따졌을 때 이전 버즈 라이브에서 프리스탑 힌지가 들어간 것보다 좋다고 생각한다. 사실 버즈 라이브가 출시될 때 삼성에서 갤럭시 Z 폴드 2의 프리스탑 힌.. 2021. 4. 19. 이전 1 2 3 4 5 다음
