Web Frontend Developer

이번 포스팅에서는 리액트에서 코드 스플리팅이 무엇이고 어떻게 하는지에 대한 방법을 간단하게 설명해 보려고 한다. 우리가 리액트 프로젝트를 완성한 후 서비스를 사용자에게 전달하기 위해서는 빌드를 통해서 배포해야 한다. 이 과정에서 파일 크기를 가능하면 최소화 하는 것이 바람직한데, 그 이유는 이 파일 크기가 성능을 결정하고 결과적으로 사용자 경험에까지 영향을 미치기 때문이다. 또한 브라우저에서 JSX나 최신 자바스크립트 문법 등이 문제없이 잘 실행될 수 있도록 트랜스파일링 하는 작업도 해 주어야 한다. 일반적으로 이러한 작업은 웹팩(webpack)에서 담당하며, 웹팩을 따로 설정해 주지 않으면 프로젝트의 모든 자바스크립트 파일은 하나의 파일로 합쳐지고, CSS 역시 하나의 파일로 합쳐지게 된다. 하나의 파..

이번 포스팅에서는 리액트의 Context API의 개념과 Use Cases에 대해서 정리해 본다. Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 예를 들면 프로젝트 내의 환경 설정, 사용자 정보와 같은 것들이 있을 수가 있다. 과거에는 이러한 데이터를 최상위 컴포넌트의 state에 담아서 props로 전달했었다. 하지만 이렇게 하는 경우 컴포넌트의 깊이가 깊어질 수록 거쳐야 하는 컴포넌트가 많아서 번거로움이 있었다. 이를 해결하기 위해서 Redux나 MobX와 같은 별도의 라이브러리를 사용하기도 하지만, 별도의 라이브러리가 없어도 Context API를 통해 전역 상태를 관리할 수가 있다. 지금부터 리액트 공식 문서에서 제공하는 Context API를 하..

오늘은 우아한 테크러닝 3주차(5회차, 6회차)에서 공부했던 내용들에 대해서 정리해 보려고 한다. 다섯 번째 세션 9월 15일 화요일 5번째 수업에서는 다음과 같은 내용을 다루었다. 리덕스 (Redux) 커링 (Currying) 몽키패치 (Monkey Patch) 미들웨어 (Middleware) 다음과 같이 리듀서와 스토어를 생성한 후, 스토어의 변경이 일어날 때마다 확인할 수 있는 subscribe 메서드를 사용한다. 그리고 store의 dispatch 메서드를 이용하여 action을 실행할 수 있다. import { createStore } from "./redux"; function reducer(state = { counter: 0 }, action) { switch (action.type) { ..

오늘은 우아한 테크러닝 2주차(3회차, 4회차)에서 공부했던 내용들에 대해서 정리해 보려고 한다. 세 번째 세션 9월 8일 화요일 세 번째 시간은 React에 대해 알아보는 시간이었다. 리액트가 만들어진 이유와 가상 DOM (Virtual DOM), 그리고 간단한 실습과 리액트에서 상태관리를 어떻게 하는지에 대해서 공부했다. 과거에 우리는 직접 DOM을 조작해서 JS로 화면을 그려주었다. 여기에 사용되었던 대표적인 라이브러리가 jQuery였다. list에 들어있는 데이터를 기반으로, rootElement의 innerHTML에 넣어 DOM을 직접 조작했다. 이 코드를 보면서 민태님이 몇 가지 조언을 해주셨는데 다음과 같다. 코드는 끊임없이 변화하다 보니 좀더 변화에 잘 대응할수 있는, 빠르게 수정할 수 있..

이번 포스팅에서는 리액트 컴포넌트 성능 최적화 방법들을 알아보고자 한다. 컴포넌트가 리렌더링되는 경우는 다음과 같다. 자신이 전달받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 forceUpdate 함수가 실행이 될 때 매번 하나의 변화가 생길 때 마다 모든 요소들이 다시 불러와 지면 그 갯수가 적을 때는 큰 차이가 없지만, 수 백개, 수 천개 그리고 그 이상의 요소들을 불러올 때 성능이 느려지게 될 것이다. 따라서 리렌더링을 시키는 요소들을 어느정도 통제해 줄 필요가 생기게 되는데, 여기에서 많이 쓰이는 함수가 React.memo() 함수이다. React.memo() 클래스형 컴포넌트에서는 shouldComponentUpdate라는 라이프사이클을 사용하면 되는데..

나는 이번 9월 우아한형제들에서 주최하는 우아한 테크러닝 세미나를 듣기로 했다. 원래는 오프라인으로 30명만 받아서 진행하기로 했었다는데, 코로나19 때문에 온라인으로 전환이 되면서 수백명이 들을 수 있게 되었다. 나한테는 참 다행인 것 같다. ㅎㅎ 이번 온라인 세미나는 3년차 미만의 주니어 웹 프론트엔드 개발자들을 대상으로 리액트와 타입스크립트를 중심으로 주니어 웹 프론트엔드 개발자에게 필요한 기술들을 알려준다. 나 같은 경우 지금 다니고 있는 회사에서 시니어 웹 프론트엔드 개발자가 없다 보니 시니어의 관점(?)에서 웹 프론트엔드 개발을 어떻게 바라보는지가 궁금했고 배우고 싶어서 세미나를 듣게 되었다. 한달 동안 진행이 되는데, 매주 공부한 내용들을 간단하게나마 정리해 보려고 한다. 첫 번째 세션 9월..

지난번에 웹팩에 대한 기본적인 내용을 포스팅했고, 이번에서는 웹팩을 좀 더 개발 및 배포하는 과정에서 효율적으로 쓰기 위한 기능들을 정리해 보려고 한다. 참고로 이 내용은 인프런에서 라는 김정환님의 강의를 듣고 정리한 것들을 기반으로 작성한다. 웹팩 개발 서버 (webpack dev server) 우리가 기존에 클라이언트 작업을 하고 나면 그 파일을 브라우저에 직접 로딩해서 결과물을 확인했다. 만약에 인터넷에 웹사이트로 배포를 하기 위해서는 해당 파일을 서버에서 읽고 요청한 클라이언트에 제공해야 한다. 이러한 운영 환경(production)과 개발 환경(development)을 유사하게 가져가게 되면 배포 시에 잠재적으로 생길 수 있는 문제들을 미리 찾을 수 있다는 장점이 있다. 또한 ajax 방식의 a..

이번 포스팅에서는 React Hook에 대해서 개념을 정리해 보려고 한다. 리액트 훅은 v16.8에 새로 도입되었으며 함수형 컴포넌트에서 기존에 라이프사이클 메서드가 없어서 사용할 수 없었던 기능들을 사용할 수 있게 만들어 주었다. 리액트 훅을 도입하게 된 목적은 여러가지가 있다. 먼저 컴포넌트에서 상태관련 로직을 사용할 때 레이어 변화 없이 재사용할 수 있게하기 위함이 첫번째 목적이다. 기존에는 여러가지 레이어로 둘러 쌓여있어서 구조가 복잡했기 때문이다. 두 번째 목적은 기존의 라이프사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다는 이점 때문이다. 그 외에도 클래스 기반 컴포넌트를 지양하고자 하는 목적 등도 있다. 그러면 지금부터 자주 사용하는 리액트..