Find out what’s new in this major version update

Image for post
Image for post
Photo by Bharat Patil on Unsplash

Before heading into the article, I want to say congratulations, TypeScript!

The new version of TypeScript was released a few days ago. There are quite a number of interesting features. In this article, I’ll give you some brief information about what’s been changed. (If you want to see the details, check this development note out.)

TypeScript 4 isn’t the stable version yet; it’s a beta. So you should make sure you’re really OK to use this version in your production codes since beta means they could change some features before the final release.

Variadic Tuple Types

Let’s say we have the function concat written on our TS 3.9 …


An explanation of how to load images lazily

Image for post
Image for post

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. …


You could be asked to answer in the interview!

Image for post
Image for post
Photo by Olav Ahrens Røtne on Unsplash

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. …


구글 애널리틱스 입문자가 알면 좋을 노하우

Image for post
Image for post
Photo by Markus Winkler on Unsplash

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

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


One good tip to the rescue

A Lego figure walking heroicly across a sanded beach.
A Lego figure walking heroicly across a sanded beach.
Photo by Daniel Cheung on Unsplash

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? …


프론트 개발자라면 반드시 알고 있어야하는 내용

Image for post
Image for post
Photo by Obi Onyeador on Unsplash

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

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

읽기 전에

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

CSS에서 length가 무엇일까

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


Timesavers for GA beginners

graphic report showing key web use statistics and use over time
graphic report showing key web use statistics and use over time
Photo by Stephen Phillips — Hostreviews.co.uk on Unsplash

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. …


Two important methods for handling event propagation

Image for post
Image for post
Photo by Sonny Ravesteijn on Unsplash

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. …


JavaScript

이벤트 전파를 중단시키는 두 메소드의 차이점에 대해서 설명하는 글

Image for post
Image for post
Photo by Ilya Pavlov on Unsplash

사내에 채팅 서비스에 관련한 크롬 익스텐션을 개발해 기존 프로덕트에 연결시키는 작업을 하고 있는 동료가 있었는데 익스텐션의 개발이 나를 포함해서 다들 처음 접하는 것이다보니 발생했던 여러 이슈들을 같이 트래킹하기가 쉽지 않았다. 그 중에서도 이번에 기억에 나서 정리된 글 까지 작성해보자하고 생각했었던 것이 자바스크립트의 stopPropagationstopImmediatePropagation 인데, 평소에 알고 있었다고 생각했었던 메소드들의 동작이 정확한 팩트가 아니었다는 점에 부끄러움이 들어서 제대로 다시 공부해보자라는 생각이 들었다. 그래서 이 글은 위 두 메소드에 대한 기본적인 설명과 차이에 대해서 정리를 하 …

About

Moon

Frontend React w/ Typescript developer based in S.Korea. Interested in UX/Testing/FE. Currently working at Watcha. mgyang95@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store