본문 바로가기

분류 전체보기173

[자바스크립트] 함수 호이스팅 [목표]- 자바스크립트 내부 동작 잘 이해하기 : 코드를 복붙하더라도 알고 써야지! [호이스팅이란]- 선언문이 최상위에서 처리되는 것을 호이스팅이라 함- 글로벌 영역(전역)으로 선언되어있는 변수, 함수 선언문들을 먼저 수집하여 전역객체(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.
[node.js] express, 웹어플리케이션 정적인파일 관리하기 [목표]- express 복습 : express란 무엇인가? 어떤 역할을 하는가?- express를 가지고 어떻게 웹어플리케이션을 만들어가는가 알아가기 [정적인파일이란]- 입력받은 값에 따라 연산 결과값이 바뀌는 것처럼 동적인 것이 아닌 정적인 것- html, img, css, js 파일 등 어플리케이션을 구성하는 파일들- 정해진 디렉토리에 위와 같은 파일을 넣어두고 사용함 [웹어플리케이션 정적인파일 관리하기]1) 앞선 포스팅에서 만든 app.js 와 같은 디렉토리에 public 디렉토리 만들기 : mkdir public- 정적인파일을 넣어두는 디렉토리명을 관습적으로 public 이라함 2) public 디렉토리에 임의로 img 파일을 넣어둠- aws 클라우드 서버를 사용 중 public 디렉토리에 임의.. 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.
[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.
[웹 기본개념] 브라우저 동작원리 [목표]- 브라우저가 어떻게 동작을 하는지 알아보기- 내부 동작을 알아봄으로서 속도 개선을 위해 무엇이 필요한지 알아보기- 동작 매커니즘을 아는 것이 프로젝트를 짤 때 이해도가 더 깊어지는 것을 알기- 리액트 필요성 느끼기 : DOM에 대해 공부하면서, html 문서 파싱 단계를 보면서 [브라우저 기본 구성요소 및 각각의 역할](1) 유저인터페이스 : 사용자가 기능을 쉽게 이용할 수 있도록 만든 UI 요소들(주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등)(2) 브라우저 엔진 : 유저인터페이스와 랜더링 엔진 사이의 동작을 제어함(3) 랜더링 엔진- 요청한 콘텐츠를 표시할 수 있도록 하는 역할, 사용자가 HTML 파일을 요청하면 HTML과 CSS를 파싱(응답 파일)하여 화면에 표시해줌- 크롬은 각 탭마다 .. 2017. 4. 13.
[node.js] 비동기 프로그래밍 [목표]- 동기 프로그래밍과 비동기 프로그래밍의 차이점을 알자- 비동기 프로그래밍은 어떤 때에 사용하는 것이 좋은지 찾아보고 생각해보자- nodejs는 비동기프로그래밍 하기가 쉬움을 느끼자- nodejs api 문서를 보면서 api 사용하는 것에 익숙해지자- 콜백함수란 무엇이고, 콜백함수 지옥 맛보기- 앞으로 nodejs를 공부함에 있어서 어떤 것을 공부해야할지 생각해보기 [비동기프로그래밍이란]- 영어로는 Asynchronous - 집안 일(빨래, 설거지, 청소)을 할 때 빨래 다하고 설거지 다하고 청소 하는 것, 순서대로 완료시키고 다음 넘어가는 것은 동기적인 것- 빨래, 설거지, 청소 업체를 불러 동시에 처리하는 것, 하나가 완료됨과 상관없이 동시에 일을 처리하는 것을 비동기적인 것이라 함- 일 처리.. 2017. 4. 12.

티스토리툴바