오늘 포스팅은 면접 기출문제를 기반으로 실제 면접에서 대답하는 것처럼 구상하였습니다.
SPA의 장단점과 단점을 보완할 수 있는 방법?
-> SPA는 하나의 페이지로 구성된 애플리케이션을 말합니다. SPA는 CSR(Client Side Rendering) 방식으로 렌더링합니다. 처음 단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩하고, 그 후에는 필요한 데이터를 받아올 때만 서버와 통신합니다.즉, 첫 요청시 딱 한 페이지만 불러오고 페이지를 이동할 때는 기존 페이지의 내부를 수정해서 보여주는 방식입니다. 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하기 때문에 자연스러운 페이지 이동과 사용자 경험을 제공할 수 있습니다.
또 컴포넌트화, 모듈화로 상대적으로 유지보수가 쉽고 개발속도가 빠르다는 장점도 있습니다. 프론트엔드와 백엔드가 분리되어 개발업무 분업화 및 협업이 용이하기도 합니다.
그러나 JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느리고 검색엔진최적화(SEO)가 어렵다는 단점이 있습니다. 두 가지 문제 다 Next js를 사용함으로써 해결할 수 있습니다.Next js는 React에서 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크입니다. Next.js는 처음 사용자가 서버에 페이지 접속을 요청할 땐 SSR방식으로 렌더링 된 HTML을 보내고, 이후 사용자와 페이지가 서로 상호작용하여 다른 페이지로 이동할 땐 CSR방식으로 브라우저에서 처리합니다. 첫 파일이 비어있지 않기 때문에 SEO에 유리해지고, 페이지를 변경할 때는 CSR방식으로 처리하기 때문에 SPA장점도 유지할 수 있습니다. 또한 코드 스플리팅 기능을 지원하기 때문에 초기 구동 속도도 빠르게 할 수 있습니다.
code splitting이 뭐죠?
-> 코드 스플리팅은 하나의 큰 번들을 여러개의 작은 번들들로 쪼개는 일을 말합니다. 이를 활용하면 필요할 때 필요한 번들만 로드 함으로써 초기 로딩시간을 줄여주고, 유저가 현재 필요하지 않은 코드는 로드 하지 않음으로써 앱의 성능도 크게 향상 시킬 수 있습니다. 또, 앱에 비해 잘 바뀌지 않는 third-party 라이브러리를 하나의 번들로 따로 묶어둠으로서 앱을 바꿔도 유저가 스크립트를 다시 다운받을 필요 없게 해줍니다.
