이번 포스팅은 웹 프론트엔드 라이브러리인 React를 사용해 간단한 블로그를 만들어 볼 것이다. 회사에서 Vue 프레임워크를 사용하다보니 1년전에 공부했던 React에 대해 거의 다 까먹은 상태이다. 왜 갑자기 React를 공부하느냐하면 ,, Vue에 대해서 조금 익숙해 지다보니 1년 전에 공부했을 때 너무 어렵게 느꼈던 React도 Vue가 익숙...

[Javascript] 디바운싱(Debouncing)과 쓰로틀링(Throttling) 이번 포스팅에서는 웹에서 연속적으로 발생되는 이벤트를 제어하여 성능을 향상시키는 2가지 방식인 디바운싱(Debouncing)과 쓰로틀링(Throttling)에 대해 알아보자. 먼저 디바운싱은 무엇일까? 디바운싱(Debouncing) 디바운스는 이벤트를 그룹...

이번 포스팅에서는 프론트엔드를 개발하면 한번쯤은 꼭 구현해보고싶은 무한스크롤을 구현해보려고 한다. 무한스크롤을 구현할 수 있는 가장 대표적인 방식은 스크롤 이벤트를 이용하는 것으로 알고 있다. 하지만 이 방식은 스크롤이 발생할때마다 이벤트가 실행되어 웹 성능이 떨어지는 단점이 있어 스로틀링(Throttling)같은 최적화 작업이 늘 동반되어야 했다....

프론트엔드를 공부하다보면 꼭 보이는 개념 4가지인 프레임워크, 라이브러리, 플러그인, 모듈의 개념 및 차이점에서 알아보자. 이 4가지들은 비슷한듯 하여 헷갈리기 쉽다. 각각의 개념과 차이점을 통해 정확히 무엇이 다른지 알아보자. 프레임워크(Framework) Framework 직역하면 뼈대/구조 이다. Frame은 틀, 규칙/법칙을 의미하고, ...

Vue에서 라우터를 설정하는 방법을 알아보자. 먼저 Vue에서 Router와 Routes의 차이는 무엇일까? $Router Router는 인스턴스를 나타낸다. Router 인스턴스는 웹 애플리케이션 전체에서 딱 하나만 존재하는 것으로 전반적인 라우터 기능을 관리한다. Router 객체의 property와 method 프로퍼티 app...

이번 포스팅은 유데미라는 사이트에서 강의를 진행하시는 Maker Jun 강사님의 Vanilla JS Lv1. 문벅스 카페 메뉴 앱 만들기 스텝1 파트를 수강하고, 배웠던 부분을 까먹지 않기위해 회고하는 포스터를 작성하려고 한다. 우선 이 강의를 수강하게 된 이유는 요즘 Vue 프레임워크로 회사에서 업무를 보다보니 Vanila JS에 대한 부족함을 계...

[CSS] CSS방법론 - BEM CSS 방법론이란 CSS 클래스 네임을 어떻게 작성할지, 어떤식으로 스타일을 작성할지 등 CSS를 보다 효율적으로 작성하는 아이디어이다. 여러 개의 CSS 방법론이 있지만 이러한 방법론들이 공통적으로 중요하게 생각하는 목표가 있다. 코드의 재사용성 용이 직관적인 클래스 네이밍 원활한 유지보수 확장...

호이스팅(Hoisting)은 자바스크립트의 고유 특징 중 하나이다. 이번 포스트에서는 변수 선언의 실행 시점과 관련된 특징인 호이스팅에 대해 알아보자. 1. 변수 선언의 실행 시점과 변수 호이스팅 console.log(score); // undefined var score; 위 코드를 실행했을때 콘솔에 에러가 나지 않고 undefined가 출력...

Javascript에서는 스코프(scope)라는 개념이 존재한다. 스코프는 범위라는 뜻으로 자바스크립트에서 어떤 의미를 가지는지 알아보자. 자바스크립트에서는 보통 변수에 값을 담아 사용하는데, 이때 변수는 지역변수와 전역변수로 나뉘어진다. 전역변수와 지역변수 자바스크립트에서 함수 안에 포함되지 않은 가장 바깥의 범위에 변수를 전역(global)...