본문 바로가기

전체 글57

[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.
[Study] 브라우저 저장소 | 로컬 스토리지, 세션 스토리지, 쿠키 브라우저 저장소의 종류는 아래와 같다. - 로컬 스토리지 - 세션 스토리지 - 쿠키 모든 스토리지는 "Key:Value"로써 저장 가능하다. 로컬 스토리지 로컬 스토리지, 내 컴퓨터 Chrome 프로그램 폴더에 저장되어 있는 것이기 때문에 고의로 삭제하지 않는 이상 이 자료는 삭제되지 않는다. 추 후 웹사이트 재 방문 시 활용할 수 있다. 아이디 자동 입력 등의 로그인 옵션을 저장하여 활용하면 좋을 듯 싶음 세션 스토리지 세션 스토리지, 브라우저가 서버와의 세션이 유지되는 동안에만 저장되는 데이터이다. 세션이 끊어지면, 저장소에 있는 자료는 삭제된다. 추 후 재접속할 때의 정보는 이 저장소에 담기 부적절하다. 민감하지 않는 정보를 자동입력 기능을 위해 사용하거나, 비 로그인 상태에서 장바구니에 담긴 것들.. 2021. 4. 17.
[HTML 코딩 테크닉] Input Autocomplete(Auto-fill)를 제어하는 방법 회사 플랫폼 개발 중 사용자가 로그인 되어있는 상태에서 페이지 1에 진입하여 특정한 Action을 실행할 때, 비밀번호를 한번 더 사용자로부터 입력을 받아 Confirm후 해당 작업을 진행할 수 있는 기능이 있었다. 사용자의 비밀번호 입력을 위해 Input 요소를 추가해주었고, type도 당연히 "password"로 설정해 주었다. 패스워드를 확인한 후 다른 페이지로 redirect 되어지게 되는데(Client side), 이 때 브라우저(Chrome)는 ID, PW를 보냈다고 판단하여 "방금 보낸 ID와 PW 정보를 저장할거야?"라고 물어보았는데 무의식적으로 "저장하겠다" 버튼을 한 번 클릭했었다. 그 후 페이지 1에 다시 들어왔는데, 아까 비밀번호 재Confirm을 위해 사용하던 Input eleme.. 2021. 4. 11.

티스토리툴바