항해99 썸네일형 리스트형 [TIL-021] React Lv4 과제(3) - useQuery 사용해보기 / 에러핸들링 Today목표 : 05/02일 React Lv4 과제(3) - useQuery 사용해보기 / 에러핸들링 상세 페이지에서 직접 url을 변경했을 때 발생하는 문제 ✅ ❗상세 페이지에서 posts 전역상태로 부터 props을 받아와 보여주지 않고, 직접 페이지 id값으로 데이터 통신하여 post 정보를 가져오는 이유 , 에러처리를 해야 하는 이유 문제상황 1. url 조작 시 전역 상태에서 데이터를 가져올 때 문제점 + id에 맞는 데이터가 있을 경우 상세 페이지에서 url 직접 경로로 이동 시 해당 경로에 맞는 페이지가 있더라도, 페이지가 새로고침 되어 전역 상태값이 초기화 된어 데이터가 유실되므로 에러가 발생한다. 2. url 조작 시 id에 맞는 데이터가 없을 경우의 문제점 해당 id에 맞는 데이터 값.. 더보기 [TIL-020] Redux를 사용하여 상태 관리를 해야 하는 이유 Today목표 : 05/01일 React Lv4 과제(2)-Redux를 사용하여 상태관리를 해야 하는 이유 Redux를 사용하여 상태관리를 해야 하는 이유 ✅ 오늘 튜터님과의 면담이 있었다. Lv4 과제를 진행하기 위해 현재 컴포넌트 구조와 디자인은 다 마쳐 놓았지만, 아직 기능 구현은 못하고 있었다. 그 이유는 1. JSON서버와 리덕스를 사용하면서 어디까지 상태를 Redux에서 관리해 주어야 하는지, 2. JSON서버와 리덕스 상태를 동시에 계속해서 변경해 주어야 하는 번거로움을 해결할 수 있는 방법이 없는지에 대해 감이 안잡히고 있었기 때문이었다. 일단 JSON서버, Redux-toolkit, React-query를 사용하겠다는 것이 분명해졌으니 먼저 기능 구현을 위해 내가 모르고 있는 점들을 정리.. 더보기 [TIL-019] React Lv4 과제(1) - 중복되는 컴포넌트를 App이 아닌 Router 컴포넌트에서 렌더링하는 이유 Today목표 : 4/30일 React Lv4 과제(1) 중복되는 컴포넌트를 App이 아닌 Router 컴포넌트에서 렌더링하는 이유✅ ❗중복되는 Layout, header, footer 등의 컴포넌트를 왜 App 컴포넌트에서 렌더링하지 않고, 하위의 Router 컴포넌트에서 렌더링 할까? function App() { return ( // 새 페이지 마다 렌더링 const Router = () => { return ( ); App 컴포넌트에서 모든 라우트를 처리하면, 모든 페이지에서 공통으로 사용되는 Header와 Footer를 중복으로 렌더링해야 합니다. 반면에 Router를 사용하면, 각각의 라우트마다 별도의 컴포넌트를 렌더링하며, 공통으로 사용되는 Header와 Footer를 중복으로 렌더링하지 않.. 더보기 [TIL-018] redux-toolkit, axios - instance와 interceptor, custom Hook Today목표 : 4/29일 redux-toolkit , axios - instance와 interceptor 유용한 사이트, tools✅ 1. 가변성, 불변성 함수 확인 가능한 사이트 => no mutates 불변성 유지 Does it mutate? The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.Array.prototype.lastIndexOf ( searchElement [ , fromIndex ] ) doesitmutate.. 더보기 [TIL-017] JSON-Server / fetch와 axios 차이 / 면접 스터디 3회차 Today목표 : 4/28일 면접 스터디 3회차 JSON - Server ✅ 아주 간단한 DB와 API 서버를 생성해주는 패키지다. 사용 목적 : 백엔드와 협업 시에 백엔드의 DB구축과 API Server가 완성될 때 까지 프론트에서 개발에 임시적으로 사용할 mock data를 생성하기 위함 => json-server를 통해서 임시 API를 구축하고, 서버의 data를 mocking(흉내,모의) 할 수 있으며 이것을 통해 선제적으로 FE 개발을 진행할 수 있다. 사용 방법 1. json-server 설치 => json-server는 보통 4000번 port를 이용한다. yarn add json-server yarn json-server --watch db.json --port 4000 2. db.json.. 더보기 [TIL-016] React Lv2과제 모범 답안과 비교 / 숙련 주차 시험 Today목표 : 4/27일 Lv2과제 모범답안과 비교 ❗todo-list 모범답안과 내 코드 비교하기 1. working zone / done zone filtering 코드 내코드 {done === true && todos .filter((todo) => todo.isDone) .map((todo) => { return ; })} {done === false && todos .filter((todo) => !todo.isDone) .map((todo) => { return ; })} 모범 답안 todos.filter((item) => { return area == 'workingZoen' ? item.isDone == false : item.isDone == true }).map((item) => {.. 더보기 [TIL-015] React Lv3과제 에러 디버깅2 Today목표 : 4/26일 React Lv3과제 에러 디버깅2 ❗onClick이벤트 위임으로 인해 StOutCon 내부의 StModalCon까지 onClick이 전달되어 모달창 내부 클릭 시에도 모달창이 닫히는 현상 발생 시도한점 어제 해결하지 못했던 이벤트 위임 취소를 오늘 해결했다. 이전에는 이벤트를 전달하는 주체에서 e.stopPropagation()를 사용해야 한다고 생각하여 다음과 같이 외부 컨테이너에서 e.stopPropagation()을 실행했었는데 중단이 되지 않았었다. { type === "small" && onClick(); e.stopPropagation(); }} > 해결한점, 알게된점 오늘 이 부분을 다음과 같이 이벤트를 전달 받는 주체에서 이벤트 위임을 중단시켰더니 이벤트 위임.. 더보기 [TIL-014] React Lv3과제 에러 디버깅 Today목표 : 4/25일 React Lv3과제 에러 디버깅 ❗onClick ( ) 리팩토링 전 에러 구문 onClick={ type === "small" && onClick; } 리팩토링 후 구문 onClick={() => { type === "small" && onClick(); }} onClick={ type === "small" && onClick; } 코드에서는 onClick 속성에 조건문이 포함되어 있으며, type 값이 "small" 일 때에만 onClick 함수가 실행됩니다. 그러나 이 코드는 올바른 자바스크립트 구문이 아니므로 에러가 발생합니다. onClick={() => { type === "small" && onClick(); }} 코드에서는 onClick 속성에 새로운 함수가 할당.. 더보기 이전 1 2 3 4 5 6 7 ··· 9 다음
