[회고] 바닐라 JS 게시판 리팩토링 회고

https://1ncomparable.tistory.com/218

[React] 바닐라 JS 게시판 리팩토링 (3) - axios

 

 

바닐라 JS로 만들었던 게시판 프로젝트를 리액트로 리팩토링 하고, express로 서버를 만들어서 연결해보았다. 

데이터는 처음에는 fetch로 요청하게 했지만 이후에 asnyc/await + axios로 수정해보았다. 

오늘은 클론코딩이지만 이 프로젝트를 만들면서 무엇을 했는지 정리해보고 앞으로의 목표를 설정하기 위해 회고를 해보려고 한다. 

 

 

 

📝 프로젝트 구현 목표

• 바닐라 JS로 구현했었던 모든 기능에 더해 추가 기능 구현하기
  • 게시글 목록 보기
  • 게시글 작성
  • 게시글 삭제
  • 게시글 수정
  • 데이터를 직접 만든 서버와 연결해 받아오기
    • fetch로 데이터 받아오기
    • axios로 데이터 받아오기

 

 

 

🧱 실제 구현한 내용

• 바닐라 JS로 구현했었던 모든 기능에 더해 추가 기능 구현하기
  • 게시글 목록 보기
  • 게시글 작성
  • 게시글 삭제
  • 게시글 수정
  • 데이터를 직접 만든 서버와 연결해 받아오기
    • fetch로 데이터 받아오기
    • axios로 데이터 받아오기

 

 

🙆‍♀️ 잘한 점

• 목표하는 내용을 먼저 리스트로 작성해둔것.
  어떤 기능들을 만들어야 하는지 생각하면서 코드를 작성할 수 있었다. 
• 과제를 보지 않고 혼자 힘으로 클론코딩 하면서 서버와 클라이언트가 작동하는 방식을 익힐 수 있었음 
• JS로 만들었던 클라이언트를 리액트로 리팩토링 하면서 리액트의 다양한 hook들을 사용해 볼 수 있었음 
  (useState, useEffect, useRef)
  다음 프로젝트에서는 좀 더 익숙해져서 전역 상태관리를 하는 Redux나 커스텀 hook을 사용해보고싶다! 

 

🤦‍♀️ 아쉬운 점

• 기획 없이 클론코딩으로 내용을 덧붙이다보니까 디자인이 좀 별로인것같음
• class 이름들에 대해서 컨벤션이 없다보니까 이름만 보고 어떤 요소인지 알기 힘들었음
  기본적으로는 BEM 방법론을 사용하려고 했는데 아직 잘 몰라서 이름을 짓기가 힘들었다. 
• 깃 커밋 메시지 작성이 어려웠음. 
  나름대로 간결하게 써보려고 했는데 그러다보니까 오히려 무엇을 하고 커밋을 했는지 알수없었다. 
• 한 기능을 완성하고 커밋을 하다보니까 중간에 이 파일에서는 무엇을했었는지 잊어버렸었다... 

 

📅 이후의 목표 

• 만든 프로젝트들은 전부 깃허브에 올리고 있으니까 간단하게라도 리드미 파일을 작성해둘것 
• 다음 미니 프로젝트 이후에도 간단한 회고를 할것
• 깃 커밋 메시지 작성법 공부하기 + 커밋 자주 하기 
• BEM 방법론 공부하고 정리하기
• 다음 프로젝트는 구현해야할 기능의 리스트와 와이어프레임을 먼저 그려보기