원티드 온보딩: 로그인 개념과 어플리케이션 구조

윤뿔소·2023년 3월 6일

로그인 원티드

Wanted

목록 보기

1/4

~~막 써서 내용이 중구난방입니다! 필기라서 참고용으로는 별로일지도.. 사실 강의도 살짝 주제가 다양하게 나와서리^^~~

원티드 프리온보딩에 신청하고 로그인에 관련해서 강의도 제공해줘서 듣고 정리하는 시간을 갖겠다.

로그인과 관련된 여러 가지 개념과 기술
프론트엔드에서 일반적으로 로그인을 구현하는 방법
백엔드에서 일어나는 일 맛보기
인프라 관점에서 생각해 보기
여러 가지 실습과 질문/답변

이런 식으로 강의를 전개한단다.

Overview

1강. 로그인의 개념과 어플리케이션 구조 알아보기

로그인의 기술적 정의와 실제 서비스에서의 사용도에 대해
직접 로그인 화면과 Mock API를 세팅해 보며 학습
구성해 본 로그인 로직이 실제 서비스에 적용되기 위해서 필요한 부분에 대해

로그인이란?

로그인, 로그인 또는 로그온은 사용자가 시스템(예: 컴퓨터 또는 웹 사이트)에 액세스하기 위해 시스템에 식별자 정보를 입력하는 것입니다. 이것은 컴퓨터 보안 절차의 필수적인 부분입니다.
...
보안을 염두에 두고 설계된 운영 체제(예: 유닉스 계열 시스템)의 일반 사용자 계 정에 로그인하면 해당 사용자는 시스템의 제한된 파일 및 프로그램 세트에만 액세 스할 수 있습니다. 루트(즉, 관리) 계정에 로그인하면 해당 사용자는 시스템의 모 든 파일 및 프로그램에 대한 액세스 권한을 얻습니다.
...
로그인은 액세스를 제한할 뿐만 아니라 시스템 로그 파일(시스템에서 발생한 이벤 트의 기록이 포함된 자동 업데이트 파일)에 자동으로 입력되는 데이터 형식의 감 사 추적도 제공합니다. 이러한 데이터는 시스템 관리자가 정기적으로 연구하거나 의심스러운 활동 또는 시스템 손상 징후가 있는 경우 연구할 수 있습니다.

핵심은

시스템(예: 컴퓨터 또는 웹 사이트)에 액세스하기 위해
사용자는 시스템의 제한된 파일 및 프로그램 세트에만 액세스 하기위해
시스템 로그 파일(시스템에서 발생한 이벤트의 기록이 포함된 자동 업데이트 파일)에 자동으로 입력되는 데이터 형식의 감사 추적도 제공하기 위해

다시 말해

사용자가 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 컴퓨터 보안 절차

사이트에서 이용하기위한 권한을 부여하고 받는 일을 뜻하는 것이다!

서비스관점에서 로그인이란?

어떤 서비스를 이용하고 기록이 남아야하는 것
서비스를 조작하는 데에 있어 권한 유무

등 서비스를 동작하고, 기획 의도에 있어 제대로 사용하기 위해 로그인 기능을 넣는 것이다.

FE에게 로그인이란?

UX에 영향을 제일 많이 줄 수 있는 프론트는 로그인 관련 기능을 잘 이용해야할 것이다.

또한 프론트가 관련 페이지와 기능을 적어도 구현해야하는 건 아래 4가지가 있다.

로그인 페이지: 인풋, 소셜
로그인 인증 관련 데이터 관리: 권한에 따라 데이터 차별
로그인 상태에 따른 화면/기능 제어: 404, 로그인 페이지로 우회
로그아웃: 권한 해제

이러한 기능들을 이용하여 사용자에게 좋은 경험을 주자!

과제

깃헙 클론
로그인 화면을 만들 것이다.

username, password를 입력받을 입력창
submit을 위한 버튼
로그인 목업 API
유저 정보 목업 API

Mocking API인 로컬 API를 사용하여 로그인을 하면 로그인 정보가 뜨게 TODO를 채우자

풀이

기초 재료

state

const [userInfo, setUserInfo] = useState<UserInfo>({ username: "" });

type

interface UserInfo {
  username: string;
}
interface User {
  username: string;
  password: string;
  userInfo: UserInfo;
}

userData

const users: User[] = [
  {
    username: "blue",
    password: "1234",
    userInfo: { username: "blueStragglr" },
  },
  {
    username: "white",
    password: "1234",
    userInfo: { username: "whiteDwarf" },
  },
  {
    username: "red",
    password: "1234",
    userInfo: { username: "redGiant" },
  },
];

코드

formData

const LoginWithMockAPI = () => {
  const loginSubmitHandler = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    // TODO: form 에서 username과 password를 받아 login 함수를 호출하세요.
    const formData = new FormData(event.currentTarget);
    const loginRes = await login(
      formData.get("username") as string,
      formData.get("password") as string
    );
    if (!loginRes) return;
    const userInfo = await getUserInfo(loginRes.token);
    if (!userInfo) return;

    for (let [key, value] of formData.entries()) console.log(key, value);
  };

useState + input이기에 useRef쓰는 것도 괜찮다!
리액트로 input 관리하는 방법은 무궁무진 하다. Using useState to HTML input 등 구글링을 하여 맛있게 배워보자

