그럼에도 불구하고

.gitignore가 작동하지 않을때 대처하는 법에 대해 알아보겠습니다. .gitignore가 제대로 작동되지 않아서 .gitignore에 게시된 파일이 github에 계속 올라가 있는 경우가 있습니다. git의 캐시가 문제가 되는거라 아래 명령어로 캐시 내용을 전부 삭제 후 다시 add All해서 commit하면 됩니다. git rm -r --cached . git add . git commit -m "fixed untracked files" ref: https://stackoverflow.com/questions/11451535/gitignore-is-ignored-by-git

useNavigation과 useSubmit에 대해 알아보겠습니다. [ useNavigation ] useNavigation은 useNavigate와는 다릅니다. 헷갈리면 안 됩니다. :) 예를 들어, useNavigation은 어떤 폼을 작성해서 제출하는데 현재 진행 상황을 저장하는 것과 같을 경우 사용하기에 좋습니다. 즉, 현재 폼에 대한 정보를 받을 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 폼 제출 시 true를 받는 상수를 선언 후 HTML 삽입 미리보기할 수 없는 소스 return에서 조건적으로 받아보면 폼이 제출 중일 때는 버튼이 Submitting...로 바뀝니다. 혹은 data를 넘기기 위해서 useNavigation을 이용할 수 있습니다. HTML 삽입 미리보기할 수 없는 소..

action과 Form, useActionData 그리고 redirect에 대해 알아보겠습니다. [ action ] react router dom에서 action을 배울 때 주목해야 할 부분은 HTML form입니다. HTML form은 특정 url에 데이터를 전송해서 처리하는 요청 과정입니다. 그리고 그 요청을 처리할 주소 값은 보통 action에 정의합니다. 클라이언트 사이드에서 form을 처리하기 위해 리액트 라우터는 Form이라는 것을 사용합니다. 그리고 이는 html form을 모방하여 클라이언트 측에다가 request를 보냅니다. // html 폼 // react router의 폼. 클라이언트 사이드에서 처리합니다. 즉 을 사용하면 서버에다가 request를 보내는 것이고, 을 사용하면 클라이..

오늘은 loader 함수의 error 처리에 대해 알아보겠습니다. 현재 "events" path를 가진 페이지에서 사용되는 loader는 다음과 같습니다. loader 함수에서는 에러가 발생하면 JSON 형태의 error message와 status 500 상태를 전송하고 있습니다. events path에서 발생한 오류는 상위 컴포넌트(라우트)인 ErrorPage에서 다루고 있습니다. ErrorPage에서는 loader로 인해 발생한 error뿐만 아니라 page 전체에서 발생한 에러를 모두 다루고 있습니다. 여기서 useRouteError 기능을 사용하면 loader에서 throw new Response로 발생시킨 error data를 받아올 수 있습니다. 또한 발생한 error의 status에 따라 ..

오늘은 loader와 useLoaderData에 대해 알아보겠습니다. [ loader ] 서버에 요청하지 않고 데이터를 가능한 한 빨리 가져오기 위해 react router dom 6.4v 부터는 client side browser를 제공하고 있습니다. 즉, 서버에 요청하지 않고 클라이언트 사이드에서 처리하기 때문에 속도 면에서 엄청난 이점이 생기게 됩니다. 여기서 추가된 기능 중 하나인 loader는 컴포넌트가 생성되기 전에 컴포넌트에 데이터를 전달하는 역할을 수행합니다. loader의 특징 - loader의 호출 시점은 컴포넌트가 렌더링 되기 전 입니다. - 각 파일에 loader라는 함수를 만든뒤 이를 export하여 사용하는 것이 일반적입니다. - loader 함수가 값을 return하면 useL..

오늘은 useParams 사용하는 법에 대해 알아보겠습니다. [ useParams란? ] useParams이란 react-router-dom에서 제공하는 Hooks 중 하나로 Parameter(파라미터) 값을 URL을 통해서 넘겨받은 페이지에서 사용할 수 있도록 해주는 것을 말합니다. 예를 들어, 특정 제품 리스트에서 제품을 클릭 시 제품의 세부 정보를 나타내는 페이지로 이동하고 싶다면 제품의 id 값을 URL로 넘겨 세부 페이지에서 id 값에 해당하는 제품만 보여줄 수 있습니다. 리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 useParams를 사용하면 됩니다. createBrowserRouter를 통해 다음과 같이 코드를 작성한다고 가정했을 때, ProductDetailPage로 ..

