Next.js Conf에서 발표했듯이, Next.js 14는 우리의 가장 집중적인 릴리즈이에요: Turbopack: App & Pages Router에 대한 5,000개의 테스트가 통과됨 53% 더 빠른 로컬 서버 시작 Fast Refresh와 함께 94% 더 빠른 코드 업데이트 Server Actions (안정화): 점진적으로 향상된 변화 캐싱 및 재검증과 통합 단순한 함수 호출, 또는 폼과 자연스럽게 작동 Partial Prerendering (미리보기): 빠른 초기 정적 응답 + 동적 콘텐츠 스트리밍 Next.js Learn (신규): App Router, 인증, 데이터베이스 등을 교육하는 무료 강좌 Next.js Compiler: Turbocharged Next.js 13부터, 우리는 Next.j..
프론트엔드 인턴쉽에서 투두리스트 앱을 만드는 과제를 하던 중 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..
다음 두 가지 방법으로 상태를 업데이트할 수 있다. 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 })); 검색을 아무리 많이 해봐도 이 둘의 차이를 명확하게 짚어 주지 않아서 개인 프로젝트로 여러 가지 실험을 해봤다. 거의 동일한 기능이라고 봐도 무방하다. 하지만, 핵심적인 차이점은 이전상태를 고려하지않는다. 즉, 최신 값을 보장할 수..
프로젝트 라우팅 구조 token을 전역상태로 관리하는데 그 토큰의 변경이 감지되면 알맞게 페이지 리다이렉트를 시키는 구조이다. 문제 로그인 시 토큰을 발급받고 로컬스토리지에 저장하는데 저장 후 토큰이 감지되고 리다이렉트를 하는데 토큰의 값이 null로 request 된다. 문제 해결 과정 1. 저장이 되기 전에 리다이렉트 되나? vscode로 페이지가 라우팅 되기 전, 라우팅 되는 과정, 라우팅 후를 관찰하기 위해 debug를 사용함. 하지만 토큰이 로컬 스토리지에 저장이 되고 라우팅 되는 것을 확인할 수 있었음. 2. axios의 인스턴스가 문제인가? custom 한 api가 문제인가 싶어서 login함수를 만들고 axios로 하드코딩해서 headers에 토큰을 받아서 넘겨줬는데 여전히 null값으로 ..
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에서 ..
SPA(Single Page Application)를 개발할 때, 리액트 라우터(React Router)를 이용해서 라우팅을 구현합니다. 리액트 라우터에서는 두 가지 라우터를 제공합니다. 바로 BrowserRouter와 HashRouter입니다. BrowserRouter BrowserRouter는 HTML5의 History API를 이용해서 UI를 업데이트합니다. History API를 사용하면 웹 페이지를 다시 로드하지 않고 URL을 업데이트할 수 있습니다. 예를 들어, 사용자가 브라우저의 뒤로 가기 버튼을 클릭하면 브라우저는 이전 페이지로 돌아가지만 페이지를 다시 로드하지 않습니다. BrowserRouter는 서버에서 URL을 요청할 때, 서버는 어떤 페이지도 찾을 수 없다는 404 Not Found..
