🍒What I did today(밀렸던 블로깅하기)

✅API 활용하기(02.16)

• API와 서버 요청하기
• Open API와 API 키
• fetch를 이용해 서버 요청하기

API 설명

요청하는 주체는 클라이언트가 되고 요청에 따른 응답을 주는 서버가 있다.

일반적으로 서버에게 HTTP(URL) 요청 후, 응답을 처리하고, 응답은 다양한 형태로 받을 수 있다.(JSON, HTML, plain text 등);

HTTP 요청은 fetch API로 보낸다.

fetch('http://서버주소/weather?q=Seoul')
.then(function(resp) {
  // 응답 형식에 따라 resp.text() 가 될 수도 있다
  return resp.json();
})
.then(function(json) {
  console.log(json); // { tempature: 27 }
});

API 사용 시 유의할 점도 있다.

API는 무료가 아니고, 서비스 제공자로부터 권한을 받아야 한다. 그래서 API Key는 암호처럼 취급되어야 한다.

서버에 기록할 수도 있다. HTTP 요청을 GET이 아닌 POST를 이용하고, 내용과 함께 전달한다.

예제에는 게시판에 새로운 글을 쓰고자 할 때나 아이디와 비밀번호로 로그인을 하고자 할 때이다.

let newPost = {
  "userId": 1,
  "title": "새 글을 써봤습니다",
  "body": "안녕하세요?"
}

fetch('http://서버주소/posts', {
  method: 'POST',
  body: JSON.stringify(newPost)
}).then(function(resp) {
  return resp.json();
}).then(function(json) {
  console.log(json); // { id: 123 }
});

 

✅날씨 API APP 만들기(02.16)

도시명을 검색하면 해당 도시의 온도, 습도, 풍속 등 날씨 정보를 아이콘, 사진과 함께 알려주는 앱을 만들었다.

날씨에 대한 데이터가 필요하기 때문에 정보를 제공받기 위해 OpenWeather API를 사용했다.

서버로부터 데이터를 받아와 활용하는 것은 전에도 한번 해본 적 있지만, 오늘처럼 개념을 확실하게 이해하고 활용하게 되서 재밌었다. 물론 새로운 개념들도 많이 접했지만, 더 공부해야 될 것 같다.

fetch, Promise나 서버와 클라이언트, JSON에 대해서는 이해가 많이 부족한 것 같다.

사실 설명하라고하면 정확히 대답하지 못할 것 같다.

 

✅4주간 회고록 작성하기(02.16)

내일로 코드 스테이츠 프리코스를 마무리하게 된다. 

지난 4주동안 내가 무엇을 공부했고, 무엇을 얻게 되었는지, 그리고 개발자가 되고 싶었던 이유에 대해서도 다시 한번 생각하면서 회고록을 써보려 한다.

 

✅코플릿 남은 문제 풀기(02.16)

HA를 준비하면서 남은 코플릿을 복습했다.

문제는 어떤 것을 푸는 것이 좋을까 생각하다가 끝에 있는 어려운 문제들만 쏙쏙 골라 풀었다. 수능 수학 27, 28, 29, 30문제 풀듯이 끝에서 개념을 정리하면서 풀었다. 혹여나 비슷한 문제가 나왔으면 좋겠다는 마음도 가지고 있었다😅

그리고 꼭 나온다는 문제 UnpackGiftBox 문제도 여러 번 풀고 이해하고 했었다. (하지만 HA에 정말 비슷한 문제로 한 문제 나왔던 것 같다.)

 

✅밀린 내용 블로깅하면서 정리하기!

오늘은 19일인데 하루하루 정리하기가 너무 쉽지 않았다.

이번 주는 HA 시험이 있어서 그런지 그전에 공부 내용들을 깔끔히 정리해보고 하는 시간을 가지다 보니 블로그 작성할 시간을 미뤄두었다😥

