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

회사에서 맡은 프로젝트 중 처음으로 다국어 지원 웹사이트를 만들게 되었다. 관리자 페이지여서 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..

CRA(Create-React-App)는 React를 사용할 때 필요한 Babel 이나 Webpack 같은 패키지들을 한번에 설치해주는 도구라서 굉장히 편리하다. CRA + TypeScript 조합으로 사용할 때도 매우 간단한 방법으로 초기 세팅을 할 수 있다. CRA + TypeScript 명령어 $ npx create-react-app ts-react-practice --template typescript ts-react-practice 부분은 내 프로젝트 명을 써주면 되므로 그곳만 교체해서 사용하면 된다. 별도의 ES LInt나 Prettier 설정을 해줄 수도 있지만 나는 VS code의 Extension을 사용하고 있기 때문에 설정해주지 않았다. 기존 프로젝트에 TypeScript 적용하기 이미..

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

체크박스 전체 선택 / 해제 기능에서 구현해야할 기능 목록 1. 최상단 체크 박스 클릭 시 전체 선택 / 해제 토글 기능 2. 전체 선택 시에 하나라도 체크가 해제되면 최상단 체크 박스 선택 해제 3. 모든 체크박스가 선택될 경우 최상단 체크 박스 선택 활성화 import { useState } from 'react'; import styled from 'styled-components'; export default function Sample() { const data = [ {id: 0, title: '선택 1'}, {id: 1, title: '선택 2'}, {id: 2, title: '선택 3'}, {id: 3, title: '선택 4'} ]; // 체크된 아이템을 담을 배열 const [check..