[인프콘] 프론트엔드 개발의 결정적 순간들

미아·2024년 10월 30일

프론트엔드 공부

목록 보기

1/1

7년동안 하나 만들었습니다. 프론트엔드 개발의 결정적 순간들 - 이찬희

지금 개발하는 (만드는) 제품의 7년뒤는 어떨까?
- 현재 개발한 제품의 기능들 (airbridge): 데이터 추출, 연동, 리포트 ..
- 기술적으로는 초당 15억건 실시간으로 받아서 처리

첫번째 순간 : 처음으로 만든 기능

문제: 매우 큰 고객이 들어오고 나서 api 응답이 느려지고 다운되는 일이 잦아짐

메타 데이터?
메타 데이터 예시
예시 상황: 쇼핑몰 웹사이트에서 상품 페이지에 필요한 메타 데이터를 추가한다고 가정해봅시다.
```
html
코드 복사

<head>
  <meta name="description" content="신상품 출시! 최신 유행 신발을 만나보세요.">
  <meta name="keywords" content="신발, 최신, 유행, 패션">
  <meta property="og:title" content="신상 신발 출시!">
  <meta property="og:image" content="https://example.com/shoes.jpg">
</head>
```
위 예시처럼 메타 데이터를 설정하면 검색 엔진은 이 정보를 이용해 더 잘 검색될 수 있게 도와주고, SNS 공유 시에도 특정 이미지나 제목이 보이게 해줍니다.
이벤트 수 증가와 메타 데이터가 API 서버에 미치는 영향
이제 메타 데이터를 JavaScript 코드에서 설정하는 예시를 들어볼게요. 이벤트 수가 많아질 때 메타 데이터가 API 서버에 미치는 영향도 이어서 설명하겠습니다.
1. JavaScript에서 메타 데이터 생성 예시
상품 페이지의 경우 사용자가 보는 상품마다 서로 다른 정보를 보여줘야 하므로, 프론트엔드에서 동적으로 메타 데이터를 생성할 수 있습니다.
```
javascript
코드 복사
function setMetaData(product) {
  document.title = `${product.name} - 최신 패션`;
  document.querySelector('meta[name="description"]').setAttribute("content", product.description);
  document.querySelector('meta[property="og:image"]').setAttribute("content", product.imageUrl);
}
```
사용자가 상품 페이지를 클릭할 때마다, setMetaData 함수가 상품 정보를 기반으로 페이지의 메타 데이터를 설정해줍니다.
2. API 서버에 미치는 영향
이벤트 수가 많아지면:
- 상품 페이지를 사용자들이 많이 탐색할 경우, 각 상품 정보(상품 이름, 설명, 이미지 등)를 매번 API 요청으로 가져오게 됩니다.
- 사용자가 많아지고 요청 빈도가 높아지면, 서버는 그만큼의 트래픽 부담을 가지게 됩니다.
- 결과적으로, 서버의 처리 능력을 초과할 경우 응답 지연이 발생하거나 심한 경우 서버 다운 문제가 생길 수 있습니다.
  
  이를 해결하기 위해 서버나 프론트엔드에서 캐시(Cache) 를 이용해 자주 요청되는 메타 데이터를 저장해두면, 서버에 매번 요청하지 않아도 되므로 부하를 줄일 수 있습니다.
즉, 사용자 경험에는 데이터 양과 변화량이 핵심
- 즉, 무한스크롤등 화면의 변화가 많아질수록 렌더링의 부화가 더 심해짐

이를 해결하려면?

페이지네이션: 데이터를 나눠서 보여줄 수 있음

렌더링 가상화:스크롤할 때마다 화면에 보이는 부분만 렌더링해 성능 최적화

```jsx
import { FixedSizeList as List } from 'react-window';

const ProductList = ({ products }) => (
  <List height={500} itemCount={products.length} itemSize={50}>
    {({ index, style }) => (
      <div style={style}>
        {products[index].name}
      </div>
    )}
  </List>
);

```

정규화 : 데이터를 중복 없이 효율적으로 관리하기 위해 자주 쓰이는 값이나 주요 속성을 기준으로 데이터 구조를 최적화하는 것을 의미

두번째 순간: 캘린더 컴포넌트

기존에는 캘린더 라이브러리를 쓰다가 → 만들기로 결심
기능들

→ 문제

3일,7일 단위의 블록 선택 없어짐
last 7 days → 오늘을 포함하지 않아야함(모든 코드에 오늘 포함 관련 코드 추가 삽입)

타임존은 서머타임 등으로 인해 매년 여러 개의 버전이 나옵니다. 하지만 각 환경에서 쓰는 버전이 다릅니다. 이를 맞추기 위해 프론트는 날짜 라이브러리의 커스텀 플러그인을 구현하고, 캘린더의 코어부터, 서비스 내의 모든 날짜 연산이 들어가는 곳까지 모두 뜯어고쳐야 했음
- 교훈: 처음부터 … 표준 협정시를 써라
- 추가적으로 표준 협정시(UTC)에 관련하여 타임존을 표준협정시(UTC)를 사용한다는 것은, 시간 데이터를 전 세계적으로 동일한 기준인 UTC를 기반으로 저장하고 관리한다는 의미입니다. UTC(협정 세계시)는 지구상의 모든 타임존이 기준으로 삼는 표준 시간이기 때문에, 이를 사용하면 위치에 관계없이 모든 데이터가 동일한 시간을 참조할 수 있습니다.
  표준협정시(UTC) 사용의 의미와 필요성
  1. 일관된 시간 기준: UTC를 기준으로 모든 데이터를 저장하면, 위치에 따라 시간이 달라지지 않고 언제 어디서든 동일한 시간 데이터를 참조할 수 있습니다. 예를 들어, 한국(KST)은 UTC보다 9시간 빠르지만 UTC를 기준으로 하면 시간 데이터를 전 세계에서 일관되게 관리할 수 있습니다.
  2. 타임존 변환의 용이성: 저장된 UTC 시간을 사용자에게 제공할 때, 그들의 지역 타임존으로 변환하여 보여주기만 하면 됩니다. 예를 들어, 한국에서 웹사이트에 접속한 사용자는 UTC에 +9시간을 더한 시간으로 표시됩니다.
  3. 데이터 통합과 비교 용이성: 여러 타임존에서 발생하는 이벤트를 동일한 기준으로 기록하면 비교와 분석이 쉬워집니다. 예를 들어, 다국적 팀이 협업하는 상황에서 미국과 한국에서 동시에 발생한 이벤트의 시간을 비교할 때 UTC를 기준으로 저장된 데이터는 정확한 비교가 가능합니다.
    
    예시
    
    서버에서 이벤트 발생 시간을 UTC로 저장한다고 가정해 봅시다.
  - 한국에서 10월 31일 오후 6시에 저장한 이벤트는 UTC로 변환하면 10월 31일 오전 9시가 됩니다.
  - 데이터베이스에는 UTC 시간인 2024-10-31T09:00:00Z로 저장됩니다.
    
    이후 다른 타임존의 사용자가 이 데이터를 확인할 때 자신의 지역 타임존으로 변환해 보여주면, 전 세계 어디서나 정확한 시간대를 반영한 이벤트 시간을 확인할 수 있습니다.