오늘은 Link와 NavLink, useNavigate에 대해 알아보겠습니다. 목차 [ Link vs NavLink ] 📌 Link Link 컴포넌트의 경우 html의 태그와 기능이 유사하지만, 페이지 전환을 방지하는 기능이 내장되어 있습니다. 요소를 클릭 시 /로 바로 이동하는 로직 구현 시에 용이한 컴포넌트입니다. HTML 삽입 미리보기할 수 없는 소스 📌 NavLink NavLink는 Link의 special version으로, isActive 속성을 이용하여 특정 링크에 스타일을 넣어줄 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 NavLink는 자체적으로 isActive라는 boolean값을 가지고 있어 활성화시키고 싶은 스타일에 css를 적용할 수 있습니다. 또한, NavLink에는 ..

오늘은 Link와 Outlet을 이용하여 간단한 다중 페이지를 만들어보겠습니다. 📌 App.js HTML 삽입 미리보기할 수 없는 소스 RootLayout이라는 요소에 MainNavigation이라는 요소와 children으로 지정된 나머지 요소들을 렌더링 하는 과정입니다. 📌 Root.js HTML 삽입 미리보기할 수 없는 소스 Outlet: 자녀 라우트 요소들이 렌더링되어야 할 장소를 표시하는 역할을 합니다. 📌 MainNavigation.js HTML 삽입 미리보기할 수 없는 소스 MainNavigation에서는 Link를 통해 원하는 페이지로 이동합니다. a 태그와 다르게 Link는 to에 주소를 지정합니다. 📌 Home.js HTML 삽입 미리보기할 수 없는 소스 📌 Products.js HTM..

React에서 RouterProvider와 CreateBrowserRouter를 이용하여 다중 페이지를 구현하는 법에 대해 알아보겠습니다. [ 기존 방식 ] HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 [ React Router v6.4 이후 추가된 방식 ] 📌 RouterInfo.js HTML 삽입 미리보기할 수 없는 소스 📌 App.js HTML 삽입 미리보기할 수 없는 소스 기존의 방식처럼 BrowserRouter로 감싸지 않고 RouterProvider를 이용하여 구성요소들을 전달하고 활성화합니다. ref: https://reactrouter.com/en/main/start/overview

오늘은 redux-thunk와 redux-saga에 대해 알아보겠습니다. 목차 [ 비동기 작업을 처리하는 미들웨어 사용 ] 오픈 소스 커뮤니티에 공개된 미들웨어를 사용하면 리덕스를 사용하고 있는 프로젝트에서 비동기 작업을 더욱 효율적으로 관리할 수 있습니다. 비동기 작업을 처리할 때 도움을 주는 미들웨어는 다양하지만, 오늘은 redux-thunk와 redux-saga에 대해 알아보겠습니다. 📌 redux-thunk: 비동기 작업을 처리할 때 가장 많이 사용되는 미들웨어입니다. 객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 해 줍니다. 📌 redux-saga: redux-thunk 다음으로 가장 많이 사용되는 비동기 작업 관련 미들웨어 라이브러리입니다. 특정 액션이 디스패치되었을 때 정해진 로직에 따..

Redux-logger를 사용하는 법에 대해 알아보겠습니다. 📌 설치 yarn add redux-logger // yarn 사용시 npm install redux-logger // npm 사용시 📌 index.js HTML 삽입 미리보기할 수 없는 소스

리덕스 미들웨어를 사용하던 도중 다음과 같은 에러가 발생했습니다. 오류의 내용은 Redux에서 값을 주고, 받을 때 object 형태의 값을 string 형태로 변환(JSON.stringfy)하는데, 이 상황에서 변환이 불가능한 값을 전달했다는 에러입니다. 좀 더 자세히 들여다보면, action에 직렬화가 불가능한 값을 전달했다는 뜻입니다. 여기서 직렬화란 redux에서 값을 주고받을 때 object 형태의 값을 string 형태로 변환하는 것을 말합니다. (JSON.stringfy) 역직렬화는 직렬화의 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정이다. (JSON.parse) Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없기 때문에 에러가 발생한 것입..