본문 바로가기

Study/JavaScript12

ES6 ) Class 클래스 클래스 ES6 이전의 자바스크립트에는 공식적으로 클래스가 없었습니다. 타입은 함수로 정의하고 그 함수 객체에 있는 프로토타입을 사용해 메서드를 정의했습니다. function Vacation(destination, length){ this.destination = destination; this.length = length; } Vacation.prototype.print = function(){ console.log(this.destination+" "+this.length+"일"); } var daegu = new Vacation("대구",5); daegu.print() // 대구 5일 객체지향 프로그래밍을 학습해온 개발자에겐 이런 방식이 생소합니다. ES6 부터는 클래스 선언이 추가되었습니다. 함수는.. 2022. 4. 17.
JavaScript ) 간단한 click Counter 만들어보기 click counter 버튼을 누르면 1씩 증가, 감소하는 카운터 실행화면 코드 0 매번 프레임워크를 활용한 학습 및 프로젝트를 진행하다보니 javascript 에 소홀했던 것 같습니다.. 아주 기초적인 부분부터 다시 복습해볼 계획입니다. 2022. 3. 16.
JS ) 함수를 생성하는 방법 함수를 정의하는 방법 JavaScript 에서 함수를 정의하는 방법은 4가지가 있습니다. 함수 선언문 function add(x,y) { return x+y; } 함수 선언문은 함수 이름을 생략할 수 없습니다. 함수 표현식 var add = function(x,y){ return x+y; }; 함수 선언문 vs 함수 표현식 함수 선언문으로 정의한 함수는 함수 선언문이전에 호출이 가능합니다. 하지만 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출이 불가능합니다. 이는 함수 선언문과 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문입니다. 함수 선언문은 런타임 이전에 JS 엔진에 의해 먼저 실행됩니다. 즉, 함수 선언문으로 함수를 정의한 경우 런타임 이전에 함수 객체가 먼저 생성됩니다. 그리고 .. 2022. 3. 13.
JS ) Sort() 정렬에서 CompareFunction 의 필요성 Sort() 배열에서 자주 쓰이는 sort() 함수는 기본적으로 정렬 순서가 유니코드의 코드 포인트를 따르게 되어 있습니다. 한 자리 수의 숫자들로 이루어진 배열 정렬 var numbers = [2,3,5,1,4]; numbers.sort(); console.log(numbers); // [1,2,3,4,5] 문자로 이루어진 배열의 정렬 var characters = ["b", "e", "s", "d", "a"]; characters.sort(); for(let x of characters){ console.log(x); // ['a','b','d','e','s'] } 따라서 문자열로 이루어진 배열이나 한 자리 수의 숫자들로 이루어진.. 2022. 2. 28.
JavaScript ) fetch vs axios fetch vs axios 웹어플리케이션의 기본 업무 중 하나는 HTTP프로토콜을 통해 서버와 통신하는 것이다. 이 작업은 Fetch 또는 axios를 사용하여 쉽게 수행할 수 있다. 사용하기 쉽기 때문에 내장 API 보다 axios를 선호하는 개발자들도 있다. Fetch API는 Axios의 주요기능을 완벽하게 재현할 수 있다. axios 브라우저에서 node.js 또는 XMLHttpRequests의 HTTP 요청을 만드는데 사용되는 JS 라이브러리이다. JS ES6에 기본으로 제공되는 Promise API를 지원한다. XSRF에 대한 클라이언트 측 보호를 활성화한다. 프론트엔드와 백엔드의 통신을 도와준다. 코드 작성법 axios.get('url') // url과 data, headers.. 2022. 1. 29.
ES6 ) 비구조화 할당 비구조화 할당 비구조화 할당이란 ?? 비구조화 할당은 배열, 객체, 반복 가능 객체에서 값을 꺼내어 그 값을 별도의 변수에 대입하는 문장입니다. 배열에서의 비구조화 할당 기본적인 사용법 let [a,b] = [1,2]; 이 코드는 변수 a와 b를 선언한 뒤 우변의 배열에서 요소를 하나씩 꺼내어 인덱스 순서대로 a, b 에 대입합니다. 우변의 배열을 분할해 좌변의 변수에 할당하므로 분할 할당이라고도 합니다. 이미 선언된 변수를 비구조화 할당하기 [a,b] = [2*a, 3*b]; // a = 2a, b= 3b 와 같음 [c,d] = [d,c]; // c 값과 d 값을 교환 반드시 우변과 좌변의 개수가 같을 필요는 없습니다. 만약 좌변의 변수 개수가 우변의 값 개수보다 많다면 좌변의 남는 변수에는 undef.. 2022. 1. 28.
JavaScript ) 다차원 배열 생성 JavaScript 에서의 다차원 배열 자바스크립트는 다차원 배열을 정의하는 문법은 존재하지 않습니다. 하지만 배열에 배열을 중첩하면 다차원 배열과 유사한 기능을 구현할 수 있습니다. 2차원 배열의 생성 let x = new Array(3); // 1차원 배열 생성 for(let i=0; i 2022. 1. 27.
JavaScript ) 배열 기초 배열 function get_members(){ return ['durant','lebron','leonard']; } members = get_members(); // members.length는 배열에 담긴 값의 숫자를 알려준다. for(let i=0; i 2022. 1. 14.
JavaScript ) 버그 잡아내기 버그의 원인 프로그램에서 발생하는 버그의 원인은 크게 3 가지로 나눌 수 있습니다. 1. 논리적인 버그 프로그램은 문제 해결을 위한 알고리즘을 구현한 것입니다. 논리적인 버그는 프로그램을 구성하는 알고리즘 자체에 오류가 있거나 해당 알고리즘을 구현하는 방법이 잘못되었을 때에 발생합니다. 프로그래밍 언어의 문법을 충분히 이해하지 못한 경우도 포함됩니다. 2. 오타 개발자가 의도하지 않은 동작을 의미합니다. 작은 오타도 프로그램에 치명적인 오류를 발생시킬 수 있습니다. if(a==b) 를 if(a=b) 로 작성했을 경우 오류는 발생하진 않지만 전혀 다른 목적의 동작을 하게 됩니다.. 3. 실행 환경의 변화 컴퓨터, OS, 프로그래밍 언어 자체의 사양이 바뀌어 프로그램이 동작하지 않는 경우도 있습니다. 이러한.. 2022. 1. 7.
반응형