FrontOverflow FrontOverflow

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다. 지난 글에 이어 이번 글에서는 Redux의 Container에 대해서 알아보도록 하겠습니다. Container는 컴퓨터공학 내에서도 여러가지 의미로 사용되기 때문에 혼동하지 않는 것이 중요합니다. 영어 단어 Contain은 무언가를 포함한다는 뜻을 갖고 있습니다. 마찬가지로 Redux의 Container도 무언가를 포함하는 것을 나타내는데, 그 무엇은 바로 Redux의 state와 dispatch입니다. state가 없는 리액트 컴포넌트를 그냥 껍데기라고 한 번 해보겠습니다. 이 컴포넌트에 실제 사용자가 원하는 데이터를 표시하기 위해서는, 어딘가에서 데이터를 가져다가 집어넣어줘야 하겠죠. 여기에서 데이터는 바로 state를..

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다. 지난 글에 이어 이번 글에서는 Redux의 Reducer에 대해서 알아보도록 하겠습니다. 먼저 Reducer는 단어 자체가 생소한 분들이 많을 것입니다. 비슷한 단어로 JavaScript의 배열에 존재하는 reduce함수를 떠올리시는 분도 있을 거라고 생각합니다. reduce라는 영어 단어는 '줄이다', '축소하다' 라는 뜻을 갖고 있습니다. 비슷한 맥락으로 Reducer는 뭔가를 축소시키는 주체를 의미한다고 볼 수 있겠죠. Redux에서 Reducer는 Action들을 실제로 실행하는 역할을 하는 함수를 의미합니다. Reducer는 아래와 같은 순서대로 Action을 처리하게 됩니다. 현재 Redux Store의 stat..

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다. 지난 글에 이어 이번 글에서는 Redux의 Action과 Action Creator에 대해서 알아보도록 하겠습니다. 먼저 Action이라는 영어 단어는 어떤 행동을 하는 것을 의미합니다. Redux에서의 Action은 어떤 상태(state)의 변화를 주기 위한 행동을 의미합니다. 예를 들면, Redux를 사용해서 카운트 수를 저장하는 Counter 애플리케이션에서, 카운트 수를 올리거나 내리는 등의 행동을 Action이라고 볼 수 있겠죠. 그렇다면 실제 Redux Action은 어떻게 생겼을까요? Action이라고 해서 거창한 무언가가 있는 것이 아니라, 그냥 단순한 JavaScript 객체입니다. 다만, type이라는 문..

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다. 이번 글에서부터 총 4편에 걸쳐서 Redux의 기초 개념들을 정리해보려고 합니다. 먼저 첫 번째로 Redux의 Store에 대해서 알아보도록 하겠습니다. 컴퓨터공학에서 Store는 보통 저장소라는 의미로 많이 사용됩니다. 비슷한 단어로 Storage라는 단어를 많이 들어보셨을 거라고 생각합니다. Redux에서도 Store라는 개념이 등장하는데, 여기에서도 동일하게 저장소라는 의미를 갖고 있습니다. 즉, Redux Store는 Redux의 state들이 저장되는 저장소를 의미합니다. Redux를 사용하는 가장 큰 이유 중 하나는 각 컴포넌트에서 선언해서 사용하던 state들을 모아 한 곳에서 관리하기 위함입니다. 그리고 이렇..

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다. 이번 글에서는 TypeScript를 사용해서 리액트 개발을 할 때 유용한 PropsWithChildren 타입에 대해서 알아보도록 하겠습니다. 처음에 JavaScript로 리액트 개발을 하다가 TypeScript로 넘어오게 되면, 리액트의 다양한 타입들을 모르기 때문에 헤매는 경우가 많습니다. 그 중에서도 특히 굉장히 자주 사용되는 children의 타입을 어떻게 처리해야 하는지 모르는 경우가 많습니다. 그래서 가장 단순하게 드는 아이디어로 ReactElement 또는 JSX.Element라는 타입을 사용하여 children을 정의하고, 아래 예시 코드와 같이 사용하게 됩니다. import { ReactElement } f..

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다. 이번 글에서는 redux-devtools에 대해서 알아보도록 하겠습니다. redux-devtools는 이름에 담긴 의미 그대로, Redux를 사용해서 개발할 때 디버깅을 도와주는 도구입니다. 보통 Redux를 사용해서 개발하다 보면 action과 reducer들이 굉장히 많아지게 되는데, 그렇게 되면 어떤 action들이 실행되어서 현재의 state가 되었는지 파악하기가 굉장히 어렵습니다. 짧은 시간에 수많은 action들이 빠르게 실행되기 때문이죠. 또한, 각각의 action들의 내부 payload를 파악하기도 힘들고, 해당 action으로 인해 state에 어떤 변화가 생겼는지를 파악하기도 힘듭니다. 그래서 나온 것이 ..

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다. 지난 글에 이어서 최근에 업데이트 된 Next.js 13.2의 업데이트 내용을 살펴보도록 하겠습니다. 이번 글에서 소개할 업데이트 첫 번째 내용은 Statically Typed Links (Beta) 입니다. 이 기능은 아직 정식 출시가 아닌 Beta로 소개되었는데요, Next.js에서 링크를 걸기 위해서 사용하는 next/link 컴포넌트에 정적 타이핑을 해주는 기능이라고 보시면 됩니다. 쉽게 말하면 Link 컴포넌트를 사용할 때 오타가 들어가는 경우가 있는데, 이러한 것을 미리 찾아내주는 기능입니다. 아래와 같이 링크 주소에 오타가 있을 경우 이를 찾아내 주는 것이죠. import Link from 'next/link'..

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다. 지난 글에 이어서 최근에 업데이트 된 Next.js 13.2의 업데이트 내용을 살펴보도록 하겠습니다. 먼저 살펴볼 내용은 MDX for Server Components 입니다. MDX는 이름에 X가 들어있는걸 보면 살짝 그 의미를 유추해볼 수 있는데, Markdown 파일에서 JSX를 사용할 수 있도록 해주는 Markdown의 superset입니다. 즉, MDX를 사용하면 Markdown 파일 내에서 리액트 컴포넌트를 사용할 수 있다는 것이죠. 최근 들어 Markdown이 굉장히 많은 곳에서 사용되고 있으며, Markdown 문서 내에 다양한 컨텐츠들을 embed시킬 수 있는 플러그인들이 많이 나와 있습니다. 그런데 MDX..