Question
- 전통적인 page load 방식인 href 는 해당 주소에 대한 정보가 서버측에 저장되어 있고, 그 링크를 클릭하여 로드할 때 서버에서 자원이 넘어오는 것인지 ?
Answer
- 예전에는 어떤 웹 어플리케이션을 만들때, 여러 페이지로 구성되었다.
A.html , B.html, C.html , D.html ....
그리고 페이지를 로딩할때마다 서버에서 리소스를 전달받아와서 렌더링했다.
즉, 웹 어플리케이션 뷰를 서버에서 담당했었다.
→ 최근 프레임워크, 라이브러리들은 렌더링을 서버가 아닌 웹 브라우저가 담당하게 함.
주소에 따라 다른 뷰를 보여주는 것을 라우팅 이라 한다.
리액트 라우터를 사용하면 페이지 주소를 변경했을 때, 주소에 따라 다른 컴포넌트를 렌더링 해준다.
또한, 주소 정보(파라미터, URL 쿼리 등)를 컴포넌트의 props에 전달하여 컴포넌트 단에서
주소 상태에 따라 다른 작업을 하도록 설정한다.
처음 렌더시에만 서버에서 리소스를 가지고 오고, 이후부터는 서버와는 json , xml 형태의 데이터만을 비동기로 주고받는 형식.( 이게 AJAX )
→ AJAX 가 나타남에 따라 SPA가 가능해짐(?)
정리: 리액트를 사용함에 따라 react가 사용자의 페이지 로딩단계에서 렌더링 자체를 서버가 아닌 웹 브라우저가 담당할 수 있게함 → client side 에서 render를 담당.
SPA에 대해 정확히 개념을 잡고서 넘어가는게 좋겠다.
어떤 프로젝트를 SPA 라고 할수 있을지 ?
→ 처음 렌더 시에 존재하는 페이지에 대한 정보를 모두 load하여 첫 로딩 속도는 느리지만, 이후 페이지 전환에 있어서는 ajax를 통해 중복된 부분을 제외하고 변화가 필요한 "" 부분만 렌더되어 "" 새로고침 없이 향상된 UX를 제공하며 보다 빠른 속도로 페이지를 전환할 수 있다.
code spliting?
→ 일반적인 SPA 는 한 파일로 결합되어있어서 예를 들어 그저 About 페이지를 보고싶었을 뿐인데도 페이지를 로딩하면서 설정 페이지에 대한 정보도 다운로드하게됩니다. 이 부분을, 새 페이지 불러오지 않으면서 유동적으로 해결해주는것이 바로 코드스플릿팅입니다.
+++) window의 history api 를 통해 주소 변경에 따른 history가 남게 되어 go, back, forward 메서드 사용 가능
장점
- 개발자가 백엔드 코드를 웹어플리케이션과 네이티브 모바일 어플리케이션에서 동일하게 사용할 수 있어 모바일 어플리케이션을 만들이 쉽다.
- 첫 로드 이후로는 부분렌더만이 이루어지기 때문에 속도가 빨라져 UX가 향상
++++ react로 렌더링하면 기본 text도 span 태그로 렌더링 된다.
++++ props 값이 변경된다면 render함수 실행
Emotion(styled-components)
*** styled-components 작성할 때, 좀 더 다양한 html tag를 사용하는게 좋을것같음( Sementic tag )
React의 children 에 대한 type은 react dom ? 이 들어온다면 ReactNode 를 react에서 import 해서 넣어주면 된다.
*** styled-components 의 labeling을 위해 cra 사용 시에는 styled-components/macro 모듈을 이용해서 component를 만들어주는것이 좋다.(hash 앞에 -current filename- -current file 내에서 component Name- 이 붙는다.)
- styled-components 의 css 는 조건부 style의 확장판으로 해당 props일때 css
Typescript
type은 기존에 있는 특성이라 객체로 선언, interface 는 함수와 같은 느낌으로 단순하게 {} 로 선언해주면 된다.
**제네릭**은 어떠한 클래스 혹은 함수에서 사용할 타입을 그 함수나 클래스를 사용할 때 결정하는 프로그래밍 기법을 말한다.
함수 및 클래스를 선언하는 시점에서 매개변수 혹은 리턴 타입을 정의해야하기 때문에 기본적으로는 특정 타입을 위해 만들어진 클래스나 함수를 다른 타입을 위해 재사용할 수가 없다.
→ 제네릭의 핵심은 재사용성 인듯하다.
Q) any를 사용해서 전부 정의하는건 ?
→ 하지만 any를 이용하여 구현하면 저장하고 있는 자료의 타입이 모두 같지 않다는 문제점이 생긴다.
( stack 구조를 생각해보면
-
array에 1이 push → any라 통과,
-
array에 'a'가 push → any라 통과
→ 그렇다면 array는 뭐임 ?
이렇게 된다. )
따라서 input값과 내부 data 및 return 값을 type chaining 하는것이 generic의 역할
(원래 정적 타입 언어에서 존재하는 개념이였다고 한다.)
조만간 보기좋게 정리하는 방식으로 바꿔서 올려야겠다...
+++ 잘못된 정보에 대한 지적은 언제나 감사합니다 (_ _)
