[TID] 2020.05.12

Grace·2020년 5월 15일
0

Today I Done

목록 보기
39/120

⌚️ 시간관리

☀️ 기상시간 - 7:30
🌕 마감시간 - 24:00
❌ 엄마가 갑자기 다쳐버려서 신경쓰느라 제대로 뭘 못했다ㅠ

💻 오늘 배운 것

◉ fetch API

fetch( )는 Ajex의 방식중 최신기술로, 네트워크 요청을 쉽게 활용할 수 있도록 만들어준다.
()안에는 서버주소가 들어가며 ,
console.log()에 fetch주소를 넣어서 출력해보면

Promise는 자바스크립트에서 '비동기'처리에 활용되는 객체이다.
동기라는 것은 프로그램이 끝날 때까지 다른 일은 하지 않는 것인 반면
비동기라는 것은 요청해놓고 다른일을 하면서 기다리는 것.
fetch('서버주소') 는 웹 브라우저에게 '이 서버주소로 요청해줘' 라는 의미이고,
뒤에 .then이 붙으면 '요청 끝나고나서 이 할일을 해줘!' 라는 것이다.
.then은 앞의 함수 실행이 끝나면 그 다음으로 할 일을 정해주는 함수

POST 방식의 기본구조

fetch("url", {
  method : 'POST',
  headers : {
    'Content-type' : 'application/json'
  },
  body : JSON.stringify({
    id: state.id,
    passwd: state.passwd,
  })
})
.then(response => response.json())
.then(json => {
  if(json.success) {
    console.log('로그인 성공!', json.id, json.name)
  } else {
    console.log('로그인 실패!', json.error_message)
  }

ethan에게서 받은 url을 통해 json으로
id나 name, error_message등을 불러올 수 있게 되었다.

❓오늘의 나는

  1. 오늘은 오후에 엄마와 서울로 미용실예약을 해서 미리 오전에 작업을 좀 하다가 나갈준비를 하는 도중 엄마가 발가락을 다쳐버렸다...!@ 결국 예약 취소를 하고, 계속 엄마 상태 신경쓰느라 제대로 작업을 못했다ㅠㅠ
  2. fetch를 사용해서 백엔드쪽의 데이터를 불러오는 작업을 시작했다.
    또다시 처음 접하는 부분이라서 많이 어렵고, 헤맸지만 계속 코드예제들을 보다보니 뭔감 감이잡혀서 온라인 회의를 하기 직전 조금 풀렸다! 완벽하진 않지만 어느정도 감은 잡은 것 같다.
  3. ethan이 다시 바빠져서 뭔갈 물어보고 원하는 답을 얻기가 다시 어려워질 것 같다. 벌써 5월 중순이 다가오는데 참 큰일이다 더 열심히 해야할텐데.ㅠㅠ

❗️내일의 나는

  1. 내일은 엄마아빠 결혼기념일. 그러니 나는 나가서 열심히 공부하고 밤에나 케익 사들고 들어가야겠다....ㅎㅎㅎ 얼른 취업해서 맛난거 사드리고싶다
  2. 내일은 오늘 데이터를 불러오는걸 배웠으니 좀더 디테일한 부분을 스타일링하려한다. 로그인 시 오류메세지를 인풋창 밑에 띄우는 기능이라던지, 버튼을 눌렀을 때 로딩이 되고 있다는 표시로 spinner를 넣어준다던지...
  3. 엄마가 계속 집에 계시다보니 마음대로 시간을 쓰기가 어렵다... 엄마 나 취업하라는거 맞지.....?ㅎ
profile
쉽게 사는건 재미가 없더군요, 새로 시작합니다🤓

0개의 댓글