시작하는 중

https://github.com/vinitus/newpost_refactor GitHub - vinitus/newpost_refactor Contribute to vinitus/newpost_refactor development by creating an account on GitHub. github.com 코드는 여기 간단하게 한 페이지를 리팩토링할 것이다. 이 페이지의 목적은 1. 레시피 게시글 작성이니 만큼 제목, 간단소개, 소요시간, 기준량, 재료, 만드는 단계를 제공해야한다. 2. 이미지는 멀티파트로 보내고, 텍스트들은 application/json으로 보내야한다. 3. 이미지는 드래그 앤 드롭이 가능해야하고, 이미지를 미리보기 할 수 있어야한다. 서버는 없애놨기에 API 요청은 다음과 같이 ..

이미 리액트 라우터는 잘 써왔고, 6.4에 생긴 기능들도 잘 사용하고 있다. 좋은 기능들이 많이 생겼는데, 나도 좀 더 알아보고 정리해두려고 한다. 모든 것을 짚지는 못하고, 중요하다고 생각하는 기능들만 정리할 것이다. 출발~ 리액트 라우터가 무엇인지 간단하게 짚고 넘어가려고 한다. react router의 공식문서에서 React Router enables "client side routing". 리액트 라우터는 "클라이언트 측 라우팅"을 가능하게 한다. 라고 했다. 지금 당장 프로젝트를 하나 만들어서 실행시켜보면 이런 페이지가 나온다. 나는 vite를 사용 중이기에 CRA(createReactApp)과는 조금 다르다. 첫 화면도 다르고 주소도 조금 다른데, vite는 5173 포트를 사용한다. 여기서 ..

네비게이션 바에서 로그아웃 버튼을 누르면 redux로 관리하고 있는 토큰을 지우면서 로그인 페이지로 리다이렉트 되게 하고 싶었다. 하지만 됐다면 글을 안썼을 것이다 ㅋㅋ 문제는 안된다는 것! 일단 로그아웃 하고서 다시 해당 페이지로 돌아와지고 다시 로그아웃을 하면, 그제서야 로그인 페이지로 이동한다.. logoutHandler는 다음과 같은 redux thunk 함수와 login 컴포넌트의 일부분이다. // In auth.js export const logoutHandler = () => { console.log("logout handler start"); return async (dispatch) => { try { const response = await logoutAPI(); ... // 응답이 정..

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 developer.mozilla.org DOM - The Document Object Model HTML 문서의 프로그래밍 interface이다. DOM은 구조화된 표현을 제공하고 DOM 구조에 접근하고 변경할 수 있는 방법을 제공한다. 즉, 웹 페이지는 일종의 문서이다. 웹 페이지라는 문서는 웹 브라우저를 통..