본문 바로가기

D.evelop/JavaScript26

[JavaScript] Ajax, Axios를 사용한 요청 외부 라이브러리 api방식 Ajax (MDN명세) 페이지 새로고침 없이 서버에 요청 서버로부터 데이터를 받고 작업을 수행 비동기성!! ✅ jQuery의 경우 주로Ajax 사용 (jQuery안에 기본적으로 있음) $.ajex() ✅ React나 Vue의 경우 Axios사용 사용 https://axios-http.com/docs/intro 참고 코딩애플 - Ajax가 무엇인지 설명하는 영상 (+CORS, fetch 어쩌구) 2021. 11. 22.
[JavaScript] fetch함수에서의 에러(Error) 처리 react환경에서의 fetch 함수로 api요청한 실습 // fetch함수를 통한 GET요청 -> 데이터를 가져옴 fetch('https://주소.json') // then함수를 사용해 가져온 데이터를 출력 .then ((response) => { // callback함수 return response.json() }) // 파싱한 결과를 출력해 볼 때 .then ((result) => { console.log(result) }) [에러 처리] fetch('https://주소.json') .then ((response) => { return response.json() }) .then ((result) => { console.log(result) }) // 에러처리 .catch(() => { console.. 2021. 11. 22.
[TIL]Javascript - Prototype 이전에 객체지향 class 생성자 함수를 공부했다. class를 통한 instance생성에 낭비를 개선할 수 있는 prototype 상속기능을 요상하게(?)사용할 수 있게 하는 prototype 오늘은 이 prototype에 대해서 알아보기로 했다. | keywords | prototype __proto__ prototype chain Prototype Prototype Based Lanuange javascript는 "프로토타입 기반 객체지향 프로그래밍"이다. > 함수 is 객체 > 고로 생성자 함수 is 객체 > 객체는 뭘 가진다? property! 여기서 용도가 미리 약속된 특수한 프로퍼티를 prototype이라고 한다. ✅prototype의 필요성 /* 생성자 함수 */ function Cat(n.. 2021. 8. 29.
[TIL]Javascript - 객체지향 class (ES5/ES6) 객체지향 Class [생성자 함수] 객체를 생성하는 함수 javascript 에서는 class가 생성자 함수역할을 대신함 ES6에서 class 개념이 제대로 추가 기본 object 생성법과 class를 통한 생성법을 보면서 송편 빚기와 붕어빵 만들기가 생각났다. 비슷한 모양을 만드는게 목표라 정하면, object 송편 : 손으로 하나하나 일일이 빚어 만들기 class 붕어빵 : 하나의 틀에서 같은 모양의 붕어빵들을 찍어내기 라는 차이가 있는 것이다. (송편 만드는 기계도 있다, 붕어빵도 일일이 만져줘야한다 등 비문학적 생각은 잠시 접어두기) 나는 붕어빵을 더 좋아하므로 class를 통한 붕어빵 틀을 만들어보기로했다. [1] 먼저 object형식으로 붕어빵 하나를 만들어보자 객체 생성법 var potBun.. 2021. 8. 28.
[TIL]Javascript - 전역 객체를 바인딩 하는 this this 앞서 공부한 내용을 보면 자바스크립트의 함수는 '정의'로 존재하고, '호출'로 실행된다. - 함수의 정의 - 함수의 호출 함수가 호출 될 때, 매개변수로 전달되는 인자값 외에도 다음의 값을 암묵적으로 전달 받는다. argument객체 this function add(num) { console.log(num); // 3 console.log(arguments); // Arguments [3, callee: ƒ, Symbol(Symbol.iterator): ƒ].. console.log(this); // Window {0: global, window: Window, self: Window, ... return num + num; } add(3); // 6 이 경우 전달 받은 인자 값은 '3' 하나이.. 2021. 8. 22.
[TIL]Javascript - 객체 접근 Dot Notation, Bracket Notation ✅ 자바스크립트에서 객체에 접근하는 2가지 방법 Dot Notation (점 표기법) object.property ' . '(점)을 이용해서 접근 /* Dot Notation으로 value에 접근하는 방법 */ 객체이름.key let myArray = { name : '강당당', age : 30, city : ['busan', 'seoul'], mycheck : true } console.log(myArray.name); // 강당당 console.log(myArray.age); // 30 console.log(myArray.city); // ["busan", "seoul"] console.log(myArray.mycheck); // true Bracket Notation (괄호 표기법) object[p.. 2021. 8. 22.
[TIL]Javascript - 객체란? (문법, 사용 이유) Object (객체) 프로퍼티(property)의 정렬되지 않은 집합 property는 키(key)과 값(value)으로 구성 key : 문자열 value : 모든 자료형 사용가능 object = { key : value; } ✅ 자바스크립트의는 객체 기반의 script언어 이다. ✅ 자바스크립트의 기본 타입(data type)은 객체(object)이다. 객체 : js에서는 프로그램에서 인식가능한 모든 대상을 지칭 숫자, 문자열, 불리언, undefined타입을 제외한 모든 것 원시 타입인 숫자, 문자열, 불리언의 경우 값이 정해진 객체로 취급. 객체로서의 특징도 함께 가진다. 이미지도 객체, 링크도 객체, 텍스트도 객체, 링크도 객체 웹 문서 자체도 객체, 그 안에 사용되는 요소도 객체 문서 객체 모델.. 2021. 8. 20.
[TIL]Javascript - ES6 Arrow function -1- (화살표 함수) Arrow function 특징 화살표함수는 함수를 식별할 수 있는 식별자(=함수명)가 없음 (익명함수 표현식과 유사) 화살표 함수를 호출하기 위해 함수 표현식 방법으로 호출해 줄 수 있음 /* 기존 함수 */ function 함수명 (param1, param2...){ body... return; } /* 화살표 함수 */ () => { } ✅ 기존 함수를 화살표 함수로 표현하려면? /* "함수 선언문"방식으로 표현된 함수 */ function sum(num1, num2){ return num1 + num2 } const result = sum(1, 2); console.log(result); // 3 /* 식별자가 없는 "화살표 함수" */ (num1, num2) => { return num1 + n.. 2021. 8. 19.

티스토리툴바