React Redux를 어떻게 적용했는지, Context API와 React Redux는 무엇이 다른지 정리해봤다. React Redux를 적용할 때 Redux Toolkit을 함께 사용했다. React Redux 공식문서에서도 Redux Toolkit을 사용하길 권장하며, 실제로 사용해보니 작성해야할 코드가 줄어들어 편했다. React Redux Redux는 action이라고 불리는 이벤트를 사용해 상태를 관리하는 패턴이며, React Redux는 Redux를 React에서 사용할 수 있는 라이브러리이다. React Redux는 Redux store에 상태를 저장하고 action을 dispatch해서 store의 상태를 변경한다. React Redux는 현재 React에서 지정한 공식 Redux UI 바인딩이다. 만약 React를 사용중이며 UI 바인딩에 Redux 개념을 이용하고 싶다면 React Redux 라이브러리가 가장 권장된다는 뜻이다. React에서 제공되는 기능과 …

React에서 props drilling을 피하고 싶거나 변수를 전역적으로 사용하고 싶을 때 상태 관리 라이브러리를 사용하곤 한다. React는 상태 관리가 가장 중요한 만큼 관련된 다양한 라이브러리들이 있다. 가장 대중적인 React Redux 부터 Recoil, Justand, Jotai, MobX 등등. 하지만 라이브러리를 사용하기 전에 React 자체 기능을 사용할 줄 알아야 한다고 생각한다. 라이브러리도 React 기능을 사용해서 만들어졌기 때문이다. 그래서 React 자체 기능인 Context API를 사용해 전역적으로 변수를 사용하는 방법을 정리했다. Context API 란? Context는 props로 전달하지 않고도 컴포넌트 트리 전체에 정보를 공유할 수 있는 수단이다. props로 전달하지 않는다는 것은 props drilling을 피할 수 있는 장점인 동시에 상태가 숨겨져 코드를 직관적으로 알아보기 힘들다는 단점을 의미한다. props를 넘겨주는 것은 단순히 …

React 프로젝트에 이미지를 사이즈 생각 안하고 넣었더니 로드하는 데 시간이 오래 걸려 이미지 사이즈를 최적화했다. 이미지 사이즈 줄이기 이미지 크기가 너무 크면 로드하는 데 시간이 걸리고 이미지 크기가 너무 작다면 화질이 저하된다. 그렇다면 이미지는 어느 정도 크기여야 적당할까? 나는 다음 말에 설득되어 이미지가 화면에서 차지하는 픽셀의 두 배 정도 크기로 이미지 사이즈를 조절했다. 단순히 화면에 표시되는 사이즈로 만들어야 한다고 생각할 수 있습니다. 물론 틀린 말은 아닙니다. 하지만 요즘 사용되는 레티나 디스플레이는 같은 공간(픽셀)에 더 많은 픽셀을 그릴 수 있기 때문에, 너비 기준으로 두 배 정도 큰 이미지를 사용하는 것이 적절합니다. - 프론트엔드 성능 최적화 가이드, 유동근 지음 화면에서 최대 너비 384px, 높이 240px로 표시되는 이미지라면 원본 이미지 사이즈를 너비 768px, 높이 480px 정도 되도록 줄였다. 이미지 화질이 그렇게 중요하지 않은 프로젝트라…

React 프로젝트를 최적화하는 방법 중 코드 분할과 지연 로딩에 대해 알게 되었다. 💡 코드 분할(Code splitting)이란? 하나의 빌드 파일을 한 번에 다운로드하는 대신 여러 파일로 분할해 필요할 때만 다운로드하는 것이다. 초기 리소스 다운로드 시간을 줄일 수 있다. 불필요한 코드 또는 중복되는 코드 없이 적절한 사이즈의 코드가 적절한 타이밍에 로드되는 것이 중요하다. 💡 지연 로딩(Lazy loading)이란? 처음 페이지가 로드될 때가 아닌, 사용자가 서비스를 이용하는 중 해당 코드가 필요해지는 시점에 분할되어 있던 코드가 로드되어 실행되는 것이다. 처음에 한 번에 로드되지 않고 지연되었다가 로드되므로 지연 로딩이다. 따로 코드 분할하지 않으면 통합된 하나의 빌드 파일을 가지게 되는데, 그러면 처음 페이지에 접속할 때 그 통합된 빌드 파일을 로드하기 때문에 당장 필요하지 않은 코드까지도 로드하게 된다. 내 투두리스트 프로젝트에서도 투두리스트 페이지에 들어가든, 로그인…

