개발 블로그

추상클래스 인터페이스 모두 스스로 객체 생성 불가능. 추상 클래스는 ~는 ~다. => 상속클래스는 부모클래스다. 인터페이스는 ~는 ~할 수 있다. => 구현클래스는 인터페이스 기능을 할 수 있다. 그래서 대부분 인터페이스 이름의 끝에는 ~할 수 있다는 의미인 ~able이 붙어 있다. 추상클래스는 상속을 단 하나만 받을 수 있지만 인터페이스는 여러가지 구현 가능

js 코딩 하다가 어떤 부분에서 문제가 생겼는지 알고싶을때. 그 부분에 debugger; 를 입력하고 페이지를 새로 고침 한뒤 console 창에서 변수나 DOM작업을 하여 상태를 확인한다. =>console.log로도 디버깅이 가능하지만 위의 방식을 활용하면 아주 편리하다.

만약 우리가 어떤 리스트에 있는 내용들에 클릭을 하면 발생하는 이벤트 리스너들을 등록하고자 한다고 한다. 그러면 이때 우리는 모든 태그들에 대해서 for문을 돌리며 이벤트 리스너를 등록해야 하는가? 가능하다. 하지만 이는 성능측면이나 유지보수성 측면에서 좋지 않다. 이때문에 이벤트 버블링이라는 개념이 등장했다. 이벤트 버블링은 어떤 요소를 클릭했을때 그 상위 엘리먼트까지 올라가면서 등록된 이벤트 리스너가 있는지 찾는것이다. 있을 경우에는 등록된 이벤트 리스너에 따라 행동을 취하게 된다. 예를 들어 태그 아래 태그들이 있는데 우리는 각 태그들에 대하여 클릭 이벤트 리스너를 등록하고자 한다. 이때 for문으로 각 태그에 이벤트 리스너를 등록할 필요없이 단지 태그에만 클릭 이벤트 리스너를 등록하면 그 하위 요..

ArrayList 배열을 선언하고자 하는데 참조변수를 사용할때 ArrayList를 쓰느냐 LIst를 쓰느냐에 따라 어떤 차이가 있는지 궁금해져서 찾아보게 되었다. #요약 - 추상클래스나 인터페이스 모두 부모클래스라고 볼 수 있다. - 따라서 추상클래스나 인터페이스 모두 참조변수 형으로 타입 선언이 가능하다. - 일반적으로 부모클래스보다 자식클래스가 더 많은 기능이 구현 되어있다. - 부모는 자식을 품을 수 있지만 자식은 부모를 품을 수 없다. (부모가 자식을 낳음) - 따라서 1) 부모 참조형 변수 = new 자식생성자(); => 가능 그러나 2) 자식 참조형 변수 = new 부모생성자(); => 불가능 3) 자기자신 참조형 변수 = new 자기자신생성자(); => 당연히 가능 - 1)번 변수는 자식객체..

https://www.youtube.com/watch?v=8aGhZQkoFbQ 자바스크립트는 싱글 스레드다. 동시작업을 해결하기 위해 비동기라는 개념이 등장하고 이를 위해 자바스크립트 런타임 뿐만 아니라 브라우저의 WEB API를 통해 해결한다. 모든 실행 함수는 콜 스택에 쌓이고 리턴하면 콜 스택에서 사라지며 비동기 함수(콜백 함수)를 만날시에는 콜백함수를 WEB API에 맡긴다. WEB API에서는 콜백함수의 통신 대기 상태 처리가 완료되면 태스크 큐(콜백 큐)에 보낸다. 이 때 이벤트 루프가 항시 콜 스택의 상태를 주시하며 콜 스택에 모든 함수가 비워지면 그 때 태스크 큐(콜백 큐)에 있는 콜백함수를 콜 스택에 올린다. 비로소 콜 스택에 도착한 콜 백 함수가 실행이 되고 과정이 종료된다. #콜백함수..

비동기 처리 방식에 중요한 개념인 CORS와 JSONP에 대해 아주 친절하게 설명되어진 블로그를 소개한다. 참조하고 공부하기. https://mosei.tistory.com/entry/JSONP%EC%99%80-CORSCrossOrigin-Resource-Sharing-%ED%81%AC%EB%A1%9C%EC%8A%A4%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%82%AC%EC%9A%A9 JSONP와 CORS(Cross-Origin Resource Sharing) 크로스도메인 사용 개요 웹 개발시 자바스크립트로 외부 서버의 경로로 ajax요청을 날리면 에러가 나면서 요청이 실패한다. 웹 브라우저의 콘솔창에 아래와 같은 메시지를 보게 된다. 크롬 No 'Access-Control-Allow-Or..

DOM 엘리먼트 오브젝트 몇 가지 유용 DOM 엘리먼트 속성 tagName : 엘리먼트의 태그명 반환 textContent : 노드의 텍스트 내용을 설정하거나 반환 nodeType : 노드의 노드 유형을 숫자로 반환 DOM 탐색 속성 childNodes 엘리먼트의 자식 노드의 노드 리스트 반환(텍스트 노드, 주석 노드 포함) childNodes 예제 firstChild 엘리먼트의 첫 번째 자식 노드를 반환 firstChild 예제 firstElementChild 첫 번째 자식 엘리먼트를 반환 firstElementChild 예제 parentElement 엘리먼트의 부모 엘리먼트 반환 parentElement 예제 nextSibling 동일한 노드 트리 레벨에서 다음 노드를 반환 nextSibling 예제..

* 웹에서 javascript를 사용하는 방법은 다음과 같이 2가지다 태그를 이용하는 방법 일반 요소의 태그 속성에서 이벤트 처리 방식을 사용하는 방법 ex)onclick과 같은 속성 * javascript에서 동등 비교 연산자는 === 이다 * 함수의 선언은 다음과 같이한다 fucntion 함수명(){} * javascript의 객체는 다음과 같이 선언 var 객체명 = { } 중괄호 안에는 프로퍼티(변수)와 메소드(함수)가 들어간다 다음과 같이 중괄호 안에서 선언 할 수도 있고 ex)property(변수) 일 경우 : key : "key값" 메소드(함수) 일 경우 : 함수명 : function(){} 객체가 생성 되어 있다면 다음과 같이 중괄호 밖에서 추가 선언 할 수도 있다 ex)property(변..

요약 * 웹에서 javascript를 사용하는 방법은 다음과 같이 2가지다 태그를 이용하는 방법 일반 요소의 태그 속성에서 이벤트 처리 방식을 사용하는 방법 ex)onclick과 같은 속성 * javascript에서 동등 비교 연산자는 === 이다 * 함수의 선언은 다음과 같이한다 fucntion 함수명(){} * javascript의 객체는 다음과 같이 선언 var 객체명 = { } 중괄호 안에는 프로퍼티(변수)와 메소드(함수)가 들어간다 다음과 같이 중괄호 안에서 선언 할 수도 있고 ex)property(변수) 일 경우 : key : "key값" 메소드(함수) 일 경우 : 함수명 : function(){} 객체가 생성 되어 있다면 다음과 같이 중괄호 밖에서 추가 선언 할 수도 있다 ex)propert..