개발자 지망생의 블로그

[React, Vite] 개발 모드에서는 되고 배포하면 에러 날 때 React + Vite + TypeScript 프로젝트를 하다 에러가 발생했다. 로컬에서는 화면이 정상적으로 나왔는데 배포한 사이트에서는 빈 화면만 떴다. 에러 메시지는 다음과 같았다. create-react-app, vite 등에서 제공하는 build 기능은 코드를 경량화 및 난독화해 준다. 따라서 'ao'라는 식별자가 무엇인지 알아볼 수 없다. 개발 모드에서는 잘 실행되었으므로 build 한 결과물에 에러가 있을 것이다. 어느 부분에서 에러가 났는지 확인하기 위해 minify 옵션을 꺼야 한다. vite.config.ts 파일에서 build: { minify: false } 를 추가해주자. build를 실행한 뒤, index.html..

Vite 프로젝트를 GitHub Pages에 배포했을 때 빈 화면이 뜨는 에러 Vite + React + TypeScript로 프로젝트를 진행하던 중 오류가 발생했다. 배포 스크립트를 추가하고 push 했는데 build, deploy 모두 success로 표시되지만 페이지에 빈 화면만 떴다. Actions 탭에 들어가 Artifacts를 다운로드 받아 확인해 봄으로써 문제 원인을 파악할 수 있었다. (Artifacts : 런타임 동안 만들어진 파일들) script 태그의 src 경로와 link 태그의 href 경로가 절대 경로로 표시되어 있다. 해결 방법은 간단하다. vite.config.ts 파일에서 base: ''를 추가해주면 된다. 그러면 이렇게 상대 경로를 참조하는 것을 확인할 수 있다. vite..

[React, TS, MUI] 여러 컴포넌트에 일괄적으로 커스텀 스타일 적용하기 최근 React + TypeScript + MUI로 랜딩 페이지를 만들기 시작했다. 센드버드의 랜딩 페이지를 클론하는 것을 베이스로, 조금씩 변화를 주면서 구현하고 있다. 위 화면 하단의 아이콘이 일렬로 정렬된 부분을 클론하면서 MUI의 Material Icons를 사용했다. 아이콘 컴포넌트를 담는 배열을 만들었고, 컴포넌트 각각의 sx prop에 fontSize를 전달했다. 💡 sx prop이란? The sx prop is a shortcut for defining custom styles that has access to the theme. (ref) mui 컴포넌트에 커스텀 스타일을 적용할 수 있는 prop이다. sx가..

[React] 파일과 데이터를 모두 body에 넣어 API 요청하기 | form 태그 활용기 (3) React로 쇼핑몰 프로젝트를 짜다가 파일(이미지)과 데이터(문자열, 숫자)를 모두 body에 넣어 API를 요청해야 하는 경우가 생겼다. 상품 판매자가 상품을 등록할 때 위와 같은 기능이 필요했다. React에서 바로 하려니 어려워서, (1) pure HTML로 먼저 짜보고 (2) pure HTML+JavaScript로 짜보고 (3) React에 적용하는 과정을 거쳤다. HTML form 태그에 대해 잘 몰랐는데, pure HTML로 먼저 짜보면서 HTML form을 구성하는 방법에 대해서 공부할 수 있었다. pure HTML, pure HTML+JavaScript로 짠 내용은 이전 포스팅을 참고하시면 ..

[React] react-query 적용하기 | useQuery, refetch 쇼핑몰 프로젝트에서 데이터 불러오는 방식을 react-query로 변경하고 있다. 기존에는 useState, useEffect를 사용해서 데이터를 불러왔는데, 이를 모두 대체해 좀 더 간결한 코드를 작성할 수 있다. react-query의 useQuery 사용법을 간단히 설명해보도록 하겠다. import { useQuery } from 'react-query'; const { data, isLoading, error } = useQuery(queryKey, queryFn?, queryOption); useQuery는 두번째 패러미터로 전달받은 query function을 실행시켜주고 이 query function의 상태에 따..

[React] useEffect 무한 루프 해결하기, cleanup function 며칠 전, React에서 side effect가 무엇인지 찾아보다 좋은 글을 발견해 번역해서 포스팅하였다. 전체를 번역해 올리려다 내용이 생각보다 길어 두 개로 나눠서 업로드한다. 앞선 포스팅에서는 useEffect에서 side effect가 무엇인지, useEffect를 어떻게 사용하는지에 대해 알아보았다. [React] Side effect(사이드 이펙트)란? | useEffect [React] Side effect(사이드 이펙트)란? | useEffect React 공식 문서를 읽다가 사이드 이펙트(side effect)라는 표현을 처음 봐서 무엇인지 찾아보았다. 찾아보다 좋은 영어 글을 발견해서 번역하며 공부해보 ..

[React] Side effect(사이드 이펙트)란? | useEffect React 공식 문서를 읽다가 사이드 이펙트(side effect)라는 표현을 처음 봐서 무엇인지 찾아보았다. 찾아보다 좋은 영어 글을 발견해서 번역하며 공부해보았다. 영어 원문을 읽고 싶으신 분은 맨 밑 reference에 있는 주소를 참고하시면 된다. 1. 왜 "useEffect"인가? 2018년에 코어 React hooks가 추가되었을 때, 많은 개발자들이 "useEffect"라는 이름에 혼란스러워했다. useEffect에서 "effect"가 의미하는 바는 무엇일까? effect는 "side effect"라는 함수형 프로그래밍 용어를 나타낸다. side effect가 무엇인지 이해하려면 먼저 순수 함수의 개념을 이해해야 한..

[React] 여러 개의 input의 onChange 한 번에 관리하기 로그인, 회원가입 페이지를 구현하면 여러 개의 input을 관리해야 한다. 회원가입 페이지에서 아이디, 비밀번호, 비밀번호 확인, 닉네임, ... 등등 여러 개의 input을 입력받는다고 생각할 때, 이를 모두 다른 state로 관리하는 것은 생각만 해도 코드가 지저분하다. // BEFORE function App() { const [id, setId] = useState(''); const [pw1, setPw1] = useState(''); const [pw2, setPw2] = useState(''); const [nickname, setNickname] = useState(''); const handleIdChange = (e..

[React] useNavigate 슬래시 유무에 따른 차이 (React Router v6) 개인 프로젝트를 하다가 발견한 useNavigate 슬래시 유무에 따른 차이를 기록해보려 한다. 로그인 페이지에서 '회원가입' 버튼을 누르면 회원가입 페이지로 이동하도록 구현해야 했다. 로그인 페이지는 /login, 회원가입 페이지는 /join에 존재했다. function LoginPage() { const navigate = useNavigate(); return ( ... navigate('join')} /> {/* 1 */} navigate('/join')} /> {/* 2 */} ); } 1번과 같이 설정할 경우 도메인 뒤에 '/join'이 추가로 붙는다. 2번과 같이 설정할 경우 도메인 뒤에 있던 fil..

[React] GitHub Pages 배포 시 빈 화면만 뜨는 에러 | BrowserRouter, HashRouter - React Router renders a blank page - GitHub pages show blank page - BrowserRouter blank page 일주일 넘게 나를 괴롭힌 에러에 대해 기록해보려고 한다. 이 에러는 제목에 서술돼 있듯 React 프로젝트를 GitHub Pages로 배포할 때 겪은 에러이다. 나는 React 프로젝트를 처음 구축할 때 create-react-app을 사용하지 않고 babel, webpack 등을 직접 설치하여 프로젝트를 구성했다. 또한, GitHub Pages 배포 자동화를 적용해 GitHub에 push 할 때마다 배포가 자동으로 이루어..