javascript 썸네일형 리스트형 [JavaScript] How to implement Image Compression 목차 1️⃣ 트러블 슈팅 2️⃣ 어떻게 할 수 있는데? 3️⃣ 이미지? 압축? 4️⃣ JavaScript로 이미지 압축하기 5️⃣ 결론 1️⃣ 트러블 슈팅 현장실습 근무를 하며 이미지 에셋의 크기를 줄여 로드 시간을 줄이고자 하였다. 이후에 🔗 피클을 보니, 이미지가 뚝뚝 끊겨 페인팅 되는 이슈가 눈에 띄더라.. 웹페이지에서 대부분의 용량을 차지하는 건 이미지이다. 이미지를 최적화 한다면, 불필요한 대역폭을 줄일 수 있고 이를 통해 업로드 작업도 빨라지기 때문에 파일을 로드하여 화면을 빠르게 그리는 것 뿐만 아니라 통신 속도 역시 향상된다. SEO 향상까지! (사실 Nextjs를 사용하면 🔗 next/image를 활용하면 대부분 해결되지만, 호기심이 생겨버렸다) 절대적인 폭을 조절한다 포맷을 변경한다 i.. 더보기 [백준 2075번][Javascript][NodeJS] N번째 큰 수 2075번: N번째 큰 수 2075번: N번째 큰 수 첫째 줄에 N(1 ≤ N ≤ 1,500)이 주어진다. 다음 N개의 줄에는 각 줄마다 N개의 수가 주어진다. 표에 적힌 수는 -10억보다 크거나 같고, 10억보다 작거나 같은 정수이다. www.acmicpc.net 문제 N×N의 표에 수 N2개 채워져 있다. 채워진 수에는 한 가지 특징이 있는데, 모든 수는 자신의 한 칸 위에 있는 수보다 크다는 것이다. N=5일 때의 예를 보자. 12 7 9 15 5 13 8 11 19 6 21 10 26 31 16 48 14 28 35 25 52 20 32 41 49 이러한 표가 주어졌을 때, N번째 큰 수를 찾는 프로그램을 작성하시오. 표에 채워진 수는 모두 다르다. 입력 첫째 줄에 N(1 ≤ N ≤ 1,500)이.. 더보기 [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 .. 더보기 [Javascript] Promise와 Async / Await Promise 우리가 API를 처리할 때나 fetch()로 데이터를 불러올 때, 비동기 작업을 하게 된다 그 때 Promise는 비동기 작업을 기반으로, pending 상태에서 ~ 결과값인 resolve / reject를 가져온다 관련 메소드들로 동기 메소드처럼 값을 반환할 수 있고, 미래의 어떤 시점에 결과를 제공한다 const promiseVar = new Promise((resolve, reject) => ( setTimeout(resolve, 3000, "Yes u r") // (handler, timeout, argument) )); promiseVar .then(result => console.log(result))// resolve 되면 실행 .catch(error => console.log.. 더보기 [Javascript][ES6] 객체 구조 분해 할당 (Object Destructuring) / 전개 구문 (Spread Operator) / Rest parameter 객체 구조 분해 할당 (Object Destructuring) 구조 분해 할당(Destructuring)은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 우리는 Object Destructuring을 알아보자. 다음과 같이 객체와 속성이 선언되어 있고, 그를 콘솔창에 출력할 때 우리는 변수를 선언한다 const human = { name: "snupi", lastName: "Lee", nationality: "KOR", favFood: { breakfast: "egg", lunch: "watermelon", dinner: "anyfood" } } const name = human.name; const difName = human.lastName;.. 더보기 이전 1 2 3 4 5 다음
