개발58 [javascript] 생성자 함수와 클래스 생성자 함수란?반복적으로 재사용 가능한 객체를 생성할 때 사용하는 함수이다. 즉, 주물 틀과 같은 것. 반드시 지켜야 할 것은 new라는 키워드와 함께 생성자 함수의 제일 앞 글자를 대문자로 적어야 한다는 것이다.위의 그림은 Student라는 생성자 함수를 이용해 student라는 객체를 만드는 과정이다.1) new 키워드는 빈 객체를 생성하고,2) 생성자 함수에 정의된 프로퍼티들을 따라3) 함수의 인수들을 프로퍼티에 할당한다.4) 생성자 함수를 통해 완성된 객체를 student에 할당한다. Class란?클래스는 ES6부터 추가된 문법으로 생성자 함수와 같이 객체를 생성하기 위한 템플릿인데, 여기에서 더 나아가 메서드까지 추가하여 객체를 추상화하는 함수라고 할 수 있다.기본 문법은 다음과 같다.(클래스.. 2022. 10. 3. [javascript] this + bind, call, apply this?this란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. > global 실행 컨텍스트에서 this는 global 객체를 참조한다. 브라우저 호스트 환경에서는 window를, node.js 호스트 환경에서는 global이 되겠다. > 객체의 메서드 또는 생성자 함수 내부에서 사용할 경우, 함수를 호출한 객체가 this에 참조된다. 때로 this가 원하는 객체를 참조하지 않을 때가 있는데//예시 1let user = { firstName: "John", sayHi() { alert(`Hello, ${this.firstName}!`); }};setT.. 2022. 10. 2. [javascript] 엘리스 sw 트랙 > 인스타그램 클론 코딩 메모 인스타그램 클론 코딩자바스크립트 한 주 배우고 바로 인스타그램 클론 코딩하는 거 실화?^^...자스 공부하는 한 주간 느낀 것은 지난 세 달 동안 내 공부 방향이 약간 틀렸다는 점! 나는 알고리즘만 잘하면 자스 잘하게 되는 줄 알았다. 진짜 코알못이다(반성반성반성). 개발자는 항상 눈과 귀를 열고 찾아보고 알아내야 하는 직업인 것 같다. 그런 직업을 가진 사람들이 체크 남방만 입고 다닌다니?! 인스타그램 클론 코딩 수업을 들었는데 처음보는 객체와 메서드들이 많이 나왔다. 현업에서 많이 쓰이지는 않는다고 하고 지금 당장 이해가 뽝! 되지는 않지만 나중에 볼지도 몰라서 일단 메모메모>> FileReaderfilereader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 fi.. 2022. 9. 26. [javascript] DOM의 활용 DOM의 활용1. 요소 노드 선택하기태그로 선택: document.getElementsByTagName("li"); id로 선택: document.getElementById(“id");class로 선택: document.getElementsByClassName("class");name으로 선택: document.getElementsByName("name");* css 선택자로 선택:document.querySelector('css') > 선택자에 해당하는 태그 중 가장 첫번째 태그 하나document.querySelectorAll('css') > 선택자에 해당하는 태그 모음 (NodeList) 2. 요소 노드 생성하기document.createElement('div'); > 생성하고자 하는 태그 이름으.. 2022. 9. 22. [css] grid gridgrid 레이아웃은 2차원의 레이아웃 시스템을 제공하는 것으로 주요 페이지 영역을 설계하거나 작은 UI 요소를 배치하는 데 사용한다. flex와 다르게 grid는 겹치는 콘텐츠를 제어할 수 있다. 중첩의 우선 순위는 z-index 프로퍼티로 제어한다. grid 레이아웃을 사용할 때는 그리드 속성을 사용하고 싶은 컨테이너에 display: grid를 선언하여 사용한다. 컨테이너의 아이템들이 그리드 아이템이 된다. 👉여기서부터 grid container 속성 1) grid-template-rows, grid-template-columns: 행과 열의 크기나 이름을 정의한다. 같은 크기의 공간으로 나눌 경우 repeat 함수를 사용할 수 있다. 2) grid-template-areas: 나누어진 격.. 2022. 9. 19. 이전 1 ··· 5 6 7 8 9 10 11 12 다음
