2024.02.19 TIL - json server, JWT(회원가입, 로그인, 정보수정), 로컬스토리지

json-server 구축하기

1. json-server 패키지 설치
   npm i json-server
   yarn add json-server

2. root경로에 db.json 파일 생성

// 예시 - api통신하지 않는 경우는 db.letters로 접근 가능
{
  "letters": [
    {
      "createdAt": "2023-11-03T02:07:09.423Z",
      "nickname": "Dr. Clint Christiansen",
      "avatar": "https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/36.jpg",
      "content": "카리나1 Vitae recusandae tenetur debitis impedit ut dolorem atque reprehenderit magnam. Cum dolor magnam commodi qui perferendis. Vel temporibus soluta. Eum delectus blanditiis. Neque dicta non quod ex. Maiores aspernatur fuga reprehenderit a magni eaque fuga voluptatum hic.",
      "writedTo": "카리나",
      "id": "1"
    },
    {
      "createdAt": "2023-11-02T23:13:18.491Z",
      "nickname": "Chad Graham",
      "avatar": "https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/298.jpg",
      "content": "지젤1 Ipsam aspernatur nostrum eos unde velit molestiae dolorem. Tenetur ullam nostrum pariatur. Et in eos. Harum commodi ipsa quaerat aspernatur quod dignissimos quae quidem sapiente.",
      "writedTo": "지젤",
      "id": "2"
    }
  ]
}

-> http://localhost:5002/letters
(1번 id에 접근하려면 : http://localhost:5002/letters/1)

• 참고 : 하나의 port로 여러 경로 만들 수도 있음

{
"posts" : [{},{}],
"comments" : [{},{}],
"profile" : [{},{}]
}

->
http://localhost:5002/posts
http://localhost:5002/comments
http://localhost:5002/profile
로 열 수 있게 됨

3. port 열기 명령어 입력
   1) package.json의 script에 명령어 기입

// "5000번 port로 json서버를 열어줘"

{
	"scripts": {
		"json": "json-server --watch db.json --port 5000",
	}
}

2) 터미널에 명령어 기입
npx json-server db.json --port 4000
("root경로에 있는 db.json파일을 4000번 port로 열어줘")
json-server --watch db.json --port 4000

4. json 서버 열기
   yarn json
npm run json

JWT

회원가입

• JWT 인증서버
  https://moneyfulpublicpolicy.co.kr

• POST 메서드로 회원가입 Request (/register)

// ✅ users.js
// 회원가입
// (async await로 
export const signUp = async (userId, userPw, userNickname) => {
  await axios.post("https://moneyfulpublicpolicy.co.kr/register", {
    id: userId,
    password: userPw,
    nickname: userNickname,
  });
};

// ✅ Login.jsx
  // 회원가입버튼 클릭 핸들러
  const onSignUpHandler = () => {
    if (isValidId && isValidPw && isValidNickname) {
      signUp(userId, userPw, userNickname); ⭐️
      onIsSignUpHandler();
    } else {
      alert("입력하신 값을 확인해주세요.");
    }
  };

로그인

• POST 메서드로 로그인 Request (/login)

// ✅ users.js
// 로그인
export const login = async (userId, userPw) => {
  await axios.post("https://moneyfulpublicpolicy.co.kr/login", {
    id: userId,
    password: userPw,
  });
};

// ✅ Login.jsx
  // 로그인버튼 클릭 핸들러
  const onIsLoggedInHandler = () => {
    if (isValidId && isValidPw) {
      login(userId, userPw);
      setIsLoggedIn((prevIsLoggedIn) => !prevIsLoggedIn);
    } else {
      alert("입력하신 값을 확인해주세요.");
    }
  };

로컬스토리지에 user정보 저장

• 참고
  로컬스토리지에 저장, 삭제
  새로고침시 로그인정보 유지

• 로컬스토리지에 저장하기
  localStorage.setItem("key", "value")

• 객체 정보 저장시에는 객체를 JSON.stringify(객체) 한 다음 value자리에 넣으면 됨

• 예시

// 로그인
export const login = async (userId, userPw) => {
  const response = await axios.post(
    "https://moneyfulpublicpolicy.co.kr/login",
    { id: userId, password: userPw }
  );

  // 로그인시 로컬스토리지에 토큰 저장하기
  const loggedInUserInfo = response.data;
  const loggedInUserToken = loggedInUserInfo.accessToken;
  localStorage.setItem("loggedInUserToken", loggedInUserToken);
};

user정보 가져오기

axios.get
dispatch
useSelector

나의 프로필정보 수정하기

axios.patch
dispatch

새로고침시 로그인정보 유지하기

(401에러 /user 에서 계속 오류나서 트러블슈팅중)