본문 바로가기

JavaScript

 (39)
JavaScript - 브라우저의 동작 원리 브라우저의 기본 구조 1. 사용자 인터페이스 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분. 2. 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. 자료 저장소를 참조하며 로컬에 데이터를 읽기/쓰기 하면서 다양한 작업을 한다. 3. 렌더링 엔진 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함. 파이어폭스는 게코(Gecko)엔진을 사용하고, 사파리와 크롬은 웹킷(Webkit)엔진을 사용한다. 4. 통신 HTTP 요청과 같은 네트워크 호출에 사용됨. 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨. 5. UI 백엔드 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시..
JavaScript - 얕은 복사, 깊은 복사 객체 또는 배열을 복사하는 두 가지 방법의 차이점에 대한 설명. 두 방법은 복사된 결과의 구조와 원본 객체 간의 관계를 다르게 다룬다. 1. 얕은 복사 복사본의 속성이 원본객체와 같은 참조를 공유한다. 둘 중 한쪽을 변경할 경우 나머지도 똑같이 변경된다. 내부 객체나 배열은 참조로 복사된다. = 내부 객체나 배열은 실제 값이 아닌 메모리 주소로 복사된다. - 따라서 원본 객체와 복사본 객체는 내부 객체에 대한 동일한 참조를 공유한다. 속성이 모두 원시 값인 객체의 복사는 얕은 복사, 깊은복사 모두의 정의에 부합하다. 중첩된 객체의 값이 아닌 최상위 속성만 복사한다. - 따라서 복사본의 최상위 속성을 재할당해도 원본객체에 영향을 끼치지 않는다. - 복사본의 중첩 객체 속성을 재할당하면 원본 객체에 영향을 ..
JavaScript - ==, === 차이점 ==, === 둘 다 비교연산자이다. 1. == (동등 연산자) loose equality 연산자. 두 개의 피연산자가 동일한지 확인하며, boolean 결과를 반환한다. 비슷해보이면 같다고 판단한다. 데이터 유형을 엄격하게 검사하지 않고, 필요한 경우 자동으로 형 변환을 수행한다. ex) 1 == '1' // true 0 == false // true 상세 설명 1. 두 피연산자가 동일한 타입일 경우 다음과같이 비교한다. 객체 : 두 피연산자가 동일한 객체를 참조할때만 true. /* 객체타입 비교 예시 */ const object1 = { key: "value", }; const object2 = { key: "value", }; object1 == object2 // false object1 == ..
Javascript - 함수 유효범위 함수지향 - 유효범위(전역변수, 지역변수) 자바스크립트 2019-11-05 14:14:47 ▶유효 범위 Scope. 변수의 수명을 의미한다. -local variable : 함수 내에서 선언된 변수로 함수 내에서만 접근 가능. -global variable : 함수 밖에서 선언된 변수로 자바스크립트 전역에서 접근 가능. 1) 결과 : eun luck 함수 바깥에 전역 변수인 Eun 이 선언되어있다. 자바스크립트 전역의 모든 함수에서 접근할 수 있는 변수이기에 bbi 함수도 Eun 에 접근해서 값을 출력했다. 2) 결과 : EUNLUCK 함수 내에 Eun 지역변수가 선언되어있다. 함수의 안과 밖에 같은 이름의 변수가 선언되어 있을 때에, 지역변수를 우선적으로 보기 때문에 결과는 지역변수이다. 3) 결과 :..
Javascript - 정규표현식 정규표현식 자바스크립트 2019-10-30 18:05:29 regular expression 문자열 안에서 어떠한 문자가 있는지, 없는지 또는 다른 문자로 치환해주는 것. 1. 컴파일 단계. =우리가 필요한 대상을 찾는 것. 패턴을 찾는 것. 2. 실행 단계. =우리가 찾은 패턴 · 대상에 대해 어떠한 작업을 구체적으로 하는 단계. ▶ 정규표현식에서 패턴을 만드는 방법. 1. 정규표현식 리터럴. var pattern = /a/; 2. 정규표현식 객체 생성자 var pattern = new RegExp('a'); 정규표현식 객체를 만들었다. ▶ 정규표현식 메소드 실행 정규표현식의 주요 작업 : 추출. 테스트. 치환 1. 추출 var pattern = /a/; console.log(pattern. exec(..
Javascript - UI·API , 문서 UI·API , 문서 자바스크립트 2019-10-30 17:18:48 원하는 명령어를 찾는 일. API를 찾는 일 중요! -UI : user interface. 노트북의 UI 예) 터치패드, 노트북 화면, 스피커 등 입력, 출력 장치들. 사용자와 노트북의 접점. 중계자를 UI 라 부른다. 소프트웨어 UI 예) 화면에 보이는 버튼들, 눌렀을 때 나오는 화면들. 소프트웨어적으로 구현된것이지만 사용자들에게 상태를 보여준다. -API : application programming interface. alert 버튼, 스크롤같은 인터페이스는 아니고, 코드를 띄고 있는 인터페이스다. 웹브라우저가 제공하고 있는 조작 방법들. 일반 사용자: 웹 브라우저를 UI로 제어한다. 개발자: UI+API로 웹브라우저, 또는 앱 ..
Javascript - 모듈 모듈 자바스크립트 2019-10-30 00:45:07 부품~! 프로그램: 작.단->크.복 ∴코드 재활용성↑, 유지보수 쉽게 할 기법들이 필요. 이 중 하나가 코드를 여러 개의 파일로 분리하는 것이다. = 모듈. 기법: 모듈화 이점: 자주 사용되는 코드를 별도의 파일로 만들어 필요할 때마다 재활용할 수 있다. 코드를 개선하면 쓰이고 있는 모든 곳의 동작이 개선된다. 코드 수정 시 필요한 로직을 빠르게 찾을 수 있다. 필요한 로직만 로드해 메모리 낭비↓ 한 번 다운로드된 자바스크립트는, 그 후에는 웹브라우저에 저장되기 때문에 시간, 비용 절약. 자바스크립트에서는 모듈(module)이라는 개념이 분명히 존재하지는 않는다. 하지만 자바스크립트가 구동되는 환경(ex) 웹브라우저 등) 에서 자바스크립트 로직을 파일..
Javascript - 객체 객체 자바스크립트 2019-10-29 20:42:31 object 배열이랑 유사. 배열은 그릇 속에 값을 등록하면, 색인이 0부터 자동으로 등록이 되지만, 객체는 색인 값을 내가 원하는 데이터로 지정할 수 있다. (다른 언어에서는 연관 배열, 맵, 딕셔너리 등의 데이터 타입이 객체에 해당한다.) 중괄호로 시작한다. (배열은 대괄호) ▶객체 만들기 방법 1. var bir = {'hyeon' : 19, 'ming' : 15, 'jeong' : 13} 키(인덱스) : hyeon, ming, jeong. 밸류(값) : 19, 15, 13. 방법 2. var bir = {}; bir['hyeon'] = 19; bir['ming'] = 15; bir['jeong'] = 13; 방법 3. var bir = new ..

티스토리툴바