First Project DevLog 6

Churro.·2022년 1월 27일
0

2022.01.28. Thu

First Project 회고 및 보완점

마케팅 그만하고 코드 구현!

우리는 나름 "무엇을" 보다 "어떻게" 구현을 할 것인지에 초점을 맞춰 SR단계를 꼼꼼히 했다고 생각했지만, 개발자의 입장에서 당장 코드를 짠다고 생각했을 때 "어떻게" -> 어떤 페이지에서는 컴포넌트를 어떻게 묶을건지 더욱 구체적으로 협의해야 했다고 생각한다.
막상 코드를 짜려고 하니, 공식적으로 협의하지 못했던 부분들이 많아 난감한 적이 자주 있었다.


👍 잘한 점 :

  • 와이어프레임과 프로토타입에 기능과 구현로직을 일일히 적었다.
  • Figma로 페이지 디자인을 정성들여 만들었고, main color Pink와 grey를 5가지 채도로 나누어 설정했다.
  • Gathertown 사용으로 온라인회의의 불편함을 줄일 수 있었다. (그냥 가서 질문하면 되니까. 질문할 때마다 zoom방 계속 만들 필요 없으니)

👎 못한 점 :

  • Too much 협업으로 인한 시간낭비.
    첫 프로젝트이다 보니, 다들 어디서부터 시작해야 할지 몰라서 A-Z까지 4명이서 함께 모여 한가지 일을 같이 진행했다. 결과적으로, 프로젝트 흐름에 대한 팀원들의 이해도가 높아져서 좋았지만, 그만큼 불필요한 시간 낭비가 있었다는 점이 아쉬웠다. 코드 구현에는 정작 2-3일밖에 쓰지 못했다.
    👉 Final Project에서는 분업을 지향해야 하겠다. 이제 다들 어느정도 프로젝트 프로세스는 알고 있으니, 협업이 필요한 부분과 불필요한 부분을 잘 나누어 효율적인 시간분배를 할 수 있을 것이라 생각한다.

👩🏻‍💻 개인적으로 보완할 점 :

  • Tailwind 익히기
  • Redux 사용법
  • vim, nano
  • hotfix
  • 배포 과정 복습

✏️ 소소한 소감 :

I am still feeling like a potatohead 🥔 every time in front of my computer but no, this has to stop. 😂


DevLog

Today's problems

  • 내가 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));
  };

Tomorrow's contribution

  • 벌써 내일이 First Project 발표일이다. 서비스 소개와 기능 시연 영상을 ppt에 담아 미리 촬영하여 제출해야 해서 내일 아침 9시에 일찍 회의를 시작하기로 했다. (원래는 오전 10시로 회의시간이 늦춰졌었다.)


Error Handling

Error 1

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} />

Error 2 - map 사용 시 소괄호와 중괄호

map(el => {
어쩌구 return ()
})

map(el => (
return이 필요 x
))
profile
I, sum of records.

0개의 댓글