syleemomo의 IT 블로그 syleemomo의 IT 블로그

개발을 하다 보면 기존에 있는 기능을 가져와 확장해야 하는 경우가 있다. 사람에 관한 프로퍼티와 메서드를 가진 user라는 객체가 있는데, user와 상당히 유사하지만 약간의 차이가 있는 admin과 guest 객체를 만들어야 한다고 가정해 보자! 이때 "user의 메서드를 복사하거나 다시 구현하지 않고 user에 약간의 기능을 얹어 admin과 guest 객체를 만들 수 있지 않을까?"라는 생각이 들 수 있다. 자바스크립트 언어의 고유 기능인 프로토타입 상속(prototypal inheritance) 을 이용하면 위와 같은 생각을 실현할 수 있다. * [[Prototype]] 프로퍼티 자바스크립트 객체는 명세서에서 명명한 [[Prototype]] 이라는 숨겨진 프로퍼티가 있다. 해당 프로퍼티의 값은 n..

* 요소의 좌표를 계산하는 방법 첫번째 방법은 브라우저 좌측상단 꼭지점을 기준으로 좌표를 계산한다. 캡쳐화면에서는 해당 좌표를 clientX/clientY 로 표시하고 있다. 두번째 방법은 문서(document) 의 좌측상단 꼭지점을 기준으로 좌표를 계산한다. 캡쳐화면에서는 해당 좌표를 pageX/pageY로 표시하고 있다. 캡쳐화면에서 좌측그림은 스크롤로 페이지를 이동하기 전의 모습이다. 이때는 pageX 와 clientX 가 동일하고, pageY와 clientY 도 동일한 값이다. 왜냐하면 스크롤을 이동하기 전에 브라우저와 상단과 문서의 상단이 정확히 일치하기 때문이다. 하지만 우측그림과 같이 스크롤이 움직이면 문서가 이동하면서 문서 기준 좌표(pageY)는 스크롤을 이동하기 전과 동일하지만, 브라우..

* 요소의 실제크기 확인하기 자바스크립트는 요소의 너비나 높이, 그리고 위치정보를 알 수 있는 기하정보 관련 API 함수를 제공한다. 해당 함수를 활용하여 요소의 위치를 변경하여 요소를 이동시키거나 요소의 크기를 알 수 있다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores vitae est temporibus mollitia consequatur adipisci at, laboriosam necessitatibus facere sit maxime, nemo placeat dolore consectetur suscipit dignissimos ullam, exercitationem quo! Dolorum ipsum libero il..

* while 반복문 while (condition) { // 코드 // '반복문 본문(body)'이라 불림 } 조건(condition) 이 truthy 이면 반복문 본문의 코드가 실행된다. 반복문 본문이 한번 실행되는 것을 반복(iternation)이라고 한다. let i = 0; while (i < 3) { // 0, 1, 2가 출력됩니다. alert( i ); i++; } 해당 반복문은 i 값을 1씩 증가시켜가면서 i < 3 의 조건을 만족하는 동안 i 값을 경고창에 출력한다. 해당 반복문은 세번의 이터레이션을 수행한다. let i = 3; while (i) { // i가 0이 되면 조건이 falsy가 되므로 반복문이 멈춥니다. alert( i ); i--; } 반복문 조건에는 모든 종류의 표현식이..

const theme = { brandColor1: "#BE2525", brandColor2: "#BE0000", }; const backcolor = { bgColor1: 'orange', bgColor2: 'yellow' } const params = [theme, backcolor] // strings 는 문자열이 있는 부분만 추출해서 배열에 저장함 // values 는 함수나 객체가 있는 부분만 추출해서 배열에 저장함 function css(strings, ...values) { console.log(strings) console.log(values) return strings.reduce((res, str, i) => { // 문자열이 있는 부분은 그냥 연결하고 함수나 객체가 있는 부분은 함수를..

함수 참고문서 2 함수 - JavaScript | MDN 함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범 developer.mozilla.org * 함수 스코프 - 렉시컬 스코프(Lexical Scope) 또는 정적 스코프(Static Scope) 스코프 참고 블로그 자바스크립트 - 렉시컬 스코프(Lexical Scope) 들어가기에 앞서, Closure(클로져)를 이해하기 위해서는 반드시 렉시컬 스코프(Lexical Scope)를 이해해야 한다. 렉시컬 스코프란(Lexical Scope)란? 함수를 어디서 호출하는지가 아니라 어디에 선언하였 ljtaek2.ti..

* 2차원 배열을 생성하는 방법 배열 리터럴 사용 const _2dArray = [[1, 2], [3, 4], [5, 6], [7,8], [9, 10]] 배열 리터럴을 사용하여 값을 초기화함과 동시에 변수에 할당할 수 있다. const _2dArray = [] const rows = 5 const columns = 2 for (let i = 0; i < rows; i++) { const element = [] for (let j = columns * i; j < columns * i + columns; j++) { element.push(j + 1) } _2dArray.push(element) } console.log(_2dArray) // const _2dArray = [[1, 2], [3, 4], [..

* 부분 배열 만들기 - slice [배열].slice(부분배열을 추출할 인덱스 시작점, 부분배열을 추출할 인덱스 끝점) 배열의 slice 메서드는 원본배열로부터 부분배열을 추출한 다음 새로운 배열로 반환한다. 원본배열은 변경되지 않는다. 부분배열은 원본배열의 얕은 복사본이다. slice 메서드의 첫번째 인자로는 추출을 시작할 인덱스의 위치가 들어가고, 두번째 인자로는 추출을 종료할 인덱스의 위치가 들어간다. const words = ['car', 'paper', 'mobile', 'computer', 'school', 'sun', 'house'] const slicedWords = words.slice(3) console.log(slicedWords) 위 코드는 3번 인덱스부터 시작해서 배열요소들을 추..