개발블로그

🐞 문제상황axios에서 interceptor를 사용해서 데이터를 바로 리턴해주도록 설정했다. 그런데 axios에서 리턴 받은 데이터 객체의 속성을 바로 사용하려고 하니 타입에러가 발생했다. 그리고 인터셉터를 적용하지 않은 것처럼 data.data.속성명을 작성했더니 타입에러가 뜨지 않았다. // utils/api.tsconst api = axios.create({ baseURL: 'http://baseurl', timeout: 1000 * 30,})api.interceptors.response.use( (response) => { return response.data // 응답으로 받은 response의 data를 리턴값으로 },) 배경지식 1. interceptor인터셉터란?axios..

이번단원은 일단 분량도 짧은 편이고 화살표함수나 매개변수 기본값 등 알고있는 개념을 말하는거라 호로록 읽을 거라고 생각했지만... 중간중간 또 동태가 되어버렸다 암튼 요약을 하자면 이전 ES5에서 사용하던 일반함수와 ES6에서 추가된 함수 종류들의 차이점과 사용법을 설명하는 내용이다. ES5에서는 일반함수와 생성자함수를 정의하는 것에 구분이 없었다. 그래서 함수를 정의해놓고 일반함수로 호출sum(); 하면 일반함수인거고, new를 붙여 생성자함수로 호출하면new sum(); 생성자함수인 것. 그리고 메서드도 냅다 걍 일반함수로 돌리고 있었음 유연하다는 장점이 있으나 일반함수나 메서드로 사용할 때는 사용하지않는 constructor나 prototype이 생성되어 굳이 사용도 안하는데 얘네를 생성할 필요가...

자바스크립트에서 HTTP 네트워크 통신 방법인 ajax, axios, fetch에 대해 정리해보자. 서버에 get/post 요청을 보낼 때 가장 간단한 방법은 1. 브라우저 주소창에 url 입력하기 -> get요청 2. -> post요청 이렇게 인데 이들의 단점은 브라우저가 새로고침 된다는 것이다. 새로고침없이 서버에 요청을 보낼 수 있는 방법이 오늘 정리하는 네트워크 통신방법 세가지이다. Ajax Asynchronous JavaScript and XML의 약자로 자바스크립트를 이용해 클라이언트와 서버간의 데이터를 주고받는 비동기 http 통신이다. 서버와 통신하기 위해서는 XMLHttpRequest(XHR) 객체가 필요한데 이를 이용해서 전체 페이지가 아닌 필요한 데이터만 갱신할 수 있다(동적업데이트)..

자바스크립트에서 동기/비동기와 함께 세트로 묶어다니는 3가지 1. 콜백함수 2. Promise 3. async/await 에 대해 정리해보자 콜백함수 콜백함수는 지정한 함수를 나중에 수행하도록 하는 함수이다. 즉, 내가 원하는 때에 실행되는 함수인데, 가장 많이 드는 예로는 setTimeout()이 있다. 이 setTimeout()은 웹브라우저 api로 지정한 시간이 지나면 전달받은 함수를 수행한다. 그러니까 얘는 이렇게 생겼다. setTimeout(함수, 시간) 예를 들어서 setTimeout(()=>console.log('hi'), 2000) 이 경우 2초뒤에 콘솔에 hi 가 출력된다. 이거시 콜백함수다. 참고로 콜백함수라고 해서 모두 비동기로 수행되는 것은 아니며 동기적으로 처리될 수도 있다! 잠깐..

고차함수 - 파라미터로 함수를 받거나 연산결과를 함수로 반환하는 함수 - 함수 안에서 다른 함수를 원하는 시점에 호출할 수 있는 권한을 가진다(=콜백함수) 1. map() 배열 내 모든 원소에 연산을 수행하고, 그 결과를 리턴한다. array라는 배열의 각 요소에 2를 곱하고자 한다면? const arr = [1, 2, 3]; const newArr = arr.map((item) => { return item*2 }); console.log(newArr); 실행결과 [2, 4, 6] ✅ 배열 arr의 요소를 순회하면서 연산을 수행한 결과를 리턴한다. 리턴한 값은 newArr에 저장이 된다. 2. forEach() 배열의 각각 요소를 순회하며 연산을 수행한다. map과의 차이점은 1. forEach는 함수..

