px | em | rem 단위 CSS에서는 요소의 크기를 지정할 때, px, em, rem 단위를 주로 사용하는데요. 이 외에도 %와 vw, vh가 있지만 비교적 간단하므로 오늘은 px, em, rem 3가지에 대해서 포스팅 해보려 합니다. 아래 설명드린 px 단위와 em을 이해한다면 rem 단위는 자연스럽게 이해될 것 입니다. 절대적 단위 px(픽셀) px 단위는 주변에 어떠한 상관관계 없이 지정한 값만큼 크기가 고정되어 표시됩니다. 어떠한 기기에서든 같은 크기로 보이는 단위이므로 고정된 크기의 값을 표현할 때 사용하면 적합한 단위입니다. 모바일 기기에서 보든 영화 스크린에서 보든 똑같은 크기로 보입니다. 상대적 단위 : em, rem 상대적 단위인 em, rem은 기준으로 하는 대상이 다릅니다. em..
2022.01.14
요즘 성능 최적화에 관심이 많아져 쓰로틀링, 디바운스 다음으로 이미지 Lazy Load를 공부해봤습니다. 제가 만든 현재 스킨에도 적용을 해서 나름 만족하고 있습니다. Lazy Load 구현 순서는 대략 이렇습니다. HTML 태그의 src 속성을 data-src 속성으로 변경 fade 효과를 줄 .fade 클래스 CSS 작성 Intersection Observer API를 사용한 함수 작성 Lazy Load의 필요성 Lazy Load 적용이 안되어있는 일반적인 웹사이트의 경우 사용자가 방문하면 브라우저는 해당 페이지의 모든 리소스를 로드시킵니다. 사용자는 페이지의 모든 내용을 확인하지 않기 때문에 보지 않은 이미지는 이미 네트워크 리소스가 낭비되는 겁니다. 이미지가 많은 웹사이트의 경우 자원의 손실은 커..
2022.01.12
Dynamic을 사용하기 전 Next.js 서버 사이드 렌더링(SSR)의 기본 동작 원리를 이해해야한다. SSR 동작 순서 클라이언트 요청 Server Side 단에서 웹 페이지를 Pre-Rendering 으로 HTML 문서 생성 생성된 HTML 문서를 클라이언트에 전송 리액트에서 번들링된 JS파일을 클라이언트에 전송 클라이언트 단에서는 HTML 문서위에 전송받은 JS 파일을 매칭 이 과정을 Hydrate라고 부른다. 서버에서 1번 클라이언트에서 1번 총 2번의 렌더링을 진행해 비효율적이지 않을까 싶은데, 서버 단에서 Pre-Redering 해주므로써, 가벼운 JS파일로 클라이언트는 빠르게 웹페이지 로딩이 가능하다. 부분적 CSR 구현을 하는 이유 SSR이 아닌 부분적 CSR 방식을 사용해야하는 이유는 ..
2022.01.05
여기서의 쓰로틀과 디바운스는 브라우저 이벤트 성능을 최적화하는 기법으로 설명합니다. 이벤트 성능 최적화 방법 디바운스(Debounce)는 중복되는 동작이 반복적으로 일어날 때 강제적으로 무시하고 마지막 동작만 실행하는 것이다. 1초에 100번 동작하는 함수가 있다고 하자. 함수가 실행될 때마다 데이터는 초기화되지만 정밀한 값을 따지지 않는 이상 사람 눈에는 1초에 한두 번 값이 바뀌어 보인다. 이 경우 성능 면에서 효율적이지 못해 최적화를 위해서 디바운스 또는 쓰로틀을 활용하면 되나, 사용자 경험과 최적화 중 어떤 것이 중점인지 파악해서 알맞게 적용해야한다. 사용자 경험 => 쓰로틀 성능 => 디바운스 이벤트 최적화 사용 예시 브라우저 resized Event Scroll 이벤트 키보드 입력 중지 lod..
2022.01.01
1. 정적 이미지 파일 사용하기 프로젝트 안에서 고정된 파일명을 가지고 있는 파일을 사용하려면 우선 프로젝트 경로에서 ./public 폴더에 파일을 넣어줍니다. import Image from 'next/image' function Avatar() { return } export default Avatar 이미지를 예로들어 ./public/me.png 경로에 파일이 존재하면 아래처럼 src 속성에 알맞게 파일명을 넣어주면 해당 경로의 파일에 접근할 수 있습니다. 공식 문서에 여러 주의사항있어 참고하면 좋겠습니다. 2. 주의사항 Next/image를 사용하려면 10 버전 이상만 사용 가능 public 폴더 명은 동적 파일 사용을 위한 유일한 폴더이므로 이름을 변경하면 안된다. pages 폴더에 있는 파일 ..
2021.12.31 2
썸네일 메이커(Thumbnail-Maker) 2021년이 끝나갈 때쯤 이것저것 만들어보기 시작했는데요. 이미지 압축해주는 웹앱부터 티스토리 스킨, 이번에는 썸네일 메이커를 만들어보았습니다. 블로그를 운영하시는 분들이라면 글 대표 썸네일을 만드는 것이 하나의 고민거리가 되기 마련입니다. 제 경우 글 내용과 유사한 사진을 픽사베이에서 찾고 파워포인트로 이것저것 수정해서 업로드를 합니다. 글을 쓸 수록 썸네일의 퀄리티는 점점 떨어지고 일관성조차 없어 나중에 글 목록에 여러 썸네일들과 함께 보았을 땐 말도 아니게 어지럽더라고요. 그래서 간단하고 직관적인 썸네일로만 빠르게 만들어 사용하려고 직접 썸네일 메이커라는 웹앱을 만들어봤습니다. 개발자 블로그인 벨로그에 토이 프로젝트로 썸네일 메이커를 만드신 분이 계신데,..
2021.12.20 8
캔버스 단색 배경 그리기 const canvas = document.querySelector('#canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#f7e017'; // 1. 배경색 지정 ctx.fillRect(0, 0, width, height); 2. 설정한 위치에 설정한 크기만큼 그리기 //(시작점, 끝점, 너비, 높이) 캔버스 그라데이션 배경 그리기 // canvas 선언 const canvas = document.querySelector('#canvas'); // 2D canvas 그리기 const ctx = canvas.getContext('2d'); // 선형 그라데이션 객체 생성 const gradient = ctx.creat..
2021.12.17
자바스크립트 이미지 복사 브라우저 API인 ClipboardItem 인터페이스를 사용해 이미지를 클립보드에 복사해 다른 곳에 붙여넣기할 수 있는데, 제 경우 html2canvas 라이브러리를 사용해 캔버스를 이미지로 변환하고 자바스크립트에서 미디어 데이터를 다루는 Blob 데이터로 변환해 클립보드로 복사했습니다. html2canvas로 캔버스 이미지 생성 캔버스 이미지 -> Blob 데이터로 변환 ClipbloadItem을 사용해 복사 이미지 클립보드 복사 예제 > npm install --save html2canvas const target = document.querySelector('#canvasWrap') html2canvas(target).then(canvas=>{ //1 canvas.toBlo..
2021.12.17
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev