Front-End20 Web 3.0 Web 3.0 은 특정한 기술이 아닌 미래 웹의 방향성과 움직임 가리키는 여러 가지 키워드를 하나로 묶어 표현한 것이다. 그 키워드들은 탈중앙화, 개인화(시맨틱 웹) 등이 있다. 개인화는 현재의 Web 2.0 에선 중앙화 된 플랫폼에서 개인들이 경제적 가치가 있는 글이나 영상을 투고하여 수익을 쌓아 올렸지만 탈중앙화를 통해 중앙화 된 플랫폼이 해킹당했을 때의 리스크를 줄이고, 개인이 만든 물건의 가치는 온전히 개인이 누릴 수 있게 하며 블록체인을 통해 탈중앙화 된 환경을 구성한다는 이론이다. 하지만 탈중앙화를 통해 각 개인이 가치를 온전히 누릴 수 있게 하려면 어쨌거나 해당 콘텐츠를 생성/저장/수정/삭제할 수 있는 서버나 플랫폼이 필요한데, 만약 개인이 서버를 운영하여 콘텐츠를 제공한다면 상대적으로 개인.. 2022. 1. 5. [JS] event.stopPropagation을 웬만해서 사용하지 않아야 하는 이유 웹 사이트를 체험하는 유저의 동향을 파악하거나 기타 데이터를 쌓기 위해 웹 서비스의 애널리틱스는 거의 반필수적으로 사용한다. 이러한 웹 애널리틱스 툴에선 event bubbling을 통해 event를 탐지하고 데이터를 수집하는 경우가 있는데, stopPropagation을 사용할 경우 event bubbling이 일어나지 않아 해당 툴이 클릭을 캡쳐하지 못할 수 있다. 그러하여 stopPropagation은 완전히 통제된 상황이 아닌이상 사용하지 않아야 한다. stopPropagation을 대체할 수 있는 방법은 내 경우에는 다음과 같이 구현한다. const box1Ref = document.getElementById('box-1') const box2Ref = document.getElementById.. 2021. 10. 8. React 의미론적 컴포넌트화, 최적화에 대해서 위와 같은 구조에서는 컴포넌트를 분리하기가 애매하다. Search 컴포넌트는 `word`, `showCancel` state를 가지고 있다. 검색어를 keyInput 마다 갱신한다. 초기화 버튼을 눌러 검색어를 초기화한다. List 컴포넌트는 Search 컴포넌트의 `onSearch` props를 통하여 필터링 된 리스트와 필터링에 쓰여진 word를 state에 저장한다. 그러하여 검색의 기능은 Search 컴포넌트에서, 필터링은 List 컴포넌트에서 이뤄진다. 이렇게 구성한 이유는 Search input이 변함에 따른 랜더링 최적화 및 의미론적인 이유가 있다. 하지만 여기서 필터링 된 리스트의 결과를 보여줄 때 “에 대한 검색결과 입니다.” 와 같은 간단한 search result description.. 2021. 10. 8. Infinity scroll, Lazy loading 🥱 | Intersection observer Infinity scroll과 Lazy loading은 요소를 동적으로 로딩하여 DOM 랜더링 및 network 통신을 최적화할 수 있어 웹 사이트를 최적화하는데에 중요한 기능입니다. 아직은 실험요소지만 많은 브라우저에서 지원하는 Intersection observer를 사용한 기능 구현을 설명합니다. 리스트 UI에서 아래로 스크롤하여 요소가 동적으로 추가됨과, 랜더링 된 요소들이 보일 때 이미지를 로딩하는 UI를 구성했습니다. IntersectionObserver의 인스턴스는 아래와 같이 생성합니다. const observer = new IntersectionObserver(callBack, options) 해당 생성자에는 call back 함수와 어떻게 동작할 것인지 지정할 options 객체를 넘길.. 2021. 8. 17. [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. 이전 1 2 다음
