Study Output for Myself/Javascript (16) 썸네일형 리스트형 [JS]proxy pattern Proxy Pattern : 디자인패턴 중 하나. Proxy는 객체를 지켜보다가 객체에 특정한 행동을 할 때 (getter로 필드 값을 가져오거나 setter로 필드 값을 설정하거나 constructure로 인스턴스를 생성하거나) 설정해놓은 핸들러(메소드)를 거치게 하는 스펙이다. 간단한 예로 person이라는 객체가 있고 그 객체를 프록시로 감싸보자. const person = {name:'Heather', age:29} const proxyPerson = new Proxy(person, { // 여기서 원하는 행동을 선언해준다. } 첫번째 인자로는 지켜보고자 하는 객체를 받고 두번째 인자로는 핸들러 객체를 받는다. 핸들러 객체에는 내장 메소드가 정해져 있다. 간단한 get과 set을 써보자 const.. [JS] 싱글톤(singleton) 패턴 클래스 / 생성자 함수 이름과 나이를 가진 사람이란 객체가 있다. printGreeting 메소드를 호출하면 이름과 나이를 넣어 인사를 한다. "사람을 여러명 만들고 싶다." 고 하자. 이름과 나이를 넣으면 새로운 사람 객체를 만들어주는 클래스 혹은 생성자 함수를 생성하면 된다. //Person.js class Person { constructure(name, age){ this.name = name; this.age = age; } printGreeting(){ console.log(`Hi, I'm ${this.name}. ${this.age} years old.`); } } export default Person; 인스턴스 클래스로 만든 새로운 객체를 '인스턴스'라고 한다. 아래 헤더 인스턴스와 애슐.. [JS]insertAdjacentHTML ✅insertAdjacentHTML HTML 요소를 가져와서 그 앞, 뒤, 첫번째 child, 마지막 child에 새로운 요소를 넣을 수 있는 method element.insertAdjacentHTML(position, text); position에는 다음 4가지만 올 수 있다. beforebegin 요소 앞에 afterebegin 요소의 첫번째 child로 beforeend 요소의 마지막 child로 afterend 요소의 뒤에 [JS]History API window 객체에 내장되어 있는 history 객체는 브라우저 세션 기록에 접근할 수 있는 방법을 제공함. 뒤로 가기, 앞으로 가기, 특정 기록으로 가기를 가능하게 해주는 API property로는 length와 state가 있다. 아래는 method 방문기록 뒤로 가는 기능 방문기록 앞으로 가는 기능 -2는 두페이지 뒤로, 3은 앞으로 3페이지, 0은 refresh와 같다. 세션 기록 스택에 상태를 추가하는 method. pushState와 replaceState의 차이점은 push는 정말로 스텍에 push를 하는 거고 replace는 pop을 먼저 한 다음 push를 하는 거라 마지막 기록이 기존것에서 새것으로 대체된다는 차이가 있다. 첫번째 인자인 state는 원하는 객체를 넣어 popstate .. [JS]fileReader(web-API) 더보기 FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다. File 객체는 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체, 드래그 앤 드랍으로 반환된 DataTransfer 객체 혹은 HTMLCanvasElement의 mozGetAsFile() API로 부터 얻습니다. 출처: https://developer.mozilla.org/ko/docs/Web/API/FileReader 을 사용하고 받은 파일을 다룰 수 있게 하는 api. const file = new FileReader() 로 생성 메소.. [JS]createDocumentFragment document.createDocumentFragment() 화면에 render 되지 않으면서 여러 요소를 형제요소로 붙이고 싶을 때 사용하는 함수 const frag = document.createDocumentFragment(); for(let i =0; i [JS]element.closest / !! / checkbox / document.documentElement 가상키보드를 구현하는 project를 하면서 배운 것들을 모아왔다. element.closest('css selector') element 자기 자신과 부모요소(문서루트까지)를 확인해서 해당하는 class/Id를 가진 요소를 반환한다. 값이 없다면 null을 반환. const el = document.querySelector('.keyboard'); el.addEventLisetener('click', onClick); const onClick = (e) =>{ const key = e.target.closest('div.key'); } key에 div이면서 key class를 가진 요소가 반환된다. 자기 자신일 수도 있고, 부모, 부모의 부모일 수도 있음! !! 처음 보는 아주 신기한 스펙이었다. nu.. [JS]여러개의 js파일을 export 할 때 쓸 수 있는 방법 import와 export는 javascript 나 typescript를 사용하면서 필수불가결한 요소이다. 목적에 따라 코드들을 모듈화해서 파일로 만들어주고 또 비슷한 역할을 하는 파일을 묶어 폴더에 넣어준다. 필요한 함수나 변수를 불러올 때(import) 특정 폴더에 있는 모든 파일의 함수를 데려오고 싶은데 타이핑을 일일이 쳐주는 것이 번거롭기 때문에 다음과 같은 스펙을 사용한다. page 라는 폴더 안에는 news-detail 파일과 news-feed 파일이 있다. 각 파일에는 NewsDetailNews 함수와 NewsFeedView 함수를 export 하고 있다. 폴더 안에 index.js 파일을 만든다. (typescript 라면 index.ts ) 파일 안에는 다음과 같이 작성. export {.. 이전 1 2 다음
