분류 전체보기

모바일 웹에서 키패드 높이 계산

// 모바일 키패드 높이 계산 if (window.visualViewport) { window.visualViewport.addEventListener('resize', () => { let visualViewportHeight = window.visualViewport?.height || 0; let windowHeight = window.innerHeight; let keyboardHeight = windowHeight - visualViewportHeight; setKeyboardHeight(keyboardHeight); }); }

[CI/CD] 아무것도 모르는 상태에서 Github Actions 를 이용한 TestFlight 업로드 자동화(삽질 회고)

Github Actions로 CI/CD를 구현하여 앱 빌드 & TestFlight 업로드 자동화를 만들어야 하는 일이 생겨 아무것도 모르는 상태에서 1주일 동안 삽질해가며 마침내 구현하였고 모르고 시작하는 분들의 어려움을 조금이나마 덜고자 진행 내용에 대한 회고를 공유합니다. 우선 정말 진행의 90%를 보고 따라 했던 좋은 포스팅이 있어 소개합니다. https://sujinnaljin.medium.com/ci-cd-github-actions-%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-testflight-%EC%97%85%EB%A1%9C%EB%93%9C-%EC%9E%90%EB%8F%99%ED%99%94-8ecdbeb227a3 [CI/CD] Github Actions 를 이용한 Te..

CSS 단위 em 과 rem 정리

절대적인 속성에 사용하는 단위에는 px를 사용하고 상대적인 속성에는 %, v*(뷰포트), em, rem을 사용합니다. 단위를 사용하는 기준 첫 번째로 나누는 기준은 부모 요소의 사이즈에 따라서 사이즈가 변경이 돼야 한다면 -> %, em 을 사용합니다. 부모 요소와는 상관없이 브라우저 사이즈에 대해서 반응해야 한다면 -> v*(뷰포트), rem을 사용합니다. 두 번째로 나누는 기준은 요소의 너비와 높이에 따라서 사이즈가 변경되어야 한다면 -> %, v*(뷰포트) 를 사용합니다. font 사이즈에 따라서 사이즈가 변경되어야 한다면 -> em, rem을 사용합니다. rem rem을 사용해서 스타일을 적용하게 되면 root 요소 (html)의 font size에 따라서 크기가 결정되기 때문에 페이지 내에 어느..

BOM (Browser Object Model)

BOM을 알아야 하는 이유 ❗유저에게 경고창을 띄우고 싶은 경우, ❗유저의 yes or no와 같은 선택에 따라 다른 응답을 보여주고 싶은 경우 ❗유저가 브라우저 창을 닫기 전에 정말 떠날 것인지 확인하고 싶은 경우 ❗유저가 접속한 환경을 알고 싶은 경우 ❗현재 url 위치 및, 접속 history를 알고 싶은 경우 여러 ui를 직접 만들고 자바스크립트로 직접 제어할 수도 있지만, 브라우저에서 제공하는 기본 API를 사용한다면 훨씬 빠로고 간단하게 프로토타이핑을 할 수 있습니다. BOM(Browser Object Model)은 웹 브라우저 환경의 다양한 기능을 객체처럼 다루는 모델입니다. 대부분의 브라우저에서 구현은 되어있지만, 정의된 표준이 없어 브라우저 제작사 마다 세부사항이 다르고 다소 한정적이라는..

JS 이벤트 위임

이벤트 리스너를 지정하는 요소가 많으면 많을수록 페이지의 실행 속도는 느려집니다. 그래서 효율적으로 이벤트를 관리하기 위해서 이벤트의 흐름을 이용합니다. 이벤트는 이벤트가 발생한 엘리먼트를 포함하고 있는 부모 요소에도 영향을 미치기 때문에 자식 요소를 포함할 수 있는 요소에 이벤트 핸들러를 지정하고 이벤트의 흐름을 이용해 다룰 수 있습니다. 즉, 이벤트 리스너가 실행할 작업을 요소의 부모 요소에게 위임(Delegation)할 수 있다는 것입니다. 이벤트 위임의 장점들 동적으로 추가되는 요소들에도 동작한다. DOM트리에 새로운 요소를 추가하더라도 이벤트에 대한 처리는 부모 요소에게 위임되었기 때문에 새로운 요소에 이벤트 핸들러를 다시 지정할 필요가 없다. 코드의 간결 이 기법을 이용하면 함수를 많이 작성할..

꼭! 알아야하는 JavaScript 최신문법 (ES6, ES11) 사용법 정리 (2)

이번 포스팅에서는 자주 쓰이는 ES11 최신 문법 사용법에 대해 알아보겠습니다. 이전 포스트 자주쓰는 ES6 문법 사용법 정리(1) ES11 2020 Optional chainning Nullish coalescing operator 들어가기에 앞서 ES6 이후부터 추가된 많은 문법들이 익스플로러에서는 지원되지 않기 때문에 Babel을 이용해야 합니다. 1. Optional chainning const person1 = { name: 'dan', job: { title: 'Engineer', manager: { name: 'Bob', }, }, }; const person2 = { name: 'Bob' } // 💩💩💩💩 { function printManager(person) { console.log(p..

꼭! 알아야하는 JavaScript 최신문법 (ES6, ES11) 사용법 정리 (1)

이번 포스팅에서는 자주 쓰이는 JS 최신 문법 사용법에 대해 알아보겠습니다. 다음 포스트 자주쓰는 ES11 문법 사용법 정리(2) ~ES6 2015 Shorthand property names Destructuring assignment Spread syntax Default parameters Ternary Operator Template Literals 1. Shorthand property names const person = { name: 'dev_min', age: '19', } javascript 에서 object는 항상 key와 value로 이루어져 있습니다. const name = 'dev_min'; const age = '19'; const person1 = { name: name, ag..

JavaScript 30 Drum Kit 정리

요구사항 KeyBoard 입력을 받아 애니메이션 효과와 Drum 소리가 출력되게 vanilla JS를 이용해서 구현한다 기본 소스코드 A clap S hihat D kick F openhat G boom H ride J snare K tom L tink 처리과정 & 코드분석 keydown 이 될때마다 로그를 찍어 봤음 keydown 됐을 때 실행할 익명함수 작성 evnet를 찍었을 때 keyCode 속성이 나옴 data-key를 이용함, event.keyCode 속성을 이용하여 동적으로 타겟을 잡음 key, audio 변수에 할당함 const audio = document.querySelect(`audio[data-key="${e.keyCode}"]`); const key = document.queryS..