>wecode 15 React: Mock Data 활용법

0. 8:40 필라테스

10분 지각...

1. 프로젝트 아이디어 발표

내가 하고 싶은(=가고 싶은 😉) 사이트: 오늘의집 or 카카오메이커스

2. 인증 & 인가 by 멘토 승현님

인증

정확한 이메일/비밀번호 조합을 입력했는지 확인하는 과정.
서비스를 누가 어떻게 사용하는지 추적이 가능하도록 한다.

• 암호화(단방향 해쉬)
• SALTING & KEY STRETCHING
• Bcrypt. sha-256

인가

사용자가 서버에 요청을 보내면 인증 과정을 거쳐 확인된 사용자가 맞는지 확인하는 과정

• HTTP의 Stateless한 성질.
• JSON Web Token (JWT) header.payload.signature

더 알아보기

3. [React] Mock Data 활용법

Mock Data

실제 API에서 받아온 데이터가 아닌 샘플 데이터.
-> 데이터가 들어오는 상황을 미리 대비하고 UI가 기획에 맞게 구현되는지 먼저 확인한다.

• UI를 컴포넌트 계층 구조로 나누기. (참고) 단일책임원칙
• 정적인 구조 버전 만들기 (state 없이): 상향식
• UI state에 대한 최소한의 표현 찾기
  -> 부모로부터 props를 통해 전달되지 않는 값.
  -> 시간에 따라 변하는 값
• state가 어디에 있어야 할 지 찾기
  -> 공통 소유 혹은 최상위 컴포넌트
• 역방향 데이터 흐름 추가하기

Mock Data 관리하기

• commentData.js

import COMMENT from './commentData';

  componentDidMount() {
    this.setState({
      commentList: COMMENT
    });
  }

• commentData.json fetch함수를 이용해 데이터를 받아온다.

 componentDidMount() {
    fetch('http://localhost:3000/data/commentData.json', {
      method: 'GET'
    })
      .then(response => response.json())
      .then(data => {
        this.setState({
          commentList: data,     
        });
      });
  }

Mission 1) mock data를 활용하여 여러 개의 댓글 구현
Mission 2) mock data를 활용하여 여러 개의 피드 구현

Objects are not valid as a React child 에러에러

4. Codekata with 세형님

IDEA: 첫번 째 숫자가 다음에 오는 숫자보다 크면 첫번 째 숫자에서 다음 숫자를 빼주고, 작으면 더해준다.

const symbol='DXLIX'

const obj = {I:1,V:5, X:10, L:50, C:100, D:500, M:1000}

return obj[symbol[0]]-obj[symbol[1]]+obj[symbol[2]]-obj[symbol[3]]+obj[symbol[4]]

let result = obj[symbol[0]]

for (i=0; i<symbol.length; i++){
  for (let j=1; j<nums.length; i++){
    if (obj[symbol[i]]>obj[symbol[j]]){
  result += obj[symbol[i]]
}
  else {result -= obj[symbol[i]]
}
} result
// 헤헹 안되네

• 로마자에서 숫자로 바꾸기
  Symbol Value
  I 1
  V 5
  X 10
  L 50
  C 100
  D 500
  M 1000