스파르타코딩클럽 내일배움캠프 39일차

오늘 일과 간단 요약

1. 프로젝트 발제
2. 와이어 프레임 제작
3. TIL 특강
4. S.A. 작성 후 회의 (S.A. 바로가기)

 

 

 

 

 

React 프로젝트 시작

드디어 길었던(?) 개인 공부 시간이 지나고 프로젝트가 시작되었다.

지난 프로젝트를 굉장히 재밌게 했던 기억이 있어서 이번에도 재미있게 하고 싶은데...

생각해보니 저번에는 그래도 익숙했던 vanila JS를 사용했었고 이번에는 처음 배우는 React 프로젝트 라서

마냥 재미만 있지는 않을 것 같다 ㅋㅋㅋㅋ

 

실제로 오늘 하루종일 와이어프레임 만들고 기능 나누고 등등 회의만 했는데 벌써 하루가 지나버렸으니까.

그래도 뭐...프로젝트는 늘 즐거웠으니까 좀 기대된다(?)

 

 

 

 

와이어 프레임

프로젝트 발제가 끝나고 S.A. 작성을 위한 회의를 시작했는데 이미 우리 조는 주제에 대한 회의는 끝냈기 때문에

아이디어 부분은 굉장히 수월하게 끝났다.

 

우리 조 프로젝트는 <애니멀 월드>

미니홈피 형식으로 제작하고 싶어서 와이어 프레임 역시 미니홈피 프레임을 그대로 따왔다.

 

처음에는 로그인/회원가입 기능을 구현하고 싶었었는데

그런 식으로 로직을 짜다보니 생각보다 더 복잡한 로직이 나와서 고민을 많이 했었다.

 

솔직한 생각으로는 여러 기능을 도전해보고 싶은 마음이 더 컸는데, 이건 팀 프로젝트이고 더군다나 제한 기간이 있기 때문에 그 기한 내에 끝낼 수 있는 기능만 하는게 맞다는 생각이 들었다.

그래서 원래 구성했던 와이어 프레임에서 덜어낼 건 덜어내고, 최소한의 기능만 필수 기능으로 변경했다.

 

그래서 나온 와이어프레임이 이거.

원래는 내가 피그마로 와이어프레임을 다 짜고 거기서 로직을 회의하다가

이렇게 보다 심플한 버전의 와이어 프레임으로 변경했다.

중간에 내가 국취제 상담을 잠깐 다녀오느라, 최종 와이어프레임은 다른 조원분들이 수정해주셨다.

 

지난번 프로젝트에서는 내가 와이어프레임을 전부 제작하고 조원분들에게 링크를 공유했었다면,

이번에는 모두 와이어프레임을 편집할 수 있도록 권한을 줬다. 그부분이 더 발전한 점이라고 생각한다.

팀 프로젝트 할 때는 서로 피드백을 주고 받을 수 있는 공간이 필요한데, 지난 번 피그마 사용할 때는 그러지 못했다.

그래서 와이어프레임과 최종 프로젝트가 조금 다른데, 이번에는 그러지 않을 것 같아서 다행이다.

 

필수 기능만 넣어봤는데 생각보다 어려울것 같기도...?

사실 기능 구현보다는 제한 기간을 지키는 게 더 어려울 것 같기도 하다.

아무래도 크리스마스도 끼어있고 지난 두 번의 프로젝트보다 기간이 짧아서...

그렇지만 길고 짧은 건 대봐야 아는 거니까...혹시 모르지. 우리가 다 끝내고 추가 기능을 더 구현할 수도...?ㅋㅋㅋㅋ

 

 

 

 

프로젝트 필수 기능들

전체 기능

• 게시글, 댓글에 작성 시간 보여주기
• 댓글, 게시글 CRUD
• 댓글, 게시물 수정 | 삭제 시 비밀번호 확인

메인 페이지

• 전체 게시물 조회기능
• 특정 게시물 조회기능 → 해당 게시물 상세 페이지로 이동(=해당 글 작성자 페이지)
• 글쓰기 버튼 → 글쓰기 버튼 클릭 시 글쓰기 페이지로 이동(or 토글)

