Frontend

43 Ajax AJAX WebAPI 중 XMLHttpRequest 객체를 기반으로 동작함 장점 변경할 부분 갱신하는데 필요한 데이터만 받아오기 때문에 불필요한 통신이 없음 화면 깜박임이 없음 블로킹 없이 동작함 JSON JavaScrtip Object Noation 클라이언트-서버간 HTTP통신을 위한 텍스트 데이터 포맷 JSON 표기방식 객체 리터럴과 유사하게 키-값으로 이뤄진 순수한 텍스트임 JSON의 키는 반드시 큰 따옴표로 묶어야함 JSON.stringify 객체를 JSON포맷의 문자열로 변환함 클라이언트가 서버로 객체를 보내려면 객체를 문자열화 해야하기때문임 이를 직렬화라함 JSON.parse JSON문자열을 객체로 변환함 서버→클라이언트로 도착한 데이터는 문자열임 이를 JSON으로 객체화해야 ..

41 타이머 호출 스케줄링 타이머 함수를 통해 일정 시간이 경과한 이후에 호출되도록 함수 호출을 예약하는 것 타이머함수 setTimeout, setInterval - 타이머 생성 clearTimeout, cleatInterval - 타이머 제거 ⇒ 빌트인 함수가 아니라 전역객체의 메서드로 제공 → 호스트 객체임 setTimeout 딱 한번 동작 setInterval 반복동작 타이머 함수는 비동기 처리방식으로 작동함 → js엔진은 싱글스레드이므로 타이머 함수 setTimeout/clearTimeout setTimeout은 두번째 인수로 받은 시간으로 단 한번 동작하는 타이머를 생성함 이후 만료되면, 첫 인수의 콜백함수가 호출됨 const timer=setTimeout(func, delaytime, [par..

40 이벤트 이벤트 드리븐 프로그래밍 브라우저는 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킴 특정 타입 이벤트에 대해 반응하여 어떤 함수를 실행시킨다면, 해당 타입의 이벤트가 발생했을때 호출될 함수를 브라우저에게 알려 호출을 위임함 이벤트핸들러 이벤트가 발생했을때 호출될 함수 이벤트 핸들러 등록 이벤트 발생시 이벤트 핸들러의 호출을 브라우저에게 위임하는 것 //Click me! const button=document.querySelector('button'); button.onclick=()=>{alert("누르셧군요");} 이벤트 타입 이벤트 종류를 나타내는 문자열 약 200가지의 이벤트가 있음 MDN참고바람…. 이벤트 핸들러 등록 3가지 방식으로 등록할 수 있음 이벤트 핸들러 어트리뷰트 방식..

39 DOM 노드 HTML요소와 노드 객체 HTML요소는 HTML문서를 구성하는 개별적인 요소를 말한다. HTML요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML요소의 어트리뷰트는 어트리뷰트 놓드로, HTML요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다. HI 요소노드 : div 어트리뷰트 노드 : class: greet 텍스트 노드 : HI HTML요소의 콘텐츠 영역에는 텍스트 뿐 아니라 다른 HTML요소도 포함한다. 이때 HTML요소간에는 중첩에 의해 계층적인 부자관계가 형성된다. 이를 트리자료구조로 표현한다. DOM 트리 노드 객체들로 구성된 트리 자료구조 노드 객체의 타입 노드 객체는 12개의 종류 상속구조를 가짐 문서노드(document) DOM트리..

35 스프레드 문법 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값의 목록으로 만든다. 이터러블만 가능하다. 스프레드 문법의 결과는 값이 아니다. 즉, 연산자가 아니라는 말 따라서 스프레드 문법의 결과는 변수에 할당할 수 없다. 객체리터럴의 프로퍼티 목록, 배열의 요소, 함수 호출문의 인수로 사용가능하다. 객체 리터럴 내부에서 사용하는 경우 스프레드 프로퍼티 제안은 일반 객체를 대상으로도 스프레드 문법의 사용을 허용한다. 기존에는 Object.assign메서드를 사용하여 여러개의 객체를 병합하거나 특정 프로퍼티를 변경, 추가했다. 36 디스트럭처링 할당 구조분해할당이라고도 하며, 구조화된 배열과 같은 이터러블, 객체를 구조 파괴하여 1개이상의 변수에 개별적으로 할당하는 것을 말한다. 배열 디스트럭처링 할..

34 이터러블 이터러블 프로토콜 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 상속받아 호출하면, 이터레이터를 반환한다. 이를 이터러블 프로토콜이라 한다. 이터러블은 for … of 문을 통해 순회할 수 있으며, 스프레드문법과 디스트럭처링 할당의 대상으로 사용할 수 있다. 이터레이터 프로토콜 Symbol.iterator를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터레이터.next를 호출하면 이터러블을 순회하며 value와 done프로퍼티를 갖는 이터레이터 리절트 객체를 반환한다. 이를 이터레이터 프로토콜이라 하며 이를 준수한 객체를 이터레이터라 한다. 이터레이터는 이터러블의 요소 탐색을 위한 포인터 역할을 한다. ... [Symbol.iterator](..

33 Symbol 이름충돌 없는 유일한 프로퍼티 키를 만들기 위해 사용함 Symbol함수 new와 함께 사용하지 않음 접근시 암묵적으로 래퍼 객체를 만듦 description, toString const mySymbol=Symbol("mysymbol"); console.log(mySymbol.description); //mysymbol 심벌값은 암묵적으로 문자열이나 숫자타입으로 변환되지 않는다. 단, 불리언으로는 변환된다. Symbol.for/Symbol.keyFor 인수로 전달받은 문자열을 키로 사용하여 키와 심벌값들의 쌍이 저장되어 있는 전역 심벌 레지스트리에서 해당 키와 일치하는 심벌값을 검색함 검색 실패시 전역 심벌 레지스트리에새로 생성하여 반환한다. const s1=Symbol.for('mySy..

멋사사이트를 만드는 중 , 다음과 같은 3가지 아카이빙 페이지(프로젝트 아카이빙, 추억 아카이빙, 세션 아카이빙)을 제작해야 했다. https://github.com/cau-likelion-org/cau-likelion-next/pull/26 Archiving 데이터 타입 변경 by d0422 · Pull Request #26 · cau-likelion-org/cau-likelion-next 🛠️ 한 줄 요약 아카이빙 데이터 타입 변경 상세 🔥 바꾼거 Archiving 상위 인터페이스로 하여 Project, Session, Gallery에서 상속 받아 디테일 프로퍼티 적용 컴포넌트 제네릭 사용하여 타입별 랜더링 github.com 해당 페이지들은 모두 동일하게 아래와 같은 Card형식을 사용하고 있다. ..

정규식은 다음과 같이 표기한다 const regExp = /is/gi; const str = 'IS this?'; console.log(regExp.test(str)); 플래그 정규식 패턴 뒤에 붙여 옵션을 준다. 플래그 의미 i 대소문자 구별 없이 검사함 g 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색 m 문자열의 행이 바뀌더라도 패턴 검색을 계속함 임의 문자열 검색 .은 임의의 문자열 하나를 말한다 …은 3개의 문자열을 의미한다. 반복검색 {m,n}은 앞의 패턴이 최소 m번, 최대 n번 반복되는 문자열을 의미한다. +는 패턴이 한번 이상 반복되는 문자열을 의미한다. ?는 최대 한번 이상 반복되는 문자열을 말한다 []는 범위를 지정한다 [A-Z]는 A부터 Z까지. 대소문자 구별없이 하려면 [..

JS의 배열은 배열이 아니다 JS의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체이지, 실제 배열과는다르다. 배열의 요소와 인덱스는 벨류와 키로 작동한다. length 프로퍼티와 희소배열 length 프로퍼티의 길이를 줄이면 배열이 줄어든다. 하지만, 늘린다고 빈 값으로 초기화되지는 않는다. empty가 들어가게 되고, 접근시 undefined가 출력된다. 배열 생성 배열 리터럴 const arr = []; Array 생성자 함수 Array 생성자 함수를 통해 배열을 생성할 수 있다. 인수가 1개인경우, length 프로퍼티 값이 인수인 배열을 생성한다. const arr = new Array(2); console.log(arr); //[empty*2]; 인수가 없는경우 빈 배열을 만든다. const..