이머시브 과정을 가기 전에 여태껏 했던 과제들도 내야 된다고 해서 다시 한번 돌아보는 시간을 가진 것 같다.

결국 코플릿은 다 풀지 못했지만 그래도 열심히 풀었다..

꼭 시험 전에 마음 급해져서 벼락치기하는 사람? 그게 나예요😅 그리고 일찍 잠들었답니다.

 

✅HA 문제 풀기

4주 동안 배웠던 것들도 많이 나왔지만, 모르는(?) 부분의 문제도 많았던 것 같다.

문제를 풀면서 정말 부족하다고 느껴졌다고 생각이 들었지만, 익숙해질 때까지 뚫어지게 쳐다본 게 효과가 있었던 것 같다. 결국은 다 풀어서 제출했다.

느낀 점은 머리가 너무 복잡하고 어지러울 땐 10분 휴식, 밖에 나가서 산책을 나가기 등이 정말 효과가 있는 것 같다. 

그래야 다른 방향(?)으로도 문제를 접근해볼 수 있는 생각을 하게 되는 것 같다. 그래도 되게 후련하다✌

 

🍒Remember(기억할 것)

---

✅fetch(), json()메서드

위에서 정리를 조금 했는데, 다시 짚어보자.

서버로 요청(request)를 보내고, 응답(response)을 받을 수 있게 도와주는 메서드인 fetch()에 대해 정리해보자.

날씨 앱을 만들 때에도 fetch를 이용해 데이터를 요청하고 받을 수 있었다.

fetch는 Promise<Response>를 반환하는데 이상태로는 바로 데이터를 사용할 수가 없다.

이 중에서 Response를 꺼내고, 서버에서 제공하는 JSON 데이터를 쓸 수 있게 해주는 json() 메서드를 이용하면 사용 가능한 데이터 형태로 만들어 정보들을 활용할 수 있게 된다.

fetch('http://서버주소/weather?q=Seoul')
.then(function(resp) {
  // 응답 형식에 따라 resp.text() 가 될 수도 있다
  return resp.json();
})
.then(function(json) {
  console.log(json); // { tempature: 27 }
});

 

✅then()

then()은 서버에 요청하고 응답을 받는 과정에서 통신에 성공하는 경우에 콜백 함수를 실행시켜주는 역할을 한다.

 

🍒More Study

---

✅Promise

✅fetch API

✅AJAX

✅XMLHttpRequest

✅ES6 문법 정리

2021-02-16~19

---

✏️ 여태껏 해왔던 프로젝트가 좀 있었던 것 같은데, 정리를 안 한 것 같아서 시간이 남으면 정리해보려 한다. 

날씨 APP 만들기, 회원가입 페이지 만들기(유효성 검사), Twittler 이렇게 정리하면 좋을 것 같다.

 

✏️ HA에 대한 부담감이 생각보다 많았다. 떨어지면 다시 기수 이동이겠지? 근데 그다음에도 떨어지면 어떡하지 이런 생각까지 조금 해보면서 무한 코플릿 되돌아가기를 반복했다. 회고록은 무슨 통과도 못하겠어💧

이런 생각이었지만 생각보다 문제는 괜찮았다.

정말 시험 보듯이 벼락치기하고 좋은 컨디션으로 HA에 임했던 것 같다.

 

✏️오늘 블로그를 어떤 식으로 써야 할지 방향성을 잡아주려는 세션 시간이 있었다.

블로그를 너무 어렵게만 생각하는 사람이 많다는 얘기가 나왔다. 근데 진짜 나도 처음에는 너무 부담스러워서 써볼 생각조차 안 했지만 지금은 일기 쓰듯이 써보니까 조금씩은 괜찮아지는 것 같다. 

그리고 이제 블로그에 몰랐던(?) 새로 배우게 된 기술적인 부분들을 내 방식대로 적어보는 연습을 조금씩 해야 될 것 같다. 오늘은 뭐 배웠는지 TIL의 제목도 달아보는 것도 좋은 방법인 것 같다.