본문 바로가기

자바스크립트11

[백준 15554번][python/javascript] 빠른 A+B python sys.stdin.readline() 사용 안하면 시간 초과 될 수 있다. 처음 알았음. import sys number = int(input()) for i in range(number): a,b = map(int, sys.stdin.readline().split()) print(a+b) javascript 자바스크립트의 경우 별 다를 것 없었다... let input = require('fs').readFileSync('/dev/stdin').toString().split('\n'); let max = Number(input[0]); let answer = ''; for (let i = 1; i 2022. 1. 11.
[javascript] ES6 클래스와 Prototype / 왜 Object instanceof Function은 true인가 ES6 Class와 Prototype #dev 자바스크립트는 프로토타입 기반 객체지향 언어다. 프토로 타입 기반이므로 클래스가 없고, 따라서 상속 개념이 존재하지 않는다. ES5까지는 프로토타입 체인과 클로저 등으로 상속이나 캡슐화 등을 흉내내어 구현해왔다 프로토타입 프로토타입은 프로토타입 링크와 프로토타입 오브젝트로 구성된다. 프로토타입 객체 객체는 언제나 함수로부터 생성된디. 객체 뿐만 아니라 함수와 array도 모두 함수로 장의되어 있다. function CreateItem(){}; const NewItem = new CreateItem(); // 함수를 통한 객체 생성 const obj = {}; //다음과 같이 객체를 선언하는 것은 const obj = new Object(); // Object.. 2019. 11. 9.
[javascript] ES6 export vs NodeJS module.exports와 exports의 차이 모듈 NodeJS에서의 모듈 모듈이란 관련된 코드를 하나의 코드 단위로 캡슐화 하는 것을 말한다. 여러개의 코드로 분할하여 관리하고 index.js 파일 하나에 전부 import 시켜 효율적으로 코드를 관리할 수 있다. module.exports = { hello: function() { return "HELLO"; }, bye: function() { return "BYE"; } }; 위와 같이 모듈을 작성하면 메안 파일에서 다음 코드를 통해 const greeting = require(‘./greeting’); 작성한 모듈을 import 시킬 수 있다. 여기에서 require 코드는 object를 반환한다. 또한 module.exports와 exports는 동일 객체를 바라보고 있고 반환 값은 항상 .. 2019. 10. 25.
[javascript] 자바스크립트 Drag&Drop 구현하기 서론Html 드래그 앤 드롭 api는 돔 이벤트 모델에서 정보를 가져와 정보를 업데이트 하는 방식으로 이루어진다. 드래그 앤 드롭을 구현하는데는 여러 방법이 있는데 드래그 된 아이템의 CSS 스타일을 업데이트 할 수도 있고 아니면 드래그 할 아이템을 복사해서 드롭하는 장소에 붙여넣기 할 수도 있다.구현먼저 html을 통해 드래그 할 요소와 드롭할 요소를 만들자. draggable='true'를 추가하여 요소를 드래그 가능하게 만들 수 있다. 처음 알았음 태그 중에 디폴트로 draggable한 요소가 몇가지 있는데 는 가본적으로 드래그 가능하고, 은 드래그 불가능하다. drag dropzone 드래그 앤 드롭 이벤트 핸들러는 최소 세가지 요소로 구성된다. (전부 함수로 지정된다!!)ondragstart :.. 2019. 10. 6.
[Javascript] 자주 사용하는 정규표현식과 공부 사이트 서론자바스크립트를 연습하다가 발견한 점. python에서 replace()를 사용하면 문자열 전체에서 해당하는 문자가 바뀌는데 자바스크립트는 가장 처음 나오는 문자 하나만 바뀌었다.a = "this text is for test" print(a.replace("t", "r")) #rhis rexr is for restlet a = "this text is for text"; console.log(a.replace("t", "r")); //rhis text is for text이 문제를 해결하기 위해선 정규표현식을 사용해 console.log(a.replace(/t/g, "r"));이런 식으로 표현해야 했는데, 파이썬의 편리함을 느끼는 한 편, JS로 데이터 처리를 잘 하기 위해서 정규 표현식을 제대로 .. 2019. 9. 21.
[Javascript] ES6, let vs const, 호이스팅과 객체 리터럴, 디스트럭쳐링 기존 자바스크립트의 특징 함수 레벨 스코프 함수의 코드 블록만을 스코프로 인정하기 때문에 함수 외부에서 생성한 변수는 모두 전역 변수로 취급한다. 변수 호이스팅 변수를 선언하기 이전에 참조 가능하다. 위와 같은 특징은 변수의 유효 범위가 너무 커지기 때문에 에러의 발생 가능성을 높인다. 대부분의 프로그래밍 언어는 블록 레벨 스코프(if문, for문을 포함한 모든 코드 블록을 포함해 그 안에 작성된 모든 변수는 지역 변수로 생각된다. ) 인 반면 자바스크립트는 함수 레벨 스코프이기 때문에 함수 내에서 선언된 변수만 지역 변수에 해당한다. var example = 123; console.log(example); { var example = 456; } console.log(example); 위 코드를 실행시.. 2019. 9. 20.
[javascript] ES6 rest 파라미터와 Spread Syntax(전개 구문) REST 파라미터 Rest 파라미터는 매개변수 이름 앞에 세개의 점을 붙여 정의한 매개변수를 의미한다. Rest 파라미터의 특징은 특정 인수의 갯수를 지정할 필요가 없이 들어온 인수를 배열로 바꿔 전달받을 수 있다는 점이다. function example(...rest){ console.log(rest); } example(1,2,3,4,5,6); 함수에 전달된 인수들은 순서대로 파라미터와 rest 파라미터에 할당된다. function example(param1, param2, ...rest){ console.log(param1); console.log(param2); console.log(rest); } example(1,2,3,4,5,6); 또한 ES6 문법 중 하나인 화살표 함수에는 함수 객체의 a.. 2019. 9. 6.
자바스크립트 AJAX (2/2) ResponseHeader, readyState, CORS XMLHttpRequest.setRequestHeader XMLHttpRequest.setRequestHeader는 HTTP Request Header의 값을 설정한다. HTTP Request Header는 요청을 보낼 때 필요한 정보(client, cache, 요청 헤더 등)들을 담는다. 때문에 setRequestHeader()는 open()과 send()사이에 반드시 붙여 주어야 한다. // json으로 전송하는 경우 xhr.open('POST', '/users'); // 클라이언트가 서버로 전송할 데이터의 MIME-type 지정 xhr.setRequestHeader('Content-type', 'application/json'); const data = { id: 3, title: 'test', a.. 2019. 8. 30.
Javascript 동기와 비동기 callback부터 async&await javascript 동기와 비동기 자바스크립트는 싱글 스레드 언어이기 때문에 효율적인 작업 처리를 위해 비동기 처리를 사용한다. 동기 : 요청 처리가 완료 된 후 다음 요청을 처리 하는 방식으로 이전 요청을 처리하는 시간이 다음 요청에 영향을 준다. (요청과 응답이 같은 시간대에 있다. 일반적으로 작성한 코드는 보통 동기 방식으로 처리된다. console.log("1"); console.log("2"); console.log("3"); 비동기 : 하나의 요청 처리가 완료되기 전에 다음 요청을 처리 하는 방식. 요청과 응답이 다른 시간대에 일어날 수 있다. 자바스크립트의 비동기 처리의 대표적 방식은 setTimeOut, callback, promise 등이 있다. 각각 일장일단이 있지만 최근 ES8에서 a.. 2019. 8. 23.