JS, TS 썸네일형 리스트형 [JavaScript] How to implement Image Compression 목차 1️⃣ 트러블 슈팅 2️⃣ 어떻게 할 수 있는데? 3️⃣ 이미지? 압축? 4️⃣ JavaScript로 이미지 압축하기 5️⃣ 결론 1️⃣ 트러블 슈팅 현장실습 근무를 하며 이미지 에셋의 크기를 줄여 로드 시간을 줄이고자 하였다. 이후에 🔗 피클을 보니, 이미지가 뚝뚝 끊겨 페인팅 되는 이슈가 눈에 띄더라.. 웹페이지에서 대부분의 용량을 차지하는 건 이미지이다. 이미지를 최적화 한다면, 불필요한 대역폭을 줄일 수 있고 이를 통해 업로드 작업도 빨라지기 때문에 파일을 로드하여 화면을 빠르게 그리는 것 뿐만 아니라 통신 속도 역시 향상된다. SEO 향상까지! (사실 Nextjs를 사용하면 🔗 next/image를 활용하면 대부분 해결되지만, 호기심이 생겨버렸다) 절대적인 폭을 조절한다 포맷을 변경한다 i.. 더보기 [Javascript] Map & Set 객체 살펴보기 1. Map & Set 소개 1-1. Map ? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map Map - JavaScript | MDN The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value. developer.mozilla.org Map 객체는 key - value 로 이루어지며, 키의 삽입 순서를 기억한다 또한, 어느 값(any value.. 더보기 [Javascript] call & apply 로 this 특정시키기 배경 Storybook 학습 → bind 메소드 → call & apply 먼저 .. → this 개념 부실 .... this 전역 스크립트가 실행되거나 함수가 호출될 때, JS 내부 규칙에 따라 동적으로 결정된다 new 키워드 → this는 새로 생긴 객체에 묶임 obj.function() 형태로 메소드로 호출하는 경우 → this는 function을 프로퍼티로 가지는 객체 call / apply / bind 사용하는 경우 → this는 인수로 전달된 객체 ES6 화살표 함수인 경우 → this는 상위 스코프의 this addEventListener 안에서 호출하는 경우 → this는 event.currentTarget 의 (이벤트 리스너가 부착된) HTML 요소 나머지의 경우 → this는 windo.. 더보기 [Typescript] Enum, Union & intersection Type Enum 사용하는 이유 숫자형 문자형 사용 안 하는 이유 Union & Intersection Type Literal Type의 Union Type Intersection Type 주의할 점 1. Enum 1-0) 사용하는 이유 그림과 같이, property의 값을 한정 짓기 위해 열거형 Enum을 사용한다 이름 있는 상수들, 혹은 연관된 아이템을 묶어서 표현할 수 있다 1-1) 숫자형 초기 값을 주면 초기 값부터 차례로 1씩 증가하는 auto-incrementing; 자동 증가 기능 enum Direction { Zero = 1, One, Two, Three } // Zero - 1 // One - 2 // Two - 3 // Three - 4 // 초기화 안 하면 0부터 시작 enum의 key로 va.. 더보기 [Javascript] Event Delegation / 이벤트 위임 https://ko.javascript.info/event-delegation 이벤트 위임 ko.javascript.info 1분코딩: https://www.youtube.com/watch?v=-fFNuNsR8q4 생활코딩(버블링/캡쳐링): https://www.youtube.com/watch?v=6riJ7r6HF3o 이벤트 위임 오늘만 보기 내일만 보기 함께 보기 우리는 [사진 1]과 같은 상황에서 각 버튼에 이벤트를 설정해줄 수 있다 그러나 addEventListener 메소드로 많은 핸들러를 할당하면 웹사이트 성능이 안 좋아질 수 있기 때문에, 우리는 3개의 버튼을 둘러싼 부모태그에 한 번 이벤트를 설정한다 이를 이벤트 위임이라고 하고, 후에 새로운 컨텐츠를 추가할 떄 확장성도 더 좋아져 HTML .. 더보기 이전 1 2 3 4 ··· 6 다음
