Programming Note

요소의 높이를 100%로 늘리는 애니메이션을 만들려면 다음과 같은 단계를 따르면 됩니다: 1. 요소에 대한 CSS 속성을 설정합니다. 이때 요소는 상위 요소(부모 요소)의 크기를 기준으로 높이를 조정합니다. .parent { height: 400px; /* 부모 요소의 높이 */ } .child { height: 0; /* 자식 요소의 초기 높이 */ transition: height 0.5s ease-in-out; /* 높이가 바뀔 때 애니메이션 속성 */ } 2. 자식 요소의 높이를 100%로 늘리는 애니메이션을 작성합니다. 이때 자식 요소의 높이를 100%로 설정하면 부모 요소의 높이와 동일하게 됩니다. .child.active { height: 100%; /* 자식 요소의 높이를 100%로 설정 ..

최근에 React 프로젝트르 세팅하다가 React-Hot-Loader 문서를 보니, React Fast Refresh라는 새로운 도구가 나온 것을 발견했다. React-Hot-Loader를 만든 페이스북 개발자 Dan Abramov는, 기존 핫 로더에 한계가 있다고 평가하면서, 앞으로는 React Fast Refresh로 대체될 것이라 생각한다고 의견을 밝혔다. 기존의 핫 로더는, 대규모 앱에서 코드변경, export/import 문제, Typescript관련 문제 등 앱이 매우 느리게 동작하는 것이 문제였다. 그 대안으로 나온게 Fast Refresh이며, 2019년 React Native 0.61에 처음 도입 되었다. 그렇다면 React Fast Refresh가 하는 일은 무엇인가? 앱 전체를 다시 ..

전개 구문(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', '..

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..

날짜 기능을 개발하다보면 현재 해당하는 월(Month)에 몇일까지 있는지를 알아야할 필요가 있다. 다음 코드를 사용하면 해당하는 연도의 월에 몇일까지 있는지 계산할수 있다. function getDayOfMonth(year, month) { return 32 - new Date(year, month-1, 32).getDate(); }

Chrome autoplay가mute속성과 함께라면 항상 자동재생가능 Sound가 있을 때는 다음의 경우에만 허용된다 유저의 Interaction(click, tap)이 있을 경우 MEI(Media Engagement Index)지수가 특정 기준보다 높을경우 MEI: 간단히 말하면, 유저의 브라우저의 기록되는 점수로서 특정 사이트에서 유저가 얼마나 많이 영상을 소리와 함께 봤는지에 대한 지표 지표에 적용되려면 소리를 틀고 7초이상 재생 Audio버튼 나타나야 함 200x140보다 비디오 사이즈가 커야함 브라우저에서 MEI 보는 방법Chrome://media-engagement접속 유저가 모바일에서 홈화면에 바로가기를 추가했거나, 데스크탑에서 PWA로 설치한 경우 Browser history가 없는 경우 ..

두세 번 정리하고, 더 이상 쓰지 않을 것 같았던 JavaScript로 디자인 패턴 정리하기 그 네 번째. 이번 주인공은 Adapter Pattern(어댑터 패턴) 이다. 어댑터 패턴이란 무엇인가? 코드를 보기 전에 간단한 예시를 보도록 하자. 한국에서는 220V를 쓰는데, 일본은 110V를 사용한다. 그렇다면 220V모양으로 만들어진 전자제품을 일본에서 쓰려면 어떻게 해야 할까? 110V로 변환해주는 무언가를 사용해주면 된다(돼지코라 불리는 변압기/어댑터를 사용한다). 간단하다. 중간에서 한번 변환해주면 되는 것이다. 이 간단한 생각을 코드에 녹여보도록 하자. 여기에 글자를 출력하는 프린터 클래스가 있다고 하자. 프린터는 pushText(text); 메서드를 통해 출력할 글자들을 저장하고, print(..

추상 팩토리 패턴과 팩토리 메서드 패턴에 이은 세 번째. 빌더 패턴(Builder Pattern)이다. 개인적으로 빌더 패턴은 앞의 두 패턴보다 자주 사용하고 있는데, 오늘은 design-patterns-JS의 예제를 가지고 설명을 해보도록 하겠다. 빌더 패턴은 무언가를 뭔가를 조합해주는 패턴이라 이해하면 쉽다. 웹에서 많이 사용하는 Request Query를 예를 들어보도록 하자. Request(리퀘스트)는 크게 URL, METHOD(GET, POST, PUT, DELETE), 그리고 데이터 부분으로 이루어져 있다. 이제 우리는 어떤 리퀘스트 정보를 담고 있는 클래스를 만들어 보도록 하자. class Request { constructor(url, method, data) { this.url = url..

지난 포스트에서 다뤘던 추상 팩토리 패턴(Abstract Factory Pattern)에 이어, 이번엔 팩토리 메서드 패턴(Factory Method Pattern)에 대해 정리해 보도록 하자. 이전 포스트의 "마지막에 라떼의 종류가 여러 가지가 된다면 어떻게 하면 좋을까?"라는 질문을 던졌었는데, 이 문제를 해결하기 위해 팩토리 메서드 패턴을 이용하면 좋다. 거두절미하고 예제 코드를 보도록 하자. class CafeLatte { constructor() { this.price = 3000; } getPrice() { return this.price; } } let latte = new CafeLatte(); latte.getPrice(); // 3000 latte.gerPrice(); 함수는 특정 인스..

디자인 패턴(Design Pattern)은 학부생 때 열심히 공부했었는데, 지금은 딱히 패턴을 생각하며 코드를 짜고 있는 것 같진 않다. 필요한 부분에 적절하게 기능별로 모으고, 추상화를 하다 보면 자연스럽게 패턴이 되기 때문이다. 하지만 다른 사람에게 설명하거나 표준화(?)된 코드를 더 잘 짜기 위해선 다시 한번 복습해보면 좋을 것 같다는 생각도 든다. 따라서 최근 GoF의 디자인 패턴을 JavaScript로 이식한 깃허브 저장소를 보고 있다. ES5와 ES6로 잘 구현을 해놨지만 다소 설명이 충분해 보이지 않았다. 이번 기회에 한 땀 한 땀 따라가 보면서 정리해 보도록 하자. 디자인 패턴 책이나 구현 방법에 대한 글을 찾아보면, 클래스 다이어그램이나 코드 위주로 설명이 되어있다. 물론 다이어그램과 코..