[Hard] 📄 Framework

1. Please explain and compare the advantages and disadvantages of SPA and SSR

SPA와 SSR의 장단점을 설명하고 비교해주세요

SPA(싱글 페이지 애플리케이션)

SPA 장점

1. 사용자 경험: SPA의 본질은 하나의 페이지로, 데이터를 동적으로 로드하고 프론트엔드 라우팅을 결합하여 사용자에게 페이지가 전환되는 것처럼 보이게 하지만 실제로는 component만 전환합니다. 이런 사용 경험은 더 매끄럽고 빠릅니다.
2. 프론트엔드-백엔드 분리: 프론트엔드는 페이지 렌더링과 인터랙션만 담당하고 백엔드는 데이터 API 제공만 합니다. 양쪽의 개발 부담을 줄이고 유지보수도 쉬워집니다.
3. 네트워크 최적화: 페이지를 한 번만 로드하면 되므로 기존 멀티페이지 구조처럼 매번 페이지 전환 시 다시 로드할 필요가 없어 요청 횟수가 줄어들고 서버 부담이 감소합니다.

SPA 단점

1. SEO: SPA 페이지는 동적으로 로드되므로 검색 엔진이 페이지 내용을 직접 크롤링할 수 없습니다(최근 Google이 이 점을 개선 중이라고 주장하지만). 검색 엔진 크롤러 대응에서는 기존 HTML에 미치지 못합니다.
2. 초기 로딩 시간: SPA는 클라이언트 측에서 JavaScript를 로드하고 실행한 후에야 페이지를 렌더링할 수 있으므로 초기 로딩 시간이 길어집니다. 특히 네트워크 상황이 좋지 않을 때 지연이 발생할 수 있습니다.

SSR(서버 사이드 렌더링)

SSR 장점

1. SEO: SSR은 서버 측에서 데이터가 포함된 페이지를 미리 렌더링하므로 검색 엔진이 페이지 내용을 직접 크롤링할 수 있습니다. 이것이 SSR의 가장 큰 장점입니다.
2. 로딩 시간: SSR은 원래의 렌더링 부담을 서버 측으로 이전하여 첫 방문 시 렌더링 시간을 단축할 수 있습니다.

SSR 단점

1. 학습 비용과 복잡성: Next와 Nuxt를 예로 들면, 본질적으로 React와 Vue를 기반으로 하지만 각자의 생태계를 발전시켜 학습 비용이 높아졌습니다. 최근 Next.js 14 개편을 봐도 모든 개발자가 이런 변화를 받아들일 수 있는 것은 아닙니다.
2. 서버 부담: 렌더링 작업이 서버 측으로 이전되므로 특히 높은 트래픽의 애플리케이션 시나리오에서 서버에 더 큰 부담이 될 수 있습니다.

결론

원칙적으로 백오피스 시스템에서 SEO 필요가 없다면 SSR 프레임워크를 사용할 필요가 없습니다. 검색 엔진에 의존하는 제품 웹페이지라면 SSR 프레임워크 채택을 평가할 가치가 있습니다.

2. 사용해본 Web Framework를 설명하고 장단점을 비교해주세요

두 프레임워크 모두 최근 "함수 기반 컴포넌트 개발"로 수렴하고 있습니다:

Vue 3는 Composition API로 로직을 재사용 가능한 composable로 분리합니다. React는 Hooks를 핵심으로 합니다. 개발자 경험에서 두 프레임워크는 매우 유사하지만 전체적으로 Vue의 진입 장벽이 낮고, React는 생태계와 유연성에서 강합니다.

Vue (Vue 3 중심)

장점:

• 학습 곡선이 완만: SFC(Single File Component)가 template / script / style을 한곳에 모아 기존 프론트엔드(백엔드 템플릿)에서 전환하는 개발자에게 친숙합니다.
• 공식 규약이 명확하여 팀에 유리: 공식 스타일 가이드와 관례가 명확하여 새 팀원이 프로젝트를 인수할 때 일관성을 유지하기 쉽습니다.
• 코어 생태계가 완비: 공식에서 Vue Router, Pinia(또는 Vuex), CLI / Vite Plugin 등을 유지보수하여 프로젝트 생성부터 상태 관리, 라우팅까지 "공식 해답"이 있어 기술 선택 비용이 줄어듭니다.
• Composition API로 유지보수성 향상: 기능별로 composable(예: useAuth, useForm)을 분리할 수 있어 대규모 프로젝트에서 로직 공유와 중복 코드 감소가 가능합니다.

단점:

• 생태계와 커뮤니티 규모가 React보다 약간 작음: 서드파티 패키지의 수와 다양성이 React에 미치지 못하며 최첨단 도구나 통합에서 React 우선인 경우가 있습니다.
• 취업 시장이 특정 지역/산업에 집중: React에 비해 해외 또는 다국적 팀은 React가 주류여서 커리어 유연성에서 상대적으로 불리합니다(다만 중화권에서는 반반).

---

React

장점:

• 생태계가 거대하고 기술 업데이트 속도가 빠름: 거의 모든 프론트엔드 신기술, 디자인 시스템, 서드파티 서비스가 React 버전을 우선 제공합니다.
• 유연성이 높고 프로젝트에 맞게 기술 스택을 자유롭게 조합 가능: Redux / Zustand / Recoil 등 다양한 상태 관리와 조합 가능하며 Next.js, Remix 등의 Meta Framework도 있어 SPA부터 SSR, SSG, CSR까지 성숙한 솔루션이 있습니다.
• TypeScript 및 프론트엔드 엔지니어링과의 통합이 성숙: 타입과 대규모 프로젝트의 모범 사례에 대한 커뮤니티 논의가 풍부하여 장기 유지보수 프로젝트에 도움이 됩니다.

단점:

• 자유도가 높아 팀 자체 규범이 필요: 명확한 코딩 스타일이나 아키텍처 규약 없이는 개발자마다 완전히 다른 작성 방식과 상태 관리를 사용하여 유지보수 비용이 증가합니다.
• 학습 곡선이 실제로 낮지 않음: React 자체(JSX, Hooks 사고방식) 외에 Router, 상태 관리, 데이터 페칭, SSR 등 일련의 기술 선택에 직면하여 초보자가 "어떤 라이브러리를 선택해야 하는지" 혼란스러워하기 쉽습니다.
• API 변경과 모범 사례 진화가 빠름: Class Component에서 Function Component + Hooks, 다시 Server Components로의 전환 등, 이전 프로젝트와 새로운 작성 방식이 공존할 때 추가 마이그레이션과 유지보수 비용이 필요합니다.