javascript57 [자바스크립트] js엔진은 어떻게 동시처리를 하는가? 이벤트루프 [목표]- nodejs가 싱글쓰레드임에도 불구하고 비동기처리를 한다는데 어떻게해? 의문에 답해보자- nodejs가 이벤트루프기반 비동기처리를 한다는데, 이벤트루프가 대체 뭔지 알아보자- 랜더링엔진 구조, 처리방식은 알아봤는데 자바스크립트 엔진은 그냥 지나간 것 같으니 이번 기회에 알아보자 [우선! 자바스크립트 엔진과 브라우저 랜더링엔진은 다르다]- 랜더링엔진은 HTML과 CSS파일을 파싱하여 새로운 트리구조를 만들고 브라우저 화면에 문서를 나타내는(painting) 작업을 함- 자바스크립트 엔진은 js 코드 파일을 해석하고 실행하는 인터프리터(구글의 V8과 같은 엔진) [자바스크립트 엔진 구조]- 대부분의 자바스크립트 엔진은 다음과 같이 세가지 영역으로 나뉨 1) Call Stack- 자바스크립트는 단 .. 2017. 4. 21. [웹기본개념] HTTP 그리고 REST API 다가가기 [HTTP란]- HyperText Transper Protocol의 준말, 하이퍼텍스트 트랜스퍼란 링크 기반으로 데이터를 요청하고 받겠다는 것- 클라이언트와 서버가 요청을 하고 응답을 하기위해 따르는 프로토콜- HTML 문서를 주고 받을 수 있음, 뿐만 아니라 이미지, 동영상, 오디오, 텍스트 문서 등을 주고 받을 수 있음 [HTTP 동작 방식] - 클라이언트 : 웹어플리케이션의 경우 크롬, 파폭, IE 등 브라우저를 통햇허 서버에 요청을 함(프로토콜 + 도메인 + URI)- 서버 : 클라이언트로부터 받은 요청을 내부적으로 처리하여 그에 대한 결과를 응답해줌 [HTTP 특징 및 기능]1) connectless + stateless- 1번 요청-응답 후 연결을 끊어버림- 클라이언트의 이전 상태를 알 수 없.. 2017. 4. 20. [자바스크립트] 함수 호이스팅 [목표]- 자바스크립트 내부 동작 잘 이해하기 : 코드를 복붙하더라도 알고 써야지! [호이스팅이란]- 선언문이 최상위에서 처리되는 것을 호이스팅이라 함- 글로벌 영역(전역)으로 선언되어있는 변수, 함수 선언문들을 먼저 수집하여 전역객체(window)의 프로퍼티로 등록함- 할당문은 자바스크립트 코드 실행(런타임 과정) 시 할당됨 [발생하는 이유]- 자바스크립트의 선언문은 자바스크립트 인터프리터가 해석을 할 때 가장 먼저 처리함(최상위) [호이스팅 예시 - 함수]1234567function foo(){ console.log("함수선언식")} var foo = function(){ console.log("함수표현식")}cs- 같은 함수인 것 같지만, 호이스팅에서 차이가 남, 아랫글이 차이에 대한 부분임 1-1.. 2017. 4. 20. [자바스크립트] 함수 내부 동작 [함수 내부동작]- 자바스크립트 엔진의 내부를 살펴보면 함수가 실행스택에 쌓일 때 함수는 객체를 생성함- 객체는 Variable Object(줄여서 VO 라 함)임 - 객체 내부(프로퍼티)는 아래와 같음1) arguments 객체 : 함수로 넘어오는 인자 정보를 담는 객체, 배열은 아니지만 배열과 유사한 형태(배열객체가 제공하는 메소드 사용X)로 저장2) 지역변수, 함수 3) scope chain : [[Scopes]] 프로퍼티 참고- 변수의 범위를 담은 프로퍼티- 선언된 지역변수는 지역변수의 값, 그렇지않은 것은 전역객체의 변수 프로퍼티값 참조- 전역객체에서도 없으면 undefined (상위 객체에서도 없을 때에 undefined 즉, 선언되지않은 값) [함수 상세하게 보기]1) 콘솔창에 함수 만들기1.. 2017. 4. 19. [자바스크립트] 느슨한 타입 [목표]- 자바스크립트 특징 이해하기 : 그냥 아 그렇구나하고 넘어가는게 아니라... [느슨한 타입이란]- 타입없이 변수를 선언하는 것- 자바스크립트가 변수를 선언할 때 타입없이 var(variable 약어)로만 선언함- 느슨한타입과 반대되는 말은 강력한타입, 강력한타입은 반대로 변수를 선언할 때 타입을 선언해야함1234567/* javascript (loose typing) */var a = 1 // typeof(a) === Numbervar b = "str" // typeof(b) === String /* java (strong typing) */int a = 1;String b = "str"cs - 타입없이 선언했다고해서 변수의 타입이 없는 것은 아님 : 내부적으로 정해짐- 내부적으로 변수의 타입이.. 2017. 4. 19. [웹기본개념] 어플리케이션 캐시 [어플리케이션 캐시가 필요한 이유, 어플리케이션 캐시란]- 오랜 시간 걸리는 작업을 빠르게 처리하기위해 작업에 필요한 파일을 저장해두는 것- 서버가 요청에 대한 응답을 할 때 매번 css, js, img 파일(리소스)을 주는 것 아님, 브라우저가 다운로드 받아 로딩하는 것이 아님- 리소스를 브라우저 캐시 임시저장소(로컬)에 저장해두었다가 요청 페이지 응답받은 후 로딩할 때 가져옴- 오프라인 브라우징 가능 : 캐시된 리소스를 가지고- 캐시 관리를 잘해줘야함 : 이전 데이터를 가지고 있는 경우가 있을 수 있으므로- TTL : 캐시 저장 시간, 이전 데이터를 가지고 올 수도 있으므로 캐시 만료기간을 설정함 [어플리케이션 캐시 장점]- 속도가 빠름 : 로컬에 저장된 리소스 사용- 오프라인 브라우징 가능- 서버 .. 2017. 4. 18. [웹기본개념] DOM 그리고 DOM api [목표] - DOM과 DOM API가 무엇인지 알아보기 + 이해하기- DOM과 자바스크립트는 속해지는 관계가 아님을 확인하기 [DOM이란]- Document Object Model의 준말- 문서를 구조화한 표현- 문서를 구조화하는 표준 방법- 객체지향모델- 쉽게말해 .html 이나 .xml 문서를 구성하고 있는 태그를 객체화함- 객체화된 태그들의 관계를 구조화함(트리구조)(1) .html 문서파일 코드1234567891011 My title My link My headercs (2) .html 문서파일을 구조화한 결과(트리구조) [DOM과 DOM api]- DOM은 문서(.html 혹은 .xml)를 구조화한(하는) 표현, 표준방법- DOM api는 객체화된 문서 자체, 태그(객체)를 가져오는 메소드(명령.. 2017. 4. 18. [자바스크립트] 프로토타입체인 [목표]- 헷갈리는 자바스크립트 프로토타입기반 객체지향 안헷갈리게 하기 [자바스크립트 객체 그리고 프로토타입체인](1) 객체리터럴 : 숏컷 방식(간단하게)1var obj1 = { } cs (2) 생성자 : 위의 객체와 동일한 객체를 만들어냄, function Object()의 인스턴스 객체1var obj2 = new Object()cs - Object 타입은 모든 객체의 최상위타입- 자바스크립트는 프로토타입(객체의 원형을 가진 객체, 함수의 공통된 프로퍼티, 메소드 저장)을 이용한 상속을 지원함- 그래서 Object 타입 생성자의 프로토타입 객체를 상속받은 인스턴스 객체가 생성되어 obj2에 저장되었다고 표현- 프로토타입을 이용하여 객체와 객체끼리 연결하고 한쪽 방향으로 상속받는 형태를 만들 수 있음- .. 2017. 4. 16. [웹 기본개념] 브라우저 동작원리 [목표]- 브라우저가 어떻게 동작을 하는지 알아보기- 내부 동작을 알아봄으로서 속도 개선을 위해 무엇이 필요한지 알아보기- 동작 매커니즘을 아는 것이 프로젝트를 짤 때 이해도가 더 깊어지는 것을 알기- 리액트 필요성 느끼기 : DOM에 대해 공부하면서, html 문서 파싱 단계를 보면서 [브라우저 기본 구성요소 및 각각의 역할](1) 유저인터페이스 : 사용자가 기능을 쉽게 이용할 수 있도록 만든 UI 요소들(주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등)(2) 브라우저 엔진 : 유저인터페이스와 랜더링 엔진 사이의 동작을 제어함(3) 랜더링 엔진- 요청한 콘텐츠를 표시할 수 있도록 하는 역할, 사용자가 HTML 파일을 요청하면 HTML과 CSS를 파싱(응답 파일)하여 화면에 표시해줌- 크롬은 각 탭마다 .. 2017. 4. 13. [자바스크립트] 클로저(closure) [목표]- 이전에 배운 자바스크립트 관련 개념을 통해 클로저 이해하기- 클로저 특징을 활용 예시 알아보기(클로저를 사용하는 이유)- 클로저를 배움으로서 자바스크립트 개발에 있어서 도움이 되는지 스스로 생각해보기 [클로저란]- 실행컨텍스트에 대한 지식이 있어야 이해할 수 있음- 자바스크립트에서 함수는 일급객체(매개변수, 리턴값, 변수 대입 등 값처럼 사용가능)라는 것을 기억해야 이해할 수 있음- 일급객체라는 말을 이해하려면 실행컨텍스트 포스팅 볼 것(자바스크립트 엔진이 함수 스코프 정의 시 객체 만들고 프로퍼티 - 값 정의하는 부분)- 자바스크립트 뿐만 아니라 함수를 일급 객체로 취급하는 함수형 언어에서 사용되는 중요한 특성- 외부함수와 내부함수와 관련된 것12345678function outer(){ /.. 2017. 4. 11. 이전 1 2 3 4 5 6 다음
