>wecode 23 동적 라우팅

0. 08:30 필라테스

7시에 눈뜬 아찔한 아침, 지옥철에서 쌓은 화 필라테스로 풀고왔다.

1. Codekata

주어진 숫자 배열에서, 0을 배열의 마지막쪽으로 이동시켜주세요.
원래 있던 숫자의 순서는 바꾸지 말아주세요.

(새로운 배열을 생성해서는 안 됩니다.)

Input: [0,1,0,3,12]
Output: [1,3,12,0,0]

코드는 작성했으나 하나만 맞고 하나는 안됨 ㅠㅠ
준우님이 참고하라고 준 Object copy 자료 읽어보기!!!!!!

const moveZeroes = nums => {
  
for (let i in nums){
  if (nums[i] === 0 ){
    nums.splice(i,1)
    nums[nums.length] = 0
  }
}
  return nums
}

2. Project

새롭게 알게된 것

• remote에 있는 브랜치를 삭제하고 싶을 때 명령어
  git push origin --delete 브랜치명
• 화페에서 단위 표시하는 함수. toLocaleString()

백엔드랑 논의한 부분

• 검색창에 검색어 입력 시 필터링되는 부분
  검색창에 onChange가 일어날 때마다 필터링한 데이터를 fetch한다.
  -> 성능 개선은 (참고) Throttling
• 모든 데이터를 받아와서 프론트에서 필터링 하는 것은 성능에 무지무지 좋지 않은 부분...!

GET메소드에서 API주소를 받아 이벤트가 일어날 때마다 fetch를 하는건데, 백엔드에서 POST메소드처럼 무언가 전달을 받아야 응답할 수 있다고 해서 멘붕.. API주소와 브라우저웹주소는 다른데... 내가 이해한 게 틀린건가 싶었지만 백엔드 팀원분의 실수였따. 각자 맡은 영역에 대한 이해가 1번, 상대에 대한 배려가 2번 소통하는 개발자..!!

팀원 도와준 부분 (삽질하는 시간 줄이기)

• CSS: button 안에 아이콘 줘야지요. 이미지 위에 있는 버튼의 index값을 크게 줘야 나타나지요.
• MAP: 데이터를 받을 때 벨류값이 배열일 수도 있다면, 맵안에서 맵을 돌려 리턴할 수 있다.
  ex) 피드 하나에 이미지파일 n개인 경우,
  [{id:1,name: feed1, img[{id:1, url:''},{}],{}]
  -> 데이터 형식은 백엔드분들과 상의 필수!
• 컴포넌트 props: 공동 컴포넌트 사용하면서 특정 부분을 바꾸고 싶은 경우. 바꾸고 싶은 부분을 this.props.속성명으로 주고 상위 컴포넌트에서 속성명 지정해주면 된다.

오늘 깨달은 사실

1. 서치페이지는 모달창이었고, 어디에서나 나올 수 있으며 네브바의 컴포넌트인 것이었다..
   -> 2차때는 네브담당자가 모듀 맡아서 하는걸로^^
2. 캐릭터 별 상품페이지의 컴포넌트 구성은 동적 라우팅으로 구현할 수 있다.

• 최상위 컴포넌트: 전체캐릭터 상품페이지
• 하위 컴포넌트: 캐릭터별 상품페이지
  -> 동적 라우팅으로 캐릭터 선택 시 캐릭터 별 상품정보가 좌르르륵.
  -> 경로 캐릭터/:character_id

3. 동적 라우팅 by 멘토 성훈님

Withrouter

Router에 등록이 되어 있지 않는 컴포넌트에 접근하는 방법
-> 컴포넌트를 인자로 받아 기능을 더한 컴포넌트를 리턴한다.

router 경로 /:id

fetch({this.props.match.params.id})

조건부랜더링

state값이 없을 때 아무것도 하지 않고, state값이 있을 때 렌더가 되도록
state !== undefined && JSX

콜백함수 () => function()

함수를 호출하면 안돼! 함수를 따로 빼지 않고 하는법

Number(this.props.match.params.id)+1

componentUpdate state를 비교해서 무한 렌더링 막기

Refactor : 중복되는 함수 사용하기