나는 이번 9월 우아한형제들에서 주최하는 우아한 테크러닝 세미나를 듣기로 했다. 원래는 오프라인으로 30명만 받아서 진행하기로 했었다는데, 코로나19 때문에 온라인으로 전환이 되면서 수백명이 들을 수 있게 되었다. 나한테는 참 다행인 것 같다. ㅎㅎ 이번 온라인 세미나는 3년차 미만의 주니어 웹 프론트엔드 개발자들을 대상으로 리액트와 타입스크립트를 중심으로 주니어 웹 프론트엔드 개발자에게 필요한 기술들을 알려준다. 나 같은 경우 지금 다니고 있는 회사에서 시니어 웹 프론트엔드 개발자가 없다 보니 시니어의 관점(?)에서 웹 프론트엔드 개발을 어떻게 바라보는지가 궁금했고 배우고 싶어서 세미나를 듣게 되었다. 한달 동안 진행이 되는데, 매주 공부한 내용들을 간단하게나마 정리해 보려고 한다. 첫 번째 세션 9월..
지난번에 웹팩에 대한 기본적인 내용을 포스팅했고, 이번에서는 웹팩을 좀 더 개발 및 배포하는 과정에서 효율적으로 쓰기 위한 기능들을 정리해 보려고 한다. 참고로 이 내용은 인프런에서 라는 김정환님의 강의를 듣고 정리한 것들을 기반으로 작성한다. 웹팩 개발 서버 (webpack dev server) 우리가 기존에 클라이언트 작업을 하고 나면 그 파일을 브라우저에 직접 로딩해서 결과물을 확인했다. 만약에 인터넷에 웹사이트로 배포를 하기 위해서는 해당 파일을 서버에서 읽고 요청한 클라이언트에 제공해야 한다. 이러한 운영 환경(production)과 개발 환경(development)을 유사하게 가져가게 되면 배포 시에 잠재적으로 생길 수 있는 문제들을 미리 찾을 수 있다는 장점이 있다. 또한 ajax 방식의 a..
이번 포스팅에서는 React Hook에 대해서 개념을 정리해 보려고 한다. 리액트 훅은 v16.8에 새로 도입되었으며 함수형 컴포넌트에서 기존에 라이프사이클 메서드가 없어서 사용할 수 없었던 기능들을 사용할 수 있게 만들어 주었다. 리액트 훅을 도입하게 된 목적은 여러가지가 있다. 먼저 컴포넌트에서 상태관련 로직을 사용할 때 레이어 변화 없이 재사용할 수 있게하기 위함이 첫번째 목적이다. 기존에는 여러가지 레이어로 둘러 쌓여있어서 구조가 복잡했기 때문이다. 두 번째 목적은 기존의 라이프사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다는 이점 때문이다. 그 외에도 클래스 기반 컴포넌트를 지양하고자 하는 목적 등도 있다. 그러면 지금부터 자주 사용하는 리액트..
MPA (Multiple Page Application) 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이다. 사용자가 아주 사소한 요청을 해주어도(버튼 클릭 등) 매번 전체 페이지를 렌더링 해주어야 한다. 장점 SEO(Search Engine Optimization, 검색엔진 최적화) 관점에서 유리하다. MPA는 완성된 형태의 HTML 파일을 서버에서 전달받기에 검색엔진이 페이지를 크롤링하기에 적합하다. 단점 매번 페이지 전체를 새로 불러와서 렌더링 해야 하기 때문에 화면이 깜빡이는 등 성능상의 이슈가 있다. 프론트와 백이 밀접하게 연관되어 있어서 개발 복잡도가 증가한다. SPA (Single Page Application)..
모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 컴포넌트의 라이프 사이클은 페이지 렌더링 전 준비과정에서 시작하여 페이지가 사라질 때 끝이 나게 된다. 리액트 프로젝트에서 컴포넌트를 처음 렌더링할 때 어떤 작업을 처리해야 하는지, 또는 컴포넌트를 업데이트 하기 전후로 어떤 작업을 처리해야 하는지를 알아야 불필요한 업데이트를 방지할 수가 있다. 리액트의 클래스 컴포넌트는 컴포넌트 라이프사이클 메서드가 있어서 이를 사용하고, 함수형 컴포넌트는 Hook을 사용한다. 이번 포스팅에서는 컴포넌트 라이프사이클에 대해서 다뤄보도록 한다. 라이프사이클 메서드의 종류는 총 9가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 하기 전에 실행이 되며, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행이 된..
리액트는 기본적으로 가상 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는 자바스크립트의 상위 호환 언어로 정적 타입을 지원하며, 객체지향 프로그래밍을 하기 위한 문법을 제공하는 언어이다. 안정성이 높으면서 성능 면에서도 자바스크립트에 비해 크게 뒤떨어지지 않기 때문에 많은 회사들은 점점 타입스크립트를 도입하고 있는 추세이다..
