Scope(스코프): 변수가 가지는 범위에 대한 내용
함수 바깥에 선언된 값을 호출하게되면 전역변수로 가져와서 출력되는 등 직관적임
SPA(Single Page Application): 페이지 전체를 처음 한번에 로드하고, 바꿔주어야하는 부분만 바꾸는 방식으로 구성된 웹 페이지
이를 도와주는 프레임워크가 React, Vue, Angular가 있음
https://jongminfire.dev/spa-single-page-application-%EB%9E%80
- 장점: 페이지가 한 번 로드되면, 그 후로 전환이 빠름. 백엔드/프론트엔드 구분이 명확
- 단점: 검색엔진 최적화(SEO)가 되지 않은 상태
webpack, Babel
모듈 번들링.
html 파일에 들어가는 js파일들을 하나의 js파일로 만들어주는 방식.
Webpack의 사용 이유?
모던 웹 트렌드가 SPA를 지향하면서, 하나의 html 페이지에 여러 js파일들을 번들링해서 성능 최적화에 도움이 되어서 등장하게됨
Babel은 ES6 이전 버전의 js코드를 변환해주는 도구이다.
바벨 플러그인을 사용하여 빌드를 하게되면, 구버전 브라우저에서도 동작할 수 있도록 도와줌
예를들어, React로 개발한 경우 JSX문법이나 TS문법을 JS코드로 변환하는 작업도 수행
SEO(Seacrh Engine Optimization): 검색엔진 최적화
React는 빈 껍데기 html을 기반으로 하니까, 검색엔진이 크롤링할 데이터가 없어서 노출시킬것이 없는 상태!
React, Vue 등으로 구성된 웹 페이지의 SEO를 고려하면, SSR(Server Side Rendering) / SSG(Static Stie Generator)를 사용하는 방법이 있다고 함
웹 페이지의 특성에 따라 채택하는 방식이 다르다고하는데, 알아볼 필요가 있겠다 TODO
기록 열심히하는 개발자인척