[항해99 1기] [Chapter4] 클론코딩 (2) (2021.4.3)

클론 코딩 프로젝트에 대한 일지

1. 회의 내용

백엔드

• 크롤링 완료
  • 데이터 400여개 크롤링할 예정
  • 책소개 , 타이틀 ,출간일, 좋아요, 북아이디, 사용자 아이디 , 책 이미지 url
  • 스타는 넣지 않았다.
• 좋아요기능 넣을 것
  • 북 아이디, 사용자 아이디 필요
  • 카운트 0,과 1을 오가며 체크를 표시
  • 0이면 좋아요를 안 한 상태
• 코멘트
  • 별점 주기
  • 총 별점을 전체 카운트로 나누어 별점을 계산할 것

프론트엔드

• 전체적인 뷰 완료
  • 메인페이지, 로그인, 회원가입 페이지
  • 메인페이지의 캐로셀은 좋은 라이브러리를 구했음
  • 다만, 어려워보임
  • 최우선 작업을 하고 난 이후 시간이 남으면 할것
• 통신방식에대해 공부할 필요가 있음

2. 특강

• 기초를 소화하는 방향으로 하여라
• CRUD, 로그인 연습하는 기간
• 로그인 구현도 간소화 하기
• 세션 or 토큰으로 할 지 정해라
• 스펙아웃은 꼭 있어야하는 기능선까지 해도 된다.
• 최우선 기능들을 정해서 하나 하나 달성하며 하여라
• 배포는 각자 프론트엔드, 백엔드에서 하던대로 하기
• 프론트 -> S3
• 백엔드 -> EC2
• 프론트의 경우 파이어베이스 안 거치고 EC2의 ip로 요청을 보내기
• Moc API 정하기
  • 소통하기
  • API가 어떻게 생겨야하는지
  • 주소로 요청하면 어떤걸 전달하고 어떤것을 응답할 지
  • 상수로 정해서 그때 그때 받아오는 식으로 해라
• CORS
  • 백엔드에서 필요
  • 공부하기
• 배포를 빨리 해놓고 기능 완성될 시 다시 배포
• 데이터마련은 크롤링이나 API 등
• Access-Control-Allow-Origin?
• 통신방식
  • fetch
  • ajax
  • axios
• 배포전에 합치는 것이 아니다.
  • 레포가 두개인 상태로 끝까지 가라
  • 배포는 따로 ,API만 주고 받기
• Moc API

정리

기초를 잘 소화하는 컨셉으로 스코프를 많이 줄여라

로그인 , CRUD 최우선

예시

• 클라이언트 - 서버에서 API요청/결과가 필요한 것을 논의
• 크롤링하여 DB 만들기
• 클라이언트는 메인페이지, html, css 하드코딩하기
• 서버는 API를 만들어두어라
• 클라이언트는 mocAPI를 가지고 데이터를 넣어보기
• 서버는 EC2
• 클라이언튼 서버가 배포한 API를 연결하여 프론트엔드를 완성
• 클라이언트가 S3에 배포

3. fetch

오늘 사용한 fetch의 코드 설명

// 회원 가입
const signupAPI = (id, pwd, pwd_check) => {
  return function (dispatch, getState, { history }) {
    const API = "서버 아이피/user/signup";
// 포스트 방식으로 보내기
    fetch(API, {
      method: "POST",
      headers: {
        // 컨텐트 타입은 서버와 맞추기
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        // 보내는 JSON 양식 맞추기
        id: id,
        password: pwd,
        passwordConfirm: pwd_check,
      })
    })
      .then((response) => response)
      .then((result) => {
        dispatch(setUser({
          id: id,
        }))
        console.log(result);
        window.alert('회원가입 되었습니다.')
        history.push('/')
      })
  }
}