react

리액트는 기본적으로 가상 DOM(Virtual DOM)을 사용하기 때문에 DOM 조작으로 인한 브라우저 렌더링 과정 리소스를 최소화한다는 장점을 가지고 사용한다. 따라서 가능하면 리액트에서 DOM을 직접 건드리는 일은 지양해야 한다. 하지만 개발을 하다 보면 DOM을 직접 건드려야 하는 상황이 생기게 된다. 이럴 때 사용하는 개념이 ref(reference의 줄임말)이다. 우리가 일반적으로 어떤 컴포넌트에서 조작이 일어날 때 DOM을 변화시키는 경우 state를 사용한다. 함수형 컴포넌트에서는 useState를 사용할 수 있다. 하지만 state만 가지고 해결할 수 없는 경우도 존재한다. 예를 들면 특정 DOM 노드에 접근하여 포커스, 미디어 재생 등을 제어하거나 사이즈를 얻어올 때 스크롤 박스 조작하기..

리액트를 사용하여 프론트 개발을 할 때 두 가지 방법으로 컴포넌트를 선언할 수가 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다. 두 가지 방법에 대해 모두 다 잘 알고 있으며, 필요한 상황에 맞게 사용하는 것이 중요하므로 각각의 방법에 대해서 좀 더 깊이있게 살펴보도록 한다. 먼저 컴포넌트의 기능을 한 번 짚어보고 가도록 하자. 컴포넌트는 단순한 템플릿 이상의 기능을 수행한다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들..

이번 포스팅에서는 React, TypeScript. Redux, Redux-Saga를 통해서 간단한 뉴스 어플리케이션을 만들어 보려고 한다. React는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다. 현재 전 세계에서 가장 많이쓰이고 있는 웹 프론트엔드 라이브러리이다. 어플리케이션의 뷰(View) 부분에 특화되어 상태에 해당되는 데이터들만 빠르게 주고받으며 우수한 성능을 가지는 어플리케이션을 만들 수 있다는 장점이 있다. TypeScript는 자바스크립트의 상위 호환 언어로 정적 타입을 지원하며, 객체지향 프로그래밍을 하기 위한 문법을 제공하는 언어이다. 안정성이 높으면서 성능 면에서도 자바스크립트에 비해 크게 뒤떨어지지 않기 때문에 많은 회사들은 점점 타입스크립트를 도입하고 있는 추세이다..

서류를 통과하면 그 다음에 주어지는 전형은 보통 코딩테스트나 사전과제, 서면 질문지 등이 있었다. 때로은 이러한 절차 전에 스크리닝 인터뷰를 하는 경우도 있었다. 인터뷰는 다음 포스팅에서 다룰 예정이고 이번 포스팅에서는 코딩 테스트와 사전 과제에 대해서 이야기를 해 보려고 한다. 코딩 테스트 코딩 테스트는 일반적으로 가장 자신 있는 언어를 사용하여 알고리즘 문제를 푸는 경우가 제일 많다. 때로는 언어를 지정해 주는 경우도 있다. 웹 프론트엔드의 경우 자바스크립트로 지정해주는 식으로 말이다. 그리고 간혹 알고리즘이 아닌, Vanilla JS나 React를 사용하여 특정 기능을 구현하는 코딩테스트를 본 적도 있었다. 이 경우는 코딩 테스트와 과제 전형을 섞어놓은 느낌을 받았다. ㅋㅋ 나의 경우 어디 가서 알..