강의를 듣고 정리한 내용입니다.
MPA를 활용한 사이트의 특징과 장단점은 무엇인가요?
MPA는 Multi Page Application으로 여러 개의 HTML 파일로 웹 애플리케이션을 구성하는 방식입니다.
라우팅에 필요한 라이브러리나 번들링에 필요한 여러 자바스크립트 툴체인이 필요 없고,
정적 페이지를 그대로 서빙하기 때문에 SEO나 페이지 로딩 속도 측면에서 장점이 있습니다.
하지만 새로고침 시 새로운 내용이 반영된 HTML 페이지를 가져오는데까지의 시간이 소요되기 때문에 유저가 빈 화면을 보게 된다는 단점이 있습니다.
추가로 MPA의 통신 상황은 아래와 같습니다.
1. 유저가 서버의 GET 요청을 보내고, blog.html을 받습니다.
2. 유저는 브라우저에서 blog.html을 열어 웹 사이트를 이용합니다.
3. blog.html 페이지 내에 있는 form 태그의 input의 유저의 정보를 담아 서버로 POST 요청을 보냅니다.
4. 서버는 새로운 blog.html을 만듭니다. 이때 유저가 가지고 있는 blog.html에서는 이 사실을 알지 못합니다.
5. 유저는 화면을 새로고침하여 서버에 새로운 blog.html을 받아와 이용합니다.
자바스크립트를 사용하지 않고 클라이언트에서 서버로 유저가 입력한 데이터를 전송하려면 어떻게 해야 할까요?
사용자 요청을 받은 뒤 php 등의 언어를 사용하여 미리 준비된 템플릿을 기반으로 페이지를 HTML로 그때 그때 구워내 응답하면 됩니다.
Form 태그의 method 속성에는 어떤 값이 올 수 있나요?
string과 undefined가 올 수 있습니다.
AJAX란 무엇인가요?
Asynchronous Javascript And XML의 약자로, 페이지를 새로고침하지 않고도 서버와 통신을 할 수 있게 도와주는 프로그래밍 방식입니다.
AJAX를 사용하면 사용자 동작에 따라 필요한 부분만 동적으로 업데이트할 수 있습니다.
1. 사용자 action
2. 페이지가 정상 동작 + 서버에 새로운 정보 요청
3. 서버한테서 정보를 받아오면 화면을 새로운 정보로 대체
SPA with CSR이 무엇인지 설명하고, 장단점에 대해 설명해주세요.
SPA 방식으로 CSR을 구현한 웹 서비스는 최초 통신을 할 때 화면 그리기에 필요한 모든 재료들을 브라우저에 가져다 놓고, 그려야 하는 화면에 맞춰 재료를 알맞게 조립하는 방식입니다. 추가로 필요한 재료가 있을 경우 필요한 시점에 필요한 만큼 서버에서 받아오게 됩니다.
기존에 비해 페이지 전환이 부드럽고, 기존 방식에 비해 훨씬 동적이라는 장점이 있습니다.
단점으로는 초기 로딩 속도가 느릴 수 있기 때문에 사용자 경험에 부정적인 영향을 줄 수 있습니다.
JavaScript로 직접 CSR을 구현하지 않고 React를 사용하는 이유에 대해 설명해주세요.
대규모 앱의 상태를 관리하고, 퍼포먼스를 보장하기 위해서는 React를 사용하는 것이 효과적이기 때문입니다.
조금 더 자세히 말하자면, React는 변화가 있을 때마다 실제 DOM을 업데이트하지 않고, 메모리에 올려둔 가상 DOM을 업데이트 합니다. 또한 이러한 변화가 잦을 것을 대비하여 변화를 반영하는 타이밍을 스케줄러를 통해 관리하고, 변화는 스케줄러에 의해 배치로 모아진 다음 적절한 타이밍에 비동기적으로 한꺼번에 처리되기 때문입니다.
질문이나 잘못된 점은 댓글로 남겨주세요 :)💖
'etc > 개발 세미나' 카테고리의 다른 글
| [원티드 9월] 모바일 웹사이트 개발하기 (0) | 2023.09.15 |
|---|---|
| [원티드 9월] 반응형 웹사이트 기초 (1) | 2023.09.08 |
| [원티드] 프리온보딩 프론트엔드 챌린지 7월 - 사전과제 (2) | 2023.07.07 |
| [점핏] 프론트엔드 개발자 이야기 (3) | 2023.05.01 |
| [우테크] 개발자 원칙 (0) | 2023.04.11 |
댓글