본문 바로가기

FrontEnd/JavaScript14

[자바스크립트] map 메서드와 Map 객체의 차이 1. map 메서드 js에서 map 함수는 배열에서 사용되는 메서드 배열의 각 요소에 대해 주어진 함수를 호출하여 새로운 배열을 생성함. 배열의 각 용소를 변형 / 추출하여 새로운 배열을 만들 때 사용 const nums = [1,2,3,4,5] const doubleNums = nums.map((n)=>n*2) //[2,4,6,8,10] 2. Map 객체 js의 내장 객체로 키- 값 쌍을 저장하는 자료구조 일반적인 객체와 다르게 키 - 값의 연결을 유지하며 순서가 보장 됨 기본적으로 삽입(set), 조회(get), 삭제(clear,delete) 가 있음 문자열 아닌 값도 키로 사용 가능 const mp = new Map() mp.set(1,3) mp.set("asd","asdasd") console.l.. 2023. 6. 24.
[JavaScript] this에 대해 (feat. bind) js에서의 this는?? 객체를 가리키는 키워드 상황에 따라 바뀜 this는 자신을 포함한 함수를 호출한 객체이다. 전역적인 객체에서 this를 가리키면 window 객체가 나옴(엄격모드 'use strict' 와 상관없이 항상 ) 브라우저 자체의 객체는 window니까 console.log(this)를 했을 때 console의 주체는 window니까 window가 나온겨. window.console.log(this) 라는 뜻 function main(){ console.log(this); } main() // 이렇게 호출하는 것은 사실 window.main() 과 같음. 즉 window 객체를 가리키게 됨 // 'use strict' 모드라면 main()을 호출했을때 undefined가 나옴 // 엄격.. 2022. 12. 11.
Axios에 대하여 (vs Fetch) 무엇을 선택할까? 결론적으로 말하자면 개발 환경에 따라 다르겠지만 React 프로젝트를 진행할경우 Axios 를 선호하는 경향이 있다고 한다. Axios는 크로스 브라우징에 신경을 많이 쓴 모듈이고 기능또한 우수하기 때문. 어떻게보면 fetch의 상위 호환 Axios 장단점 장점 response timeout 처리 방법이 있다 (fetch 에는 x) promise 기반이라 다루기 쉽다 크로스 브라우징에 신경을 많이 써서 브라우저 호환성 뛰어남 단점 모듈 설치를 해줘야한다. Fetch 장단점 장점 내장 라이브러리여서 별도의 import 및 설치 x promise 기반 프레임워크가 불안정할때 사용하기 좋다 (내장 라이브러리이니까) 단점 internet Exporloer의 경우에 fetch를 지원하지 않는 버.. 2022. 12. 7.
JSON Fetch 사용하기 Fetch HTTP 파이프라인을 구성하는 요청 & 응답 등의 요소를 JS에서 접근하고 조작할 수 있는 인터페이스 제공 네트워크 리소스를 비동기적으로 가져옴 XMLhttpRequest 에 대한 좋은 대체제 요청 fetch("https://example.com/movies.json") .then((res) => res.json()) .then((data) => console.log(data)); 응답은 Response 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없다. Response는 HTTP 응답 본문을 그대로 포함하지는 않음 => Response는 HTTP응답 전체를 나타내는 객체이기 떄문 JSON 본문 컨텐츠를 추출하기 위해서는 json() 메소드를 호출해야함. json()은 응답 본문 텍.. 2022. 12. 4.
JSON 이란? JSON (JavaScript Object Notation) Data를 저장|전송 할 때 많이 사용되는 경량의 Data교환 형식 JS에서 Object를 만들 때 사용하는 표현식을 의미 용량이 작고 이해하기 쉬워서, XML을 대체 단순히 Data를 표현하는 방식일뿐(Data 포맷). 특징 Server & Client 간 통신에서 많이 사용됨. JS를 이용해서 JSON 형식의 문서를 JS object로 변환 가능 JSON은 일단 text 형식일 뿐이다. 다른 언어에서도 쉽게 접근 가능 형식 key/value 존재 객체, 배열 등의 표기 사용 중첩 가능 { "employee": [ { "name": "youngjin", "lastname": "we", }, { "name": "min", "lastname": .. 2022. 12. 4.

티스토리툴바