코딩하는라민

[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 을 사용해서 독립적인 위치에 컴포넌트를 렌더링하면 코드가 간결해져 유지보수성이 증가한다.부모의 스타일에 영향받지 않아 스타일링 충돌을 ..

styled-components props 에러 (잘못된 prop 이 DOM 으로 전달)  문제상황문제 코드프로젝트에서 임의의 props 를 styled-components 로 전달하고, 스타일링을 하는 작업을 진행하고 있었다.스타일의 적용에는 문제가 없어 계속해서 작업을 하던 도중 우연히 콘솔창을 보게 되었고, 경고 문구와 에러 메시지를 마주하게 되었다.for (let date = 1; date ✅ {date} )}const TableItems = styled.td` background-color: ${({ today, theme }) => today ? theme.gray.gray_100 : 'none'}; font-weight: ${({ today }) => (today..

[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 태그와 기능이 유사하다. 하지만 다른점이 있는데 페이지 전환을 방지한다는 것이다. 브라우저의 주소를 바꿀 뿐이지 페..

[책 리뷰] 2024 최적합 빅데이터분석기사 필기 정보처리기사 자격증 취득 후 빅데이터 분석기사 자격증도 취득하고자 계획했습니다. 현지 밀리의 서재 구독중이고, `밀리의 서재 ebook` 으로 해당 도서를 읽었습니다. 빅데이터 분석기사가 정보처리기사와 비슷할 거라고 생각했으나 전혀 달랐습니다. 통계 지식이 포함되어 있어서 처음 접하는 비전공자에게는 상당히 난이도가 있었습니다. 처음에는 시스컴 출판사의 2024 빅데이터 분석기사 필기 핵심요약+적중문제 라는 책으로 필기 시험 공부를 시작했습니다. 책의 가격이 저렴하기도 했고 핵심 요약이라 공부하기 편할 거라고 생각했습니다. 그러나 단순 나열식 개념 때문에 봐도 이해가 되지 않았고, 기출 문제도 교재의 내용을 복붙하여 그대로 붙여놓은 수준이라 공부가 되지 않..

'React' must be in scope when using JSX 에러 새 프로젝트를 생성했는데 JSX 태그에 ESLint 에서 에러가 생겼다. `'React' must be in scope when using JSX` `React v17` 버전부터는 이전과는 달리 React 를 컴파일 시 자동으로 가져온다. 따라서 모든 파일에서 React 를 가져올 필요가 없어졌다. 컴파일 전 function App() { return Hi there!; } 컴파일 후 컴파일 후 자동으로 React 를 가져옵니다. function App() { return React.createElement('div', null, 'Hi there!'); } 오류를 해결하기 앞서 package.json 파일에 react 와 re..

[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..