TIL

[TIL] 브라우저 타임존 테스트

프로젝트를 하다가 timezone 관련 이슈를 겪어보고 나니 신경이 더 쓰이게 됐다. 최근 접속한 브라우저마다 접속한 타임존에 맞는 시간이 출력되길 원해서 테스트하는 방법을 알아보다가 개발자 도구에 그런 기능이 있는 걸 알고 기록하려고 한다. 크롬에서 [F12] - 케밥메뉴 - [More tools] - [Sensors] - Location 에서 드롭다운 아래로 눌러 원하는 타임존 선택!

[TIL] 클린 코딩 팁 3가지

1. DRY(Don't Repeat Yourself) WET(Write Everything Twice) // bad function greetings(user) { return `Hi ${user.firstName} ${user.lastName}`; } function goodbye(user) { return `See you next time ${user.firstName} ${user.lastName}`; } // good class User { fullName() { return `${this.firstName} ${user.middleName} ${this.LastName}`; } } 2. KISS(Keep It Simple, Stupid) // bad function getFirst(array, ..

[TIL] 브라우저 렌더링

사용자 인터페이스 : 웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스 브라우저 엔진 : 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진 렌더링 엔진 : HTML 과 CSS를 파싱해 요청한 웹 페이지를 표시하는 렌더링 엔진 통신 : 각종 네트워크 요청을 수행하는 네트워킹 자바스크립트 해석기 : 자바스크립트 코드를 실행하는 인터프리터 ex) 크롬-v8 UI 백엔드 : 기본적인 위젯을 그려주는 UI백엔드 파트 ex) 버튼, 체크박스 자료 저장소 : 보조 기억장치에 데이터를 저장하는 파트 ex) localStorage, cookie Critical Rendering Path : 렌더링 경로 DOM Tree생성 & CSSOM Tree 생성 → Render Tree 생성 → Render Tree..

[TIL] 디바운싱과 쓰로틀링

디바운싱 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 특정시간 지난 후 하나의 이벤트만 발생하도록 하는 기술 웹에서 주로 ajax검색에 자주 쓰인다. 그룹에서 처음이나 마지막으로 실행된 함수를 처리하는 방식으로 사용 leading edge: 처음에 실행한 함수를 실행하고 그 뒤 이벤트 무시 trailing edge : 마지막에 실행한 함수를 실행하고 그 전의 이벤트 무시 쓰로틀링 마지막 함수가 호출되고 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것 성능 개선을 위해 사용(무한 스크롤) 이벤트를 일정주기마다 발생하도록 하는 기술 디바운싱 vs 쓰로틀링 - 디바운싱 : 스크롤이 내리다가 스크롤을 멈추고 정해진 시간 후 이벤트 발생. - 쓰로틀링 : 이벤트 하나 발생하고 특정 시간동안 이벤트가 발생..