61. 내일배움캠프 - 48일차 TIL

---

 

TIL

 

📌
오늘 한 일

DRF장고 강의 듣기
프론트 코드 리뷰
백앤드 코드 리뷰

 

오늘은 늦잠을 자버렸다. 프로젝트 때 잠을 못 자서 쌓인 피로가 밀려왔다.

두시부터 공부한 듯...

DRF장고 강의를 다시 듣기 시작했다. 확실히 다시 한번 보니 이해가 잘 갔음

장고 강의를 듣고 이번 프로젝트 프론트부분을 코드 리뷰를 했다. 혼자 보면서 모르는 내용 

하나하나 구글링 하면서 찾아보면서 이해를 했음.

내가 생각해도 오늘 너무 공부를 안 했다. 내일부터 파이팅해야겠다.

 

 

 

 

👉 프론트 회원가입 부분을 구글링 하면서 작성해봤다. 아래 주석 내용이 정확하지 않을 수 있음❗❗

//회원가입
//async가 붙은 함수는 반드시 promise를 반환함
async function signup() {

    const signupData = {
        repassword: document.getElementById("repassword").value, //repassword라는 name은 document.getElementById("repassword").value이다.
        password: document.getElementById("password").value,
        nickname: document.getElementById("nickname").value,
        email: document.getElementById("email").value,
    }

    //fetch함수 형태 fetch(url, options) , await는 async 함수 안에서만 동작한다.
    const response = await fetch(`http://127.0.0.1:8000/users/`,{
        headers:{
            'Content-type':'application/json',
            //content-type은 api연동시 보내는 자원을 명시하기 위해 사용
            //'application/json은 request를 날릴 때 json형태{key: value}로 보낸다는 뜻
        },
        method: 'POST',
        body: JSON.stringify(signupData)//문자열로 변환
        //body는 사용할때 데이터유형은 content-type과 일치해야함
    })

    const result = await response.json()//위에 body에서 만든 문자열을 .json() 사용해서 자바스크립트가 읽을 수 있도록 만들어줌
    //promise란 js에서 비동기 처리에 사용되는 객체
    //비동기객체란? 호출부에서 실행 결과가 리턴될 때 까지 기다리지 않아도되는 함수

    if (response.status === 201) {
        alert("회원가입완료")
        document.getElementById('sign_in_btn').click()//회원가입하면 click()으로 자동으로 id가 sign_in_btn를 클릭하게 하는 것
        
    } else if (response.status === 400) {
        document.getElementById('alert-danger').style.display ="block"
        const key = Object.keys(result)[0];
        makeAlert(key, result[key][0]);
        
    }
}