본문 바로가기

전체 글37

Spread Syntax와 Rest Parameter 전개 구문(Spread Syntax)와 Rest Parameter를 딱히 구분해서 공부하진 않았는데, 확실하게 기억해 두지 않으니 사용할때마다 헷갈린다. 이번 기회에 확실하게 정리해 두도록 하자. Spread Syntax 전개 구문은 반복 가능한 배열, 문자열 또는 이터러블에 대해서 사용이 가능하다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; console.log(sum(...numbers)); // 6 위 예제와 같이 함수의 파라미터로 넘길 때 "..."를 사용하여 넘기면 내부적으로 풀어서 인자를 전달 해준다. const numbers = [1, 2, 3]; const num = [...numbers, 'four', '.. 2019. 11. 3.
패턴 매칭(Pattern Matching) in JavaScript TC-39 Github에 패턴 매칭(Parttern-Matching)이 Stage 0에서 1로 한단계 등급이 상향됬었다. Stage1은 proposal 단계로 앞으로 TC-39 위원회에서 논의할 예정이며, 구체적인 데모에 대한 코드도 포함되어야 한다. 아직 Stage2(draft)와 Stage3(candidate), 그리고 stage4(finished)를 거쳐 정식으로 스펙에 추가되려면 갈 길이 멀지만 어떤 기능을 가지고 있고 또 어떻게 사용할 수 있는지 간단하게나마 미리 알아보도록 하자. 패턴 매칭은 Scala, F#, Rust 등 다른 언어에도 있는 기능인데, 앞서 언급한 언어에 대해서는 잘 모르지만, 비교적 단순하므로 다른 언어를 통해 알아보도록 하자. Scala object MatchTest1 e.. 2019. 9. 30.
현재 해당하는 월(Month)의 일(day)수 가져오기 날짜 기능을 개발하다보면 현재 해당하는 월(Month)에 몇일까지 있는지를 알아야할 필요가 있다. 다음 코드를 사용하면 해당하는 연도의 월에 몇일까지 있는지 계산할수 있다. function getDayOfMonth(year, month) { return 32 - new Date(year, month-1, 32).getDate(); } 2019. 8. 23.
HTML Video Tag의 자동재생(auto play) 조건 Chrome autoplay가mute속성과 함께라면 항상 자동재생가능 Sound가 있을 때는 다음의 경우에만 허용된다 유저의 Interaction(click, tap)이 있을 경우 MEI(Media Engagement Index)지수가 특정 기준보다 높을경우 MEI: 간단히 말하면, 유저의 브라우저의 기록되는 점수로서 특정 사이트에서 유저가 얼마나 많이 영상을 소리와 함께 봤는지에 대한 지표 지표에 적용되려면 소리를 틀고 7초이상 재생 Audio버튼 나타나야 함 200x140보다 비디오 사이즈가 커야함 브라우저에서 MEI 보는 방법Chrome://media-engagement접속 유저가 모바일에서 홈화면에 바로가기를 추가했거나, 데스크탑에서 PWA로 설치한 경우 Browser history가 없는 경우 .. 2019. 8. 16.
어댑터 패턴 Adapter Pattern 두세 번 정리하고, 더 이상 쓰지 않을 것 같았던 JavaScript로 디자인 패턴 정리하기 그 네 번째. 이번 주인공은 Adapter Pattern(어댑터 패턴) 이다. 어댑터 패턴이란 무엇인가? 코드를 보기 전에 간단한 예시를 보도록 하자. 한국에서는 220V를 쓰는데, 일본은 110V를 사용한다. 그렇다면 220V모양으로 만들어진 전자제품을 일본에서 쓰려면 어떻게 해야 할까? 110V로 변환해주는 무언가를 사용해주면 된다(돼지코라 불리는 변압기/어댑터를 사용한다). 간단하다. 중간에서 한번 변환해주면 되는 것이다. 이 간단한 생각을 코드에 녹여보도록 하자. 여기에 글자를 출력하는 프린터 클래스가 있다고 하자. 프린터는 pushText(text); 메서드를 통해 출력할 글자들을 저장하고, print(.. 2019. 5. 26.
빌더 패턴 Builder Pattern 추상 팩토리 패턴과 팩토리 메서드 패턴에 이은 세 번째. 빌더 패턴(Builder Pattern)이다. 개인적으로 빌더 패턴은 앞의 두 패턴보다 자주 사용하고 있는데, 오늘은 design-patterns-JS의 예제를 가지고 설명을 해보도록 하겠다. 빌더 패턴은 무언가를 뭔가를 조합해주는 패턴이라 이해하면 쉽다. 웹에서 많이 사용하는 Request Query를 예를 들어보도록 하자. Request(리퀘스트)는 크게 URL, METHOD(GET, POST, PUT, DELETE), 그리고 데이터 부분으로 이루어져 있다. 이제 우리는 어떤 리퀘스트 정보를 담고 있는 클래스를 만들어 보도록 하자. class Request { constructor(url, method, data) { this.url = url.. 2019. 4. 28.