[인턴쉽 온보딩] 제이슨 서버와 엑시오스 (JsonServer, Axios)

인턴 투입되기 전 온보딩으로 간단한 회원가입과 로그인, todoList 과제를 해야 한다

백엔드가 따로 없기 때문에  json을 사용하기로 했다

---

1. 설치

json-server 버전은 꼭 0.17.4를 사용할 것
json-server , json-server-auth  한 번에 설치하는 명령어

yarn add json-server@0.17.4 json-server-auth	npm install json-server @0.17.4 json-server-auth

 
 
참고용 package.json 파일
스크립트 부분에 "json": "json-server-auth --watch db.json --port 8000" 넣어주기

{
  "name": "login-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "json": "json-server-auth --watch db.json --port 8000"
  },
  "dependencies": {
    "json-server": "0.17.4",
    "json-server-auth": "^2.1.0",
  },
}

---

2. 저장소 생성

json-server 설치 후 yarn json으로 서버 열어둘 것(페이지까지 열지 않아도 됨)
 
root에 db.json파일 생성 후 json형태로 저장소를 만들어준다
예시코드는 회원가입을 위한 저장소이름으로 users로 했다

{
  "users": []
}

 

---

 3. Axios 인스턴스 생성

• Axios 인스턴스 생성 axios.create()를 사용해 axiosApi라는 Axios 인스턴스를 생성한다.
• axiosApi 인스턴스는 서버주소랑 헤더에 정보를 담기 위해 만들었다
• baseURL은 루트에 만든 .env파일에 담아둔 서버 주소
• vite랑 react랑 임포트 방법이 다르니까 하단에 환경변수 사이트 참고하도록
• Content-Type은 클라이언트가 서버에 요청하는 본문 타입 기본적으로 application/json으로 입력한다 왜? json형태니까!

Axios 인스턴스 

const axiosApi = axios.create({
  baseURL: import.meta.env.VITE_DATA,
  headers: {
    "Content-Type": "application/json",
  },
});

 
.env 파일

VITE_DATA=http://localhost:8000

---

4. aixos로 json-server와 통신하는 방법

 

비동기 통신을 위해 async/await 사용한다
 
async/await 를 사용하는 이유?

• 서버 데이터가 준비된 시점에 가져오기 때문에 비동기 작업을 동기처럼 사용할 수 있다
• try / catch를 통해 오류처리를 간결하게 처리할 수 있다 코드가 간결한 만큼 가독성이 좋기 때문에

 
중요한 게 response다음에  axiosApi.post 잖아? post는 등록이니까 http메서드로 당연한 거고
axiosApi  인스턴스에 서버주소랑 헤더 요청타입이 있으니까 axios에 직접 요청이 아닌 인스턴스로 요청을 보내면 서버랑 연결이 된다
왜? axiosApi 가 axios 인스턴스니까! 쉽게 말하면 axios로 만든 정보가 담긴 객체이므로 axios기능은 당연히 사용 가능한 거고 안에 서버주소나 헤더내용을 담아서 쓰는 거다
 
register이건 엔드포인트로 API가 서버에서 특정 기능을 수행하기 위해 접근하는 URL이다 요청을 처리하기 위한 경로
register 니까 회원가입을 위한 요청을 처리하는 거겠지?
 json-server는 이미 만들어진 서버이기 때문에 정해진 기준대로 사용해야 한다
나중에 알았는데 저장소는 users로 만들고 엔드포인트는 register잖아? 둘이 웬만하면 통일시키는 게 좋다고 한다 
 
회원가입을 하려면? 회원 정보를 보내줘야겠지 newMember는 객체로 묶은 회원정보이다 
 
회원가입 후 데이터를 꼭 반환해 줘야 엑세스 토큰을 받을 수 있다
 
참고 코드 (위에 말한 내용들이다)

export const SignUp = async (newMember: {
  email: string;
  password: string;
  nickName: string;
}) => {
  const response = await axiosApi.post("/register", newMember);
  return response.data;
};

---

5. 토큰?

Refresh Token과 Access Token이 있다
 
Refresh Token 은 로그인 시 서버에서 쿠키에 담아 반환해 주기 때문에
프론트엔드는  Access Token을 탄스택 쿼리랑 쥬스탄드를 사용해서 전역 상태로 저장하고 탄스택 쿼리로 캐싱타임을 무한으로 설정해서 관리하면 된다.(다른 방법도 있다)

엑세스토큰관리방법은 캐시로 만료 시간 설정해 주고 전역 상태로 관리해서 인증이 필요한 컴포넌트에서 토큰에 접근할 수 있게 하면 된다

 

프론트엔드는  Access Token만 관리하면 되고 쿠키는 쓰지 말자 

---

6. 회원가입 컴포넌트

 
회원가입 컴포넌트? 간단함
정보를 담을 객체 만들어주고 axios랑 연결해 주면 끝. 저 콘솔 확인해 보면 토큰정보를 확인할 수 있다

  const onRegisterHandler = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const newMember = {
      email,
      password,
      nickName,
    };
    try {
      const data = await SignUp(newMember);
      console.log("data", data);

      alert("회원가입 성공");

      resetEmail();
      resetPassword();
      resetNickName();
    } catch (error) {
      console.log("회원가입 실패", error);
    }

    navigate("/");
  };