FE

[React] 재귀 컴포넌트로 트리 메뉴 만들기(1)

재귀 컴포넌트 트리형 메뉴를 만들어야 하는 과제가 있었다. depth가 깊지 않다면 모든 요소들을 map으로 돌면서 렌더링해주면 되지만 자식 요소들이 많아질 경우 어떻게 구현할 지 고민이 많았다. 이 때 재귀 컴포넌트를 사용하면 된다는 것을 알았다. 재귀 컴포넌트란 말그대로 컴포넌트를 재귀적으로 만드는 것이다. 자세한 내용은 아래에서 직접 구현하면서 알아보자. 데이터 구조 [ { id: 1, name: 'Root', type: 'folder', children: [ { id: 2, name: 'Child 1', type: 'folder', children: [ { id: 3, name: 'Grand Child', type: 'file', }, ], }, { id: 4, name: 'Child 2', ty..

[React] Storybook 사용해보기

프로젝트 세팅 https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/ Storybook Tutorials Learn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the open source community. storybook.js.org 스토리북을 기존 프로젝트에 추가하려면 아래 커맨드를 터미널에 입력해주면 된다. npx storybook init 설치가 끝나면 자동으로 기본 세팅이 되어있는 것을 확인할 수 있다 아래..

React Infinite Carousel 만들기(TS)

저번에 과제를 진행하면서 캐러셀을 직접 구현해보았다. 생각보다 고려할 부분도 많았지만 재밌었다 :) 일단 좌, 우 버튼을 클릭해 양쪽으로 이동할 수 있고, 옆으로 넘기는 방식의 터치 이벤트로도 이동할 수 있도록 구현했다. React 무한 캐러셀 구현 Home/index.tsx import Carousel from 'components/Carousel' const CAROUSEL_IMAGES = [ 'https://img.freepik.com/free-photo/vivid-blurred-colorful-background_58702-2545.jpg', 'https://img.freepik.com/premium-vector/abstract-pastel-color-background-with-pink-purp..

React 스톱워치 구현하기(TS)

스톱워치를 구현해야하는 과제가 있어서 직접 구현해보았다. StopWatch.tsx import { useState, useEffect } from 'react' const StopWatch = () => { const [time, setTime] = useState(0) const [isRunning, setIsRunning] = useState(false) useEffect(() => { let interval: NodeJS.Timer | undefined if (isRunning) { interval = setInterval(() => { setTime((prevTime) => prevTime + 10) }, 10) } else { clearInterval(interval) } return () =>..

React 다크 모드 구현하기(with Recoil, SCSS)

React에서 간단하게 다크 모드를 구현해보려고 한다. 폴더 구조 ├─assets │ └─svgs ├─routes │ ├─Home │ ├─Weather │ └─_shared │ └─GNB ├─states └─types 테마 구분 states/theme.ts import { atom } from 'recoil' const initTheme = localStorage.getItem('theme') || 'light' export const themeState = atom({ key: '#themeState', default: initTheme, }) 간단하게 recoil의 atom으로 전역 상태를 만들어주었다. 기본값으로는 로컬 스토리지에 저장해 놓은 테마를, 없을 경우 밝은 모드를 지정해주었다. route..

React 프로젝트에 i18n으로 다국어 지원하기

i18n이란? 국제화(internationalization; i18n)의 줄임말이다. 언어 및 문화권 등이 다른 여러 환경에 대해 사용할 수 있도록 지원하는 것으로, 보통 텍스트 번역을 의미한다. i18n 적용하기 i18n 설치 npm install i18next i18next-browser-languagedetector react-i18next // or yarn add i18next i18next-browser-languagedetector react-i18next 언어별로 json 파일 만들기 지원할 언어별로 폴더를 만들어서 번역할 내용을 관리해준다. utils/locale/en/front.json { "gnb.home": "Home", "gnb.weather": "Weather" } utils/l..

Next.js에서 mui 사용하기(TypeScript)

얼마 전에 진행했던 기업 사전 과제에서 Next.js에 css 프레임워크를 적용하라는 조건이 있어 mui를 적용하게 되었다. react에서 개발할 때는 패키지 설치만 하면 간단하게 사용할 수 있었는데 Next.js에서는 추가적인 설정이 필요했다. mui 설치 먼저 mui를 설치한다. npm install @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/styles // or yarn add @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/styles CssBaseline 설정 CssBaseline은 Next.js에서 mui를 쓰기 위해서 필수적인 것은 ..

Next.js 시작하기 - (3) Pre-rendering, Data Fetching

Series Next.js 시작하기 - (1) Project setting, Routing Next.js 시작하기 - (2) CSS-in-JS, Custom App Next.js 시작하기 - (3) Pre-rendering, Data Fetching Pre-rendering 기본적으로 next.js는 모든 페이지를 pre-render한다. 이는 각 페이지에 대해 html을 미리 만들어두는 것을 의미한다. Initial Load 과정에서는 자바스크립트 동작이 없는 html을 먼저 화면에 보여주는데, 아직 js 파일이 로드되기 전이므로 와 같은 컴포넌트는 동작하지 않는다. Initial Load에서 html을 로드한 뒤, js 파일을 서버로부터 받아 html을 연결시키는 과정이 일어나는데 이를 Hydrati..

Next.js 시작하기 - (2) CSS-in-JS, Custom App

Series Next.js 시작하기 - (1) Project setting, Routing Next.js 시작하기 - (2) CSS-in-JS, Custom App Next.js 시작하기 - (3) Pre-rendering, Data Fetching Next.js에서 css를 적용하는 법과 앱을 커스텀하는 방법에 대해 알아보자. 1. CSS-in-JS(Styled JSX) Next.js에서는 기본적으로 CSS-in-JS를 지원한다. 따로 설정을 할 필요없이 style 태그에 jsx 옵션을 주고, {``} 안에 스타일을 작성해주면 된다. 이 때 이 스타일들은 해당 컴포넌트 내부로 범위가 한정된다. 그렇기 때문에 global style을 적용하고 싶다면 ); }; export default GNB; GNB ..

Next.js 시작하기 - (1) Project setting, Routing

Series Next.js 시작하기 - (1) Project setting, Routing Next.js 시작하기 - (2) CSS-in-JS, Custom App Next.js 시작하기 - (3) Pre-rendering, Data Fetching React 공식 문서에서는 Next.js를 아래와 같이 소개하고 있다. Next.js는 인기 있는 경량의 프레임워크로 React로 만들어진 스태틱 서버 렌더링 애플리케이션입니다. 기본적으로 스타일링과 라우팅 해결책을 가지고 있으며, 사용자가 Node.js를 서버 환경으로 사용하고 있다고 생각합니다. 이게 무슨 말인지 바로 해보면서 알아보자. 1. Project setting 프로젝트를 만들 폴더에서 아래 커맨드를 입력한다. npx create-next-app..