이제 api 데이터가 잘 받아와지는 것을 확인했으니 화면에 뿌릴 차례! 난 그냥 태그로 해당 데이터가 보이게 할 것이다.이렇게 마크업을 간단하게 해놓고, 각 태그에 고유 Id를 넣었다.그럼 이 id를 가진 엘리먼트를 찾아서 textContent나 innerHTML로 데이터 값을 매칭해서 넣는다.  const dustData=await dustService.getDust({ params:{ returnType: 'json', numOfRows:100, pageNo:1, searchDate:today_date, InformCode: 'PM10' }})내가 이렇게 dustData에 이렇게 담은걸 콘솔로 확인해보면, 이 data에서 원하는..

공공데이터에서 제공하는 미세먼지 api를 호출하여 미세먼지 데이터를 화면에 뿌려줄 것이다.일단 그럼 서비스함수, 인스턴스를 생성해보자. 이뤄지는 과정요청 타입 정의응답 타입 정의서비스 함수 정의해당 ts 파일로 와서 요청하기  우선 api 호출을 했을때 응답값이 잘 반환이 되는지 postman으로 확인해보는 것이 좋다!이렇게  params에 필수 요청 파라미터를 담아서  url로 get 요청을 한다. 그럼 성공적으로 이렇게 응답값이 json형식으로 받아와지는 걸 확인 할 수 있다.이때 내가 returnType을 json으로 했기에 이렇게 나온다.여기서 난 infromCause,informOverall만 추출할것이다. 일단 그럼 요청타입을 먼저 정의해보자!1. dust.type.ts란 파일 생성요청시에는 ..

promise란?결과를 제공하겠다는 약속을 말한다. 비동기 작업이 맞이할 미래의 결과값을 나타낸다.이전에는  콜백함수를 사용함으로써 함수 내부에서 또 다른 함수를 호출해 후속 처리 작업을 했지만 ..가독성도 안좋고 코드 길이도 길어지면서 콜백지옥(callback hell)이 발생하곤했다! 그래서 이를  해결하고자 promise 객체가 등장했다. 🚩생성하기const 변수명 = new Promise((resolve,reject) => { } )promise 생성자 함수로 생성한다.이때 ,resolves는 성공의 상태를 뜻하고 reject는 거부의 상태를 뜻한다. 🚩객체 처리성공하여 resolve(data)를 호출하면,.then() : 성공처리.catch(): rejected된 결과 반환 처리.finall..

콜스택에 대해 알아보자.흔히 자바스크립트는 싱글 스레드(single thread)라고 하는 걸 한번쯤은 들어봤을 것이다.즉, single call stack = 한 번에 한 가지 수행가능한 동기적이라고 할 수 있다! 🚩스택후입선출즉, 제일 마지막으로 들어온것이 먼저 나간다. 🚩큐선입선출앞뒤가 열려있어 FIFO라고 하며 먼저 들어온것이 먼저 나간다. 콜스택이란 함수 호출을 저장하는 자료구조다.우선 연두색 부분은 우리가 작성한 JS 파일에서 어느 부분이 실행되고 있는지를 알 수 있는 부분이다. 여기서 call이란 함수를 호출하는 것을 의미하는데, 콜을 호출할때마다 스택에 이렇게 차곡차곡 쌓이게 된다.실제적인 값은 메모리 Heap에 저장되고, 콜스택엔 힙의 주소가 저장이된다.(그래서 객체를 비교할때는 주소..

프론트엔드 부트캠프를 서치하다가 우연히 '오름캠프 웹 풀스택 실무과정'을 발견했다.수많은 부트캠프 속에서 이 오름캠프를 선택하게 된 이유는 !프론트엔드가 중점이지만 백엔드 과정도 같이 배울 수 있는 풀스택 과정이라는게 제일 먼저 메리트로 다가왔다. 예전엔 그저 프론트엔드면 html,css,js만 잘 다루면 되는거 아닌가?라는 생각이었다.근데, 팀플을 해보니까 어느정도 백엔드 지식도 알아야 프론트상에서 서버한테 어떤 요청을 해야하고,어떻게 받아오는지를 알아야 프로젝트가 수월하다는 것을 알게되었다,, 오름캠프를 pick한 이유🚩온라인 실시간 강의주 5일 9:00~ 18:00 온라인 실시간 zoom 강의로 이루어진다.일단, 집에서도 수업을 실시간으로 참여할 수 있다는게 효율적이라 생각했다. 9:00~ 16:..

API를 요청할때GET,POST,DELETE,PUT,PATCH,CREATE라는 메서드를 한번쯤은 본 적 있을 것이다!하나씩 살펴보면  GET일반적으로 웹 사이트 형식과 같이 서버로부터 응답으로 정보를 기대하는 요청이다.어떤 데이터를 조회하고 싶을때 주로 get요청을 한다!PUT전체 수정, 전체 추가 요청을 할때 사용하며 클라이언트가 관리한다.POST클라이언트가 서버에 데이터를 제출할 때 사용하는 메서드로클라이언트가 따로 식별자를 추가하지 않는다.서버가 관리하며, 처리가 애매한 것들을 주로 post로 다룬다.PATCH일부를 부분 수정할때 사용한다.PUT과 달리 PATCH는 특정 부분!ex> 이름만 바꾼다던지, 회원의 등급,회원의 활성화상태만을 살짝 바꾸는 API를 요청할때 사용한다!! 예시1] 회원등록/m..