개발자 지망생의 블로그

[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 프로젝트를 하다가 다음과 같은 오류가 있었다. 동영상을 재생해보면 사이드바(왼쪽)와 내용(오른쪽)의 연결이 이상한 것을 확인할 수 있다. 페이지 구조는 위와 같다. chosenIndex는 DashBoard 컴포넌트의 state이다. SideBar의 메뉴를 클릭하면 setChosenIndex가 작동하도록 되어 있어, 그 메뉴에 해당하는 내용을 보여주는 getSideBarContent(chosenIndex)의 리턴값이 적절히 바뀌어야 하는데, 적절히 바뀌지 않았다. 맨 처음에만 상품 목록이 제대로 표시되었고, 메뉴 버튼을 누르면 각각에 맞는 내용이 표시되어야 했는데 흰 화면만 떴다. 수정 전 코드를 살펴보자. (관련 있는 코드만 남겨두었다.) // DashBoard.js export const D..

[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 할 때마다 배포가 자동으로 이루어..

[CSS] p 태그 내에서 개행 문자가 적용되지 않는 현상 React로 나만의 이력서 & 포트폴리오 페이지를 만들던 중 작은 오류가 발생했다. p 태그 안에 들어갈 텍스트에 개행을 넣기 위해 stirng을 백틱으로 감싸고 줄바꿈을 입력했는데 페이지에 적용되지 않았다. const aboutme = { EN: `Hi, I'm blahblah. I started learning software development with interest in mobile application development. Now I'm trying to progress as an agile and systematic front-end developer.`, KO: '안녕하세요, 앱 개발에 흥미를 느껴 개발을 시작했으며 민첩하고 체..