타입스크립트란? 요즘 신입 프론트엔드 개발자 채용 공고를 보면, 우대사항 혹은 기본 자격사항으로 까지 타입스크립트를 할 줄 아는 사람을 뽑는 기업들이 많아지고 있다. 도대체 타입스크립트란 무엇이며, 현재 개발자들에게 인기가 많은 이유는 무엇일까? (자바스크립트를 공부한 사람들은 알 것이다. 자바스크립트가 얼마나 지X맞은 언어인지..) Node.js의 등장으로 자바스크립트 언어를 다양한 플랫폼에서 사용할 수 있게 되었으며, 이로 인해 자바스크립트의 사용 범위가 확대되었지만, 동시에 자바스크립트의 한계점도 함께 부각되었다. 애플리케이션의 안정성을 고려할 때, 자바스크립트는 어느 정도 엄격성이 필요하게 되었고, 이러한 요구들에 의해 여러 가지 대안을 갖추게 되는데 이것이 바로 오늘날 타입스크립트가 되었다. 즉..

useRef()란? useRef()는 리액트의 Hooks 중 하나로, 함수 컴포넌트 내에서 변수를 유지하고 싶을 때 사용한다. 또한, DOM 요소에 접근하기 위해 참조를 생성하기도 한다. 예를 들어, 특정 DOM 요소의 크기나 위치를 가져오거나 스크롤 바 위치를 가져와야 할 때, 엘리먼트에 포커스를 설정해줘야 할 때 등의 작업을 수행할 때 많이 사용한다. useRef()를 호출하면 반환되는 객체는 current라는 속성을 가지고 있는데, 이 속성을 통해서 변수를 유지할 수 있다. current 속성의 값은 첫 번째 렌더링 이후에도 유지되며, 이 값을 변경해도 컴포넌트가 리렌더링 되지 않는다. (DOM을 선택하든 변수를 담든 무조건 current 속성을 가져와야 한다. useRef는 current와 한 몸..

중첩 라우팅이란? 중첩 라우팅(Nested Routing)이란 라우팅 구조를 계층적으로 구성하는 방법으로 부모 컴포넌트의 경로에 딸린 자식 컴포넌트들의 경로를 정의하는 것을 의미한다. 쉽게 말하면 abc.com/users가 일반 라우팅이고, abc.com/users/name/shawn이 중첩 라우팅이다. 즉, 부모 컴포넌트의 경로 뒤에서 자식 컴포넌트의 경로가 추가되는 것이다. 사용 예시 // App.js const App = () => { return ( ) } // Home.js const Home = () => { return ( 이곳은 홈입니다. // Users 컴포넌트가 들어갈 자리 ) } 라우트 안에 또 라우트를 넣어서 중첩 라우팅을 구현할 수 있다. 위의 코드는 "/home" 안에 "user..

Promise.all이란? 비동기 처리를 하는 Promise 객체가 여러 개일 경우에 이 비동기 객체들이 모두 처리되었는지를 확인하고 싶을 때가 있을 수 있다. 예를 들어, A, B, C라는 3개의 Promise 객체가 있다고 하자. 각각의 객체는 변수 data에 값을 넣어주는 기능을 갖고 있다. 나는 data에 모든 값들이 채워지면 "data 완성!"이라는 문구를 띄우고 싶다. 이때, 필요한 건 A, B, C라는 비동기 함수들이 모두 resolve 되었는 지를 확인하는 것이다. 이 역할을 해주는 게 바로 Promise.all이다. Promise.all()은 인자로 배열 혹은 순회할 수 있는 iterable한 객체를 받으며, 이 안에 들어간 Promise 객체들의 resolve 혹은 reject의 값을 ..

Intersection Observer란? Intersection Observer란 브라우저 뷰포트(브라우저 화면에 보이는 것)와 설정한 요소의 교차점을 관찰해서, 그 요소가 뷰포트에 있는지의 여부를 감시하는 비동기적 기능을 말한다. 쉽게 말하면 스타크래프트의 옵저버처럼 내가 감시하고 싶은 유닛을 지정하면 그 유닛이 내 시야에 들어오는 순간을 알려주는 기능이라고 생각하면 된다. (물론 스타크래프트의 옵저버는 따로 감시할 유닛을 지정하지는 않지만..) ⚠️ 이 글은 해당 API의 세세한 기능 설명을 담고 있지 않으며, 단순 구현 방법만을 설명하고 있습니다. 해당 포스팅에서는 Intersection Observer API이란 무엇이며, 간단히 구현하는 방법 정도만을 소개하고 있고 해당 API의 다른 메서드 ..