(TIL 34일차) 프로젝트 1차 프론트 전체 세션 (2)

pks787·2020년 3월 3일
0

TIL(Today I Learned)

목록 보기
30/43

SPA(싱글 페이지 어플리케이션) vs MPA(멀티 페이지 어플리케이션)

SPA = CSR(클라이언트 사이드 렌더링)

  • 페이지(html)이 물리적으로 하나만 존재
  • 페이지 넘어가는 동작을 하나의 이벤트로 인식해서 url이 변경(html가 이동하는 것처럼)
  • 페이지 이동이 일어나면 어떤 함수를 실행해라라는 의미

문제점

  • SPA = CSR(클라이언트 사이드 렌더링)
  • Create-react-app 으로 만든 프로젝트
  • html 가져온 뒤 css,js를 가져오는데 js안에서 백엔드 api호출이 하고 프론트에서 렌더링
  • HTML이 하나이기 때문에 검색엔진에서 크롤링 불가(html 안에 메타 데이터가 한정됨)
  • 광고 비용 추가 발생

문제점 해결

  • NEXT.js : CSR의 단점을 보완하고 사용하는 프레임워크
  • hydration : 서버에서 전송한 정적 문서를(html) 데이터 변경에 반응할 수 있는 동적 형태로(dom수정한다는 말)로 변환하는 client 측 process
  • somorphic javascript : ssr 과정 중 한 js 코드가 프론트,백에서 둘다 돌아감

MPA = SSR(서버 사이드 렌더링)

  • 한 페이지마다 html 파일이 따로 있음(각각의 html 파일이 존재)
  • 구조 : 유저 => 브라우저 => 서버 <=> 진짜백서버
  • 응답이 JSON으로 왔다갔다 하는게 아니라 HTML 파일 자체가 왔다갔다 함
  • html 파일 안에 값을 다 넣어 둠

부모 자식 관계 라이프사이클

준식님 블로그 참고!

라이프 사이클 기본 순서!

순서를 꼭 인지 하자!!

  1. constructor
  2. render
  3. componentDidMount
  4. (fetch 완료)
  5. render
  6. (setState)
  7. componentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)

가지고 오려는 데이터 객체

{
  "data": [{ "index": 1, "name": "joon" }]
}

객체 접근 시 자주 발생하는 문제!


  1. constructor
  2. render
  3. console.log("render") >>> 문제 없음
  4. console.log(this.state.data[0].name) >>> 💥에러 발생
  • 빈 배열인 name이라는 키 값을 가질 수 없음 => Error 발생!
  • 빈 배열의 0번째 index, 즉 this.state.data[0] 은 undefined이기 때문에 위와 같은 에러가 발생

해결방법

  • 위의 처럼 조건부 연산자 아니면 삼항 연산자를 이용해서 있을 경우를 체크해서 렌더링
  • 빨간색 표시된 부분을 해석해보면 "this.state.data[0] 이 true 인 경우에만this.state.data[0].name을 렌더하겠다" 라는 뜻

부모 자식 라이프 사이클 순서

  1. 부모 constructor
  2. 부모 render (부모 render 안에 있는 자식 컴포넌트로 넘어감)
  3. 자식 constructor
  4. 자식 render
  5. 자식 componentDidMount (여기까지 하고 부모 컴포넌트로 다시 넘어감)
  6. 부모 componentDidMount
  7. 부모 fetch 완료 (setState 발생 > 업데이트 발생 > 다시 render)
  8. 부모 render (부모 render 안에 있는 자식 컴포넌트로 넘어감)
  9. 자식 render
  10. 자식 componentDidUpdate
    (componentDidMount는 최초 렌더 시 한 번만 실행되기 때문에 componentDidUpdate 발생. 여기까지 하고 다시 부모로 넘어감)
  11. 부모 componentDidUpdate
    (componentDidMount는 최초 렌더 시 한 번만 실행되기 때문에 componentDidUpdate 발생)


Query, URL parameters

준식님 블로그 참고

  • 상세 페이지로 이동하는 경우 어떤 상품을 선택했는지 알 수 있는 방법 2가지!

동적라우팅

  • 동적라우팅이란? 위에서 살펴본 경우과 같이 라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것 (Dynamic Routing)

라우트로 설정한 컴포넌트는 3가지 props 사용 가능

  1. history
  • 이 객체를 통해 push, replace 를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환 할 수 있습니다.
  • 여러분들이 컴포넌트 이동(페이지 전환) 시에 this.props.history.push('/page') 를 통해 이동할 수 있었던 이유가 여기 있습니다.
  1. location
  • 이 객체는 현재 경로에 대한 정보를 지니고 있고, URL 쿼리 (/company_list?category=3)에 대한 정보도 가짐
  1. match
  • 이 객체에는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params (/company_detail/:id) 정보를 가짐

  • https://docs.google.com/presentation/d/1w1t1m5dwR2SID0se_8LMIGEcNtT6F18r1SD2Znnndm0/edit#slide=id.p
    참고 구글 드라이브
profile
Front End. Dev

0개의 댓글