TIL_13 221116 회고

13일 차 회고

즐거우니깐 팀원이다.

2번째 프로젝트를 앞두고 새로운 팀원들과 많은 얘기를 나눴다.
아기 개발자들은 내일이면 괜찮겠지, 하지만 하루하루 지날수록 멘붕의 범위는 더 넓어졌다. 그래도 나 혼자 하는 고민이 아니라 힘이 된다.
혼자 자괴감에 빠졌더라면 어디 가서 말도 못 하고 혼자 끙끙 앓았을 텐데
서로 고민 얘기하다 보니 조금이나마 웃음이 났다.
하하 호호 일단 힘들긴 한데 웃음도 난다! 나만 하는 고민이 아니니 고민을 좀 덜 해도 될것 같다. 😀😀😀

SPA란 무엇인가.

출처: Microsoft MSDN

MPA vs SPA

MPA (Multiple Page Application)

• 여러개의 page로 구성된 application
• 새로운 페이지를 요청할 때마다 서버에서 렌더링 된 Html,css,javascript가 다운로드 된다.
• 서버 사이드 렌더링 SSR(Server Side Rendering)

SPA(Single Page Application)

• 한개의 페이지로 구성된 application
• 처음에 요청에만 렌더링 된 Html,css,javascript만 다운로드 하고 다른 페이지를 요청할때 스택으로 쌓이기만 한다.
• 클라이언트 사이드 렌더링 CSR(Client Side Rendering)

hashed url path vs Non-hashed url path

• https://example.com/abc/#def url에 #를 넣은 것을 hashed url path 라고 하고 없는것을 Non-hashed url path 라고한다.
• 브라우저는 url에 #가 있으면 #포함 그 이후 부터 페이지로 받아 들이지 않는다.
• https://example.com/abc/#def 으로 첫 랜딩 , 새로고침을 하게 되더라도 index.html이라는 하나의 파일만 업로드한다.
• https://example.com/abc/#def /abc/#def는 로컬로 생각하고 서버에 get 요청을 하지 않는다.
• #을 쓰게 되면 첫 랜딩, 새로고침을 하게 되더라도 index.html 에 서버에 요청 하지 않아서 버그가 나타나지 않는다.

SPA 의 장단점

장점

1. 자연스러운 사용자 경험. 깜박임 현상이 없고 앱에 가까운 페이지 이동(웹앱)
2. 웹 성능 향상. 서버에 부담을 덜어주고(서버 템플릿 연산을 클라이언트로 분산) 필요한 리소스만 부분적으로 로딩(클라이언트 성능 향상)
3. 생산성 향상. 개발속도가 올라간다. 일부페이지만 받아 렌더링 하기 때문에 페이지를 컴포넌트 별로 나누기가 쉽다.(협업 업무 분담. 유지보수)

단점

1. 첫 렌딩 속도가 느리다. 한번에 모든 파일에 다운 받았기 때문
   • (보안법) 화면에띄어지는 부분만 받고 나머지는 나중에 다운 받는 기술(code splitting))
2. 검색엔진최적화(SEO)에 취약 - 크롤링로봇이 서버에서 주는 부분을 봐야하는데 첫페이지 내용이 약해서 검색엔진이 힘들다
   • (보안법) next.js 같은 프레임워크로 보안할수 있다.
3. 보안 이슈. 클라이언트 사이드 렌더링을 하게 되면서 사용자 정보같은 json 파일이 쿠키나, 로컬스토리지에 저장하므로써 보안이슈가 생김.
   • 보안법 - 핵심 비지니스 노출이 불가능 한 로직을 짜서 관리 해야 한다.

MPA의 장단점

장점

1. 검색엔진최적화(SEO) 에 유리하다. 완성된 형태의 HTML 파일을 서버로부터 전달 받음
2. 첫 로딩이 짧다. 클라이언트가 모든 HTML,css,Javascript 파일을 다운받았기 때문에

단점

1. 새로운 페이지로 이동하면 새로고침이 된다. 전체페이지를 다시 렌더링 하기때문에
   2.서버 템플릿 연산 에 따른 부하가 일어난다.