elice/토끼성장일지

[엘리스 AI트랙] 04-02-01 ~ 04-02-02 React 기초 3

Juliie 2021. 10. 20. 02:06
TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

 

1. form 태그 작성할땐 type들을 잘 작성해주는것이 좋다

 

2. 함수가 선언됐는지(존재하는지) + 타입 확인을 한번 더 함으로써 에러 방지!

if(typeof onInsert === "function" && inputValue) {
// onInsert가 정상적인 함수인 지 확인하여 에러 방지
	onInsert(inputValue);
}

 

3. 리액트에서 style은 object로 표현해야한다

<div className="greeting" style={{ padding: 10, color: 'red'}}>
	{name}님 안녕하세요 <br />
    반갑습니다.
</div>
  • 위와 같은 inline style의 property name은 camelCase로 적는다
  • 첫번째 중괄호는 자바스크립트 표현을 사용하겠다는 의미
  • 두번째는 object의 중괄호

 

 

SPA와 라우팅

Single Page Application

  • 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식
SPA MPA
전체 웹앱을 JS만으로 구성, 첫 요청 시 빈 페이지를 받게 됨 미리 서버에서 전체 페이지를 빌드해 브라우저로 전송
➡️ 캐싱 불가능
여러 페이지를 하나의 앱의 구성 요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용 하는 방향으로 구현 페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지 간 데이터를 재활용하기 힘듦
Client-side routing 기술을 활용, 페이지 진입 시 리로드 없이 라우팅 서버에 미리 여러 페이지를 두고 유저가 네비게이션 시 요청에 적합한 페이지를 전달
AJAX를 활용해 페이지 이동 시 서버에 데이터만 요청하여 JS로 페이지를 만듦 서버에 라우팅을 처리하는 기능이 있고, 서버에서 여러 페이지를 관리
  • SPA의 장점
    • 서버에서 페이지를 만들 필요가 없기 때문에 CDN에 캐싱 가능
    • 매번 페이지 요청을 할 필요가 없어 네트워크 요청이 줄어듦 (제약 조건 줄어듦)
    • 웹 사이트를 개별 페이지보다는 하나의 앱으로 보는 설계로 고도의 SW 설계(ex: 상태관리, 라우팅, 컴포넌트 재사용, Hook 등...)와 패턴 적용 가능
  • SPA의 단점
    • SEO에 불리함
    • 하나의 JS 앱이 지속하므로, 메모리 관리와 성능, 데이터 활용 등이 중요
      • 페이지가 리로드 되지 않으면 페이지가 뜬 상태로 유지되기 때문에
    • 여러 페이지를 전송받는 것보다, 하나의 거대한 JS 앱을 전송받아야 하므로 코드가 많아질수록 로드 속도가 느려짐
      • 코드의 양을 줄이고 필요할때만 코드를 로딩하는 lazy loading 등의 처리를 통해 페이지 전송을 빠르게 할 수 있음
  • SPA에서 라우팅이 왜 중요하냐면...
    • 유저가 다른 페이지로 이동했을 때, reloading이 없어야하기 때문에
    • 라우팅 라이브러리는 reloading을 없애는 근원적인 기술
    • 주로 History API or URL Hash를 이용해 페이지 리로드 없는 페이지 전환을 구현
      • 요즘에는 Hash 방식보다 History API를 통해 편리한 라우팅을 구현할 수 있음