pre-프로젝트 3일차/stackoverflow 클론

프로젝트 진행사항

공통

줌 세션에서 배운 내용

프로젝트 예상 진행 시나리오
1. 백엔드가 서버를 구성한다
2. 서버 환경을 설정한다
3. 프론트=> 백 : 테스트 해보고 싶습니다!
4. 백 => 프론트: POST-MAN으로 결과 보세요!
5. 백 => 프론트: 서버 배포 후 api 만들어서 던져주기
6. 프론트 => 백: 만들어진 api 주소로 api test하기(postman)
7. 백: postman에서도 잘 안될 경우 서버 환경설정 구성이 잘 된건 지 다시한 번 봐야함

백엔드

프론트엔드

TIL

1. APIs

• 소프트웨어끼리 작용하는 인터페이스
• = WebAPI: HTTP를 기반으로 하는 인터페이스

1-1. JSON

• JavaScript 객체 문법
• 계속해서 데이터를 전송하거나 정보를 전송하는 포맷
• 키-값 쌍이 있음
• JSON.parse: 파싱할때 따옴표를 빼고 가져올 수 있음 (JSON -> JavaScript)
• JSON.stringify: 따옴표를 붙여서 JSON 형식으로 리턴할 수 있음
  (JavaScript -> JSON)

1-2. fetch API

1-2-1 promise버전

fetch('https://api.cryptonator.com/api/ticker/btc-usd')
	.then(res => {
  		console.log("Response, waiting to parse..", res)
  		return res.json()
	})
	.then(data => {
  		console.log("Data Parsed...")
  		console.log(data.ticker.price)
	})
	.catch(e => {
  		console.log("Oh No, error..", e)
	})

1-2-2 await 버전

const fetchBitcoinPrice = async()=> {
  try{
    const res = await fetch ('https://api.cryptonator.com/api/ticker/btc-usd')
  	const data = await res.json()
 	 console.log(data.ticker.price)
  	} catch(e) {
      console.log("Something went wrong!", e)
    }
  }

1-3. axios

• 아래 코드 html 파일에 넣기
• script앞에 axios를 사용하고 싶은 곳에 넣기

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

• axios는 파싱을 따로 할 필요가 없음!

axios.get('https://api.cryptonator.com/api/ticker/btc-usd')
.then(res => { //이미 parsing이 되어있는 상태임
	console.log(res.data.ticker.price) 
})
.catch(err => {
	console.log("Error", err)
}

axios - async 버전

const fetchBitcoinPrice = async() => {
	try{
    	const res = await axios.get('https://api.cryptonator.com/api/ticker/btc-usd')
        console.log(res.data.ticker.price) 
    } catch(e) {
     	console.log("Error", e)
    }
}

header가 application/json인 경우로 받을 때
https://icanhazdadjoke.com/api

const getDadJoke = async () => {
  	const config = {headers:{Accept: 'application/json'}}
	const res = await axios.get('https://icanhazdadjoke.com/', config)
	console.log(res.data.joke)
}