이재만 교수의 공간

lsb_release -a

cmd 창을 열어서 다음과 같이 입력한다

ssh -i apple.pem ubuntu@123.54.67.93

로그인할 때

로그인 하고 나서 정보 갖고 올 때

서버에서 인증을 하고 해당 정보를 서버의 특정 공간에 저장

이 때 사용하는 것이 세션

쿠키도 사용 - 세션을 찾는 정보만 저장( 세션 ID )

중요 정보는 세션에 모두 넣음

1. 로그인에 사용할 가드 필요

인증 로직 구현 부분은 패스포트  이용

인증 로직을 쉽게 분리해서 개발하는 라이브러리 사용

2. 패스포트에서 인증 로직은 스트래티지 파일 생성

패스포트에서 인증 로직 수행을 담당하는 클래스

기존 가드처럼 가드 안에 인증 로직을 두는 것이 아니라

별도로 스트래티지에서 검사

id, password를 주었을 때 올바른 정보인지 판단하는 로직

쿠키에서 값을 읽어서 인증을 위한 올바른 데이터가 있는지 확인

3. 세션 사용 시 세션에서 데이터를 읽어오고 저장하므로

    세션에 데이터 저장하고 읽어올 세션 시리얼라이저 필요

NestJS 에서 인증할 때 가드라는 미들웨어 사용

가드는 @Injectable() 데코레이터가 붙어 있고 

CanActivate 인터페이스를 구현한 클래스

쿠키 파서 - 쿠키를 Request 객체에서 읽어오는 미들웨어

authService의 validateUser 를 사용해 가드를 만들어보자

카드를 사용할 때는 UseGuards 데코레이터를 사용

괄호 안에 만들어둔 LoginGuard 를 넣어주면 됨

LoginGaurd 에서 인증에 성공하면 req.user에 user 할당

로그인에 사용할 가드가 필요

인증 로직 구현 부분은 패스포트라는 인증 로직을

쉽게 분리해서 개발하는 라이브러리 사용

패스포트 사용시 인증 로직은 스트래티지 파일을 생성해서 사용

스트래티지는 패스포트에서 인증 로직 수행을 담당하는 클래스

전략 패키지를 같이 설치해 인증을 쉽게 구현

기존처럼 가드 안에 인증 로직을 두는 것이 아니라 

인증 로직을 처리하는 별도의 스트래티지 파일 필요

예를 들면 아이디, 비밀번호를 주었을 때

올바른 정보인지 판단하는 로직

쿠키에서 값을 읽어서 인증을 위한 올바른 데이터가

들어있는지 등을 검증하는 로직

세션 사용시 세션에서 데이터 읽어오는 세션 시리얼라이저 필요

사용자 신원을 확인하고 인증 정보를 저장하고 읽어와서

다시 인증하는 작업

복잡하지만 이해하고 나면 각 역할 분담이 잘 되어 있어

유지보수에 유리

1. 가드를 통과한 요청은 스트래티지에 전달

사용자 신원을 검증함

2. 스트래지는 세션 정보를 읽기 위해

세션 시리얼라이저 세션에 있는 인증 정보 요청

3. 세션 시리얼라이저는 세션에 있는

인증 정보를 스트래티지에 돌려줌

4. 스트래티지는 세션에 있는 인증 정보를 확인해

사용자 유무를 가드에 결과값으로 반환

개발 구현 과정

1. 라이브러리 설치 및 설정

2. 로그인과 인증에 사용할 가드 구현하기

3. 세션 시리얼라이저 구현하기

4. 로컬 스트래티지 파일 만들기

5. auth.module.ts 설정하기

6. 로그인, 사용자 인증 테스트

1. Controller 에 login 처리 메서드

2. email, password 넘겨주면 해당 정보의 유저가 있는지 유효성 검사

3. 응답에 쿠키 정보를 추가해 반환

NestJS 에서 인증을 구현할 때는 보통 인증용 미들웨어인

가드(Guard)를 함께 사용

가드는 특정 상황에서 받은 요청을 가드를

추가한 라우트 메서드에서 처리할지 말지 결정하는 역할

map으로 li 태그 만들어서 

