1차 스프린트 회고

구현 기능

[o] 시리즈 모집 작성, 수정 Page 구현
[o] 시리즈 create 기능 구현
[o] 시리즈 update 기능 구현

트러블 슈팅

formData 전송 오류

이미지 file과 json타입으로 변환한 객체를 formData형식으로 함께 묶어서 서버에 전송했는데 형식 오류가 났다

formdata형식의 value는 무조건 스트링으로 변환된다.
blob객체와 텍스트 형식 데이터만 append할 수 있는 것 같다. (File도 blob객체에 속합)
그렇기에 formdata 타입으로 json타입 데이터를 보낼 때에는 blob함수로 감싸고, 두번째 인자로type: 'application/json'을 같이 넣어줘야 한다.

const jsonBlob = obj =>
 new Blob([JSON.stringify(obj)], {
   type: 'application/json',
 });

content type이란?

• 클라이언트가 서버에게 어떤 형식의 데이터가 실제로 보내지는 것인지 알려주는 용도로 사용

• Text타입: text/css, text/javascript, text/html, text/plain

• file전용: multipart/form-data

  • 파일을 전송하기 위한 타입
  • blob객체와 텍스트 타입 값 2가지 종류의 데이터를 하나로 묶어 전송할 수 있다.
  • Content-Type이 하나의 HTTP Request Body에 들어가야 하는데, 2개 Type의 데이터를 구분해서 넣어주는 방법.

• Application 타입: application/json, application/x-www-urlencoded

  • application/x-www-urlencoded 는 html의 form의 기본 Content-Type.
    url인코딩 된 'key=value&key=value'의 형태
  • 최근의 RESTful 한 어플리케이션들은 JSON형식의 데이터를 주고 받는 것이 보통

• 참고 링크

blob함수란?

• 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용

세션 스토리지에서 토큰 오류

세션 스토리지에서 토큰을 받아와 axios함수에 적용해 서버 요청을 했는데 토큰 오류가 났다

세션 스토리지로 가져온 토큰에 ""가 포함되어있어 제거해줘야 정상적으로 동작한다

export const GET = async ({ url, isJsonType = false, params = {} }) => {
  const token = sessionStorage.getItem('authorization');
  const headers = {
    ...(isJsonType && { 'Content-Type': 'application/json;charset=utf-8' }),
    ...(token && { Authorization: `Bearer ${token.replace(/\"/gi, '')}` }),
  };

회고의 목적

• 다음 스프린트를 개선할 수 있다.
• 현 스프린트 문제점, 아쉬웠던 점을 파악한다.
• 우리팀 잘한점 & 보완할 점을 파악한다.
• 배운점을 정리할 수 있다.

회고 질문

스프린트 과정을 돌아볼까요?

1. 불편했던 프로세스가 있나요?

   스웨거, 지라를 보면서 다른 팀원들의 상황을 파악해야했는데 매번 디엠을 보내서 물어봤던게 비효율적이었던 것 같습니다

2. 아쉬웠던 점이 있나요?

   • 1차 스프린트 기간 안에 맡은 기능을 완벽하게 완성하지 못한 점
   • 시간에 쫒겨 컴포넌트도 제대로 나누지 않고 중복코드를 많이 작성했던 점
   • pr단위도 깔끔하지 못했던 점

3. 기능을 구현할 때 생각했던 소요 시간보다 늦어진 이유(있다면)가 있나요?

   form을 이용해 create, edit기능을 만들어본 적이 처음이라 각 종류의 input의 특성을 알지 못했고,
   api연동에 대해서도 처음 제대로 해봐서 많이 헤맸다

4. 힘들었던 점이 있나요?

   잘잘한(또는 큰) 오류들을 처리하느라 들인 시간에 비해 진도를 많이 못나갔을 때
   몸도 마음도 힘들었다

스프린트를 통해 깨달은 부분을 이야기 해볼까요?

1. 협업을 진행하면서 백엔드-프론트의 첫인상과 지금이 달라진 부분이 있을까요?

   딱히 달라진 건 없는 것 같다??

2. 이번 스프린트에서 성장한 점이 있나요?

   리액트 사용이 좀 익숙해진 것 같고, api사용에 대해서도 좀 알게된 것 같고
   체계적으로 협업하는 방법에 대해 배워가고 있다.

3. 어렵고 오래 걸렸지만 결국에 해결했던 과정은 뭐가 있을까요?

   • formdata형식으로 여러 형식의 데이터 전송하기
   • checkbox, radio버튼의 데이터 처리, 렌더링 처리

4. 팀 첫 호흡이 어땠나요?

   아직 삐걱삐걱하긴하지만 진행이 잘 되어가고 있는 것 같다!

5. 새롭게 알게된 지식, 기술이나 개념은 어떤 것이 있나요?

   • formdata로 여러 종류 데이터를 전송하는 법
   • 많고 다양한 input데이터를 api스키마에 맞게 처리하는 법
   • 상태 의존성
   • 지라 사용법

다음 스프린트에 개선하면 좋을 점을 이야기 해볼까요?

1. 다음 스프린트 때 개선 및 적용해보고 싶은것이 있나요?

   • 지라 티켓을 프론트 친화적으로 구성해서 잘 활용하기
   • pr기능단위로 하기
   • 비동기 커뮤니케이션하기
   • 진행도 공유 원할하게하기
   • 코드 작성 속도 올리기
   • 검색을 꼼꼼하게 하기

2. 우리팀 잘한 점

   1차 스프린트 기능을 완성한 점, 잠줄이고 작업한 점