When you make a web site whose many images need to be loaded on the screen, you should take care of the performance for rending them on the browser.

If you use React in the project code, you could install the react-lazyload package via NPM or Yarn. It differs the image loading so you can expect better performance when using this package. But this package requires the memory space for about 40KB. So you might think this is too heavy for just loading images lazily.

In this post, I’ll show you a different way of lazy loading, using Intersection Observer.

What is IntersectionObserver

Intersection Observer is the new API for detecting the element with better performance, compared to how it used to be possible years ago, for the following reasons introduced by MDN. …

Q1) Print the numbers in the right order

for (var i = 1; i <= 10; i += 1) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}// prints 10 10 10 10 10 10 ... 10

This prints ten 10s for 10 seconds. You should print the numbers in ascending order.

Q2) Write a function that can tell you whether the input is a palindrome

You can assume that the input is always a string type value.

A palindrome is a string that should be the same as when it’s reversed. For example, “tomato” isn’t a palindrome because its reversed one is “otamot”. However, “yay” is a palindrome because its reversed string is still “yay”.

function checkPalindrome(str) {}

Q3) Make a stack with a JavaScript array, which contains functions in C++

The reference of the C++ language’s stack is here. …

블로그에서 글 쓰는 것중에 제일 힘든점이 혹시 뭔지 공감해줄 수 있는 사람이 있다면 좋겠다. 타 플랫폼은 모르겠지만 미디엄에서 IT 기술 블로그의 특징은 이렇게 본론을 들어가기 전에 서론을 챙겨주는게 국룰이다. 글쓰기에서도 본론 들어가기전에 서론을 쓰는것처럼 말이다. 블로그는 해당 내용에 대해 적는것보다 여기 서론에 대체 뭘 적어야할지 정하는게 제일 어렵다. 그렇다. 지금 어떤 말을 해야할지 몰라 이런 말이나 적고 있다.

이 글은 구글 애널리틱스를 잘 모르는 사람들이 머리를 쥐어뜯는 고민을 조금은 덜어줄 수 있길 바라는 마음에서 작성했다. 나 역시 구글 애널리틱스를 전혀 모르는 상태에서 업무를 진행했어야 했고 그로 발 …

Do you like using the async/await syntax? So do I. It is better than Promise chains in my view. But I wonder if you’ve been using it properly. Sometimes it can make your program run slower than expected. In this article, I want to tell you something very important when it comes to better performance when using async/await that’s extremely easy to adopt in your project.

Before Reading

Numerous JavaScript developers have loved the async/await syntax. I think the main reason why people like this syntax is because of Promise hell, which keeps generating depths by calling then.

async/await lets developers reduce or get rid of Promise hell by using the await keyword. But have you ever thought this syntax might slow your application when it’s used in a nonoptimal way? …

Normal Login Flow

보통 반응형 웹을 작업하는 경우에는 너비와 높이 등 요소의 크기나 위치에 해당하는 값에 퍼센트(%)를 적용시켜 작업한다. 반응형 이외에도 미디어 쿼리를 사용해 너비 구간별로 CSS를 다르게 설정하는 적응형 웹도 존재하는데 모든 요소를 퍼센트로 처리하기엔 비효율적일 수도 있다.

이번 포스팅에서는 웹 CSS를 다룰 때 꼭 알고 있어야한다고 생각하는 3가지 단위에 대해 설명해보려고 한다.

읽기 전에

이 글은 누군가에겐 다소 어려울 수 있다.
CSS 로 px 정도는 사용해본 적이 있는 독자들에게 읽기를 추천한다.

CSS에서 length가 무엇일까

HTML 태그에 적용할 수 있는 값 중 예를 들어 17px 만큼의 너비를 갖는 박스가 있다고 가정해보자. 이 때 이 박스는 내부에서 …

At work, I’d been quite stressed out when I was asked to work on Google Analytics because I had zero background knowledge of it. I was like “What the heck is this?” I spent quite a lot of time to figure out how this works and what I should do to let other works see the logs on a dashboard. I hope this will help whoever doesn’t know about GA or is currently suffering.

1. Don’t Be Obsessed With Hiding the View ID

Many of you who have dealt with a session token or any credential values may be aware of how important it is not to expose them to the outside where users can take them from your site. …

One of my colleagues at work has started to implement a chat application as a third-party library of Chrome Extensions for a video streaming service. She’s been stuck in many issues that have dragged the rest of us into them, though. I’ve brought the one I think is good enough to share with other JavaScript developers.

In this article, I’m going to talk about the two methods in the EventTarget object, stopPropagation and stopImmediatePropagation, that many of you know but don’t know how to use properly.

Disclaimer

This article only deals with Vanilla JavaScript, not with using React or any other JavaScript frameworks. Thus the implementation of events may work differently elsewhere, as React works in its own way, for example, with the event system called SyntheticEvent system. …