본문 바로가기

JavaScript18

[스터디] JavaScript Proxy Proxy Proxy 의 사전적 정의는 대리인, 대용물이다. 자바스크립트에서의 Proxy도 대리인처럼, 특정 객체를 감싸 객체에 가해지는 작업을 중간에 가로채고 재정의 한다. 문법 let p = new Proxy(target, handler) Proxy: proxy객체 생성자 target : proxy할 원본 객체로 함수, 클래스, 다른 프록시 등 모든 객체 가능 handler : 동작을 가로채는 메서드인 '트랩(trap)'이 담긴 객체, 여기서 가로채는 작업과 가로채는 작업을 재정의하는 방법을 정의한다. 즉, 여기서 proxy 설정을 한다. 트랩이 없는경우, target에 작업이 수행된다. 트랩이 있는 경우, 트랩이 실행되어 proxy가 작업을 처리한다. 사용하기 트랩의 역할 JS의 객체에 작업을 하면.. 2022. 10. 25.
[스터디] 자바스크립트 모듈 모듈이란? 자바스크립트로 개발하는 애플리케이션이 커지면서, 파일을 분리하여 사용하게 되었고, 이 때 분리된 파일을 모듈이라고 한다. 즉, 클래스 하나/ 복수의 함수로 구성된 라이브러리 하나로 구성된 파일이라고 보면 된다. 역사 이전에는 자바스크립트 자체적으로 모듈 시스템을 지원하지 않아서 아래의 모듈 시스템들이 사용되었었다. AMD CommonJS UMD 2015년, 모듈 시스템이 표준으로 등재되었고, 아래에서 모듈을 사용하는 방법을 소개하도록 하겠다. 모듈 내보내기 / 가져오기 모듈은 export / import 지시자를 통해서 내보내고 가져올수 있다. 그 방법은 개체가 여러개일때와 한개일때의 경우로 나눠서 소개하겠다. 1. 여러개의 함수가 있는 라이브러리 형태의 모듈 1.1 내보내기 1) 선언부 앞.. 2022. 10. 19.
자바스크립트의 에러 (에러객체 / try...catch) 자바스크립트에서 에러가 발생하면, 스크립트가 즉시 중단되고 콘솔에 에러가 출력된다. Error 객체 런타임 오류 발생시 JS는 에러 객체를 생성하고 이를 던진다. 에러 객체에는 에러에 대한 상세 내용이 담겨있다. 1. 생성자 Error( ) - new Error( ) - 매개변수로 message, fileName, lineNumber를 넣을수도 있다.(옵셔널) - 함수로 호출할 수도 있다. 2. 인스턴스 속성 name - 오류 타입 설명을 위한 이름 (초기값: Error) message - 오류 메시지, 사람이 읽을 수 있는 오류 설명 stack - 스택 추적을 위한 비표준 속성 - 디버깅 목적으로 주로 사용됨 3. 오류 타입 name 설명 SyntaxError 문법적으로 유효하지 않는 코드 해석시 발생.. 2022. 10. 11.
[스터디/퀴즈] Class 학습 후 확인을 위해 문제를 만들어 보았다. 정답 및 해설은 더보기에 작성하였다. 1. 다음 코드에서 console에 출력되는 것은? class Student { constructor(name) { this.name = name; } test() { console.log(`${this.name}은/는 시험을 봅니다`); } } console.log(typeof Student); 정답 및 해설 ▼ 더보기 정답: function 클래스는 함수이다. 2. 위의 코드에서 새로운 Student 인스턴스를 생성하기 위해 아래의 코드를 작성하였으나, 에러가 발생하였다. 에러 없이 인스턴스를 생성되도록 하려면 어떻게 수정해야 할까? const Potter = Student('Potter'); 정답 및 해설 ▼ 더보기 .. 2022. 10. 3.
[스터디] 객체 프로퍼티 설정 / 프로토타입 상속 학습 후 확인을 위해 문제를 만들어 보았다. 범위: 객체 프로퍼티 설정 및 프로토타입 상속 1. 다음에서 console에 출력되는 값은 무엇인가요? let user = { name: "Tom", age: 10, }; Object.defineProperty(user, "name", { writable: true, configurable: false, }); user.name = "Jane" Object.defineProperty(user, "name", {writable: false}); user.name = "James" console.log(user.name) 정답 및 해설 ▼ 더보기 정답: Jane 해설: let user = { name: "Tom", age: 10, }; Object.definePr.. 2022. 9. 27.
자바스크립트 호출 스케줄링 (setTimeout / setInterval) 호출 스케줄링이란? Scheduling a call : 함수가 바로 호출되지 않고, 일정 시간이 지난 후 호출 되도록 함수 호출을 예약하는 것으로 타이머 함수를 사용한다. 타이머 함수 자바스크립트는 아래의 타이머 함수들을 제공한다. 그러나 이들은 빌트인 함수가 아니고, 브라우저/Node.js 환경에서 제공하는 전역 객체의 메서드로 제공하는 호스트 객체이다. - 타이머 생성 함수: setTimeout, setInterval - 일정 시간이 지난 후 콜백 함수가 호출되도록 타이머 생성 - 타이머 제거 함수: clearTimeout, clearInterval 요약 함수 기능 구분 구문 동작 setTimeout 타이머 생성 let timerId = setTimeout(func|code, [delay], [arg.. 2022. 9. 21.
헷갈리는 자바스크립트 문자열/배열의 메서드 정리 자바스크립트(JavaScript)의 문자열과 배열의 주요 메서드(method)들을 비교 정리해보았다. 메서드가 아닌 것 : length 프로퍼티 - length : property로 ( ) 없이 사용한다. - 배열의 length : 배열 내 요소 개수가 아닌 가장 큰 인덱스 + 1 이다. 문자열 메서드 비교 정리 기능 요약 메서드 / 구문 설명 반환값 원본 변경 음수 인자 응용 / 기타 문자 추출 str[idx] - idx: index index가 idx인 문자를 추출한다. 추출한 문자 X 빈문자열 반환함 - 현재 더 많이 사용 - 위치에 글자 없으면 undefined 반환함 str.charAt(idx) - idx: index - 위치에 글자가 없는경우 빈문자열 반환함 부분 문자열 찾기 str.index.. 2022. 9. 14.
DOM 소개 (그래서 DOM이 뭔데?) 들어가며 이 글은 이해가 안가는 부분에 대한 학습을 위해 정리한 글입니다. 그래서 조금더 쉬운말과 간략한 내용들 위주로만 작성하였으니 참고하시기 바랍니다. 또한 여러 문서를 참고하면서 최대한 틀리지 않으려고 노력했으나, 잘못된 내용이 있다면 지적해 주시기 바랍니다. DOM (Document Object Model) MDN에 따르면, DOM은 아래와 같다. 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕.. 2022. 9. 11.
자바스크립트 객체의 메서드와 this 객체 지향 프로그래밍(OOP) 자바스크립트(JavaScript)는 객체 지향적 프로그래밍 언어 중 하나이다. 객체 지향 프로그래밍(Object-Oriented Programming, OOP)는 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다. 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있다.(출처: 위키백과) 따라서 자바스크립트에서의 객체에 대한 이해가 중요하다. 그중 메서드와 this에 관하여 모던자바스크립트 튜토리얼 및 mdn을 참조하여 정리하였다. 자바스크립트의 객체는 메서드(메소드, method)라는 속성을 가지고 있다. 메서드(Method)란? 객체의 속성인 함수이다. 객체의 property에 할당된 함.. 2022. 9. 7.

티스토리툴바