상세페이지

• 해당 게시물 작성자 글 전체 조회
• 해당 게시물 작성자 이름 프로필 란에 조회
• 메인 페이지 이동
• 특정 글 댓글 작성
• 댓글 삭제 ( 비밀번호 확인 방식 )

 

이번 프로젝트에서 구현해야 할 기능들이다. 

전부 적어보니까 많은 것 같은데 게시물과 댓글 기능이 비슷하니까...괜찮지 않을까?

 

문제는 사용자 구분을 하기 위해 비밀번호를 설정하고 그 비밀번호와 동일해야 수정/삭제 기능을 구현한다는 것인데...

이건 아직 해결하지 못한 부분이다.

이미 그런 기능으로 댓글을 다는 사이트가 있어서 거기서 힌트를 얻어오고 싶은데....음...아직 잘 모르겠다.

빨리 구글링해서 어떤 식으로 코드를 짜야 하나 고민해야 할 것 같다.

여유롭게 하려면 많이 공부해야 할듯 하다.

 

 

 

 

TIL 특강

점심 먹고 바로 국취제 상담 대비하러 카페로 이동해야 했는데 그래서 핸드폰으로 특강을 들었었다.

이 부분은 너무 아쉽다 ㅠㅠ 초반에는 못 듣고 뒤늦게야 제대로 연결이 되어서....ㅠㅠ 나중에 다시 들어야겠다.

.

특강을 다시 듣지는 못했지만, 튜터님이 특강에서 제공해준 자료를 읽어보았는데

TIL을 어떤 식으로 써야 하는지 감이 잡힌다.

마지막 Q&A 세션이 마음가짐을 다시 바르게 하는데 도움이 된 것 같다.

지금 거의 한달 넘게 하면서 나도 모르게 좀 풀어진 경향이 있었는데...다시 초심으로 돌아야가지...

(사실은 어차피 프로젝트를 하면서 바빠지기 때문에 초심으로 돌아가는 것 같기도 하다 ㅋㅋㅋ)

 

 

 

 

 

튜터님에게 질문한 내용

S.A. 제출을 완료한 뒤 저녁 먹고 돌아와서는 어떤 역할을 맡을지 회의를 했었다.

그 중에 나는 게시글 부분을 맡았고 게시글 부분을 맡은 사람끼리 따로 모여서 이야기를 나누면서 심화 강의 복습을 했다.

 

내가 선발대 과제로 만들었건 파일과 심화 강의를 들으면서 직접 구현해봤던 예시 코드를 가지고

서로 이야기를 나누면서 복습하는 시간을 가졌는데 굉장히 좋은 시간이었다.

나는 나대로 내 코드를 설명하면서 다시 한번 복습하고, 잊어버렸던 개념을 다시 짚을 수 있는 기회였다.

 

그러다가 심화 강의 예제 코드를 실행하면서 튜터님에게 질문할게 생겼다.

 

axios를 이용해 투두리스트를 만드는 예시였는데 수정 버튼을 누르면 바로 수정이 되는게 아니라,

새로 고침을 해야만 수정이 되는 문제를 어떤 식으로 해결해야 할지 몰랐었다.

 

처음에는 이런 코드였었다.

...

// todo 삭제
  const onClickDeleteButtonHandler = (todoId) => {
    await axios.delete(`http://localhost:3001/todos/${todoId}`);
    const newTodoList = todos.filter((todo) => todo.id !== todoId);
    setTodos(newTodoList);
  };

// 수정버튼
  const onClickEditButtonHandler = (todoId, edit) => {
    axios.patch(`http://localhost:3001/todos/${todoId}`, edit);
  };
  
  ...

여기서 patch를 사용해 투두리스트에 있는 todo 내용을 수정할 수는 있는데, 새로고침을 하지 않으면 반영이 되지 않았다.

이 문제를 해결하려고 구글링하다가 제대로 된 답변이 나오지 않아서 그냥 튜터님에게 질문하러 갔다.

 

