본문 바로가기
코드리뷰

코드리뷰 - 카카오톡

by 치우치지않는 2022. 7. 30.
public 폴더
 

asset 폴더에는 1. 사람 모양의 기본 프로필 이미지 2. 카카오톡 로고 이미지가 들어있었다.

KakaoTalk/client/public/index.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'> 
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Kakao Talk</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
    <link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet" />
</head>
<body>
    <div id="root"></div>
    <div id="modal"></div>
</body>
</html>

<head> 태그 

<meta charset='utf-8'> // html 파일의 인코딩을 알려주는 코드. 넣지 않으면 한글, 특수문자 등이 깨져서 나올 수 있음.

<meta http-equiv='X-UA-Compatible' content='IE=edge'> // IE 버전 중 가장 최신 모드로 표시하라는 뜻. 

<meta name='viewport' content='width=device-width, initial-scale=1'> // meta viewport 태그로 애플이 아이폰, 아이패드 등 자사의 모바일 브라우저의 뷰포트 크기 조절을 위해 만든 것. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"> // 웹에서 필요한 아이콘을 font awesome 라이브러리에서 썼기 때문에 이 라이브러리를 사용하는 코드.

<link> // 외부 스타일 시트를 연결하기 위해서 head 안에 링크 태그를 쓴다. 

 

<body> 태그

1. root 라는 id 를 가진 div 와 modal id 를 가진 div 두 개의 div 가 화면에 표시된다.

----------------------------------------------------------------------------------------------------------------------

src 폴더

KakaoTalk/client/src/apis/auth.ts

import axios from 'axios';
import { API_HOST } from '~/constants';
import { LoginData, SignupData } from '~/types/auth';
import { ApiResponse } from '~/types/base';

interface SignupRequestDto {
  user_id: string;
  password: string;
  name: string;
}

interface LoginResponseDto {
  token: string;
}

// 서버에 회원가입 요청
export const signup = async (signupData: SignupData) => {
  const signupRequest: SignupRequestDto = {
    user_id: signupData.userId,
    password: signupData.password,
    name: signupData.name
  };
  await axios.post(`${API_HOST}/auth/signup`, signupRequest);
};

// 서버에 로그인 요청
export const login = async (loginData: LoginData) => {
  const request = {
    user_id: loginData.userId,
    password: loginData.password
  };
  const response: ApiResponse<LoginResponseDto> = await axios.post(
    `${API_HOST}/auth/login`,
    request
  );
  const token = response.data.data.token;

  return token;
};

export const logout = () => {
  window.sessionStorage.removeItem('jwt');
};

import { API_HOST } from '~/constants'; // constants(상수. 즉 변하지 않는 것들을 모아 둔 파일.) 파일에 있는 API_HOST 를 호출하는 것. export const API_HOST = process.env.API_HOST || `${HOST}/api`; 이때 HOST 는 그 바로 아래 있는 export const HOST = process.env.HOST || 'http://localhost:8001'; 에서 받아 옴. procdess.env 는 환경변수(어느 환경에 배포하느냐에 따라서 다르게 설정해야하는 항목은 보통 운영 체제 레벨에서 환경 변수를 통해 관리하게 됩니다.

대표적인 예로, 개발 환경에서는 로컬 DB를 사용해야하는데, 운영 환경에서는 원격 DB를 사용해야하는 경우를 들 수 있습니다. 뿐만 아니라 DB password나 API key와 같은 인증 정보는 공개된 코드 저장소에 올리면 안 되기 때문에 환경 변수로 저장해놓고 사용하는 것이 일반적입니다.

)에 접근하기 위한 방법. || 는 또는 이라는 뜻이니까 둘 중에 하나를 선택한다는 의미일 듯

import { LoginData, SignupData } from '~/types/auth';

import { ApiResponse } from '~/types/base';

// types 폴더에 있는 auth.ts 와 base.ts 에서 LoginData, SignupData, ApiResponse 의 데이터 타입을 받아 옴.

interface SignupRequestDto {
  user_id: string;
  password: string;
  name: string;
}

interface LoginResponseDto {
  token: string;
}

interface 이용해서 SignupRequest 와 LoginResponse 의 데이터 타입을 정의함. 여기서 Dto 란 data transfer object 의 준말로 계층간 데이터 교환을 위한 객체이다. (DB에서 데이터를 얻어 Service 나 Controller 등으로 보낼 때 사용하는 객체다.)

// 서버에 회원가입 요청
export const signup = async (signupData: SignupData) => {
  const signupRequest: SignupRequestDto = {
    user_id: signupData.userId,
    password: signupData.password,
    name: signupData.name
  };
  await axios.post(`${API_HOST}/auth/signup`, signupRequest);
};

https://www.daleseo.com/js-async-callback/ -> 쭉 보고 async await 비동기 처리 이해함.

더보기

비동기 함수는 동기 함수처럼 순차적 처리가 보장되지 않는다. 즉 밑에 있는 코드가 위에 있는 코드보다 먼저 실행 가능.

실제 플젝에서 DB 나 API 를 통해서 유저 데이터를 얻어오는 경우, 필연적으로 latency 가 발생하게 되는데 코드를 실행하면 예상치 못한 순서로 코드가 실행될 수 있음. 함수의 실행이 완료되기도 전에 다음 라인이 실행되어 버리므로. 이 경우 콜백 함수를 이용하면 해결 가능. 함수로부터 결과값을 리턴받기를 포기하고 결과값을 이용해서 처리할 로직을 콜백 함수에 담아 인자로 던지기. 

but 콜백 함수 너무 많이 쓰면 코드 가독성 떨어짐 -> promise 이용.

여전히 단점 존재 -> async/await 이용.

async/await 을 이용하면 비동기 함수를 동기 함수처럼 사용할 수 있음. 

await 는 async 내부에서만 사용 가능하며 비동기 함수가 리턴하는 promise 로부터 결과값을 추출해 줌. 즉 await 키워드를 사용하면 일반 비동기 처리처럼 바로 실행이 다음 라인으로 넘어가는 것이 아니라 결과값을 얻을 수 있을 때까지 기다려 줌. 

 

 

'코드리뷰' 카테고리의 다른 글

[카카오톡 클론코딩]2022.08.07  (0) 2022.08.08
[카카오톡 클론코딩]2022.08.06  (0) 2022.08.07
[카카오톡 클론코딩]2022.08.05  (0) 2022.08.06
[카카오톡 클론코딩]2022.08.04  (0) 2022.08.04
[카카오톡 클론코딩]2022.08.03  (0) 2022.08.03

관련글

댓글

티스토리툴바