React

Tailwindcss와 Css-in-js 함께 사용하기 (twin.macro)

tailwindcss는 분명 장점이 있는 CSS 작성법이다. 다만, 어떤 경우에는 tailwindcss만 사용하는 것이 생산성을 떨어트릴 수도 있다. 🍋 예를 들면, 스타일이 많이 적용될 경우 인라인으로 클래스명이 너무나도 길어질 수 있다. (코드 가독성 저하) 이런 경우, 기존에 사용했던 styled-component나 emotion과 같은 css-in-js 라이브러리가 그리워지는데 이 둘을 모두 함께 사용할 수 있게 도와주는 오픈소스 라이브러리가 있다. 🍵 twin.macro (with. emotion) twin.macro의 깃허브 리드미를 살펴보면, 친절하게 각 환경에서 세팅하는 방법을 알려주고 있다. 그중에서 난 CRA 환경에서 emotion을 사용하여 개발 환경을 구축해보았다. styled-co..

React에서 다국어 지원하기 (i18next, react-i18next)

하나의 웹에서 여러 국가의 언어를 지원하는 것은 흔히 볼 수 있는 케이스이다. 다만, 이것이 어떻게 구현되었는지 아는 것은 쉽지 않았는데 우연히 RN ignite를 사용해보고 어떻게 구현되었는지 알 수 있었다. i18n-js 혹은 i18next와 같은 라이브러리를 사용하여 다국어를 지원하는 웹 사이트를 제작할 수 있다. i18next i18n-js보다 월등히 많이 사용되는 라이브러리로, 이를 통해서 다국어를 지원할 수 있다. https://www.npmjs.com/package/i18next i18next i18next internationalization framework. Latest version: 22.4.15, last published: 14 days ago. Start using i18nex..

useEffect의 life cycle

useEffect는 언제 실행되고 언제 실행이 멈출까. useEffect의 life cycle에 대해서 알아보았다. 모든 React 컴포넌트는 다음과 같은 생명주기를 가진다. 컴포넌트는 화면에 추가될 때 mount된다. 컴포넌트는 새로운 props나 state를 받았을 때 업데이트된다. 컴포넌트는 화면에서 제거되었을 때 unmount된다. useEffect는 컴포넌트 내부에 존재하기에 위와 같은 생명주기를 따라간다고 생각할 수 있으나, 완전 별개의 생명주기를 가진다고 봐야 한다. useEffect(() => { // 동기화 시작 return () => { // 동기화 해제 } }) useEffect는 기본적으로는 동기화를 위해서 사용되는 hook이다. 예를 들면, 실제 데이터와 화면 사이에 불일치가 발생..

Vite를 사용하여 React 프로젝트 시작하기

새로운 리액트의 공식 문서를 보면, 새로운 리액트 프로젝트를 시작하는데 3가지 프레임워크를 소개한다. https://react.dev/learn/start-a-new-react-project Start a New React Project – React The library for web and native user interfaces react.dev Next, Remix, Expo가 그들이다. (Expo는 나머지 둘과는 다르게 React Native 프레임워크이다) 이제는 CRA를 사용하지 않고 프레임워크를 사용하는 것이 어쩌면 React의 대세가 된 것 같기도 하다. 그래도 Next와 같은 프레임워크를 사용하지 않고 React 프로젝트를 진행하는 것을 아는 것이 중요하다고 생각했기에, 기존에 CRA보..

React18의 <Suspense>에 대해서

Suspense는 리액트에서 기본적으로 제공하는 컴포넌트로, 자식 컴포넌트가 로딩이 될 때 까지 fallback을 보여줄 수 있다. 즉, 기존에 사용하던 isLoading 상태를 이용한 패턴을 더 간단하게 사용할 수 있게 해주는 컴포넌트이다. Suspense 내부에 들어가는 Content 컴포넌트이다. import { useEffect, useState } from "react"; let tmp = ""; const getData = () => { return new Promise((resolve, reject) => { setTimeout(() => { tmp = "Hello Mr.Park"; resolve(true); }, 3000); }); }; const Content = () => { const..

tailwindcss 중복 클래스 줄이기 (@layer, @apply)

tailwindcss의 가장 큰 문제점은 스타일이 많이 들어가면, 태그에 클래스 이름이 너무나도 길어진다는 점이다. 이를 해소하기 위해서 여러 방법을 사용할 수 있겠지만, 여기서는 @layer와 @apply를 사용하여 중복 클래스를 글로벌하게 사용하는 법에 대해서 다룬다. tailwindcss를 설정하고 나서 기본적인 globals.css의 내용은 다음과 같을 것이다. @tailwind base; @tailwind components; @tailwind utilities; /* reset css https://meyerweb.com/eric/tools/css/reset/ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p..

React 정리

개발을 하다보면, 사용중인 라이브러리나 프레임워크의 장점을 이해하고 그에 맞게 코드를 작성하는 게 중요하다고 느껴질 때가 있었다. 라이브러리를 사용한 이유가 명확하지 않으면 오히려 프로젝트의 최적화를 망칠 수 있다는 생각이 들었기 때문이다. 따라서 초심으로 돌아가 가장 기본적인 React에 대해서 다시 공부하고 정리하였다. React는 메타(구 페이스북)에서 개발한 오픈소스 자바스크립트 라이브러리로, 프론트엔트 개발에서 현재 지배적인 위치를 가지고 있다. 사용자 인터페이스 개발을 컴포넌트 단위로 하여 생산성을 높일 수 있다. 독립적으로 개발된 컴포넌트들이 합쳐져 하나의 페이지를 구성할 수 있도록 리액트는 설계되었다. 🍓 리액트의 세 가지 특징 1. 선언형 프로그래밍 (Declarative) 리액트는 한 ..

유지보수하기 좋은 React 코드를 작성하는 방법에 대한 고찰

React는 사용하기 편한 라이브러리라고 생각한다. 단순한 웹 페이지를 만드는데 있어서 리액트는 배우기 쉽고, 또한 사용하기도 간단한편이라고 느낀다. 하지만, 실제 서비스되는 클라이언트 웹은 수십, 수백개의 상태와 수백, 수천개의 컴포넌트로 이루어지는 거대한 프로젝트일 것이다. 모든 개발자가 새로운 서비스를 구현하지는 않을 것이고, 내가 작성한 코드는 언젠가 다른 이에 의해서 유지 보수되어야 할 것이다. 때문에, 읽기 쉽고 수정하기 쉬운 코드를 작성하는 방법에 대해서 생각해보았고, 이를 기록으로 남기고자 하였다. 🍎 지극히 주관적인 생각으로 쓰인 글이므로, 틀린 내용이 많을 수도 있습니다. 따라서 댓글로 의견을 남겨주시면 감사하겠습니다. 추상화 (abstract) 올바른 표현인지는 모르지만, 추상화라고 ..