JudithHopps JudithHopps

디자인 패턴이란? 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 "규약" 형태로 만들어 놓은 것을 의미 종류는 아래와 같다. 싱글톤 패턴 팩토리 패턴 전략 패턴 옵저버 패턴 프록시 패턴과 프록시 서버 이터레이터 패턴 노출모듈 패턴 MVC 패턴 MVP 패턴 MVVM 패턴 전략 패턴 전략 패턴은 정책 패턴이라고도 하며, 객체의 행위를 바꾸고 싶은 경우 '직접' 수정하지 않고 전략이라고 부르는 '캡슐화한 알고리즘'을 컨텍스트안에서 바꿔주면서 상호 교체가 가능하게 만드는 패턴이다. 더보기 컨택스트란? 프로그래밍에서의 컨텍스트는 상황, 문맥, 맥락을 의미하며, 개발자가 어떠한 작업을 완료하는데 필요한 모든 관련 정보를 말한다. 옵저버 패턴 주체가 어떤 객체의..

17. 생성자 함수에 의한 객체 생성 17.1 Object 생성자 함수 자바스크립트 Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다. //RegExp const regExp = new RegExp(/a+b/i) console.log(typeOf regExp) // object 19. 프로토 타입 19.13 프로퍼티 존재 확인 in 연산자 for-in 문을 사용하면 객체(배열 포함)에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다. var person = { 'first-name': 'Ung-mo', 'last-name': 'Lee', gender: 'male' };..

2023.1.16 한 것 - html 코드 작성 - css 코드 작성 2023.1.17 - 블로그 수정 더보기 전체 구조 1. html a. 하나의 index.html로 설정한다. b. head 뷰포트 관련 정보를 적어두었다. title은 Book Review style은 외부 스타일 시트를 링크한다. javascript는 defer 명령어를 통해 head 부분에 첨부한다. c. body body는 main과 footer로 구성되어 있다. (header는 제외하였다.) main 태크 안에 section, article로 구성되어 있고 BEM(Block Element Modifier)을 사용하여 가독성 있는 이름을 이용했다. footer 태그 안에는 sr-only 클래스를 이용하여 스크린 리더를 이용하여 ..

[참고] 1.도서 http://www.yes24.com/Product/Goods/92742567 모던 자바스크립트 Deep Dive - YES24 『모던 자바스크립트 Deep Dive』에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤친다. 따라서 여러분이 작성한 코드 www.yes24.com 2. 웹사이트 웹 프로그래밍 튜토리얼 | PoiemaWeb Front-end Development Tutorial poiemaweb.com 자바스크립트의 특징 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 자바스크립트는 기존의 프로그래밍 언어에서 많은 영향을 받았다. 기본 ..

https://school.programmers.co.kr/learn/courses/30/lessons/120829 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 각도기 각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요. 예각 : 0 x { var arr = [0,0] num_list.forEach(x => arr[x%2] +..

라이브러리 프레임워크 공통점 공통으로 사용될 수 있는 특정한 기능들을 모듈화 한 것 폴더명, 파일명 등 규칙 없음 있음 자유도 free sticky 디자인 패턴이란? 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 "규약" 형태로 만들어 놓은 것을 의미 종류는 아래와 같다. 싱글톤 패턴 팩토리 패턴 전략 패턴 옵저버 패턴 프록시 패턴과 프록시 서버 이터레이터 패턴 노출모듈 패턴 MVC 패턴 MVP 패턴 MVVM 패턴 싱글톤 패턴 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴 보통 DB 연결 모듈에 많이 사용한다. 장점 : 1. 사용하기 쉽고 실용적이다. 2. 인스턴스를 사용할 때 드는 비용이 줄어든다. 단점 : 1. 의존성이 높아진다. 2. TD..

⭐ addEventListener - EventTarget의 기능 첫 번째 인자로 주어진 이름의 이벤트 발생시 두 번째 인자로 주어진 콜백함수 실행 👉 MDN 문서 보기 👉 이벤트 목록 MDN 문서 보기 click 이벤트 요소가 클릭되었을 때 document.querySelector('#button1') .addEventListener('click', () => { alert('ㅇㅇ 어서오고'); }); alert - 주어진 메시지로 알림 팝업 띄움 이벤트 객체 // ♻️ 새로고침 후 실행 document.querySelector('#button1') .addEventListener('click', (e) => { console.log(e); }); 프로토타입을 따라 올라가 볼 것 💡 이벤트 리스너에서의..

⭐ DOM의 모든 기능을 배우지는 않음 핵심 기능들을, 학습해 온 자바스크립트 지식과 접목하여 이해 add_to_queue 새 창에서 열기 I. 요소 선택 🔗 Document 또는 🔗 Element의 인스턴스 메서드들. 자식 클래스들로 상속됨 1. getElementsByTagName - 태그명으로 선택 👉 MDN 문서 보기 ( Document ) 👉 MDN 문서 보기 ( Element ) document에서 사용시 문서 전체에서 선택 const $sections = document.getElementsByTagName('section'); const $listItems = document.getElementsByTagName('li'); ​ console.log($sections); console.lo..