👨‍💻 사건

원티드 온보딩 챌린지 과제에서 로그인 기능 구현 과제를 수행을 하였다. 그 과정에서, 타입스크립트를 사용하여 과제를 구현하는것에 어려움이 있었다.

✅ 해결

필요한 interface 를 정리하여 설정하였다.

interface LoginResponse {
  message: LoginSuccessMessage | LoginFailMessage
  token: string
}

interface UserInfo {
  username: string
}

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

로그인시, 존재하는 계정을 판단하기 위해 임의로 더미 데이터를 설정하였다.

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

위의 타입정보와 더미데이터를 활용하여, 로그인 함수를 구현해 보았다.

const login = async (username: string, password: string): Promise<LoginResponse | null> => {
  // TODO: 올바른 username, password를 입력하면 {message: 'SUCCESS', token: (원하는 문자열)} 를 반환하세요.
  // user 라는 변수를 선언한다. 그후 users 변수에 할당된 데이터들을 탐색하여 조건에 적합한 첫번째 인자를 찾는다.
	// 만약 존재하지 않는다면 undefinde 를 리턴한다.
  const user: User | undefined = users.find((user: User) => {
    // [users 안에 데이터 의 'username'이라는 키의 값] 과 [login 함수에서 전달받은 파라미터 'username'] 의 값이 정확히 일치해야하고,
		// [users 안에 데이터 의 'password'이라는 키의 값] 과 [login 함수에서 전달받은 파라미터 'password'] 의 값이 일치하는 경우 반환한다.
    return user.username === username && user.password === password;
  });
  // user 이 존재하면 LoginResponse 객체의 { message: "SUCCESS", token: JSON.stringify({ username: user.userInfo }) } 객체 정보를 리턴하고,
	// 그렇지 않는다면 null 을 반환한다.
  return user ? { message: "SUCCESS", token: JSON.stringify({ username: user.userInfo }) } : null;
};

주황색으로 하이라이트 칠한 부분에 대해 정확히 이해가 안되어, 검색하여 공부하였다.

→ user 라는 변수는 User 객체 타입을 가지거나, undefined 를 가질 수 있다. 위의 경우에는, find 조건을 통해 걸러진 값이 없다면 undefined 값을 가질수 있게되는 것이다.