WIL 6 (4/2-4/8)

				@  	 인스타 클론 코딩	      @

0. 안녕 Axios

처음으로 백앤드 분들과 다른 프론트앤드 분과 2:2로 만나서 클론코딩 프로젝트를 진행했다. 백앤드 분들도 원래는 각자 html,css를 대략 만들어서 서비스를 만들고 계셨었고, 우리도 파이어베이스라는 서버를 사용하고 있었어서 서로의 데이터들이 오가는(?) ajax를 요청, api연동이 어려웠다.

• Ajax는 GET,POST등을 새로고침 없이 할 수 있게 도와주는 코드이다. 보통 state가 변경되면 새로고침이 되는데 이건 새로고침이 되지 않는다! 좀 더 웹 다울 수 있다.

Ajax를 쓰는 많은 방법 중에서 리액트에서는 axios를 fetch만큼 많이 사용하고, 오히려 더 많은 자료가 있다고 해서 axios를 사용하기로 했다.

1. 안녕 API

파이어 베이스로 공부를 했었어서 백앤드와는 어떤 식으로 소통해서 데이터를 주고 받는지 감이 잡히지 않았었다. 프론트단에서는 단순히 백단에서 데이터를 받아서 붙여주기만 하는게 아니라, 그 정보를 가지고 정보를 추가하거나 수정하거나 삭제하는 일도 해야하고 이외의 기능을 만들어야하기 때문에 많은 소통이 필수적으로 필요했다.

우리 팀에서 진행했던 순서를 기억해보면

1. 구현 해야할 페이지와 기능을 나열한다. (필수적으로 구현 해야하는 기능 우선으로)
2. method와 api url을 정한다
3. 프론트 & 백 각각 request 와 response를 정하고 함께 이야기한다
4. 이때 백앤드에서 최대한 정한 이름대로 개발한다

2. 안녕 mock up 데이터 / 더미 데이터

함께 정한대로 대략적인 mock up 데이터를 만들어서 modules에 저장해주고 그걸 가지고 서버가 만들어지는 동안 개발을 했다.
(mock up 데이터로 제대로 잘 개발을 해놓으면 api 연동을 했을 때 문제 없이 잘 받아와지는 게 너무 신기했다)

3. 나는 무엇을 했나?

우리 팀에서는 인스타그램 클론코딩을 했는데,
나는 그 중에서 1. 게시글 작성(글+사진) 2. 프로필 & 친구들 상세페이지 3. 프로필 이미지 변경 이렇게 크게 3가지 구현을 했다.

1. 게시글 작성(글 +사진)
   • 전에 했던 매거진 프로젝트 때 했던 것과 매우 유사하게 진행했다.
     • 달랐던 점은 전에는 혼자 작업하는거라 firebase를 사용해서 이미지를 저장하고 미리보기를 보여줬는데 이번에는 FileReader()를 사용하고 setState를 사용해서 이미지를 갈아끼우면서 미리보기를 보여줬다.
       서버에는 일단 post모듈에 인자로 file을 보내고 그 file을 formDate()를 사용해서 넘겼다

2. 프로필 상세페이지 + 친구들 상세페이지

   • 프로필 상세페이지는 말 그대로 인스타그램 프로필에 들어가면 보이는 상세페이지를 만드는 작업이었다. 일단 뷰를 짜는 것도 어려웠다.

   • 프로필 상세페이지에 들어가야 하는 컴포넌트들을 나누고 밑에 정사각형의 이미지들이 붙을 수 있게 했다

   • 해당 아이디의 게시물을 불러오고 그 게시물의 이미지만 보일 수 있게 했다

   • 그리고 그 이미지를 눌렀을 때 해당 포스트로 갈 수 있게 했다
     history.push('/postdetail/'+props.post_id)를 사용했다 (이런 식으로도 이동이 가능하다는 걸 알게됨)

   • 조건부 랜더링이 특히 필요하던 부분

     • 로그인 기능이 있기 때문에 자신의 페이지엔 자신이 가야 프로필 헤더에 프로필 변경 버튼이 있을 수 있게 했다
     • 각자의 아이디에 맞는 포스트들이 각자의 페이지에 붙을 수 있게

3. 프로필 이미지 변경

• 프로필 이미지를 눌렀을 때(물론 자기만) 모달 창이 뜨면서 프로필 이미지를 업로드 할 수 있게 했다

4. 느낀 점

솔직히 많이 재미있었고 그만큼 많이 힘들었다. 개발도 협업도 만만치 않았다.

• 개발에서 어려웠던 점

  • 기본적인 CSS에서 당황했다. 그대로 똑같이 따라하는 것도 쉽지 않다는 점을 알게 되었음
  • 너무 당연하지만 아직 많은 개념들이 헷갈리고 적용과 응용이 쉽지 않다는 점

• 협업에서 어려웠던 점

  • 다른 팀원들 보이게 제대로 아는 게 없다고 느껴질 만큼 개념정리가 잘 되어있지 않은 내 상태
    • 물론 다들 동일한 상황이지만 함께 협업을 해야하는 상황에 내가 피해가 된다는 (!!아이고!@) 바보 같은 생각에 점점 작아지고 마음이 어려웠다.
    • 항해 99에 참여하면서 처음으로 새롭게 발견했던 내 모습이자 지금까지 고치기가 너무 어려운 내 모습이다 -> 못한다는 생각에 작아지는 것
      전혀 팀에 도움이 되는 모습이 아닌데 내 스스로가 답답했다
    • 그러다보니 점점 주신일(?)을 열심히 하는 수동적인 태도를 취했다. 조금 더 욕심내보고 조금 더 해보겠다고 말할 수 있었을텐데 쉽지 않았다.
  • 혼자 공부할 때는 생각도 못했던 내 모습이었다
    • 혼자 공부할 때는 언제까지고 내가 이해할 때까지 ~ 혹은 해결할 때까지 시간을 가질 수 있었지만 이건 내가 기능을 빨리 만들어야 서버에서 확인해 볼 수 있는 부분도 있고, 내가 맡은 부분을 어서 끝내야 다음 기능으로 넘어갈 수 있는 부분이라 충분히 이해하지 못하고 그냥 되는대로 해버리는! 부분이 너무 쉽지 않았다.

• 협업으로 깨달은 점

  • 나의 지금의 태도로는 절대 함께 하고 싶은 개발자가 될 수 없다는 판단이다.
    실력 좋은 개발자는 많고, 나는 정말 함께 하고 싶은 개발자가 되고 싶다고 생각했는데 내 실력이 아무리 괜찮아도(?) 내가 나에 대한 자신감이 없으면 나라도 함께하고 싶지 않겠다는 생각이 많이 들었다.
    교만하거나 자만해서도 안되지만 내 자신에 대해 너무 자신감이 없어서도 안된다 ! 자신감을 갖자! 자신감이 없는 사람의 말은 아무에게도 들리지 못한다.
  • 소통의 중요성. ㅏ 다르고 ㅓ 다르다.

5. 다음주에 나는

이번 클론 코딩으로 내면의 바닥을 찍어본 (?) 나는 미니프로젝트를 하지 않고 개인 정비 2주를 하기로 했다. 협업할 때 얻을 수 있는 많은 메리트를 가지지 못하겠지만, 지금은 나의 자신감 회복 문제가 더 중요하다고 생각했고, 이 시기에 자신감을 잘 가져야 실전 프로젝트를 안정적으로 할 수 있을거라는 판단이 들었기 때문에 결단했다.
후회 없는 2주를 보내길. 진백아 할 수 있다!!!!!