0726 재직자 피드백

프론트 - 예상되는 개발 이슈

• 선착순 서버 시간 동기화

  • 실시간으로 시간이 업데이트 되면서 화면에 보여야하는 기능

  → 새로고침 할 때만 받아오는 것 (계속 찌르는 것은 서버측에서 비효율적), 기획적인 문제라서 프론트측에서 따로 고민할 것은 없을 것 같음

• 뱃지 커스텀 데이터 관리

  • 캐스퍼 뱃지의 눈, 입, 악세사리 커스텀 UI를 한 화면에서 일부 데이터만 바꿔 끼우면서 업데이트를 해야하는데 한 컴포넌트 안에 모든 데이터 + 커스텀 로직을 몰아넣기에는 컴포넌트가 방대해지는 문제. UI 로직 + 커스텀하는 로직 등을 어떻게 효율적으로 관리할 것인가

  → context API로 관리하기

  • 전화번호를 메인에서 저장해서 커스텀 후 사용해야하는데 localStorage에 저장해도 괜찮을지, context api로 상태로서 관리하는게 좋을지

  → 로컬스토리지는 보안상 문제가 발생하기 때문에 Context API가 더 적절할 것 같음(당연히 후자로 하는 것이 맞는 것임), 사용자 정보가 없을 때 처리 필요

• 이미지 최적화

  • 캐스퍼 일렉트릭에 대한 소개 페이지마다 사용되는 이미지에 대한 양이 증가함에 따라 이미지 최적화가 요구될 수 있음
    • 로딩 시간 느려짐
    • 서버 저장 공간 차지로 인한 비용 증가
    • 불필요한 요청 발생
  • 이미지 최적화를 통해 서버 저장 공간을 적게 사용하도록 하고, 유저 입장에서 좀 더 빠른 웹 환경을 제공해주어야 함

  → 이미지 사이즈랑 확장자(webp 등)를 잘 찾아봐서 최적화 해야함 lazy loading으로 처리하면 좋음

  → 내려갔을 때 이미지를 불러오는 것은 좋지 않고(큰 이미지 같은 경우에는 느려질 수 있음), 미리 불러오는 것이 중요할듯

  → 1920 해상도는 어떻게 생각하는지? max-width는 고려해두는 것이 좋을듯!

• 애니메이션 최적화

  • 캐스퍼 소개 페이지와 이벤트 소개 페이지에 존재하는 스크롤 애니메이션
  • 이미지와 함께 스크롤 애니메이션이 들어가야하기 때문에 리소스와 애니메이션을 어떻게 자연스럽게 컨트롤할 수 있을까 고민

• 검색 엔진 최적화

  • meta 태그 활용

• 메인 페이지 스크롤마다 헤더 바뀌는 것을 어떤식으로 관리하는 게 좋을지?

  • 스크롤 위치에 따라서 dark, light css를 최상단에서 주입해서 header 내부의 색상이 바뀔 수 있도록 하기

  → 전체 페이지의 높이를 기준으로 break point의 스크롤 위치를 계산해서 해당 위치에 대한 header type 변환해주면 됨

백엔드

• 협업 과정에서 컨플릭트가 발생할 수 있음 → 브랜치 전략 수립하여 해결 방안 모색해 보기

• 일정 산정하기 → API 각 각의 개발 기간을 산정하고, 성능 테스트 기간을 산정할 것

• Redis

  • 데이터베이스에 row를 잘 삽입한다면 레디스가 굳이 필요 없을 수 있음
  • 동시성 처리에서 레디스의 역할 학습하기
  • 레디스 서버의 위치 (웹서버 혹은 데이터베이스 서버)
  • 선착순 투표 비율은 레디스가 해결 가능할 수도 (근데 좀 힘들수도)

• 트래픽 관리

  • 트래픽이 증가했을 때, 데이터베이스 값 조회를 관리할 방법은?
  • 서버가 죽었을 경우를 상정해보기
    • 메모리에 비율을 저장한다면, 웹서버가 다운된다면 값이 사라짐.
    • 그 외에도 웹서버가 다운됐을 때, 레디스 서버가 다운됐을 때, 데이터베이스 서버가 다운됐을 때 발생할 수 있는 문제를 예측 (데이터베이스 서버 다운은 최악의 상황)
  • 트래픽 테스트 진행하기
    • 데이터가 10만건 이상 적재됐을 때, 조회 성능 테스트 등 → 데이터가 많을 수록 조회 쿼리가 느리다.
  • 트래픽이 증가한다면 어떤 문제인지 판단하기
    • 어느 API 문제인지 식별하고 어떻게 대응해야 하는지 판단하기

• 데이터베이스

  • 쿼리의 컬럼 순서에 따라 인덱스가 작동하지 않을 수도 있다. → JPA가 만들어주는 쿼리를 이해해야 함
  • 성능에 영향을 주는 쿼리의 요소들을 학습하기
  • 쿼리 테스트 진행 → 개발 후 테스트를 진행하거나, 성능에 문제가 있는 쿼리라고 판단되면 즉시 테스트 진행
  • 이미지 저장: 실제 이미지를 저장하거나, 이미지 메타데이터만 저장하는 방법