cat

FrontEnd/React

FrontEnd/React

React Todo에서 UX개선

프론트엔드 인턴쉽에서 투두리스트 앱을 만드는 과제를 하던 중 UX를 해치는 부분을 발견했다. // 기존 코드 const updateTodoHandler = () => { setIsUpdate(() => true); const newTodo = newTodoRef.current?.value; if (isInputValid(newTodo)) return; onUpdate(todoItem.id, newTodo, todoItem.isCompleted); setIsUpdate(() => false); }; const onUpdateTodo = async (todoId: number, todoText: string, isCompleted: boolean) => { await updateTodo(todoId, tod..

FrontEnd/React

리액트에서 ...state 와 prev => ...prev 의 차이

다음 두 가지 방법으로 상태를 업데이트할 수 있다. const [state1, setState1] = useState({ id: '', name: '', }); const [state2, setState2] = useState({ id: '', name: '', }); setState1({ ...state1, name: e.target.value }); setState2((prevState2) => ({ ...prevState2, name: e.target.value })); 검색을 아무리 많이 해봐도 이 둘의 차이를 명확하게 짚어 주지 않아서 개인 프로젝트로 여러 가지 실험을 해봤다. 거의 동일한 기능이라고 봐도 무방하다. 하지만, 핵심적인 차이점은 이전상태를 고려하지않는다. 즉, 최신 값을 보장할 수..

FrontEnd/React

최초 로그인시 토큰이 null로 보내지는 버그

프로젝트 라우팅 구조 token을 전역상태로 관리하는데 그 토큰의 변경이 감지되면 알맞게 페이지 리다이렉트를 시키는 구조이다. 문제 로그인 시 토큰을 발급받고 로컬스토리지에 저장하는데 저장 후 토큰이 감지되고 리다이렉트를 하는데 토큰의 값이 null로 request 된다. 문제 해결 과정 1. 저장이 되기 전에 리다이렉트 되나? vscode로 페이지가 라우팅 되기 전, 라우팅 되는 과정, 라우팅 후를 관찰하기 위해 debug를 사용함. 하지만 토큰이 로컬 스토리지에 저장이 되고 라우팅 되는 것을 확인할 수 있었음. 2. axios의 인스턴스가 문제인가? custom 한 api가 문제인가 싶어서 login함수를 만들고 axios로 하드코딩해서 headers에 토큰을 받아서 넘겨줬는데 여전히 null값으로 ..

FrontEnd/React

Create-React-App는 무엇을 설치해주나?

React.js 프로젝트를 쉽게 생성하기 위한 툴이다. React.js를 처음 사용하는 개발자들은 개발 환경 설정이 어려울 수 있지만, Create-React-App을 사용하면 초기 설정을 간편하게 해결할 수 있다. Create-React-App 설치시 자동으로 설치되는 패키지들 Create-React-App을 사용하여 React.js 프로젝트를 생성하면 다양한 패키지들이 자동으로 설치된다. 이러한 패키지들은 React.js 프로젝트를 개발하는 데에 필요한 다양한 도구들을 제공한다. 자동으로 설치되는 패키지는 아래와 같다. react react-dom react-scripts react 와 react-dom 은 React.js 라이브러리이며, react-scripts는 Create-React-App에서 ..

FrontEnd/React

BrowserRouter vs HashRouter ?

SPA(Single Page Application)를 개발할 때, 리액트 라우터(React Router)를 이용해서 라우팅을 구현합니다. 리액트 라우터에서는 두 가지 라우터를 제공합니다. 바로 BrowserRouter와 HashRouter입니다. BrowserRouter BrowserRouter는 HTML5의 History API를 이용해서 UI를 업데이트합니다. History API를 사용하면 웹 페이지를 다시 로드하지 않고 URL을 업데이트할 수 있습니다. 예를 들어, 사용자가 브라우저의 뒤로 가기 버튼을 클릭하면 브라우저는 이전 페이지로 돌아가지만 페이지를 다시 로드하지 않습니다. BrowserRouter는 서버에서 URL을 요청할 때, 서버는 어떤 페이지도 찾을 수 없다는 404 Not Found..

여행 가고싶다
'FrontEnd/React' 카테고리의 글 목록