본문 바로가기

Front-End64

[CSS] Chapter 06. class와 id 속성 ID 값은 단 하나 1 2 id의 값 같은 경우는 문서에 고유, 유니크하게 단 하나만 존재하는 것이 개발자들끼리의 약속이다. 설령 적용된 id값의 요소가 중복으로 존재하더라도 브라우저상에서는 아무런 에러없이 렌더링 될 것이다. 하지만 개발자들끼리 id값은 고유한 값으로 사용하자는 약속이고, 관습이다. var x = document.getElementById("heading"); // 어짜피 id를 선택하는 것이기 때문에, 단 하나만 선택된다. var xx = document.getElementsByClassName("title"); // class는 여러번 중복되도 되기 때문에, 여러개의 태그가 할당된다. 웹 프로그래밍에서 html, css, javascript까지 세 개는 떼놓지 못할정도로 많은 연관을.. 2022. 12. 23.
[JavaScript] Chapter 24. 예외처리 예외처리 exception Handling 오류 발생 시, 코드 실행 흐름 복구기능 지님 try ~ catch ~ finally 사용 구문 오류 Synatax Error 문법 오류 try ~ catch ~ finally 오류 발생 시, 중단되지 않고 지속됨 예외 처리 시에 필요한 구문 try { // 로직 } catch(e) { // 에러 발생 시, 로직 } finally { // 마지막 } try 에러 발생 시, 원상복구 시도하는 곳 catch 에러 발생 시, 코드 실행 흐름이 try에서 catch로 감 에러 정보 담고있음 (e) finally 무조건 실행되는 코드 try 종료되면 실행 try ~ finally 에러 발생하지 않은 경우 사용 try ~ catch ~ finally 에러 발생한 경우 사용.. 2022. 12. 19.
[JavaScript] Chapter 23. 모듈 모듈 하나의 파일 클래스 또는 함수들로 구성 스크립트 한 개 모듈의 필요성 개발 규모가 커지면서 모듈 시스템으로 구성 모듈 종류 AMD CommonJS UMD ES6 모듈 사용방법 export (내보내기) 변수나 함수 앞에 사용 // [exportTest.js] export function exportTest(test) { alert('{test}'); } import (가져오기) 경로 지정 하지 않으면 오류 발생 // [import.js] import {exportTest} from "./exportTest.js"; exportTest("John"); 모듈 특징 엄격 모드 (use strict) 로 실행 모듈 레벨 스코프 범위 동일한 모듈 여러 번 사용해도 한 번만 실행 *엄격 모드 일반적인 JS에서 .. 2022. 12. 19.
[JavaScript] Chapter 22. 이벤트 동작원리 이벤트 루프 싱글 스레드 기반 언어 한 번에 한 개만 작업 진행 이벤트 루프 동작 방식 Javascript Engine Heap과 Call Stack으로 구성 Heap 메모리 할당이 일어나는 공간 변수, 함수 선언 시 메모리 할당 일어남 Call Stack 코드 실행 시 쌓임 LIFO (Last In First Out) WebAPIs 브라우저에서 제공하는 API DOM, Ajax, 타이머 함수 등 Callback 함수를 Callback Queue에 넣음 Callback Queue 비동기적으로 실행된 콜백 함수 있음 ex) Ajax나 타이머 함수 실행 완료 후, 실행할 콜백함수가 보관 FIFO (First In First Out) Event Loof 이벤트 루프 틱(tick. 반복적인) 동작을 함 정리 :.. 2022. 12. 19.
[JavaScript] Chapter 21. 이벤트 다루기 이벤트 전파 이벤트 발생 시, 다른 곳으로 전파시킴 클릭 결과 : btn -> spanArea -> divArea 순으로 alert 이벤트가 실행된다. 이벤트 전파 중단 이벤트 발생 시, 다른 곳으로 전파를 중단시킴 stopPropagation 이벤트 전파를 막는 함수 크롬, 사파리, 파이어폭스 cancelBubble 이벤트 전파를 막는 함수 IE8 속성 true 클릭 preventDefault 이벤트 동작 중단 함수 링크클릭 결과 : btn -> spanArea -> divArea 순으로 alert 이벤트는 실행되지만, 네이버창으로 연결되는 이벤트는 발생하지 않는다. 이벤트 전파 이벤트 발생 시, 다른 곳으로 전파시킴 캡처링 (위 -> 아래) 버블링 (아래 -> 위. default) 이벤트 캡처링 이벤.. 2022. 12. 19.
[JavaScript] Chapter 20. 이벤트 이벤트 (Event) 시스템에서 일어나는 사건 마우스 이벤트 (mouse event) 설명 click, doubleclick 클릭 / 더블클릭 mousedown 마우스 누를 때 mouseup 눌렀던 마우스 땠을 때 mouseover 요소 위로 마우스 올렸을 때 mouseout 요소 밖으로 마우스 움직였을 때 포커스 이벤트 (focus event) 설명 focus 포커스 얻음 blur 포커스 잃음 기타 이벤트 (etc event) 설명 submit 폼 전송 resize 사이즈 조절 select 텍스트 선택 scroll 스크롤 기능 change 폼 변경 이벤트 핸들러 이벤트를 다룸 이벤트 발생 시, 실행되는 코드 이벤트를 JS에서 인식하여 사용하게 함 = 이벤트 리스너 이벤트 핸들러 표기법 on + 이벤트명.. 2022. 12. 17.
[JavaScript] Chapter 19. 클로저 클로저 (Closure) 함수와 함수가 선언된 어휘적 환경(렉시컬 환경)의 조합 => 내부함수가 외부함수 변수에 접근 가능 렉시컬 스코프 이해 function init() { // name은 init에 의해 생성된 지역 변수 var name = "Mozilla"; // displayName()은 내부 함수이며, 클로저 function displayName() { // 부모 함수에서 선언된 변수를 사용 alert(name); } displayName(); } init(); 은닉화 Information Hiding 외부로부터 데이터를 감추는 것 private로 감춤 내부적으로 사용해야하는 경우 감춤 // ex) IIFE (즉시 실행 함수) (function() { var str = "테스트"; })(); c.. 2022. 12. 17.
[JavaScript] Chapter 18. 비동기 동기 (Synchronous) 자바스크립트 방식 한 번에 하나의 작업 수행 직렬 동기 동작 순서 코드 실행 스택에 실행할 코드 쌓임 쌓인 코드 실행 실행된 코드는 스택에서 제거 비동기 (ASynchronous) 요청 보내면 응답에 상관없이 다음 동작 실행 동기와 반대 의미 병렬젹 Ajax, Fetch, setTimeout 등등 비동기 사용 방법 Callback 함수 Promise Async await document.write("코드 1"); setTimeout(function(){document.write("코드 1");}, 3000); // 3초 뒤 실행 document.write("코드 3"); 콜백함수 (callback function) 함수 실행 시킨 후, 이후 실행되는 함수 다른 함수에 파라미.. 2022. 12. 17.
[JavaScript] Chapter 17. 클래스 클래스 (Class) 객체를 생성하기 위한 틀, 객체X 클래스 안에 데이터가 없다 메모리에 올라가지 않는다. Class Info { // 생성자 constructor({name, age}) { this.name = name; this.age = age; } write() { return this.name + this.age; } } let info = new Info({name:"홍길원", age:31}); console.log(info.write()); Getter 프로퍼티 값을 가져오기 위한 함수 Setter 프로퍼티 값을 설정하기 위한 함수 get 함수명() { return this._변수명; } set 함수명(value) { this._변수명 = value; } 사용은 함수처럼 호출()해서 사용하.. 2022. 12. 16.
[JavaScript] Chapter 16. Prototype(프로토타입) 생성자 (constructor function) 객체 생성하는 함수 함수명 첫글자 대문자 new 키워드 사용하여 호출 this 키워드 이용 변수타입 변수명 = new 생성자함수(); // 생성자 함수 예 var arr = new Array("사과", "수박", "딸기"); var num = new Number(1, 2); var info1 = new Info("홍길원", 30); 생성자 사용 이유 번거로움 해결 구조를 정해놔서 편리 생성자 하나로 여러 객체 생성 가능 메모리 효율 function Info(name, age) { this.name = name; this.age = age; } var info1 = new Info("홍길원", 30); var info2 = new Info("홍길투", 30).. 2022. 12. 16.

티스토리툴바