Age of Discovery

길지만 짧았던(?) 6주차 미니 프로젝트를 끝내고 회고를 해보려고 한다. https://www.youtube.com/watch?v=QHJPkb07igE 중고물품 거래하는 사이트였으며 처음에 구현하려했던 기능은 리액트와 리덕스를 사용한 게시글, 댓글 CRUD외에도 찜하기, 검색, 카테고리 분류 등 많았으나 시간이 부족한 관계로 이번에도 게시글과 댓글의 CRUD만으로 만족해야했다.... 슬프다..... 하지만 정말 많이 배웠다 전부 소화할 수는 없겠지만 습득했던 내용이 많았다. 처음에 백엔드 분들과 API명세서를 작성하고 데이터를 주고받기위해 연동하는 과정에서 오류가 무수히 많았지만 소통이 잘돼서 큰 문제없이 넘어가게 됐다. http와 https의 관계 그리고 JWT와 세션방식의 차이 등을 알게 됐으며 JW..

지금까지 react-redux로 만든 투두리스트를 리덕스 툴킷으로 덮어씌워보자 툴킷을 앞으로 사용해야하니 익숙해지기 위함인데 기존의 코드를 뜯어고치고 변경해줘야한다는 막연한 두려움때문에 '그냥 새로 만들까...'하다가 이정도 리팩토링도 못하면 나중엔 회피에 대한 대가를 강하게 치를까 무서워 그냥 시도해봤다. 생각보다 간단하게 마무리됐다. import { createStore } from "redux"; import { combineReducers } from "redux"; import todo from "../modules/todos"; const rootReducer = combineReducers({ todo, }); const store = createStore(rootReducer); expor..

아무래도 코드설명을 하면 글이 길어지다보니 간단한 투두리스트 프로젝트도 블로그 포스팅이 나눠질 수 밖에 없는 듯..... 이제 남은 컴포넌트인 TodoItem과 Detail 그리고 모듈폴더의 todos.js 스토어를 살펴보자 const TodoItem = ({todo, i}) => { const dispatch = useDispatch(); const onDelete = (id) => dispatch(deleteTodo(id)) const onToggle = (id) => dispatch(toggleTodo(id)) const navigate = useNavigate(); const isDone = todo.isDone; return ( {navigate("/detail/" + todo.id)}}> 상세..

다른 기술을 입혀서 리팩토링하는 것도 능력이라는데 그런 능력은 거저 주어지지 않는가보다.... 3주차에 useState만을 이용해서 구현한 투두리스트를 이번 주차에선 Redux로 만들어야한다. 리덕스를 생전 처음 접하는 건 아니었지만 약 두달전에 강의로만 접해보고 추가로 뭘 만들어보진 않았기 때문에 머릿속에서 리셋이 됐는지 이번주차에 제공된 학습자료가 눈에들어오질 않았다. toolkit대신 react-redux를 배워야하는 입장이라 action creator랑 value 그리고 초기상태값과 리듀서를 전부 따로따로 선언해줘야 했다. 실은 저번과제 위에 리덕스패키지만 설치해서 그대로 입혀보려고했으나 좌절을 느끼며 처음부터 하고있는 실정... 자 그럼 폴더구조랑 컴포넌트 구성을 봐보자. 구성자체는 전과 같지만..

쇼핑몰 프로젝트 이전 글에서 못 다룬 쇼핑카트 수량 줄이기와 리스트 삭제를 마저 다뤄보자. let players = createSlice({ name: "players", initialState: [], reducers: { addCount(state, action) { let nums = state.findIndex( a => a.id === action.payload); state[nums].count++; }, minusCount(state, action) { let nums = state.findIndex( a => a.id === action.payload); if (state[nums].count > 1) state[nums].count--; }, deleteCount(state, action..

다음은 장바구니에 담겨 있는 선수들의 수량을 추가하거나 감소시키고 삭제하는 기능까지 구현해보자. ( 이번 포스팅은 꽤 길다 ) let players = createSlice({ name: "players", initialState: [ { id: 0, name: "Mohamed Salah", count: 1, }, { id: 1, name: "Sadio Mane", count: 1, }, ], }); 예시로 넣어놨던 Salah와 Mane는 빼주고 시작하자 let players = createSlice({ name : 'players', initialState : [ ], reducers : { } }) reducers: { } 가 생겼는데 이건 기존에 저장되어있는 initialState를 조작하는 함수를..

산을 오르는 이유가 무엇입니까? 산이 거기 있기에... Redux를 배운 이유가 무엇입니까? 그게 거기 있기에.. 축구선수 쇼핑몰인만큼 장바구니는 당연히 있어야겠지... 리액트의 꽃이라고 할 수 있는 redux 지금 시작~~합니다 사실 배웠다고 제대로 사용할 수 있다고 말할 수 없지만 코딩애플 센세께선 항상 배운걸 어디에 적용할지 고민하라그랬다. 어떻게 사용하는지를 배우는거지 왜 사용하는지는 직접 생각해야한다. 그동안 state를 사용할 때 자식 컴포넌트에서 물려와서 props를 이용했었다. 하지만 리덕스를 설치한 후 여러가지 세팅을 해주면 props를 일일이 가져올 필요가 없어진다. 그래서 프로젝트 크기가 어느정도 되면 redux를 사용하는게 훨씬 편하다고한다. 하지만 나는 아직 중간급 규모의 프로젝트..