웹 프론트엔드 개발 노하우(21)
-
Intersection Observer API
Intersection Observer 는 특정 Element 들을 감시하면서 해당 요소가 이용자의 브라우저 화면 안에 들어왔음을 탐지하면, 지정된 함수가 실행되도록 만들 수 있는 객체입니다. 사용법은 다음과 같습니다. // 먼저 observer 객체를 생성합니다. const observer = new IntersectionObserver(callback, options) // 생성 후 어떤 요소를 감시할 것인지를 지정합니다. 하나가 아니라 여러개를 하나의 // 옵저버로 감시할 수도 있습니다. IntersectionObserver.observe(element) Callback Function callback 은 말할 것도 없이 Intersection 이벤트가 발생했을 때 실행될 함수입니다. 이 콜백함수는..
2020.11.25 -
자바스크립트 코딩 컨벤션
이 글은 아래의 영상 내용을 기반으로 작성되었습니다. www.youtube.com/watch?v=RMN_bkZ1KM0 정말 잘 짜여진 코드는 마치 사람의 산문처럼 읽힌다고 어느 유명 개발자가 말했습니다. 이러한 코드를 만들 수 있는 몇가지 컨벤션을 살펴봅시다. Magic Number & String 절대 그냥 숫자나 문자열을 사용하지 마십시오. 코드를 작성하는 시점의 당신은 그 숫자나 문자열이 뭘 뜻하는 것인지 잘 알겠지만, 미래의 당신, 혹은 다른 개발자는 그 숫자나 문자열이 무엇을 의미하는 것인지 알기 어려울 수 있습니다. 써야한다면 반드시 상수에 담아 사용하십시오. 이때 상수 이름은 대문자와 _(underscore) 로만 이루어지는게 일반적입니다. const SECONS_IN_A_DAY = 8640..
2020.11.24 -
크롬 개발자 도구의 Performance 탭 다루기 - 기본편
이 글은 아래 링크의 글을 바탕으로 작성되었습니다. 당연하지만, 이 글이 웹 프론트엔드 성능 분석의 모든 것을 담고 있는 것은 아닙니다. 하지만 가장 기본이 되는 방법론을 다루고 있습니다. 시작해요, 런타임 성능 분석 | Chrome DevTools | Google Developers 시작해요, 런타임 성능 분석 | Chrome DevTools | Google Developers Chrome 개발자 도구에서 런타임 성능을 평가하는 방법 developers.google.com Network 패널 or Performance 패널 네트워크 패널은 자원들이 제대로 다운로드 되었는지의 여부, 캐시여부, 그리고 다운로드된 자원들의 다운로드에 걸린 시간, 세부 정보들을 보고 싶을 때 유용하게 사용할 수 있는 패널입니..
2020.11.14 -
크롬 개발자 도구로 CSS 다루기
이 글은 아래 링크의 내용을 기반으로 작성되었습니다. 흔히 경험적으로 알수 있을 만한 내용은 다루지 않았습니다. Get Started With Viewing And Changing CSS | Chrome DevTools Get Started With Viewing And Changing CSS | Chrome DevTools Learn how to use Chrome DevTools to view and change a page's CSS. developers.google.com 임시로 적용해볼 css class 생성 Element 패널 안의 Styles 탭에서 .cls 를 클릭하면 됩니다. 특정 요소에 임시로 적용해볼 pseudo 상태를 적용 요소를 선택한 후, Element 패널 안의 Styles 탭..
2020.11.12 -
HTML로 이메일 템플릿 제작하기
제가 활동하고 있는 문예 단체에서 문예지를 구독하는 독자들이 작품을 이메일에서 받은 즉시 볼 수 있도록 이메일 HTML 템플릿을 만들어 달라는 부탁을 받았습니다. 처음엔 단순한 퍼블리싱 작업인 줄 알았지만 생각 이상으로 장애가 많아서 혹시 저처럼 퍼블리싱을 통해 이메일 템플릿을 제작하고 싶은 개발자, 디자이너가 있다면 참고하실 수 있도록 글을 작성해보기로 했습니다. 염두에 두어야 하는 제한사항들 사실 조심성이 많은 사람이라면 이메일로 어느 정도의 컨텐츠를 보낼 수 있는지 궁금해하고 인터넷을 뒤져볼 것입니다. 그러나 정보들이 산발적으로 흩어져 있어서 이곳에서 어떤 것을 이메일 컨텍스트 내에서 구현할 수 없는지, 어떤 제한 사항이 있는지를 정리해보겠습니다. 자바스크립트 탑재 불가 일반적인 html 에는 태그..
2020.11.05 -
CSS Animation (Transition & Keyframes)
[ transform ] transform 속성 : 해당 요소의 위치나 크기를 바꾸는 속성으로, 값으로 translate(200px, 400px) 혹은 translateX(200px), translateY(400px)를 줄 수 있습니다. 혹은 해당 요소의 크기를 바꾸는 속성으로, 마찬가지로 scale(0.5, 2), scaleX(0.5), scaleY(2)를 줄 수 있습니다. 혹은 요소를 회전시키기 위해 3차원 에서 해당 요소를 가로축, 세로축에서 회전킨다 rotate(60deg, 90deg), rotateX(60deg), rotateY(90deg), 그리고 요소를 시계방향으로 회전시키는 rotateZ(180deg)를 쓸 수 있다(마이너스값을 주면 반시계 방향으로 회전). transform 이 일어나는 ..
2020.10.22