목록[ javascript ] (103)
IT_susu
자바스크립트는 원래 객체지향적인 언어는 아닙니다만, prototype속성을 활용하여 상속을 구현하는 등, 객체지향 비스무리하게 사용가능합니다.es6에서는 class도 등장해서 더더욱 객체지향적인 부분을 강화하였습니다. 객체지향 프로그래밍은 추상화를 사용하여 모델을 만드는 프로그래밍입니다.객체지향 프로그래밍은 전통적인 프로그래밍 방식과 비교하여 서로 협력하는 관계를 형성하는 객체 모음을 가진 소프트웨어 설게로 볼 수 있습니다. oop에서 각 객체는 메시지를 수신하고 데이터를 처리하며 메시지들을 다른 객체로 보낼 수 있습니다.프로그래밍의 유연성과 유지 보수성을 높이기 위한 것이며 대규모 소프트웨어 프로그래밍에서 널리 사용됩니다. 객체 지향 프로그래밍의 특징은 다음 용어로 정리할 수 있습니다. Class - ..
css는 html 파싱을 방해하지 않고 독자적으로 로드와 파싱이 이루어지지만, javascript는 html 파싱을 방해하면서 다운로드된다. 브라우저가 html파일을 처음부터 읽어 나가며 파싱을 하다가,script파일을 만나면, 우선 html 파싱을 멈춘다.javascript를 모두 다운 받은 뒤 실행한다.html 파싱을 이어나간다. head에 javascript파일을 넣어서 렌더링할 경우,아직 body부분의 dom이 만들어지지 않은 상태에서 javascript 코드가 실행되는 불상사가 생긴다.이러면, js코드는 에러를 발생시킨다. 해결책 1.따라서, head에 javascript 파일을 넣을 것이라면, DomContentLoaded이벤트나 load 이벤트를 활용한다.window.addEventListe..
gulp는 task runner. 일의 반복작업을 줄여주는 자동화 툴입니다. gulp.task 처리할 작업 정의gulp.src 읽을 파일gulp.src.pipe 플러그인 연결gulp.dest 저장할 파일gulp.watch src의 glob 파일들을 주시하고 있다가, 변동이 생기면 task를 실행
모듈이란 구현 로직을 캡슐화하고 공개 API를 노출해 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드 조각이다. 모듈패턴을 사용하려면 이론적으로 다음 사항을 허용해야 한다.- 코드 추상화-코드 캡슐화-코드 재사용-의존성 관리 기존 자바스크립트 언어는 모듈을 염두해두고 디자인되지 않았기 때문에, 모듈 비슷한 패턴들을 고안하여 사용하고 있었다. iife와 노출식 모듈이다. iife는 즉시실행함수 표현식으로 선언과 동시에 실행되는 익명함수이다.또한, iife 안에서 정의한 변수는 전역 스코프를 오염시키지 않고 iife 내부 스코프에 머물러 있는다.하지만, IIFE는 의존성 관리가 되지 않는다. 노출식 모듈패턴은 함수 변수에 반환값을 담아 객체 형태로 return하는 것이다.// Expose ..
document.querySelectorAll('p').setAttribute('title', '단락태그');
자바스크립트를 써보기도 전에 제이쿼리를 접하고, 제이쿼리 문법이 자바스크립트 문법인 줄 알았던 무지한 과거는 뒤로 한 채,다시 새롭게 자바스크립트를 공부해 봅시다. 제이쿼리 문법이 간결하고 편하긴 하지만...요즘은 옛날처럼 제이쿼리로만 모든 걸 해결하는 시대는 막을 내리고 있으니어떤 플러그인이나 라이브러리가 와도 잘 사용할 수 있도록 바닐라 자바스크립트를 익혀놉시다 :) DOM 선택 메서드DOM은 html, xml, svg 문서를 위한 프로그래밍 인터페이스입니다.문서의 구조화된 표현 양식을 트리 형태로 제공하며, dom은 트리에 대한 접근을 허용하는 메서드를 규정하고, 해당 메서드는 문서의 구조, 양식, 내용을 변경할 수 있습니다.자바스크립트 언어의 한 부분은 아니지만 웹페이지와 스크립트 혹은 프로그래밍..
rest parameter와 같은 문법을 가지고 있다. rest parameter는 받는 입장에서 쓰이는 거고,spread operator는 주는 입장에서 쓰이는 것이다. 특징[1] 셀 수 있는 것(iterable)은 다 적용 가능하다.예)var str = 'Hello';1) str.split('');2) [...str] [2] 새로운 배열이다. (기존 배열을 건드리지 않는다.)[3] 얕은 복사만 된다.
lecical environment : 선언 당시의 환경에 대한 정보를 담는 객체 클로저= 함수와 그 함수가 선언될 당시의 환경정보 사이의 조합= 함수 내부에서 생성한 데이터와 그 유효범위(스코프)로 인해 발생하는 특수한 현상 / 상태= javascript의 매우 강력한 특성으로 독립적인 변수를 참조하는 함수. ( 클로저에 정의된 함수는 그것이 작성된 환경을 '기억'합니다. )- 함수 안에서 다시 함수를 return하면 최초 선언시의 정보를 유지 클로저 형성 시기모든 함수에는 실행 컨텍스트가 있습니다. 실행 컨텍스트는 해당 함수 내의 변수와 해당 함수의 부모 환경에 대한 참조를 의미하는 환경으로 구성됩니다.상위 환경에 대한 참조는 내부 함수가 작성된 범위 외부 또는 내부에서 호출되는지 여부에 관계없이, ..
정의str.split 메서드는 해당 문자를 기준으로 string을 잘라준다.count는 자르는 개수를 지정하고 싶을 때 사용하며 적지 않으면 전체를 분할한다. 생각힌트문자열 안에 특정 문자가 몇 개 있는지 파악하고 싶을 때 str.split("seperator").length - 1을 하면 알 수 있다.문자열 안에 특정 문자의 중복 여부를 확인하고 플 때 str.split("seperator").length > 2 식의 값이 true라면 중복이다.