2022.01.28. Thu
우리는 나름 "무엇을" 보다 "어떻게" 구현을 할 것인지에 초점을 맞춰 SR단계를 꼼꼼히 했다고 생각했지만, 개발자의 입장에서 당장 코드를 짠다고 생각했을 때 "어떻게" -> 어떤 페이지에서는 컴포넌트를 어떻게 묶을건지 더욱 구체적으로 협의해야 했다고 생각한다.
막상 코드를 짜려고 하니, 공식적으로 협의하지 못했던 부분들이 많아 난감한 적이 자주 있었다.
👍 잘한 점 :
👎 못한 점 :
👩🏻💻 개인적으로 보완할 점 :
✏️ 소소한 소감 :
I am still feeling like a potatohead 🥔 every time in front of my computer but no, this has to stop. 😂
내가 client, server 코드를 둘 다 짤때는 할만했지만, 남이 짠 server코드를 보면서 (+API 명세서 보면서) 코드를 구현하려니까 평소에 헷갈리지 않았던 개념들도 헷갈렸다. 나는 server->client / client->server 프로세스의 모든 것을 완벽하게 알고 있지 못했음을 느꼈다.
API 명세서 보는 방법을 확실히 배웠다.
내가 axios.post를 보내는 곳은 /todo/:boardId
이며, body에 content를 담아 보낸다. (이걸 Parameters라고 한다.)
const { boardId } = useParams(); //board_id를 useParams사용해서 앞으로 boardId라는 이름으로 쓰겠다는 의미다. 이건 미리 설정해줬을 때 가능. axios.delete에 사용할 path인 todos_id 는 내 코드에서 useParams 사용 불가 (설정을 안해줘서. 이 부분 어떻게 설정하는건지 알아보기)
...
axios.post(`http://localhost:80/todo/${boardId}`, { contents: text }).then((res) => console.log(res));
// text는 코드 윗부분에 정의되어있음
서버 코드에서는 다음과 같이 구현되어 있다. (server/routes/todo.js)
router.post("/:board_id", (req, res) => {
잘 작동한다면, 서버에서 나에게 보내는 내용은 201: Created 부분이다. "message": "Todo Create Success"
Get 요청 시에는, body로 보내는 내용은 없고 path는 boardId이다. (윗부분에 useParams 적용됨)
const getTodos = useCallback(() => {
axios
.get(`http://localhost:80/todos/${boardId}`)
.then((res) => {
setTodoList(res.data.data);
})
.catch((err) => alert(err));
}, [boardId]);
useEffect(() => {
getTodos();
}, [getTodos]);
클라이언트에게 서버에 저장되어있는 투두리스트를 보내달라는 요청이다.
useEffect 부분 다시 공부하기. (state 바뀔때마다 get 해라)
서버가 나에게 보내주는 정보는 id, contents, board_id, is_completed 이다.
삭제할 리스트아이템의 고유 id를 지정해서 서버에서 "삭제해줘"라고 명령을 해야 하므로 deleteTodo함수의 인자에는 id가 들어가야 한다. (이 부분의 로직을 미처 생각 못해서 좀 헤맸다.)
const deleteTodo = (id) => {
axios
.delete(`http://localhost:80/todo/${id}`)
.then((res) => {
window.location.reload();
// 삭제버튼 누르면 알아서 새로고침 되는 기능.
//삭제 버튼 누른다고 해도 페이지가 자동으로 refresh되지 않기 때문에, 서버에서는 삭제되었지만 화면상에선 그대로 보인다. 수동으로 새로고침을 눌러줘야 비로소 화면상에서 삭제가 되는데, window.location.reload()를 사용하면 자동으로 처리한다.
//(이 부분이 axios.get부분으로 가면 페이지 로딩이 어떻게 되는지 보면 재밌다.)
})
.catch((err) => alert(err));
};
const deleteTodo = (id) => {
console.log(id);
axios
.delete(`http://localhost:80/todo/${id}`)
.then((res) => {
window.location.reload();
})
.catch((err) => alert(err));
};
deleteTodo 에 인자로 id가 들어갔다고 해서
return에서 자식컴포넌트로 props 보낼 때 deleteTodo = {() => deleteTodo(id)}
꼭 이런식으로 보내란 법 없다. deleteTodo={deleteTodo}
로 보낸다.
<Todolist todoList={todoList} checkedList={false} deleteTodo={deleteTodo} />
map(el => {
어쩌구 return ()
})
map(el => (
return이 필요 x
))