(항해33일차) 220407 리액트 미니프로젝트 1일차

와 드디어 미니프로젝트를 시작한다. 

아는건 쥐뿔도 없는데 뭔가 만든다는 생각에 기대된다. 

비록 지금 미리보기 이미지 크기에 고통받는 중이지만, 오늘은 아주 재밌는 시간을 보냈다.

팀원들과 이야기하면서 계획을 짜는 것도 재밌고,

지난주엔 안 풀렸던 것 들이 이상하게 조금 알 것 같으니 불안하면서도 좋다. 

 

비록 지난 주에 했던 과제를 다시 한 번 하는 수준에 가깝지만

해야 할 일을 나름대로 계획해서 처리하는 와중에 문득 첫 날이 생각났다. 

항해 시작하고 바로 첫 날 아무것도 모르는 상태로 보드에 뭔가 이해하지 못한 내용들을 적고

깃허브가 뭐지? 계속 파이참만 썼는데 왜 VSC를 쓰는거지? 어디서부터 시작해야 하지?

적응은 안되는데 뭔가는 해야했던 그 때를 생각하면 오늘은 정말 즐거운 날이었다.

 

---

1. < 백엔드 / 프론트엔드 > 어디에서 연결고리가 있나?

==========================================================

지난 주 프로젝트의 경우 게시글 저장하기를 예로 들면

유저가 내용을 작성하고 버튼 클릭시 

1. 미들웨어의 addPostFB함수를 호출한다.

2. 작성한 내용과 유저정보, 시간, 사진 등을 합쳐 하나의 데이터로 묶는다. 

3. 파이어베이스에 데이터를 저장한다.  

4. 저장한 파이어베이스 데이터의 id를 받아와 스토어에 보낼 데이터에 포함시키고, 
리덕스 스토어에 저장될 형태로 데이터를 틀에 맞게 배치한다. 

5. 리듀서로 액션을 디스패치한다. 

6. 리듀서에서 스토어로 데이터를 보내 저장한다(스토어의 스테이트 배열에 추가한다.) 

==========================================================

이 과정에서 내 생각에 서버는 파이어베이스의 역할을 하는 듯하다. 

그래서 axios (아직 써보지는 않았지만) 를 사용해 서버로 데이터를 보내고, 다시 받아온다. 

똑같은 과정이지만 파이어베이스가 백엔드로 바뀌었다고 생각하면 안 헷갈릴 것 같다. 


2. 프로젝트 정하기 

먼저 스코프를 어떻게 가져갈 것 인지 정했다. 새로 익혀야 할 추가기능들은 최대한 배제하고 우선 할 줄 아는 기능 먼저 넣어서 완성하기로 했다. 이후 완성이 빨리 될 경우 추가기능을 구현하면 좋겠다.  

구현할 기능의 수준을 정한 후 주제를 정했다. 사실 구현하는 기능이나 프로젝트의 구조가 거의 똑같기 때문에 컨셉을 정했다. 여러 의견들이 나오고 최종적으로 냉장고를 부탁해 라는 프로젝트를 진행하기로 결정했다. 

냉장고를 부탁해는 유저가 집에 있는 식재료와 간단한 코멘트, 냉장고 사진을 올리면 카드형식으로 등록되고, 다른 사람들이 해당 식재료로 만들 수 있는 요리를 추천하는 사이트이다.

등록한 포스트와 댓글은 수정, 삭제가 가능하고 이외에 로그인/로그아웃, 유저아이디와 함께 프로필을 보여주기 기능을 구현해보려고 한다. 
생각한 추가기능은 소셜로그인, 포스트리스트의 무한스크롤과 알림, 좋아요가 있다. 

3. 와이어프레임 작성
프로젝트의 대략적인 디자인을 그려보고 어떤 기능이 어떻게 구현되어야 하는지 이야기를 나눴다. 어느 페이지에서 데이터가 오고갈지와 같은 부분은 사람마다 생각이 달라서 이 과정에서 확실히 결정이 필요했다. 

3. api 짜기
처음이다 보니 주고 받을 데이터 api를 짜는데 시간이 오래걸렸다. 각 기능별로 api를 작성하고 이미지의 경우 어떤 방식으로 데이터를 주고받을지 좀 더 알아보고 결정하기로 했다. 

4. 프론트엔드/백엔드로 나눠서 회의 진행
1) 먼저 페이지별로 누가 어떤 페이지를 담당할지 결정했다. 
2) 컴포넌트와 엘리먼츠는 어떤 방식으로 이름을 짓고, 사용하고, 공유할지 결정했다. 지난주 과제했던 내용을 기준으로 최대한 통일하기로 했다. 기준이 있어 다행이지만 없을 때는 어떤 방식으로 정하는지 궁금하다. 
3) 깃허브에서 레포지토리를 만들고 기본적인 폴더구조를 잡아 공유했다. 각자 한개씩 브랜치를 만들어 머지할 때는 모여서 결정하기로 정했다. 
4) 기한을 정했다. css는 기본적인 것은 우선 하되 최대한 미루고, 기본적인 틀을 내일까지 만들기로 결정했다. 백엔드분들과 이야기했을 때 생각보다 시간이 촉박할 것 같아, 우선 3일 뒤까지 기능을 완성해보기로 결정했다.

---

새로 배울 것 들이 또 넘쳐나는 하루였다. 

 

axios 

jwt토큰(이건 분명 한 번 봤던 개념인데 너무 새로워 신기할 정도이다. 나는 써봐야 안다.)

 

일단 서버랑 얘기가 통하려면 이 두 개를 빨리 알아야 할 것 같다.