코딩하는라민

[React] 컴포넌트 최적화를 위한 React.memoReact.memo 란?`React.memo` 는 고차컴포넌트(HOC)로 컴포넌트 자체를 `메모이제이션`한다.컴포넌트의 props 가 바뀌지 않은 경우, 리렌더링을 방지해 컴포넌트의 성능을 향상시킬 수 있다. 컴포넌트의 props 가 변한다면 다시 리렌더링된다. 사용방법사용 방법은 간단하다. 리렌더링을 막고자 하는 컴포넌트를 `memo` 로 감싸주면 된다.props 가 없는 컴포넌트도 사용이 가능하다.import { memo } from 'react'function MyComponent(props) { return ( {props.title} {props.content} )}export default memo(My..

[React] useModal Hook 여러 개의 모달 관리하기 useModal Hook 이란?`useModal` hook 은 React 에서 모달을 간편하게 관리하기 위한 방법이다.useModal hook 을 통해 열기, 닫기 상태와 같은 모달과 관련된 로직을 모듈화해서 재사용할 수 있다. 왜 커스텀 훅을 만들어서 사용할까?모달을 사용할 때 모달을 열고 닫기 위해 `isOpen` 라는 state 를 사용한다.하지만 여러 페이지에서 모달을 사용할 경우 각 컴포넌트마다 isOpen 을 매번 선언해줘야한다.import { useState } from "react"import LoginModal from "@/components/modalsLoginModal"const Home = () => { const ..

[React] React Portal 사용하기  Portal 이란?리액트의 `Portal` 은 리액트 애플리케이션에서 DOM 트리의 다른 위치로 자식 요소를 렌더링하는 기능을 제공한다. 리액트는 body 태그 아래에 root 라는 id 를 가진 진입점에 가상 DOM 을 형성하고 실제로 모든 컴포넌트를 렌더링을 한다. Portal 은 새로운 진입점을 만들어서 부모 요소의 DOM 트리 구조와 별개의 위치에 컴포넌트를 렌더링하는 기능이다. 공식문서Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. Portal 을 사용해서 독립적인 위치에 컴포넌트를 렌더링하면 코드가 간결해져 유지보수성이 증가한다.부모의 스타일에 영향받지 않아 스타일링 충돌을 ..

[React+TS] Styled-components theme 적용하기  이전 프로젝트들은 GlobalStyle 에 `:root` 를 이용해 테마 색상을 정의해서 사용했다. styled-components 에도 이러한 기능이 내장되어 있어 사용해보고자 한다. styled-components 는 `The..

[React] React-Router 컴포넌트 VS 컴포넌트 리액트 프로젝트에서 페이지의 이동을 하기 위해서 리액트 라우터를 이용한다. 리액트 라우터이서 Link 컴포넌트를 통해 페이지를 이동할 수 있었는데, v4 업데이트 이후에 등장한 Link 컴포넌트의 업그레이드 버전인 NavLink 컴포넌트가 등장했다. 기능이 추가되었지만 성능 상에는 큰 차이가 없기 때문에 다양한 측면에서 NavLink 를 사용하는 것이 효율적이다. 우선 Link 컴포넌트는 무엇이며 어떻게 사용하는지 간단히 알아보고, NavLink 의 추가적인 기능에 대해 알아보자. 컴포넌트 a 태그와 차이점 Link 컴포넌트는 a 태그와 기능이 유사하다. 하지만 다른점이 있는데 페이지 전환을 방지한다는 것이다. 브라우저의 주소를 바꿀 뿐이지 페..

[Supabase] Supabase 로 백엔드 없이 Database 구축하기(기본 사용법) 프론트는 토이프로젝트 시 공공 데이터를 이용하지 않는 이상 CRUD 를 경험해보기 쉽지 않다. `Firebase` 라는 좋은 서버리스 툴이 있지만, `noSQL` 이기 때문에 정말 간단한 CRUD 기능만 구현이 가능해 다양한 기능을 구현하는 것이 불가능해서 불편한 경험이 있다. `Supabase` 에서는 `Postgre SQL` 을 지원한다. 따라서 이 Supabase 를 이용하면 백엔드 개발자 없이도 쉽게 데이터베이스를 구축할 수 있는 것이다! Supabase 란? Supabase 는 Postgre SQL 데이터베이스 기반으로 하는 오픈 소스 백엔드 서비스이다. 이 서비스를 이용하면 백엔드 없이도 쉽고 빠르게 데..

[React, Vite] Vite 에서 .env 환경변수 사용하기 Vite 로 구성된 React 프로젝트를 다루다가 다음과 같은 에러를 마주쳤다. 환경변수 사용을 위해서 .env 파일에 외부로 노출되면 안 되는 key 값을 저장했고, 불러오는 과정에서 발생한 에러였다. 환경 변수란? 환경변수란 프로세스가 실행될 때 사용되는 동적인 값을 말한다. 데이터베이스 연결 정보, API Key, Port Number 등을 환경변수로 설정할 수 있다. 외부로 노출되면 안 되는 중요한 정보의 경우 소스코드에 직접 하드코딩하는 것이 아닌 환경 변수로 관리해야 보안성을 강화할 수 있다. Vite 에서 환경 변수 사용은 다르다. Node.js 환경에서는 `process.env` 를 사용하여 접근할 수 있다. Node.js ..

[React] Axios instance 와 interceptors 로 Axios 효율성 높이기 전역 Axios 기본값 설정하기 axios.defaults 속성을 사용하여 전역 Axios 기본값을 설정할 수 있다. 이를 통해 Axios 요청에 적용되는 기본값을 지정할 수 있다. 전역 Axios 기본값을 설정하면 코드를 간결하게 유지할 수 있고, 일관된 설정을 적용해 코드의 가독성과 유지보수성을 향상시킬 수 있다. axios.defaults.baseURL = 'https://devDiary.com/'; axios.defaults.timeout = 5000; axios.defaults.headers.common['Authorization'] = 'Bearer AccessToken'; axios.default..

[React] React 에서 Axios 사용하기 Axios 란? Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저 및 Node.js 환경에서 모두 사용할 수 있다. 브라우저 환경에서는 XMLHttpRequests 를 생성하고, node.js 환경에서는 http 요청 생성한다. Axios는 백엔드와 통신하기 위해 AJAX 요청을 만들고 응답을 다루는 데에 사용된다. 다른 비동기 통신 api 보다 사용하기 쉬워 백엔드와 통신하기에 수월하다. Axios 를 사용하면 좋은점 Axios 는 XMLHttpRequest, Fetch API 등 다른 HTTP 클라이언트와 비교할 때 좋은 점이 있다. 간단해서 HTTP 요청을 보내고 응답하는 것이 쉽다. 서버에서 받은 응답을 자동으로 JSON..

[Next.js] 모바일 브라우저 환경에서 초기 렌더링 시 미디어쿼리 적용되지 않는 현상 문제 상황 프로젝트 진행 중 모바일 브라우저 환경에서 미디어쿼리가 적용되지 않는 현상을 확인했다. 사용중인 스펙은 `next.js`, `emotion/styled`, `react-responsive`, `vercel`. 데스크탑 브라우저에서 페이지를 오픈했을 때는 미디어쿼리 스타일이 정상적으로 작동했다. 물론 브라우저의 창을 줄여 모바일 뷰포트로 변경되었을 때에도 정상적으로 작동했다. 하지만 모바일 브라우저에서 페이지를 오픈했을 때 미디어쿼리 스타일이 적용되지 않았다. 모바일 환경에서는 왜 적용되지 않는걸까? 🫨 Next.js 에서는 기본적으로 `pre-rendering` 을 한다. pre-rendering 이란 서..