[TIL] 2022-1011

🐈오늘 배운 것

✔️AWS

AWS 아마존 웹 서비스는 클라우드 컴퓨팅 서비스를 제공한다. 클라우드 컴퓨팅이란 가상의 컴퓨터를 대여해주는 서비스로, 직접 서버실을 갖추고 운영,관리하는 온프레미스 방식에 비해 많은 장점을 가지고 있다.

먼저 인프라를 구축하는 초기 비용이 적게 들고, 사용한 만큼 금액을 지불할 수 있으며 컴퓨팅 능력을 필요에 맞게 탄력적으로 조절할 수 있다는 장점이 있다. 단점으로는 서비스 제공 업체의 문제로 전체 서비스가 영향을 받게 된다는 점이 있다.

 

AWS 에서 제공하는 서비스의 종류가 많은데, 그 중 세 가지를 정리해보자.

 

EC2 (Elastic Compute Cloude) 

AWS 에서 제공하는 클라우드 컴퓨팅 서비스, 가상의 컴퓨터를 한 대 빌리는 것과 같다. Elastic 이라는 말 처럼 사용량에 따라 비용도 탄력적으로 지불할 수 있고, 용량도 필요에 맞게 탄력적으로 선택할 수 있다. 

 

EC2 에서는 AMI (Amazon Machine Image) 라는 일종의 템플릿을 통해 어떠한 운영체제, 런타임 등 컴퓨터에 대한 구성을 선택하고 그로부터 구성된 인스턴스를 생성하게된다. EC2 는 AMI를 토대로 구성된 Instance(가상 컴퓨터)를 대여하는 서비스라고 할 수 있다. 가상의 컴퓨터지만 실제 컴퓨터처럼 사용할 수 있기 때문에, 여기에 서버를 구축할 수 있다. 

 

RDS(Rlational Database Service)

AWS 에서 제공해주는 관계형 DB 서비스이다.

인스턴스에 DB 엔진을 설치하지 않고 RDS 를 이용하는 이유는, DB 관리에 대한 부분을 최소화 할 수 있다는 장점이 있어서다. 확장성도 뛰어나고 초기 설정 이외에는 데이터 관리 이외에 특별한 설정이나 관리가 최소화된다. RDS 에서는 필요에 맞게 다양한 DB 엔진을 선택할 수 있다. 

 

S3 (Simple Storage Service)

AWS 에서 제공해주는 스토리지 서비스이다. 스토리지란 데이터를 저장할 수 있는 인터넷 공간으로, 인터넷이 연결된 전자기기라면 어디서든 접근할 수 있다는 장점이 있다. S3도 접근성이 뛰어나고 확장성이 좋으며 역시 비용을 탄력적으로 지불할 수 있다.

 

S3을 이용하면 정적 웹사이트를 호스팅 할 수 있는데, 이는 버킷이라는 저장 공간을 사용한다. 버킷에 정적 파일을 저장하고 호스팅 용도로 구성하여 배포할 수 있다.

버킷에 저장되는 파일은 객체라고 부르며, 각 객체는 파일과 메타데이터로 구성되는데, 파일은 키 - 값 페어로 저장된다. 값은 파일의 실제 데이터이고, 키는 파일의 식별자 역할을 한다. 메타데이터는 객체에 대한 정보가 담긴 데이터이다. 각 객체는 고유한 URL 주소를 가진다.

DB와 스토리지의 차이점?
- DB는 조직화된 데이터가 저장되는 논리적인 저장소를 의미한다.
따라서 DB에 저장되려면 구조적인 가공을 거쳐야한다.
- 스토리지는 파일이 저장되는 물리적인 저장소를 의미한다. 
다양한 타입의 데이터가 저장될 수 있다. 

✔️로그인 유저 권한, SWR

서버 api 를 권한이 있는 유저만 접근할 수 있도록 공개 범위를 변경해야한다.

로그인을 했을 때 로그인 된 유저의 정보를 확인할 수 있는 /api/users/me 라는 api 엔드포인트를 만들었는데, 클라이언트에서는 이 api 로 요청을 보내 현재 로그인 된 유저가 있는지, 유저가 있다면 어떤 데이터가 있는지를 확인하여 페이지 접근 여부를 결정할 수 있다. 이 때 서버쪽에서는 api에 접근하는 요청의 쿠키를 확인하여 요청이 유효한지를 판단할 수 있다.

// private 이 설정된 엔드포인트의 요청에 대해서 쿠키를 검증한다.
if (isPrivate && !req.session.user)
    return res
    .status(401)
    .json({ok: false, error: '로그인을 먼저 해주세요.'});

클라이언트 쪽에서는 useUser 라는 커스텀 훅을 사용해 유저 데이터를 응답하는 엔드포인트로 요청을 보낼 수 있다. 만약 로그인이 된 상태라면 정상적으로 유저 데이터를 응답할 것이고, 아니라면 api 로직대로 false 데이터를 응답받게 된다. 이 때 fetch 를 사용해서 데이터를 요청할 수도 있지만, SWR (stale-while-revalidate) 훅을 사용하는 방법도 있다.

 

SWR 이란 데이터 fetching 을 위해 사용하는 훅으로, fetching 과정을 간소화 한다는 장점도 있지만, 같은 요청에 대해 데이터를 캐싱하고 또 최신화까지 자동으로 대신 해주기 때문에 편리하게 사용할 수 있다. 사용 방법은 간단하게 아래와 같다.

import useSWR from 'swr'

// 첫번째 인자 url 은 요청 url인 동시에 캐시 저장을 위한 key이다.
const { data, error } = useSWR("<요청 url>", <url로 fetch 요청을 보내는 fetcher 함수>)

// fetcher 함수는 아래처럼 url을 받아서 fetch 를 해준 뒤 json 데이터를 리턴한다.
const fetcher = (url) => fetch(url).then(response => response.json());

요청한 데이터가 url 을 키로 하여 분류되는데, 이 때문에 다른 페이지로 이동해도 같은 url 로 요청을 했을 때 swr 이 이 url 키에 해당하는 캐시 데이터에 접근하여 사용할 수 있다. 캐시된 데이터를 로드하기 때문에 페이지 이동시 데이터 로딩에 대해 지연이 없고, 최신화를 위한 api 요청을 자동으로 해주기 때문에 변경에 대한 업데이트를 받을 수 있다. 

 

추가적으로 유저가 브라우저의 다른 탭으로 갔다가 다시 돌아왔을 때 데이터를 새로고침하여 실시간 업데이트를 가능하게 한다. 

// useUser 로직 일부
export default function useUser() {
  const router = useRouter('');
  const {data, error} = useSWR('/api/users/me', fetcher);

  // 받아온 데이터가 false 라면 enter 페이지로 리다이렉트
  useEffect(() => {
    if (data && !data.ok) router.replace('/enter');
  }, [data, router]);

  return {user: data?.profile, isLoading: !data && !error};
}

 

🐈더 공부할 것

1. useEffect 훅 공부하기

2. EC2 인스턴스 해결, S3 배포 실습

🐈오늘의 느낀 점

오늘 EC2 실습을 하면서 내가 얼마나 네트워크쪽에 지식이 빈약한지 새삼 깨닫게 되었다. DNS 며 host 며 해결 방법이 나와도 쉽게 이해할 수 없는 용어가 너무 많아서 더 어려움을 느꼈다.