[번역] Tailwind CSS에서 혼란을 방지하기 위한 5가지 모범 사례를 읽으면서 Tailwind CSS를 사용할 때 지시문을 남용하는 게 좋지 않다는 것을 알게 되었다. Tailwind CSS를 사용하던 프로젝트의 지시문을 줄이면서 느낀 것을 적어보려 한다. Bad Practice Tailwind CSS로 클래스 이름을 작성하다 보면 너무 길어져 지저분해 보일 때가 있다. 이때 와 를 사용하면 CSS 파일에 클래스를 새로 만들어 길고 지저분하게 늘어진 클래스 이름을 간결하게 만들 수 있다. 이렇게 너무 길어 뭐가 뭔지 모르겠는 클래스 이름을, 와 를 사용해 버튼의 모양과 버튼의 색에 대한 클래스로 나눠 정의 해주면, 이렇게 알아보기도 쉽고 간결하게 만들 수 있다. 와! 가독성도 좋고 만들어 둔 클래스를 재사용할 수 있으니 너무 좋다! 이렇게 하면 Tailwind CSS의 스타일을 알아보기 힘든 단점도 보완돼! 라고 생각했지만, 이 방법은 좋은 방법이 아니었다. 추상화를 위…

무한 렌더링하는 컴포넌트를 정말 필요한 때에만 리렌더링하도록 최적화해봤습니다. 무한 렌더링을 탈출한 후, 과 를 이용해 리렌더링을 최적화합니다. 무한 렌더링 탈출하기 프로젝트는 간단한 투두리스트 앱으로 이렇게 생겼습니다. 백엔드 서버에 API 요청을 해서 투두리스트 관련 데이터를 다루고 있습니다. TodoList 컴포넌트에서 투두 리스트 데이터를 받아와 화면에 보여줘야 하는데 그러면 API 요청이 필수적입니다. 투두 리스트를 가장 최신 상태로 유지하는 것이 가장 좋지만 그러면 API 요청이 잦아지고 컴포넌트의 리렌더링도 잦아질수 있어 성능이 크게 떨어집니다. 따라서 API 요청 자체를 최적화해야 합니다. 최적화 전의 TodoList 컴포넌트는 이런 식으로 데이터를 받아오고 있습니다. 네, 맞습니다. 무한으로 데이터를 받아오는 최악의 상태입니다. 함수 안에서 함수를 통해 상태를 변화시키므로 TodoList 컴포넌트는 다시 렌더링되고 그러면 함수가 또 다시 실행되어 무한으로 즐…

React 18에서 가장 중요한 변화는 Concurrency, 동시성입니다. 동시성이 적용되기 전 동기식 렌더링의 경우, 업데이트가 렌더링을 시작하면 사용자는 화면에서 결과를 볼 수 있을 때까지 아무것도 중단할 수 없습니다. 동시성이 적용된 후 렌더링은 중단될 수 있습니다. (React 18로 업그레이드해도 createRoot 함수 등 동시성을 부여하는 기능을 사용하지 않으면 업그레이드 이전과 동일하게 동기적으로 렌더링합니다.) 동시 렌더링에서 리액트는 업데이트 렌더링을 시작하고, 중간에 일시중지한 다음 나중에 계속할 수 있습니다. 심지어 진행 중인 렌더링을 완전히 포기할 수 있습니다. 렌더링이 중단되더라도 UI가 일관되게 보일 것을 보장합니다. 이 기능을 통해 React는 메인 스레드를 차단하지 않고 백그라운드에서 새로운 화면을 준비할 수 있으며, 이것은 UI가 큰 렌더링 작업의 중간에 있더라도 사용자 입력에 즉시 응답하여 유동적인 사용자 경험을 만들 수 있다는 것을 의미합니다.…