그러고 나서 완벽하게 해결했다...!

나는 처음에는 todo 삭제 코드처럼 newTodoList를 만들어서 filter를 하던지 아니면 if문으로 수정되는 게 있다면 그걸 조건을 줘서 그 조건을 만족하는 투두리스트를 새로 만들어 setTodos에 넣어줘야 한다고 생각했었다.

그랬는데, 이걸 async와 await를 사용해서 간단히 해결할 수 있었다.

 

 

...

// axios를 통해서 get 요청을 하는 함수를 생성합니다.
  // 비동기처리를 해야하므로 async/await 구문을 통해서 처리합니다.
  const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:3001/todos");
    setTodos(data); // 서버로부터 fetching한 데이터를 useState의 state로 set 합니다.
  };

...

// todo 삭제
  const onClickDeleteButtonHandler = async (todoId) => {
    await axios.delete(`http://localhost:3001/todos/${todoId}`);
    //const newTodoList = todos.filter((todo) => todo.id !== todoId);
    //setTodos(newTodoList);
    fetchTodos();
  };

  // 수정버튼
  const onClickEditButtonHandler = async (todoId, edit) => {
    await axios.patch(`http://localhost:3001/todos/${todoId}`, edit);
    fetchTodos();
  };
  
  ...

여기 변경된 코드를 보면 비동기 처리를 위해 async/await 구문으로 변경했다.

이로써 todo 삭제 역시 손쉽게 바꿀 수가 있었다.

 

fetchTodos가 todos를 전부 받아오는 함수이기 때문에 이 함수를 사용하면 아무리 하나를 삭제해도, 수정해도 todos를 전부 받아올 수 있게 된다.

그런데 여기서 await 구문을 사용했기 때문에 delete/patch 가 실행되고 난뒤의 todos를 전달받는다.

 

이렇게 간단하게 사용할 수 있는 것을..!!

delete 부분도 내가 썼던 filter를 사용하지 않고도 쓸 수 있다니...역시 튜터님한테 질문하는게 최고이다.

 

그리고 반드시 key가 필요한 이유 역시 알게 되었다.

map을 사용할 때 고유한 key가 존재하지 않으면 index로 돌게 되는데 만약 이렇게 된다면 index[0], index[1] 이런 식으로 id가 부여되기 때문에 나중에 오류가 생길 수가 있다.

가끔 코드를 짤 때도 key가 없으면 콘솔 창에 warning 문구가 찍히는 데 이런 이유에서였다.

 

자세한 건 이 공식문서에 적혀 있다.

https://reactjs.org/docs/lists-and-keys.html

Lists and Keys – React

 

이렇게 모르는 걸 해결하고 나니 한결 할 수 있을 것 같다는 자신감이 생겼다(?)

이건 나만의 생각일 수도....?!

여튼 하루 종일 프로젝트로 내내 바빴는데 이렇게 질문도 하고 조원들과 복습하면서 하루를 잘 마무리했다고 생각한다.

 

 

 

 

 

 

짧은 일기

늘 프로젝트를 시작하면 어떤 프로젝트를 해야 할지 구성하느라 하루가 다 가는 것 같다.

이번에는 기간도 짧고 필수 기능도 생각보다 어려워서 조원들과 내내 회의만 하다 끝난 기분이다.

중간에 국취제 상담 때문에 카페에서 해야 했는데 시끄러웠을 것 같아서 조원들에게 미안하다ㅠㅠ

 

그래도 와이어프레임도 잘 짰고 API 설계도 처음부터 자세히 해서 이제는 구현하는 우리 몫만 남았다.

오늘은 이전 내용 복습 좀 하고 비밀번호 부분에 대한 조사만 해야겠다.

빨리 필수 기능을 구현 완료하고 추가 기능을 구현하고 싶은데...너무 꿈이 큰가?ㅋㅋㅋㅋㅋㅋ

 

일단은....내일부터 열심히 기능 구현하는게 목표다.

이번 프로젝트도 재밌고 즐겁게 진행했으면 좋겠다...!!