Web 3.0 은 특정한 기술이 아닌 미래 웹의 방향성과 움직임 가리키는 여러 가지 키워드를 하나로 묶어 표현한 것이다. 그 키워드들은 탈중앙화, 개인화(시맨틱 웹) 등이 있다. 개인화는 현재의 Web 2.0 에선 중앙화 된 플랫폼에서 개인들이 경제적 가치가 있는 글이나 영상을 투고하여 수익을 쌓아 올렸지만 탈중앙화를 통해 중앙화 된 플랫폼이 해킹당했을 때의 리스크를 줄이고, 개인이 만든 물건의 가치는 온전히 개인이 누릴 수 있게 하며 블록체인을 통해 탈중앙화 된 환경을 구성한다는 이론이다. 하지만 탈중앙화를 통해 각 개인이 가치를 온전히 누릴 수 있게 하려면 어쨌거나 해당 콘텐츠를 생성/저장/수정/삭제할 수 있는 서버나 플랫폼이 필요한데, 만약 개인이 서버를 운영하여 콘텐츠를 제공한다면 상대적으로 개인..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bAS1t6/btrhc2nAcPf/9MNkoKJFQ4fDelgRU0zRKK/img.png)
웹 사이트를 체험하는 유저의 동향을 파악하거나 기타 데이터를 쌓기 위해 웹 서비스의 애널리틱스는 거의 반필수적으로 사용한다. 이러한 웹 애널리틱스 툴에선 event bubbling을 통해 event를 탐지하고 데이터를 수집하는 경우가 있는데, stopPropagation을 사용할 경우 event bubbling이 일어나지 않아 해당 툴이 클릭을 캡쳐하지 못할 수 있다. 그러하여 stopPropagation은 완전히 통제된 상황이 아닌이상 사용하지 않아야 한다. stopPropagation을 대체할 수 있는 방법은 내 경우에는 다음과 같이 구현한다. const box1Ref = document.getElementById('box-1') const box2Ref = document.getElementById..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bF4ETl/btrhbyG0j5L/thuEFfezDVuH59V0kdvKI0/img.png)
위와 같은 구조에서는 컴포넌트를 분리하기가 애매하다. Search 컴포넌트는 `word`, `showCancel` state를 가지고 있다. 검색어를 keyInput 마다 갱신한다. 초기화 버튼을 눌러 검색어를 초기화한다. List 컴포넌트는 Search 컴포넌트의 `onSearch` props를 통하여 필터링 된 리스트와 필터링에 쓰여진 word를 state에 저장한다. 그러하여 검색의 기능은 Search 컴포넌트에서, 필터링은 List 컴포넌트에서 이뤄진다. 이렇게 구성한 이유는 Search input이 변함에 따른 랜더링 최적화 및 의미론적인 이유가 있다. 하지만 여기서 필터링 된 리스트의 결과를 보여줄 때 “에 대한 검색결과 입니다.” 와 같은 간단한 search result description..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bEbKmd/btrcqyEwaQE/QsTOqNkJ1BnfHaYQW79XX1/img.gif)
Infinity scroll과 Lazy loading은 요소를 동적으로 로딩하여 DOM 랜더링 및 network 통신을 최적화할 수 있어 웹 사이트를 최적화하는데에 중요한 기능입니다. 아직은 실험요소지만 많은 브라우저에서 지원하는 Intersection observer를 사용한 기능 구현을 설명합니다. 리스트 UI에서 아래로 스크롤하여 요소가 동적으로 추가됨과, 랜더링 된 요소들이 보일 때 이미지를 로딩하는 UI를 구성했습니다. IntersectionObserver의 인스턴스는 아래와 같이 생성합니다. const observer = new IntersectionObserver(callBack, options) 해당 생성자에는 call back 함수와 어떻게 동작할 것인지 지정할 options 객체를 넘길..
Optional chaining, Nullish coalescing operator를 사용하여 코드를 단순하고 명확하게 구성할 수 있습니다. 코드를 구성함에 있어 많은 변수를 참조하게 됩니다. 변수를 참조함에 있어 사용되어지는사용되는 구조 분해 할당 등의 표현식 정도는 대중적으로 편리하게 사용되는 표현식이라고 할 수 있습니다. 하지만 구조 분해 할당을 사용하여 변수를 참조하다 보면.. 구조 분해 대상이 Null, undefined 등의 객체가 아닌 데이터일 경우 아래와 같이 코드를 작성하게 됩니다. // Case. 1 const { name } = people ? people : {} // Case 2 let name = null if (people) { name = people.name } // .....
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bgQpNe/btrbe5pgDam/lL68JF45itPJCBMM7QqrF0/img.png)
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'입..
브라우저에서 보이스웨어를 사용하기 위한 방법에는 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가 발생한 대상 위의 설명으로는 감이 잘 안 오실 수 있습니다. 아래 예제를..
- Total
- Today
- Yesterday
- jsconfig
- state_undefined
- webpack
- event delegation
- undefined
- android-licenses
- Nullish coalescing operator
- Function scope
- tsconfig
- getElementsByTagName
- Lexical scope
- code technic
- CRA
- NodeSelector
- ts(2564)
- url mapping order
- craco-alias
- hmr
- flutter doctor
- getElementById
- getElementsByClassName
- querySelectorAll
- Global scope
- querySelector
- start with digit
- js
- DOM API
- SMUI
- save-exact
- leftJoin
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |