5-5

오늘 내가 한 일

• 마이페이지의 내가 쓴 글, 내가 쓴 댓글 가지고 오는 리덕스작성과 컴포넌트 연결작업
• skill 선택 스테이트 흐름 잡아보기

KEEP

• 내가 잘 못하는 리덕스의 사용과 상태관리 부분을 조금이라도 더 공부하기 위해 마이페이지의 기능을 가지고 왔다.
• 다른분의 코드를 보며 이게 어디서 왔는지, 어떻게 저장하고 보내는지 공부하면서 끌어다 써봤다.
• 모르겠는 부분은 팀원분들에게 적극적으로 물어보고 배웠으며, 백의 언어를 모르겠을때 어떤 역할을 하는 애인지 물어보며 소통을 했다.

problem _ 내가 겪고있는 문제

1. 리덕스 사용의 목적을 모르고, 사용을 잘 안해봐서 못한다.
2. 백에서 데이터를 받아와 프론트에 붙여주는 과정을 잘 못한다.

TRY _ 문제해결을 위해 내가 노력한 것

1. 다른 분이 작성한 리덕스를 보며 주석을 달아 해당 함수가 어떤 역할을 하는지 공부함
2. 백과 소통할때 모르는 용어가 나오면 용어의 역할을 듣고 내 프로젝트의 어느 부분에 어떻게 들어가야 할 지 생각하면서 어떻게 넘겨주면 좋겠다 소통하며 잘 받아왔다.
3. 상태관리가 어려운 부분은 직접 써보며 흐름을 그렸다.

• TRY를 통해 배운내용

  promise와 async,awiat
  - 프라미스 = 비동기 처리 패턴
  - 비동기 처리의 가장 큰 의미는 '기다림' 이다.
  내가 백에서 받아온 정보를 무조건 넣어줘야 하는데, 코드를 훑을때 그 받아오는 시간을 기다려 주지 않고 훑어 내려가면 받아온 정보가 들어가지 않는다.
  이를 방지하기 위해 비동기 처리를 사용하는 것 이다. 백에서 받아온 정보가 들어올때까지 기다려 주는 역할이다.
  - await와 async는 프라미스값을 반환하는 함수가 아님에도 불구하고 함수의 결과를 프라미스로 반환 할 수 있도록 도와준다.

  리덕스 사용 정리

  1. 리듀서의 액션이 일어나길 바란다면, 디스패치를 꼭해라
     -> useDispatch, dispatch(가져오고 싶은 액션함수)
  2. 리듀서는 두가지 타입으로 작성할 수 있다.
     • handleActions : 임포트해서 사용해야 함
     • switch 구문
  3. 액션 생성함수 : 내가 넣어야 할 데이터를 넣어주는 부분
  4. 액션 생성자 : creatAction
  5. 리덕스 사용의 목적 : 컴포넌트간의 스테이트 관리 + 백에서 받아오는 값을 컴포넌트에 넣어두면 리로드 할때마다 다시 받아와야 함
     (자유이용권 끊어두고 계속 티켓 끊어서 사용하는 꼴)
     내가 프로젝트에서 실제 작성한 리덕스 모듈(내가 쓴 글 불러오기)

     import { createAction, handleActions } from 'redux-actions'
     import { produce } from 'immer'
     import axios from 'axios'
     import {apiGetMyArticle} from '../../api/usersApi'
     	// 내가 쓴 글 액션타입 
     const GET_MYARTICLE = 'GET_MYARTICLE'
     	// 액션 생성자
     const getMyarticle = createAction(GET_MYARTICLE, myarticle => ({ myarticle }))
     	//초기화(초깃값 설정)
     const initialState = {myarticle: null}
     ----------------------------------------------------------->
     	// 내가 쓴 글 정보 가지고 오기 액션 생성 함수
     const getMyArticleFB = params => {
     	return async function (dispatch, getState, { history }) 
          {const my_article_list = await apiGetMyArticle(params);
        		//apiGetMyArticle()은 서버쪽에서 받아오는 path 정보를 저장해둔 함수를 데려 온 것 이다. 
     		// 데이터를 어떤 형식으로 넘겼는지 알 수 있도록 콘솔을 찍어봐야 한다.(data.content 이 부분때문에)
      	console.log(my_article_list);
      	//디스패치는 액션을 호출하는 메서드 이다. 액션 함수에서 getMyarticle이라는 액션을 호출하는 것 이다.
         dispatch(getMyarticle(my_article_list.data.content))
     			 }
     ------------------------------------------------------------>
     	//리듀서 부분
     export default handleActions(
     {[GET_MYARTICLE(액션타입)]: (state,action)=>
        produce(state, draft => { draft.myarticle(액션타입참고) = action.payload.myarticle(액션타입 참고)})
     },
     initialState
     )
     	//나의 액션 생성함수 묶어주기
     const actionCreators = {getMyArticleFB}
     	//액션생성함수 내보내기
     export { actionCreators }

  이외에 배운 여러가지 사실들

  1. 페이로드 : 제이슨(백에서 넘겨줄때 제이슨 형태로 넘겨준다.)에서 전송하고자하는 데이터 -> jason 안의 data 값이 페이로드이다.
  2. 토큰의 사용
     로그인을 하면 토큰이라는 자유이용권을 발급해서 여러가지 데이터들을 열람할 수 있도록 도와준다. 토큰이 없는 사람은 일부 열람에 제한이 된다.
  3. 서버에서 API받아오기

     //apisToken은 axios에서 받아온다.
     ///mypage/article 서버에서 내게 넘겨줄 데이터 path
     //get인지 post인지는 서버에서 넘겨주는 값을 확인하고 사용
     function apiGetMyArticle(params) { return apisToken.get('/mypage/article',params) };

프로젝트 협업방식 회고

1. 내가 팀을위해 한 노력

• 팀원들이 무언가 물어보면 아는 선에서 최대한 알려주려고 노력함.
• 팀원이 힘들어하는 부분을 내가 가지고 와서 해결함.
• 백과 프론트 소통을 원활하게 하려고 노력함.
  2. 팀원에게 감사한 점
• 우선 백엔드 팀원분들께는 제가 용어를 몰라 소통이 어려울 때 역할 을 말씀해주시고 설명해주셔서 감사합니다. 덕분에 소통하는 법도 배우고 편하게 데이터를 받아올 수 있었습니다.
• 팀이 해결한 문제

앞으로 내가 해야 할 공부

1. 리덕스 작성하는 것 조금 더 매끄럽게 되도록 연습!
   (미니 프로젝트를 만들어 연습해봐도 좋을 듯)
2. 리액트 강의 중 꼭 들어야 할 것 같은 부분들 틈틈히 들어두기
   (기능보단 일단 개념에 초점을 두고 기능은 프로젝트 진행하면서 필요할 때 보기)
3. 클론코딩, 실전 프로젝트를 통해 서버와 소통하고 데이터 연결하는법 연습