TIL 23/06/09
- 구조 분해 할당(Destructuring Assignment)
: 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법
- 단축 속성명(Shorthand Property Name)
:
- 전개 구문(Spread Syntax)
- 나머지 매개변수(Rest Parameter)
- 템플릿 리터럴(Template Literal)
- async await
- 실행 컨텍스트
- map, set : https://ko.javascript.info/map-set
SPA 특강
JS로 만드는 spa(Single Page Application) <=> MPA(멀티)
리액트 배울거당~
바닐라JS로도 spa 할 수 있다.
- 체크리스트
MPA와 SPA의 차이를 설명할 수 있다.
바닐라 JS로 SPA를 만들 때, Hashed Rounting이 필요한 이유를 설명할 수 있다.
공유된 코드를 참조하여 JS로 SPA Rounting을 구현할 자신이 있다.
MPA :
클릭할 때마다 새로운 페이지(html) 받음.
네트워크창에서 보면. 클라이언트랑 서버랑 주고받는 리소스가 다 기록됨.
처음에 리소스 받을 때 리소스리스트 뭐있냐.. link rel, script src 이런거 다 리소스다.
호스트네임 또는 도메인 + 포트번호 : origin url + /path
SPA :
웹사이트 도착(랜딩)이라고 말함.
클라이언트가 웹사이트에 랜딩했을 때, index.html 요구하면 서버가 줌.
html 파일을 받아와야 새로고침하는데 JSON 파일을 받아오는 것 만으로는 기본동작(새로고침) X.
클라이언트사이드랜더링 : 클라이언트쪽에서 만들었다? SPA.
서버사이드랜더링 : html 파일 보면은 템플릿 아래 보면은 눈에 보이는 것들 파싱하면 바로 보이죠. 사용자가 눈으로 바로 확인할 수 있는. 눈에 보이는 ui를 누가 준비했냐. MPA에서는 서버가 만든다.
랜더링을 위한 준비를 누가 해줬냐?
새로고침 자체가 일어나지 않는다. 클라이언트사이드랜더링의 특징.
네트워크창에서도 페이지 이동했을 때 보면 서버한테 아무런 요청을 보내지 않음.
클라이언트 자체적으로 랜더링함. 페이지 이동 자체를.
한번 받아졌다면 넷이 끊기더라도 동작 잘 될거다.
서버한테 추가요청 없으니까 서버 부담도 많이 줄여줄 수 있고.
url에 # 들어간거 본 적 있으신 분? 요즘엔 잘 안쓰는 방식. 바닐라JS만 가지고 뭔가 SPA 만들고싶다는 욕구가 시작했을거다. 그때 당시에는 해시#라는걸 url에 많이 썼었다. 해시라우팅.
해시값이 바뀌면 페이지가 바뀌는 방식. => Hashed Rounting
해시드라운팅 알려면 l 구조를 먼저 알아야 함.
주소창에 url 쓰는 이유는 서버에 요청하려고!
path가 /users인걸 서버에 요청.
#hash 공식명칭 Fragment
해시가 어떤 역할을 하는지?
해시드url은 클라이언트만 가지고 있는 정보. 서버에 보내지지 않는 정보.
해시값에 접근하려면 어떻게 하느냐?
주소창에 대한 정보는 window 브라우저 정보 전체 담고있는 전역객체.
window.location / location만 써도 됨.
window.location 출력해보면 hash랑 href에 떠있음.
#뒤에있는건 싹 다 해시다.
해시 잘 안쓴다 요새. 왜? 자바스크립트 번들러 써가지고.
parcel : 자바스크립트 번들러 중에 가벼운 느낌의 별도 셋팅이 필요 없는.
우린 안쓰고 웹페이지로 하는거 쓸거임.ㅋ
localhost === 127.0.0.1 (alias 별칭)
Loopback : 자기 자신(브라우저)이 자신(본인 PC 서버)에 접근하는 경우.
a(앵커)태그의 기본동작 : 새로고침. 없애려면 #/ 샾 붙이면 새로고침 안된다! 꺆!
~ type=module 지연실행?
?? : 널 병합 연산자. ex) a ?? b : a가 null 또는 undefined면 b 출력.
이벤트핸들러 할당하는 것도 메모리 차지한다.
onclick 이런 것도 다 메모리..
바닐라JS는 addEventListner 쓰는 게 더 좋다. 가독성 문제.
이벤트리스너는 가비지컬렉터의 수거대상이 아니라서 remove이벤트리스너로 수동으로 지워줘야함.
난 온클릭 쓰고싶은데? 얜 어케 해제해? root.onclick = null; 쉽네
필요없는데서는 이벤트리스너를 메모리해제하는거,, 알아두면 좋다!!
spa 장점 :
1. 자연스럽다. 깜빡임 X
네이티브 앱에 가까운,,
2. 웹 성능 향상
필요한 리소스만 받아서 부분적 랜더링.
서버 템플릿 연산 클라이언트로 분산
3. 개발 생산성 향상
컴포넌트별 개발 용이(협업 업무 분담, 유지보수)
한 페이지 내에 있는 것들을 나눠서 작업할 수 있다. 리액트가서 계속 연습할거다.
단점 :
1. 첫 랜딩속도 느림(한번에 모든 파일 다운)
- 검색엔진최적화(SEO)에 취약함.
CSR: Client Side Rendering
=>
SSR: Server Side Rendering
=> html 다운하고 파싱끝나자마자 바로 보임 그다음 js 실행 끝나야 이벤트리스터 작동시작해서 상호작용 시작. 일단 화면 보여준다.
특징 : TTV 타임 투 뷰 < TTI 타임투인터렉션
함수 위에 /** + tab 하면 JSDoc 자바스크립트코드를 문서화할 수 있게 도와주는 주석 기능.
