그래도 해야지105 리덕스 투두 수정 / 심화 프로젝트 진행 리덕스 투두 수정 수정사항 //Todo1: 삭제하면 404에러 --> 갑자기 잘됨.. 뭘 수정했지..? //Todo2: 체크버튼 에러 --> 처음에 !todo.isDone값만 넘기는 걸로 수정했는데 __updateTodo에 id값까지 넣어줬어야 했음 //Todo3: 수정 에러 --> 원래 todo의 데이터에 직접접근해서 수정했는데 서버를 꼈더니 read only 객체가 돼버렸음 // 원래 updateTodo안에 payload로 id: param.id, modifiedtitle, modifiedcontents로 넣었는데 // 서버에서 기존 데이터에 modifiedTitle, modifiedContents 데이터가 붙어서 들어감 // 그래서 id: parma.id, title: modifiedTitme, c.. 2022. 12. 23. [Develog] 리덕스 툴킷, json-server, axios, Thunk를 이용한 투두리스트 배포 12/22 커밋 이전에 리덕스로 작업했던 투두리스트를 리덕스 툴킷, json-server, axios, thunk를 이용하여 배포 진행함 https://github.com/jeLee94/TodoList/tree/dev GitHub - jeLee94/TodoList Contribute to jeLee94/TodoList development by creating an account on GitHub. github.com 2022. 12. 22. [React] Redux-toolkit, json-server, Axios, Thunk Redux-toolkit이란? 리덕스를 개량한 것이라고 생각하면 쉽다. 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고, 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 입니다. 줄여서 RTK 라고도 합니다. json-server란? 아주 간단한 DB와 API 서버를 생성해주는 패키지. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함 json-server를 통해서 FE에서는 BE가 하고 있.. 2022. 12. 22. Redux로 투두리스트 만들기 문제 해결 원장님께 질문을 통해 문제를 해결할 수 있었다. 1. checked가 true임에도 화면상에서는 체크가 해제된 이유 => 렌더링이 되지 않았기 때문! 렌더링은 state나 props가 변경될 때 수행이 되는데, checked는 단순 속성이 자동으로 변경된 것이기 때문에 렌더링이 이루어지지 않는 것으로 보인다. onChange를 통해 todo의 상태(isDone)가 변경될 때 렌더링이 되므로 그 때 checked 속성도 수동으로 변경시켜준다. 왼쪽의 기존 코드는 조건문을 통해 변경시켜주고 오른쪽의 수정된 코드는 todo.isDone의 상태를 통해 변경시켜준다. 2. 수정 시 내용 입력이 없으면 기존 내용이 사라지는 오류 이 부분은 set이되지 않아서 발생한 오류이다. 기존의 코드는 다음과 같고 40번째 줄.. 2022. 12. 20. [Develog] 12월 3째주 주간로그 금요일에 여태까지 도와주신 재훈이와 랩장님께 밥을 고기를 사드렸다. 이렇게 사드린 건 처음이라 뿌듯하기도 했고 오히려 사주니까 내가 먹고싶은 거 더 시켜먹고 편하게 시키라고 생색도 내보고 새로운 경험이었다. 2차로 랩실에서 간단히 더 마시고는 집에 왔는데, 숙취가 너무 심했다. 근데 카톡을 보내 애들이 죄다 감기란다.. 한 명은 a형 독감 확진이랬다. 아마 다들 독감이고 옮은 것 같다. 랩장님도 독감인 것 같단다. 어 지나고보니 이 두통이 숙취가 아니라 감기기운..?인가? 싶었다. 목이 간질간질하고 기침도 좀 났다. 집에 있던 감기약을 좀 먹고 자고 일어났더니 그냥 목만 간지럽고 아무렇지도 않았다. 기침은 조금 나지만 어제 두통은 숙취가 맞았나보다. 독감 예방 주사가 효과가 있었던건지 면역력이 좋아진건지.. 2022. 12. 18. [Develog] 12월 16일 오늘의 로그 오전에는 우연희 튜터님의 cs 특강이 있었고 3시에는 트릿지 채용 설명회, 4시에는 원장 튜터님의 redux 프로젝트 리뷰가 있었다. 우연희 튜터님의 cs 특강: 애자일 우연희 튜터님의 강의는 처음 들어봤는데 말투가 너무 웃기셨다.(좋은 뜻) 친구먹으면 너무 재밌을 것 같은 느낌이었다. cs특강도 지루하지 않게 잘 해주셨다. 애자일이란 결국 반복적이고 점진적인 개발을 통해 변화에 민첩하게 대응하는 방법론이다. 기존 폭포수 모델은 위에서부터 내려와야해서 단점이 있었는데 애자일을 통해 조금 더 사람 중심의 업무를 진행할 수 있는 것 같다. 트릿지 채용 설명회: 오... 트릿지라는 회사는 처음 들어봤다. 그래서 검색해보니까 중소기업도 대기업도 아닌 유니콘 기업 이라고 적혀있었다. 유니콘 기업이 뭐냐? 기업 가.. 2022. 12. 18. [React] Redux, React-router-dom으로 TodoList만들기 1. 구현모습 1) 메인 페이지 2) 상세 페이지 2. 시나리오 1) 메인페이지에서 input창에 내용 입력하여 버튼 클릭 시 dispatch를 통해 setTodo에 새로운 데이터를 payload로 전송 → 전송된 데이터를 useSelector를 통해 가져온 데이터 리스트를 화면에 뿌림 2) 체크버튼 클릭 시 상태 변경 : 완료↔진행중, dispatch를 통해 isDone 상태 변경내용 전달 3) Todo 제목 클릭 시 상세 페이지로 이동 4) 상세페이지에서는 id, title, contents를 보여줌 5) 수정 버튼 클릭 시 제목, 내용 수정 화면이 나타나고 버튼명은 완료로 변경됨 6) 삭제버튼 클릭 시 해당 todo는 삭제되고 navigate를 통해 메인페이지로 넘어감 7) Home 버튼 클릭시 메.. 2022. 12. 15. [React] Todo리스트 Redux로 만들기 아직 진행중 https://github.com/jeLee94/TodoList/tree/version2-redux GitHub - jeLee94/TodoList Contribute to jeLee94/TodoList development by creating an account on GitHub. github.com 2022. 12. 14. [Redux] 리덕스란? 리덕스 개념의 핵심은 store 0) store == 은행, 정보가 모두 저장되는 곳 1) state = 실제 정보가 저장되는 곳, 내가 직접 접속해서는 안된다. 은행에 있는 돈을 내가 직접 건드릴 수 없듯이 2) reducer = 공급해주는 함수 3) render = 나의 코드, state 값을 참고해서 UI를 만들어주는 코드 * dispatch, subscribe, getState = 은행창구직원 4) getState = state 정보를 요청하고 받아서 render에게 전달해주는 역할 5) subscribe = state 값이 바뀔 때마다 render함수가 호출되도록하여 UI가 자동 업데이트 되도록함 6) action = 버튼을 누르는 등의 호출 7) dispatch = reducer를 호출해서 s.. 2022. 12. 13. 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음