서울 열린데이터 광장에서 가져온 데이터의 좌표가 GRS80TM좌표계라 카카오(WGS84좌표계) 지도에서 사용하기 위해서는 좌표변환이 필요했다. *GRS80 경위도: WGS84와 거의 유사 EPSG:4019, EPSG:4737 (Korean 2000) +proj=longlat +ellps=GRS80 +no_defs *WGS84 경위도: GPS가 사용하는 좌표계 EPSG:4326, EPSG:4166 (Korean 1995) +proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs 나는 프로젝트 때 데이터 좌표가 GRS80가 아니라 bessel 좌표계인 줄 알고 bessel 좌표계로 변환했는데(?) 좌표 변환이 잘 되었다. *중부원점(Bessel): 서울 등 중부지역 EPSG:2..

JSON 이란? 1. JSON(JavaScript Object Notation) : 클라이언트와 서버 간의 http 통신을 위한 텍스트 데이터 포멧 - 표기방식 : 키와 값으로 구성된 객체와 동일하다. - JSON 객체는 키에 따옴표("")가 붙어있다. 2. JSON.stringify() : 객체 또는 배열을 JSON포맷의 문자열로 변환 - 객체로 된 배열의 경우, 객체의 각 키들도 ""가 붙는다. - 직렬화 : 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야 하는데, 이를 직렬화라고 한다 3. JSON.parse() : JSON 포맷의 문자열을 객체로 변환 - 역직렬화 : 서버로부터 클라이언트에게 전송된 JSON데이터는 문자열 타입이다. 이 문자열을 객체로 사용하기 위해 객체화 시키는 것을 ..

* API : application programming Interface - 백엔드와 프론트엔드 사이에 정보를 주고 받을 때 사용하는 것 - 약속된 룰에 맞춰서 요청하고 보여주는데 그것을 api라고 한다 즉 데이터를 잘 주고 받기 위한 것 * 우리가 할건 뉴스 api * api불러오기 : newscatcher api - documentation - api documentation : 룰에 대해 설명해놓은 것(3가지) 1. Search News : 뉴스를 찾는 api 2. Latest Headlines : 최신뉴스 제공 api 3. Sources : 뉴스제공자 * search news의 get에서 copy한 것 https://api.newscatcherapi.com/v2/search?q=Apple&fro..

문제 1. 브라우저 화면과 같이 출력되도록 2개의 매개변수 중 큰수를 반환하는 함수를 만드는 것이었는데, if문안에 바로 리턴값으로 매개변수를 줬고, 두 값이 똑같을 경우 '두 수는 같습니다'라는 문구를 출력하도록 했다. 다른 풀이 방법으로는 리턴할 값을 저장할 변수를 선언하고, if문 실행문에는 그 변수에 큰 값을 저장하도록 했다. 그리고 if문 밖에서 return 변수명; 을 지정했다. 문제 2. 브라우저 화면과 같이 출력되도록 매개변수 1이 매개변수 2의 수만큼 출력하라는 문제였는데, 어이없는 실수를 두가지 했다. 1. let을 int로 작성 2. pdf에서 문제를 복붙해왔는데 p("%", 5); 이부분의 "" (큰따옴표)가 이상했다. 저렇게 복사되었는데 저 기호는 우리가 일반적으로 쓰는 큰따옴표가..

문제 1. 정수를 입력하면 그 수의 약수를 출력하라 처음에는 이렇게 for문을 이용해서 약수가 되는 값을 바로 출력하는 방식으로 풀었다. 그런데 이 약수들을 배열안에 넣어서 배열을 출력하는 방법으로 풀고싶었다. 그래서 만든 두번째풀이. 아니 근데 두번째 풀 때는 for문 사용해서 푸는 방법이 생각이 안나서 한참을 고민했다. 첫번째로 풀 때는 바로 풀었는데 뭔일이고,, 암튼 코드가 더 길어지긴 했으나 이렇게 값들을 배열로 넣어놓는게 좀 더 안정성(?) 있어보였다. 배열을 사용한 덕분에 push와 join 메소드도 한번씩 사용할 수 있었음. 문제 2. 통신 요금 계산하기 이거 풀때 첨에 할인 부분에서 mDiscount = contract * 0.2 를 mDiscount = contract * 20% 이렇게 ..