본문 바로가기

Front-end/Javascript10

MVC 패턴(화면 개발에 많이 쓰이는 패턴) - Model : 데이터 관리. API나 브라우저 로컬 저장소에 있는 데이터를 가져와 어플리케이션에서 사용할 수 있는 모양으로 만듦. 데이터를 수정하거나 삭제할 수 있는 방법도 알고 있음. - View: 사용자가 볼 수 있는 화면을 관리하는 역할을 함. 데이터를 돔에 출력하거나 사용자가 발생한 이벤트를 처리하는 기능을 수행 하며, HTML, CSS도 뷰에 속함. -Controller : 모델이 가지고 있는 데이터를 뷰에게 전달해서 화면에 출력./ 뷰에서 발생한 이벤트에 따라 모델이 데이터를 관리해 앱상태를 관리. 모델과 뷰를 연결하고 움직이는 주체. 2022. 3. 27.
event delegation (이벤트 위임이란) https://ko.javascript.info/event-delegation 이벤트 위임 ko.javascript.info 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다. 공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있습니다. 이를 이용해 이벤트를 핸들링합니다. 이벤트 위임의 장점 1. 동적인 엘리먼트에 대한 이벤트 처리가 수월하다. 2. 이벤트 핸들러 관리가 쉽다. 3. 메모리 사용량이 줄어든다. (가장 큰 장점) 4. 메모리 누수 가능성이 줄어든다. 부모 컨테이너(div) 안에 버튼(button) 5개가 있다고 가정한다면, 버블링 div에 .. 2022. 3. 24.
web APIs (Application Programming Interfaces) 응용 프로그램 프로그래밍 인터페이스 는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. (프로그램과 프로그램을 연결해주는 다리, 매개체) * Web APIs Security 사용자의 권한 요청이나 HTTPs를 요구 할 수 있음. HTTP: Hypertext Transfer Protocal (보안 처리가 안됨) HTTPs: Hypertext Transfer Protocal Security (보안 처리 됨) Element.getBoundingClientRect() : 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환. (element의 width, height를 viewport를 기준으로 한 위치.. 2022. 3. 11.
문서 객체 모델 (DOM) Documet Object Model(DOM) HTML의 '요소' = 자바스크립트의 '문서 객체' " '문서객체를 조작한다' 말은 HTML 요소들을 조작한다는 의미" DOMContentLoaded 이벤트 : 웹 브라우저가 문서 객체(HTML)를 모두 읽고나서 실행하는 이벤트 ->documet.addEventListner ( 'DOMContentLoaded', ( ) => { } 이 코드는 "documet라는 문서객체의 DOMContentLoaded 이벤트가 발생했을 때, 매개변수로 지정한 콜백 함수를 실행하라! ex) 문서 객체 가져오기 (HTML 요소 가져오기) * head, body, title 요소에 접근하는 방법 -> document.head document.body document.title *.. 2022. 3. 9.
자주 사용하는 메소드 Math.ceil ( ) : 나머지 올림 Math.floor ( ) : 나머지 버림 Math.round ( ) : 나머지 반올림 Math.min(...arr) : 최솟값 구하기 Math.max(...arr) : 최대값 구하기 forEach ( ) map ( ) filter ( ) : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter Array.prototype.filter() - JavaScript | MDN filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. deve.. 2022. 3. 8.
객체 *객체 : '실제로 존재하는 사물'을 의미하고 '이름, 값(value)으로 구성'된 속성(property)을 가진 자바스크립트의 기본 데이터 타입. 배열도 객체. -> 키 : 값 ex) const person = { name : 'jennie', gender ; 'female', age : '30' } - 객체 요소에 접근 1) person['name'] person['gender'] person['age'] 2) person.name person.gender person.age *속성과 메소드 :객체 내부에 있는 값을 속성(property)라고 함. 객체 속성 중 함수 자료형인 속성을 메소드 라고 함. (화살표 함수는 메소드로 사용하지 않는다) *메소드 내부에서 'this' 키워드 :메소드 내에서 자기.. 2022. 3. 7.
함수 *익명 함수 function ( ) { } *선언적 함수 - 함수 선언문 : function 함수 ( ) { } - 함수 표현식 let 함수 = function ( ) { }; *화살표 함수 : function 키워드 대신 화살표 (=>)를 사용. -> 1) (매개변수) => { } 2)(매개변수)=> 리턴값 *this 키워드가 지칭하는 대상이 다른 미세한 차이가 있음. (객체에서 확인 가능) *매개 변수 : 함수를 호출할 떄 괄호 안에 넣는 것. *리턴값 : 함수의 최종 결과 -> function 함수 ( 매개변수, 매개변수, 매개변수 ) { 문장 문장 return 리턴값 } *숫자를 계산해서 출력하는 일반적인 경우 -> function 함수 ( 매개변수 ) { let output = 초깃값 처리한다 .. 2022. 3. 7.
반복문 + 중첩 반복문 * for in 반복문 for ( const 반복 변수 in 배열 또는 객체 ) { 문장 } -> 배열의 요소를 하나하나 꺼내서 특정 문장을 실행 할때 사용함. 반복 변수에는 요소의 인덱스들이 들어옴. !for of/fo반복문을 활용하는 것이 좋음. * for of 반복문 for ( const 반복 변수 of 배열 또는 객체 ) { 문장 } -> for in 반복문과 다르게 반복 변수에 요소의 값이 들어옴. * for 반복문 : 특정 횟수만큼 반복하는 범용적인 반복문. for( let i = 0 ; i 2022. 3. 5.
배열 *배열 [요소,요소,요소,요소,...,요소,] 배열 요소에 접근은 인덱스 -> 배열[인덱스] 배열 요소 개수 확인하기 -> 배열.length ( 인덱스는 0부터 시작이기 떄문에 배열의 마지막 요소는 선택할 때 배열[배열.length-1]) *배열의 메소드 배열.push(요소) ->배열 맨 뒤에 요소 추가 배열.splice(인덱스,0,요소) ->배열 특정 위치에 요소 추가 (인덱스 위치에) 배열.indexOf(요소) ->배열 내부에서 값의 위치 찾기 배열.splice(인덱스,제거 할 요소의 개수) ->인덱스로부터 개수만큼 삭제함 배열.indexOf(요소) + 배열.splice(인덱스,제거 할 요소의 개수) ->indexOf() 메소드를 사용하여 위치를 찾고, splice()메소드를 사용해 제거 자료의 파괴.. 2022. 3. 5.

티스토리툴바