`login`

const _secret: string = "1234qwer!@#$";
const login = async (username: string, password: string): Promise<LoginResponse | null> => {
  // TODO: 올바른 username, password를 입력하면 {message: 'SUCCESS', token: (원하는 문자열)} 를 반환하세요.
  const user: User | undefined = users.find((user: User) => {
    return user.username === username && user.password === password;
  });
  return user
    ? { message: "SUCCESS", token: JSON.stringify({ user: user.userInfo, secret: _secret }) }
    : null;
};

const getUserInfo = async (token: string): Promise<{ username: string } | null> => {
  // TODO: login 함수에서 받은 token을 이용해 사용자 정보를 받아오세요.
  return { username: userInfo.username };
};

secret 키는 우리 서버에서 로그인을 했는지 우리 프로그램만의 유효성 검사이다. 프론트가 하는 편은 아니지만 저렇게 검사가 들어가야 더 안전해진다는 걸 알기 위해 쓴 것.

`getUserInfo`

코드를 입력하세요

완성 구조

구조만 알아가자! 로그인이 어떤 방식으로 구동되는지 그냥 한눈에 보기 위해 한것이다. formData관련 코드나 이런 건 나중에 학습한다고 하니 과정이 어떻게 전개되는지 알고 가자

Token이란?

로그인 구조를 보며 어떻게 돌아가는지 알았다. 그 중 토큰이 옆에 껴있었는데 대체 뭐하는 애일까?

통행권.

토큰은 한마디로 해서 로그인 정보를 입력하고 얻는 권한을 뜻하는 것이다. 그래서 무언가의 기능을 이용하려면 토큰을 계속 넣어줘 이 계정이 권한이 있는지 없는지 알아야한다. 사용자 입장에서 기능을 사용할 때마다 로그인을 해서 권한을 계속 넣어준다면 그 사이트는 1분도 사용 못할 것이다. 그러면 브라우저에서 토큰을 저장해 적재적소에 사용해야할 것이다.

그렇다면 어떻게 저장해야할까? 계정 정보라 예민한 부분이다.
이런 스토리지 중 하나를 골라서 저장할 것이다.

공통(레이아웃) 컴포넌트 중 로그인도 중요

로그인 과정이 필요한 이유와 어떤 식으로 사용해야하는지 배웠다. 토큰, 로그인이 필요한 페이지, 즉 권한이 있는지 없는지 확인해야하는 코드가 필요하다.

페이지 a, b, c는 로그인이 필요해서 3개의 컴포넌트에 코드를 작성해야한다. 심지어 d, e ~ 간다면 그 수는 어마어마해진다. 그래서 레이아웃 컴포넌트를 작성해 1개로 재사용을 하는 것.

위 사진처럼 레이아웃 컴포넌트를 작성해 직접적인 내용이 있는 컨텐츠 컴포넌트와 나눠 기능을 분리했다.
+ 로그인 상태에 따라 메뉴가 안보이도록 할 수도 있는 기술도 나중에 배운다고 하니 그때 배워보자

결론적으로 유지/보수를 위해 반복되는 코드를 레이아웃 컴포넌트화 시켜서 만들자. 로그인과 토큰이 필요한 페이지도 안필요한 페이지랑 따로 분리해 생각하자.

CSR, SSR: UX 및 유지보수 관점에서의 구조

렌더링은 HTML, CSS를 가져와 화면, 뷰포트를 그리면서 JS를 파싱해 그리는 것 등등에 영향을 주는 것을 뜻한다.

CSR(재료만 제공)
SSR(반조립 제공)
SSG(완제품 제공)

CSR, SSR, SSG 설명하는 강의는 아니기에 넘어가고

렌더링 방식에서 가장 얘기가 많이 나오는 것이 SEO, 로딩속도 등이 있다. 그러면 어떻게 써야할까?

걍 케바케다. 진짜다. 그래서 렌더링 구동 방식과 자기 개발 환경 자원에 대해 파악하고 있어야한다.

추가로 서버가 필요한가?
SEO가 필요한가?
어떤 유저 인터랙션이 많은가? (페이지 이동 vs 페이지 내 인터랙션)
...

이렇게 말이다. 그래서 앱 구조를 짤 때, 렌더링 구동 방식도 위 생각을 해야한다. 뭐 당연한 소리다.

사담

취준생을 위한 프리온보딩인데 생각보다 내용이 초급을 위한? 쉬운 느낌의? 주제들이라 편하게 듣긴 들었다,, 물론 들었던 내용이라 대충 듣지는 않았지만서도,, 그래도 되게 재밌었다. 내가 뭘 모르는지 다시 알게 됐고, 로그인 기능을 프론트 기술면으로 많이 떨어져있다고 생각하게 됐다. 재밌게 들어야겠다.

그리고 생각보다 로그인 자체의 기능보다 로그인 기능이 왜? 공통 레이아웃을 왜? CSR, SSR 왜? 이렇게 구조를 왜 짰지? 이런 식의 문답 형식이라 되게 원론적인 얘기를 많이 했다. 맨날 내가 느끼던 '이 기술을 왜 여기에 써야할까?'라는 진리를 다시금 깨달았다. 맨날 깨달아도 부족하다!!!@