React 프로젝트를 진행하면서 외부 라이브러리를 사용하다가 알수 없는 에러가 발생했다. 검색해도 무슨 에러인지 알 수 없어서 직접 코드를 뜯어보려고 ctrl 로 파고 들어갔는데, d.ts 파일만 나오고 인터페이스만 보여줄뿐 구체적인 코드는 안나오는 것이다. 결론적으로, 동작하는 코드는 해당 라이브러리의 여러 파일 중 어딘가에 자바스크립트 파일로 존재했다. ctrl 로 들어갈 수 없었을 뿐 존재했다. 그럼 d.ts 파일은 뭐지? 왜 존재하는지 알아봤다. TypeScript의 d.ts: 선언 파일 내가 들어갔던 파일은 TypeScript 코드로 작성한 선언 파일이다. d는 declaration, 선언을 의미한다. 선언 파일은 타입스크립트 코드가 타입을 추론할 수 있도록 선언해놓은 파일이다. 말그대로 선언 파일이어서 파일 안에 어떤 변수가 무슨 타입인지 선언해놓은 내용밖에 없다. 직접 파일에 들어가보면 수많은 declare와 인터페이스들이 반겨준다. 왜 있지? 라이브러리는 자바스크…

React로 캐러셀을 만들어보자. 캐러셀이 움직이게 만드는 건 어렵지 않았는데 CSS를 다룰 때 시간을 많이 빼앗겨서 CSS를 중심으로 설명하려 한다. Carousel이란? 직역하자면 ‘회전목마’로, 사진들이 순환하며 돌아가는 슬라이드 쇼를 나타낸다. 백문이 불여일견. 애플 홈페이지에 들어가 보자. 애플 홈페이지의 Carousel 이런 식으로 사진이 가로로 나열 왼쪽, 오른쪽 버튼을 통해 이동 가능 하다면 보통 캐러셀이라고 불린다. 내가 만들 Carousel 다양한 캐러셀들이 있지만 아래와 같이 간단한 모양의 캐러셀을 만들 것이다. 내가 만든 Carousel 내가 만들 캐러셀의 특징은 이렇다. 사진을 하나씩만 보여주고 양 옆으로 넘길 수 있음 아래에 점을 통해 몇번 째 사진을 보고 있는지 표시 1. 창틀 만들기 가로로 나열된 사진 여러개 중 하나만 보여주기 위해서 일부분만 보여주는 창틀을 하나 만든다. 일단 귀여운 코랄색 네모를 하나 만든다. 사진들을 넣었을 때 창틀에서 넘치지 않…

비동기 작업을 제어하기 위해 콜백 함수를 중첩해서 사용하면 콜백 지옥에 빠질 수 있다. 콜백 지옥에 빠져 코드의 들여쓰기 수준이 너무 깊어졌다면 가독성도 떨어지고 나중에 코드를 수정하기도 힘들어진다. 이런 콜백 지옥을 막기 위해 사용할 수 있는 방법은 다음과 같다. 이 개념들을 이용해서 비동기 작업을 동기적으로 표현할 수 있다. Promise Generator async/await 와 는 ES6에서, 는 ES2017에서 도입됐다. 이 중에서 결이 비슷하다고 생각하는 Promise와 async/await를 정리했다. Generator는 간단하게 설명하면, yield 키워드와 next 메서드를 통해 함수 내부 코드가 순차적으로 실행되도록 제어하는 것이다. Promise Promise 객체는 비동기 작업이 어떻게 될지에 대한 결과를 나타낸다. Promise는 다음 중 하나의 상태를 가진다. : 이행하지도, 거부하지도 않은 초기 상태 : 연산이 성공적으로 완료됨 : 연산이 실패함 대기 상…

