[Day 36] 1차 프로젝트 멘토 리뷰

1차 그룹 프로젝트 Nosè에서 내가 맡은 파트인 Signup page 리뷰를 받았다.

🌟 오늘의 To-dos

---

• Signup 페이지 github 확인하고 리뷰 반영
• PR -> 201steve 아이디까지 scroll -> outdated 빼고 수정 -> 수정하면 이모지 달기

📌 Signup Page 중요 기능

---

1. 통신

• User가 웹사이트를 이용하면서 통신이 성공할 경우와 통신이 실패할 경우를 조건문으로 만들어 상황 대비
• 분기처리: 조건에 따라 if문

[SUCCESS]

• 🟢 200

res.ok === true
res.status === 200

• throw & catch 비동기 예외처리

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw

[FAILURE]

• 🔴 400 or 500

• fetch.then res -> res.json 항상 되는 것은 아니다

• User는 왜 통신이 실패했는지 모른다

2. fetch 함수

 const postUserData = () => {
    fetch('http://10.58.3.43:8000/users/signup', {
      method: 'POST',
      body: JSON.stringify({
        name: name,
        account: account,
        email: email,
        phone_number: phone_number,
        password: password,
      }),
    })
    .then(res => res.json())
      .then(result => {
        if (result.message === 'SUCCESS') {
          navigate('/login');
        }
      });
  };

위에서 fetch API 주소는 매번 바뀐다. 그리고 API가 1,000개 이상이라고 생각하면 주소값이 바뀔 때마다 변경되어야 한다. 그럴 때, 전역(global) config.js를 사용한다. config.js는 어디든 접근해서 갈 수 있다. config에 API를 'string' + '/signup' 상태로 만들면 template 처럼 만들어서 end points만 바꿔 사용 가능하다.

computed property = [name] : value

해당 코드 추후 업데이트 예정

named export: 무조건 그 이름대로 가져와야 한다. '{}'이 필수
default export: 불러올 때 이름이 뭐든 상관없음. '{}'이 없어야 함

3. fetch 함수

Shorthand Properties

fetch 함수 body에 name: name,를 적지 않고 아래 처럼 간소화하는 것이다

 const postUserData = () => {
    fetch('http://10.58.3.43:8000/users/signup', {
      method: 'POST',
      body: JSON.stringify({
        name,
        account,
        email,
        phone_number,
        password,
      }),
    })
    .then(res => res.json())
      .then(result => {
        if (result.message === 'SUCCESS') {
          navigate('/login');
        }
      });
  };

📌 느낀점

---

• 이 전에는 리뷰 수정하는게 duty 처럼 느껴졌는데 오늘 1:1 리뷰를 받아보니까 멘토님의 설명이 재밌어서 통신에 대해 더 알고 싶어졌다

• 아직도 공부할 내용이 정말 많겠지만 CS 기초도 놓치지 않고 공부하고 싶다

• 알아가면 알아갈수록 어렵고도 재미있는 세계다