innerHTML 에 붙일 때 배열로 넘어와서 붙이면

아이템 사이의 , 가 그대로 남아서 표가 다음줄로 보여지게 된다

map( ).join( ',' ) 원래는 이렇게 들어가는건데

map( ).join(' ') 이렇게 변경하거나 추가해주면 된다

TypeError: Cannot create property 'exact' on string 'super-heroes' 

@tanstack/react-query 에서 setQueryData( ) 함수를 이용할 때 

queryKey 를 사용할 때는 ['super-heroes'] 배열로 넘겨야 한다

에러 코드

정상 코드

localhost:3000/apple/1

여기서 1의 정보를 가져오기 위해 Link 가 다음과 같다면

localhost:3000/apple/:appleId

다음과 같이 가져올 수 있다

import { useParams } from 'react-router-dom';

const { appleId } = useParams();

1. Custom Query Hook

2. Query By ID

3. Parallel Queries

4. Dynamic Parallel Queries

const { isLoading, data, isError, error, isFetching } = useQuery(

  ['apple'],

  fetchApple,

  {

  refetchInterval: 2000, // polling - 2초마다 쿼리 실행,

  cacheTime: 5000, // cache 메모리에 들어있는 데이터가

            가비지 컬렉터에 의해 얼마만에 삭제될 것인가

  staleTime: 30000, // 30초 뒤에 stale 상태로 변경

  refetchOnMount: true, // 실행되자마자 refetch 를 실행

  refetchOnWindowFocus: 'always', // 포커스 되면 refetch 실행

  enabled: false, // fetch를 실행하지 않음

  onSuccess: 성공했을 때 콜백 함수

  onError: 에러 발생했을 때 콜백 함수

  select: 데이터 변경(data transformation)

  select: data => {

    const name = data.data.map(hero => hero.name);

    return name;

  }

  });

AuthController에 login 핸들러 메서드가 필요

AuthService에서 email, password를 넘겨주면 해당 정보의 유저가 있는지

유효성 검증 로직 필요

유효성 검증이 끝나면 응답 값에 쿠키 정보를 추가해 반환(Response)

NestJS 에서 인증을 구현할 때는 보통 인증용 미들웨어인

가드(Guard)를 함께 사용

가드는 특정 상황에서 받은 요청을 가드를 추가한 라우트 메서드에서

처리할지 말지를 결정

인증 (Authentication) - 누구인지 확인하는 절차

인가(Authorization) - 인증된 사용자의 권한을 확인

인증 - 정확성과 시간 측면에서 사용자의 자격 증명을 확인

정확성 - 사용자의 자격 증명을 기존 정보를 기반으로 확인 후 인증 토큰 발급

시간 - 사용자에게 부여된 인증 토근은 특정 기간 동안만 유효

인증 만드는 2가지 방법

쿠키 기반 vs 토큰 기반

쿠키가 없는 토큰 기반을 쿠키리스(cookieless)

쿠기 - 서버에서 보내준 쿠키를 클라이언트에 저장(브라우저)

데코레이터는 클래스, 메서드, 속성, 매개변수, 접근자(get, set) 에

추가할 수 있는 특수한 문법

@데코레이터명

데코레이터가 적용된 클래스, 메서드, 속성, 매개변수의 정보를 읽어서

동작을 변경

메타 - 프로그래밍을 지원하는 기능

여러 개의 클래스 또는 메서드에 같은 패턴의 코드가 나오는 경우

데코레이터를 사용하면 좋음

타입스크립트에서 데코레이터 사용하려면

tsconfig.json에서 "experimentalDecorators": true 로 설정

이렇게 코드를 작성했을 때 다음과 같은 에러가 발생한다

 Uncaught TypeError: Cannot set properties of null (setting 'onmousedown')

발생하는 이유는 hat 이 null 이기 때문이다

script 태그를 header에 넣은 경우 body의 태그가 

생성되기 전에 querySelector로 접근하기 때문이다

첫 번째 방법은 script 태그를 body 태그 아래에 두면

태그가 다 실행되어 생성된 다음에 script 코드가 생성되어 객체가

정상적으로 생성된다

두 번째 방법은 window.onload 안에 넣으면 된다