GitHub 레포지토리에 작성한 코드를 무료로 배포하는 방법을 알아봅시다. 이 글은 다음과 같은 사람들을 대상으로 작성되었습니다. GitHub 레포지토리에 있는 코드로 웹 배포하려는 사람들 React를 사용하는 사람들 GitHub Pages 시작하기에 앞서, GitHub Pages는 뭘까요? GitHub Pages는 당신의 GitHub repository의 코드를 host해주는 기능입니다. GitHub repository에 코드를 올리고 몇가지 설정만 해주면 무료로 웹 배포를 할 수 있습니다. 보통 웹 배포를 직접 하려면 다음 두 가지가 필요합니다. 유료 서버 혹은 낮은 성능의 무료 서버 구하기 (비용 혹은 유지보수 문제) 그 서버에 웹 배포를 위한 여러가지 세팅을 해주기 (복잡함) 직접 웹 배포를 해보는 것도 좋지만 굳이 그럴 필요가 없는 사람들은 GitHub Pages를 쓰는 게 편합니다. GitHub Pages 들어가보기 그럼 어디서 설정할 수 있는지 알아봅시다. 설정하고 싶…

간단한 투두리스트 페이지를 만들던 중 유저가 빈 내용을 입력했을 때 빈 내용을 입력했음을 알려주는 팝업을 띄웠다가 자동으로 사라지게 하고 싶었다. 팝업 컴포넌트를 만들고 슥 나타나는 애니메이션까지는 추가했는데 다시 슥 사라지게 하는게 어려웠다. setTimeout 함수를 사용해서 2초 후에 팝업 컴포넌트를 사라지도록 상태 관리하고 1초 동안 fade in 애니메이션을, 1초 동안 fade out 애니메이션을 적용했지만 함수가 시작하는 타이밍과 애니메이션이 시작하는 타이밍이 정확하게 맞아떨어지지 않아 매우 거슬리게 동작했다. 그래서 React unmount animation로 검색해보니 보통 다음과 같은 방법을 쓰는 것 같다. animation, transition 관련 패키지를 사용하기 애니메이션 상태를 결정하는 state를 만들어서 사용하기 웬만하면 패키지는 사용하고 싶지 않았고 두번째 방법은 보통 unmount하는 시점이 특정 행동에 따라 달라질 때 사용하는 것 같았다. 나는 …

OCI에서 ubuntu 인스턴스를 만들고 nginx를 이용해서 react 프로젝트를 호스팅했다. OCI에 무료 인스턴스가 남아있어 AWS가 아닌 OCI를 사용했는데 OCI와 AWS가 좀 달라서 헷갈렸다. 인스턴스 만들고 기본적인 설정하기 먼저 OCI에 ubuntu 인스턴스를 만든다. 1. VCN 생성하고 인스턴스에 연결하기 웹 호스팅이기 때문에 인스턴스를 만든 뒤 웹과 관련된 포트를 꼭 열어줘야 한다. http로 접속하는 것을 허용하려면 80을, https로 접속하는 것을 허용하려면 443을 열어야 한다. 그러기 위해서 OCI의 VCN(가상 클라우드 네트워크) 메뉴에서 VCN을 생성한다. 아래와 같이 VCN 마법사를 통해 손쉽게 만들 수 있다. 만들어진 VCN의 공용 서브넷에 들어가 수신 규칙을 추가한다. 난 아래 체크된 것처럼 80, 443, 3000 세가지 포트를 추가해줬다. 인스턴스에 만들어둔 VCN을 적용한다. 🔥 VNIC가 생성되지 않을 때 이미 VNIC가 존재하는 …

React의 props와 state, 그리고 둘의 차이점에 대해 알아보자. props props (properties) 컴포넌트 속성을 설정할 때 사용하는 요소 props 값은 부모 컴포넌트에서 설정한다. 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용한다. props 사용하기 : 해당 속성이름으로 설정한 값 : 컴포넌트 태그 사이의 내용 : props 기본값 설정 : props 타입 설정 붙이면 필수로 지정해줘야 하는 값 컴포넌트 App에서 MyCom 컴포넌트의 props를 다음과 같이 설정했을 때, MyCom 컴포넌트가 함수 컴포넌트라면 다음과 같이 작성한다. MyCom 컴포넌트가 클래스 컴포넌트라면 다음과 같이 작성한다. props 기본값과 props 타입을 설정하는 코드는 함수 컴포넌트, 클래스 컴포넌트에 관계없이 동일하다. 함수 컴포넌트는 props를 매개변수로 받아오고, 클래스 컴포넌트는 함수에서 를 통해 조회할 수 있다. state state 컴포넌트가 자체…