맨 땅에 프론트엔드 개발자 되기

요즘 우리나라 개발 커뮤니티를 보면 recoil + react-query 조합을 사용하는 것이 최신 트렌드로 자리 잡고 있는 듯하다. (요즘이 아니라 1~2년 된 트렌드 같다. 2023년 기준) 그러나 남들이 사용한다고 다 따라서 사용하면 면접에서 질문을 받을 때 당황할 수 있기 때문에(?)가 아니라 사용하는 라이브러리의 스펙을 정확히 알고 만드는 제품의 성능을 향상시키기 위해 차이점을 알고 사용하면 좋을 것 같아서 한번 정리해보려고 한다. (이 글은 개발 지식이 매우 미천한 자의 미숙한 글이므로 참고만 부탁드리며, 사실이 아닐 경우 정정을 해주시면 매우 감사하겠습니다.) @reduxjs/toolkit vs recoil vs zustand 대표적인 리액트 상태관리 툴인 redux는 이미 너무 많은 사람들..

회사에서 맡은 프로젝트 중 처음으로 다국어 지원 웹사이트를 만들게 되었다. 관리자 페이지여서 SEO는 따로 필요 없었기 때문에 React로 진행하기로 했고, 그에 따라 react-i18next 사용방법을 정리해보기로 했다. 서버에서 다국어 지원을 제공하는 next-i18next 라이브러리도 있다. 다른 큰 회사에서는 어떤 방식으로 번역문을 관리하는지 모르겠지만 작은 프로젝트 단위에서는 json 방식으로 직접 보관하는 방법을 사용할 수 있다. (더 규모가 큰 프로젝트에서는 개발자가 아닌 번역 담당자가 번역문을 수정할 수 있도록 다른 방법을 찾아봐야 할 것 같긴 하다.) 단계 1: 패키지 설치 우선, 프로젝트 내에 react-i18next와 i18next 패키지를 설치한다. $ npm i react-i18n..

이러한 메뉴 혹은 모달, 그리고 커스텀 셀렉트박스를 만들 때, 외부 영역을 클릭하면 닫히게 만들고 싶을 경우, 사용하는 방법은 크게 두 가지가 있다.useState 활용하기import React, { useState } from "react"; const Sample = () => { const [isDropMenuOpen, setDropMenuOpen] = useState(false); const toggleDropMenu = (e: React.MouseEvent) => { e.stopPropagation(); // 이벤트 캡쳐링 방지 setDropMenuOpen(prevState => !prevState); } return ( setDropMenuOpen(false)} > print download ..

React Router는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있다. v6로 업그레이드 되면서 React Hooks 를 기반으로 한 React Router Hooks 들이 추가되었다. 쿼리스트링 파서(parser)를 따로 설치하지 않아도 될 정도로 편리한 기능들이 있어서 정리해보려고 한다. 기본 설치 $ npx creat-react-app react-router-practice $ npm i react-router-dom 프로젝트에 라우터 적용 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { BrowserR..

오늘 만난 에러는 폼 양식 수정 페이지를 만들면서 마주했다. 폼 양식이 있고, 비동기 API로 기존 정보를 불러와 input 텍스트 타입 안에 defaultValue를 설정하는 것이었다. 당연히 수정이 가능해야 하므로 value로 설정하지 않고, defaultValue로 설정했다. 플로우는 이러하다. useParams로 수정할 아이템의 id 값을 읽어들인다. redux-saga를 이용해 비동기 API에 id 값을 넘겨 기존 정보를 요청한다. redux의 상태 값에 받은 정보를 업데이트 하면 상태가 업데이트 되므로 리렌더링이 일어나 defaultValue 값에 설정해 둔 상태가 리렌더링 되어 기존 정보를 input 값에 보여준다. 이것이 나의 시나리오였다. 그러나 웬걸 defaultValue가 불러와지지 ..

나는 어떤 일을 할 때, 그 일을 왜 하는지가 이해가 되어야 한다. Redux-Saga를 처음 배울 때 비동기를 처리하기 위해 왜 Redux-Saga를 사용할까 이해가 되지 않았다. 컴포넌트 내부에서 비동기 로직을 실행하고 난 뒤에 디스패치를 하면 되는 거 아닌가? 라고 생각했었다. 왜 Redux-Saga를 사용하는가? 디자인 패턴이라고 들어보았는가? 진짜 잘하는 개발자는 소프트웨어 설계부터 비즈니스 로직이 안정적으로 구현되고 가독성 좋은 코드를 짜기 위해 고민한다고 한다. Redux-Saga는 갑자기 어디서 뿅하고 튀어나온 게 아니라 이 디자인 패턴을 고민하다가 나온 결과물이라고 할 수 있다. - Saga 패턴 Saga 패턴에 대한 설명을 찾아보면, "saga 패턴은 분산 애플리케이션의 일관성을 유지하..