forEach와 Promise.all
list 에는 순서대로 timeout의 값들이 들어가 있고, forEach를 통해 순회하면서 testFunction을 실행하여 해당 결과를 출력해주는 프로그램이다. 순서대로 반복한다는 점에서 개발자는 3000, 2000, 3000, 4000, 1000, 1000, 2000, 3000, 1000, 1000 의 순서대로 결과가 출력된다는 것을 예측할 수 있다.
Web Components : Custom Elements
기본 설명 Custom Elements는 사용자 HTML Element를 만들게 해준다. 그리고 이는 DOM의 모든 기능을 다 사용할 수 있다. 기본적으로 두 가지 타입으로 생성한다. - 표준 HTML 요소를 상속하지 않은 Elements. 요소는 상속하지 않지만 HTML Element는 상속 한다.
svg see: SVG 파일 미리보기 extention
svg 미리 보기 활성화 하는 방법 파일을 직접 열지 않아도 미리 볼 수 있기 때문에, 작업 속도가 빨라집니다. 특히 여러 SVG 파일을 다루는 경우 시간 절약 효과가 더욱 뛰어납니다. 확장 프로그램 설치 하기 SVG SEE 프로그래 설치 사이트로 이동해서 컴퓨터 사양에 맞는 버전을 다운로드 합니다.
맥북 (Mac OS) M2 톰캣 설치하기
톰캣 설치 아파치 톰캣 사이트에 접속합니다. - 페이지 왼쪽의 Download 카테고리에서 다운로드 할 톰캣 버전을 클릭합니다. - 내게 맞는 톰캣 버전을 찾는 방법 참고: https://itworldyo.tistory.com/88 - Binary Distributions 항목에서 tar.gz 파일을 클릭 해 다운로드 합니다.
[CSS] 디자인 시스템 만들기: breakpoint
들어가며 디자인을 할 때 여러 해상도를 대응해야 하는 것은 필수적이다. 특히나 요즘에는 너무나도 다양한 기기들이 나오다 보니 하나의 서비스를 만들 때 모바일 앱이 아닌 이상 데스크탑, 태블릿, 모바일 그리고 이 디바이스에서도 다양한 해상도를 대응해야 한다. (갤럭시 플립, 폴더···) 그래서 디자인 시스템 Foundation 영역에 들어갈 브레이크 포인트를 설정하는 데 있어서도 많은 고민과 리서치가 필요하다.
scroll event 제어
스크롤 기능을 막아야 하는 상황에서 대부분은 body 에 overflow-y: hidden 을 주는 방법이 제시되지만, 그렇지 않은 경우 자바스크립트로 이를 처리해야 한다. javascript로 scroll, mousewheel, touchmove 등의 이벤트를 걸어 e.preventDefulat()로 이벤트를
프론트엔드 성능 최적화
브라우저 동작 원리 > 브라우저 로딩 과정: 파싱 > 스타일 > 레이아웃(리플로우) > 페인트 > 합성 & 렌더 프론트엔드의 성능 최적화를 확인하기에 앞서 브라우저가 어떻게 화면을 사용자에게 보여주는지를 알아야 한다. - [브라우저의 동작과정부터 React까지](https://velog.io/@kmlee95/브라우저의-동작과정부터-React)
[CSS] 브라우저가 css 셀렉터를 해석하는 방법과 성능 향상 방법
브라우저가 css 셀렉터를 해석하는 방법 브라우저가 css 선택자를 해석하는 방식은 일반적으로 css를 작성하는 방식과는 반대다. 브라우저는 오른쪽에서 왼쪽으로 css 선택자를 해석 한다.
history API로 SPA 구현
history API 브라우저는 페이지 로딩 시 세션 히스토리를 갖는다. 세션 히스토리는 페이지를 이동할 때마다 쌓이며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다. 사용자가 페이지를 새로고침 하거나 뒤로가기/앞으로가기 버튼을 클릭하지 않아도, 웹 애플리케이션 내에서 프로그래밍 방식으로 페이지를 이동할 수 있다.
iOS input focus, buffer
한글은 자음, 모음으로 구성된다. iOS에서 input 에 있는 value를 X 버튼 등으로 한번에 삭제하고 다시 input에 focus를 주려고 할 때, input에 입력되어 있던 문자가 한글이고, 마지막 문자가 받침이 없는 문자였다면, 문자를 재입력 했을 때 남아있던 버퍼가 함께 보여지게 된다.