작심삼일 개발이야기

폼을 작성하는 페이지에서 다른 페이지로 이동하려는 시도 시, 이동 전에 현재 작성된 내용이 손실될 수 있다는 경고 메시지가 나타나는 UI는 많은 사용자들이 익히 본 경험이 있습니다. 이러한 상황에서 사용자에게 명확한 선택을 요청하는 UI는 중요한 사용자 경험의 일부입니다. 아래의 사진과 같이 브라우저에서 지원하는 UI를 사용할 수도 있으며 커스텀하여 원하는 UI를 사용할 수도 있습니다. react-router-dom의 6.21.0 버전을 사용하여 커스텀 컴포넌트를 사용할 수 있도록 usePrompt 예시 코드입니다. 현재 프로젝트에서 react-router-dom의 버전을 꼭 확인하시기 바랍니다. 아래의 usePrompt 코드를 확인한 후 설명을 이어서 하겠습니다. import { useEffect } ..

클린 코드 책을 읽다 지연 초기화에 대해 조금 더 알아봤다. 마침 리액트 최적화에 관련된 글을 찾아서 정리해봤다. 아래의 두 코드를 비교해보자 코드 1 const Counter = () => { const [count, setCount] = useState( Number.parseInt(window.localStorage.getItem(cacheKey)), ) useEffect(() => { window.localStorage.setItem(cacheKey, count) }, [cacheKey, count]) return ( Count: {count} setCount((prevCount) => prevCount - 1)}>- setCount((prevCount) => prevCount + 1)}>+ ) ..

만약 링크를 통해 웹 페이지에 접근할 때 해당 페이지에서 로그인 정보가 필요하다면 로그인 페이지로 바로 이동시켜준다. 로그인을 성공하게 되었을 때 처음 링크를 통해 접근한 페이지로 이동하는 방법을 적어두려 합니다. 여기서 소개하는 방법이 정답이라고 할 수는 없으니 다른 방법을 아시는 분 있으면 댓글에 알려주시면 감사하겠습니다. 사용한 기술스택 react react-router-dom V6 js-cookie 로직 순서 private 페이지(로그인이 필요한 페이지)에 접근했을 때 cookie를 통한 유저 token 확인 cookie에 유저 token이 없는 것을 확인 로그인 페이지로 이동하기 전 현재의 path를 useNavigate의 state로 저장 후 로그인 페이지로 이동 로그인 실행 useNaviga..

1. Render Props란 "render prop"란, React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 테크닉입니다. Render Props – React A JavaScript library for building user interfaces ko.reactjs.org Render Props에 대해 React 공식문서에 이렇게 나온다. render props 패턴으로 구현된 컴포넌트는 자체적으로 렌더링 로직을 구현하는 대신 react 엘리먼트 요소를 반환하고 이를 호출하는 함수를 사용한다. ( Hello {data.target} )}/> 2. 예시 공식문서를 바탕으로 함수형으로 만들어봤다. Mouse 컴포넌트는 마우스가 움직일 때마다 좌표를 알 수 있는 컴포넌트다. ..

useRef에 대해 공부하던 중 useRef는 Ref를 쉽게 사용할 수 있게 해준다고 한다. 그럼 Ref란 무엇인가? Ref 리액트에서 부모, 자식 컴포넌트 사이에서 상호작용할 수 있는 유일한 수단은 props이다. 자식을 수정하려면 props를 전달해서 자식을 다시 렌더링해야 한다. 하지만 Ref를 사용하면 자식에 대해 직접적으로 접근할 수 있다. React 공식문서에서 Ref의 바람직한 사용 사례 3가지가 있다. 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 하지만 Ref를 남용하지 말라고 한다.

리액트의 상태관리에서 불변성을 지키라는 말 한번은 꼭 들어봤을 것이다. 왜 불변성을 지켜야하는 지에대해서 공부해 보았다. 리액트에서 불변성이란 기존의 값을 직접 수정하지 않고 새로운 값을 만들어 수정하는 것을 뜻한다. const [numberArray, setNumberArray] = useState([]); const plusArray = (e) => { setNumberArray([...numberArray, e.target.value]); } 배열을 관리하는 set함수를 사용할 때 setNumberArray처럼 기존 numberArray를 직접 수정하지 않고 새로운 배열을 만들어서 수정해준다. 아래의 예시코드로 불변성을 어떻게 지키는지 알아보자 const arrayA = [1,2,3,4,5]; co..

axios를 이용해서 api통신을 한 뒤 응답받은 데이터의 확장자명이 .xlsx 였다... 엑셀파일을 다운로드하는 기능을 구현해야했다. 거의 하루가 꼬박걸려서 구글링하고 찾아보고 시도했었지만 파일을 다운로드까지 가능했지만 엑셀 파일 데이터가 깨져서 보이지 않거나 [Object][object] 였던가.. 이런식으로 보이게 되었다 어쨋든 기능 구현은 성공했으니 메모도 할겸 끄적끄적해봐야겠다. axios 요청 후 받은 응답 헤더를 네트워크 창을 통해서 본 정보이다. 위 사진에서 보이는 것처럼 Content-Dispostion은 .xlsx이며 Content-Type은 .sheet이다. console.log로 받아온 데이터를 보면 아래처럼 이상한 글자가 나온다... PK jA‹S‘ÛÀ Y
ð[Conten..

이 글은 mia님의 블로그를 참고하여 작성한 글입니다. React Router를 이용하면 3가지 props를 전달받는다. location 현재 경로에 대한 정보와, URL에 대한 정보를 가지고 있다. match 어떤 라우트에 매칭 되었는지에 대한 정보가 있고 prarams에 대한 정보를 가지고 있다. history push, replace로 앞 뒤 페이지를 이동과 다른 페이지로 이동할 수 있다.