자바스크립트47 [자바스크립트] Ajax 통신 [목표]- 모던웹 구현에 필요한 Ajax 개념알기- Ajax 직접 구현해보는 것 마음먹기 [먼저 보면 좋은 게시글]1) HTTP 프로토콜 자세히 알기 : http://jinbroing.tistory.com/962) 싱글쓰레드 자바스크립트 엔진은 비동기처리를 어떻게 하는가 : http://jinbroing.tistory.com/98 [Ajax란]- 자바스크립트를 이용해서 비동기적으로 브라우저와 서버가 데이터를 주고 받는 방식을 말함- 새로운 언어나 프레임워크, 라이브러리가 아님, 네트워크 통신 방식을 말함- Asynchronous Javascript and XML : 자바스크립트로 비동기 통신을 하고, XML 형식으로 데이터 리턴을 받는다는 뜻- XML 데이터보다 JSON 데이터 포멧을 훨씬 더 많이 사용.. 2017. 4. 22. [자바스크립트] js엔진은 어떻게 동시처리를 하는가? 이벤트루프 [목표]- nodejs가 싱글쓰레드임에도 불구하고 비동기처리를 한다는데 어떻게해? 의문에 답해보자- nodejs가 이벤트루프기반 비동기처리를 한다는데, 이벤트루프가 대체 뭔지 알아보자- 랜더링엔진 구조, 처리방식은 알아봤는데 자바스크립트 엔진은 그냥 지나간 것 같으니 이번 기회에 알아보자 [우선! 자바스크립트 엔진과 브라우저 랜더링엔진은 다르다]- 랜더링엔진은 HTML과 CSS파일을 파싱하여 새로운 트리구조를 만들고 브라우저 화면에 문서를 나타내는(painting) 작업을 함- 자바스크립트 엔진은 js 코드 파일을 해석하고 실행하는 인터프리터(구글의 V8과 같은 엔진) [자바스크립트 엔진 구조]- 대부분의 자바스크립트 엔진은 다음과 같이 세가지 영역으로 나뉨 1) Call Stack- 자바스크립트는 단 .. 2017. 4. 21. [node.js] express 라우팅, CRUD / 쿼리스트링 [목표]- 라우팅이 무엇인지 제대로 이해하기- HTTP 메서드 개념 알아본 것 실제로 써보기- CRUD 구현하기 [먼저 보면 좋은 것들]- HTTP 메서드 + REST API 다가가기 : http://jinbroing.tistory.com/96- CRUD : http://jinbroing.tistory.com/24 [라우팅이란]- 길을 정하는 것- 클라이언트의 요청(request)에 대한 응답(response)를 정하는 것- URL으로 클라이언트가 요청할 때 어떤 응답을 할 것인지 정하는 것- HTTP method(GET, POST, PUT, DELETE) 구분 필요- 라우팅 해주지 않은 URL은 "CANNOT 주소" 페이지가 출력(404페이지 커스텀할 필요O) [HTTP 메서드에 따라 express 라.. 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. [웹기본개념] 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. [node.js] express, 웹서버 구축, 설계, 제작 더 쉽게하자 [목표]- express를 사용하여 nodejs 공식홈페이지에 나와있는 예제코드보다 더 쉽게 웹서버 구축해보자- express를 사용하여 웹서버 내부 설계, 제작을 해보자 [express란]- 웹서버를 쉽게 구축할 수 있게하는 프레임워크- 프레임워크란(1) 어플리케이션을 구현할 때 어플리케이션 구현에 꼭 필요한 부분, 구조를 미리 구현해둔 구조체(2) 루비에는 레일즈(그래서 ruby on rails), php는 라라벨, java는 spring, nodejs는 express를 주로 사용함(3) 공식홈페이지 : http://expressjs.com/ko/ [express 설치](1) mkdir 디렉토리명 : 프로젝트 디렉토리 만들기 (2) npm init : 프로젝트 관리를 보다 쉽게 하기위해 npm 초기 .. 2017. 4. 15. [node.js] 비동기 프로그래밍 [목표]- 동기 프로그래밍과 비동기 프로그래밍의 차이점을 알자- 비동기 프로그래밍은 어떤 때에 사용하는 것이 좋은지 찾아보고 생각해보자- nodejs는 비동기프로그래밍 하기가 쉬움을 느끼자- nodejs api 문서를 보면서 api 사용하는 것에 익숙해지자- 콜백함수란 무엇이고, 콜백함수 지옥 맛보기- 앞으로 nodejs를 공부함에 있어서 어떤 것을 공부해야할지 생각해보기 [비동기프로그래밍이란]- 영어로는 Asynchronous - 집안 일(빨래, 설거지, 청소)을 할 때 빨래 다하고 설거지 다하고 청소 하는 것, 순서대로 완료시키고 다음 넘어가는 것은 동기적인 것- 빨래, 설거지, 청소 업체를 불러 동시에 처리하는 것, 하나가 완료됨과 상관없이 동시에 일을 처리하는 것을 비동기적인 것이라 함- 일 처리.. 2017. 4. 12. 이전 1 2 3 4 5 다음
