TIL(21.04.12 - 17)

21.04.12(월)

- Git을 이용한 협업 준비

  미니 프로젝트가 시작되었고 이번 프로젝트에서는 Git을 제대로 활용하면서 협업을 진행해보고 싶었다.

물론 프론트, 백엔드 따로 Repository를 만들어서 하기 때문에 프론트 팀원과 둘이서만 협업을 진행하지만 추후 있을 실전 프로젝트는 물론이고 현업에서도 Git 협업능력은 반드시 갖추어야 할 덕목이라 생각했기에 인프런에서 진유림 님의 Git 입문 강의를 구매하여 듣고 프론트엔드 작업을 협업으로 진행하였다.

 

인프런 Git 강좌

강의를 통해 머리로 이해는 했지만 결국 내가 직접 해보면서 얻어야할 스킬이었기에 프론트엔드 둘이서 같이 테스트만 2 시간 넘게 해 가면서 직접 체득하는 시간이 필요했다. 그 결과 merge, branch활용, 충돌 해결 등 정말 실용적인 기술들을 써먹을 수 있게 되었고 천천히 제대로된 협업을 진행할 준비를 갖추었다.

 

 

- 와이어프레임 완료(feat. Figma)

www.figma.com/file/KQtlOKRbFBhlS4XRUCMZeT/%ED%95%98%EB%B9%84%EA%B7%B8%EB%9E%A8?node-id=0%3A1

Figma

 

---

21.04.13(화)

- 기본적인 웹페이지 View 작업(메인페이지, 글 작성 페이지, 글 수정 페이지, 상세페이지, 로그인, 로그아웃)

  기능 추가 전 기본적인 페이지의 view 작업을 둘이 나누어 진행했는데 진짜 혼자 했으면 어쩔 뻔했나 싶을 정도로 시간이 소요됐다. 아마 혼자였으면 이틀은 넘게 view 작업만 했을 듯하다.. (아찔...) 그래도 view 만드는 건 꽤 재밌다ㅎ

 

---

21.04.14(수)

- 소스트리 활용도가 점점 높아지는 것이 체감된다. 그림 색깔이 많아지고 있다.

 

소스트리 잘 활용중

 

- Mock-api를 이용한 기능 테스트 진행

  백엔드로부터 API url을 아직 받지 못해 Mock-API를 직접 만들어서 게시글 목록 불러오는 작업을 테스트하였다. 

---

21.04.15(목)

- 이미지 통신은 FormData()

  게시글을 추가하는 부분에서 이미지를 같이 넘겨야 하는 부분이 있었는데 이때는 Formdata 형식으로 넘겨줘야 서버와 통신이 가능하다는 사실을 배우게 되었고 어떤 형태로 넘겨야 백에서 받고 response를 보내줄 수 있는지 화면을 서로 공유하고 보면서 완벽히 이해된 건 아니지만 대략적인 가닥은 잡을 수 있었고 통신과정에서 request와 response에 대해 조금 더 이해할 수 있게 되었다.

 

---

21.04.16(금)

 - JWT 토큰을 활용한 로그인 기능 구현

  초반에 이해되지 않던 

axios.defaults.headers.common['Authorization'] = `${token}`;

문장을 직접 콘솔로 찍어보면서 접근해보니 이해가 되었다. 이렇게 헤더에 Authorization으로 보내면 정확히 백엔드 쪽으로 header에 들어오더라.. 너무 신기했다.

백엔드 팀원의 화면 공유를 통한 insomnia 툴 활용 장면을 통해 위 과정을 보고 나니 axios를 활용한 통신에 대해 조금이나마 더 직관적으로 이해할 수 있는 계기가 되었다.

 

---

21.04.17(토)

 - 댓글 추가 기능 구현(axios : POST)

  데이터의 형태에 따라 내가 활용하는 axios 통신 방식도 굉장히 다양해질 수 있다는 것들 알게 됨. 기존에 강의 혹은 다른 사람들의 클론 코딩 코드에서는 댓글을 저장하는 API를 따로 구현해서 따로 redux action을 생성하여 활용했지만, 이번 우리 팀에서는 포스트 데이터 안에 댓글 데이터가 같이 포함되어있어서 강의 내용보다 과정 하나가 생략이 가능하였다.