🍀데이터를 수정하거나 삭제하는 경우 서버에 저장된 데이터를 선택적으로 가져오는일은 백엔드 개발자가 처리 > 이후 데이터를 원하는 형식으로 화면에 보여주기 위해 수정하거나 삭제하는 일은 프론트가 처리
🍀새 데이터를 추가하는 경우 관리자 페이지 + 쇼핑몰 핫딜 화면의 프레젠테이션 로직 개발 : 프론트엔드 개발 관리자 페이지 + 쇼핑몰 핫딜 기능의 비즈니스 로직 개발 : 백엔드 개발
🍀정적 애셋과 동적 애셋을 변경하는 경우 애셋 : 웹 페이지를 구성하고 작동하는데 사용되는 다양한 파일 정적 애셋 변경 정적 애셋 : 프로그램 코드와 같은 폴더에 있음. 동적 애셋 변경 관리자가 직접 등록 및 삭제할 수 있도록 웹 페이지에 기능을 개발
2. 웹 페이지 표시 속도가 느릴 때
일반적으로 속도 이슈는 백엔드 개발자가 처리
🍀서버의 응답이 느린 경우 서버가 처리해야 하는 데이터의 양이 많을 때 발생 ⇒ 리팩터링(코드 구조 재조정)을 통해 코드 최적화 또는 스케일 업 / 스케일 아웃으로 서버의 규모 조정 스케일 업 : 서버의 CPU 나 메모리를 업그레이드 <장점> 상대적으로 쉽다 적은 관리 이슈 데이터 정합성 이슈 발생 가능성이 낮다 <단점> 성능 향산 한계 서버 1대 분담 양 증가로 문제 발생시 타격 큼 서버 교체 또는 업그레이드 시 서비스 이용이 어려울 수 있음(다운타임) 스케일 다운 : 서버 대수를 늘려 분산 처리하는 것 <장점> 확장에 용이 확장 비용이 비교적 저렴 <단점> 관리가 어려움 노드를 병렬 구조로 연결하기 위해 아키텍처에 대한 높은 이해도 필요 데이터 정합성 이슈 발생 가능성이 커짐
서버 사이드 렌더링(SSR)
서버가 완성된 HTML 파일을 넘겨주서 웹 브라우저에 표시
⇒ 서버에서 처리하는 로직이 많아질 수록 HTML 파일을 완성하는 속도라 느려짐
클라이언트 사이드 렌더링(CSR)
하나의 웹 페이지만 불러오고 웹 페이지를 이동할 때 변경이 필요한 부분만 자바스크립트를 이용해 바꿔치기 = 싱글 페이비 애플리케이션(SPA)
검색 결과로 노출되는데 불리 > 웹 페이지 표시 후 데이터 부분만 다시 서버에 요청해 화면에 출력하기 때문 : 검색 로봇이 웹 페이지의 내용을 온전히 파악할 수 없음 (HTML 뼈대만 인식)
⇒ 검색 로봇이 요청한 경우 SSR 방식으로 완성된 HTML 파일로 응답하는 것으로 해결
SSR을 사용하는 대표적인 웹사이트
1. 커머스 플랫폼 ( Amazon, eBay, Shopify) 검색 엔진에서 잘 노출되는 것이 매우 중요 ⇒ 제품 페이지나 카테고리 페이지에 SSR을 적용해 사용자에게 빠르게 콘텐츠 제공 2. 뉴스 및 미디어 (The New York Times, BBC, The Guardian) 최신 기사를 사용자에게 즉시 보여줘야 하고 검색 엔진에서 빠르게 업데이트 된 콘텐츠가 반영되도록 하기 위해 SSR 활용 3. 소셜 네트워크 및 커뮤니티(Twitter, Reddit) 트윗이나 포스트처럼 사용자 생성 콘텐츠가 많은 서비스를 SSR을 사용해 콘텐츠를 검색 엔진과 사용자 모두에게 최적화된 형태로 제공 4. 부동산 및 여행 (Airbnb, Zillow, Booking.com) 검색 결과를 미리 렌더링하여 SEO를 강화하고 사용자 경험을 향상시킴 5. SaaS 및 생산성 도구 ( Notion) SaaS(Software as a Service) 도구는 일부 대시보드 기능이나 공유 가능한 페이지에서 SSR을 사용해 더 나은 퍼포먼스를 제공 6. 검색 기반 서비스(Google Search(일부 콘텐츠), Bing) 검색 엔진이나 프로필 페이지는 검색 엔진 크롤러가 접근하기 쉽도록 SSR을 활용
CSR을 사용하는 대표적인 웹사이트
1. Gmail(구글 메일) 사용자가 작업할 때 페이지를 다시 로드하지 않고 빠르게 작업을 처리할 수 있음 2. Slack 시간 협업 툴에서 빠르고 동적인 UI 제공이 필수적 3. Facebook 초기 로드 후 사용자가 스크롤하거나 상호작용할 때 필요한 데이터만 로드하여 효율성을 높임 4. Netflix (로그인 후) 콘텐츠 탐색이나 재생 중 사용자 경험을 방해하지 않고 빠르게 작동 5. Twitter(로그인 후) 빠르고 즉각적인 사용자 경험을 제공하기 위해 CSR을 활용
⌛인스타그램에서 CSR 사용하는 이유 개인화된 콘텐츠 ⇒ 로그인 상태에서 개인 콘텐츠 제공 대규모 사용자 ⇒ 많은 양의 동적 콘텐츠를 제공하기 때문에 클라이언트에서 처리함으로써 서버 부하를 줄임 실시간 데이터 업데이트 ⇒ 실시간 데이터 처리는 클라이언트 쪽에서 처리
⭐SEO가 중요한 페이지(예: 공개 프로필 페이지)에서 부분적으로 프리 렌더링이나 Static Site Generation(SSG) 같은 방식이 사용될 수 있습니다.하지만 로그인 후 대부분의 화면은 CSR로 작동
❗SSG : 정적 페이지의 경우는 모든 유저에게 항상 동일한 화면이 보이기 때문에 한번만 생성한 이후에 어딘가에 저장해두고 필요할 때마다 로드
3. 모바일 앱 화면 포시 속도가 느릴 때
🍀프로그램 코드를 잘못 짠 경우 불필요한 코드가 화면에 보이지 않는 백그라운드에서 동작하고 있으면 다른 앱의 동작에 영향을 줌. ⇒ 푸시 알림 또는 유튜브 뮤직
🍀그래픽 효과를 많이 사용한 경우
🍀기기의 성능이 안좋은 경우
4. 화면에 나와야 할 것이 안 나올 때
🍀새로 업데이트한 요소가 나오지 않는 경우 우선 프론트엔드의 실수를 의심 ⇒ 새로 짠 코드가 다른 영역에 영향 새 버전으로 업데이트 했는데 웹 페이지 전체가 안나오는 경우 : 서버 오류 <서버 오류> 성능 문제 보안 문제 로직 문제 데이터 문제 외부 의존성 문제 인프라 문제
테스트 주도 개발(TDD)[TDD 방법 및 순서]
실패하는 작은 단위 테스트를 작성
빨리 테스트를 통과하기 위해 프로덕션 코드 작성
테스트 코드 작성 > 실패 테스트가 없을 경우에만 성공 테스트 작성
새로운 테스트를 통과하기 위해 프로덕션 코드 추가 또는 수정
개발된 코드들에 대해 모든 중복을 제거하며 리팩토링
테스트 코드를 먼저 작성하는 개발 방법론. ⇒ 순차적으로 실패하는 테스트를 작성하고 테스트가 실패할 경우에만 새로운 코드 작성
🍀업로드한 대용량 데이터가 나오지 않는 경우 데이터 자체의 문제일 수도 있음 ⇒ 잘못된 데이터가 운영 서비스에 바로 배포되지 않도록 운영 프로세스를 개선.
