본문 바로가기

javascript57

[자바스크립트] 실행컨텍스트: js 동작원리 [목표]- 실행컨텍스트, VO를 이해하기- 자바스크립트 동작원리를 이해해야 패턴을 왜쓰는지 알 것 같으니깐 이해하기 [실행컨텍스트란]- 실행컨텍스트는 추상적인 개념- 어떻게 자바스크립트 코드가 실행되는지 이해하기위해 알아야하는 개념- 실행컨텍스트는 실행되는 코드의 한 덩어리라 생각하면 됨- 예시(1) 함수가 호출되면 함수의 실행컨텍스트가 생성됨(2) 실질적으로는 함수 내부 정보를 담는 객체가 생성되고, 그 객체에는 함수 정보가 담김(프로퍼티 생성 : 변수명, 함수명 등이 프로퍼티로 생성됨) => 변수에 대한 값 혹은 함수의 실행 부분이 초기화되는 것은 아님 - 호이스팅 부분과 관련되어있음) => 이후 코드가 실행됨 12345678910111213console.log("이것이 global context").. 2017. 4. 8.
[웹 기본개념] 세션 [목표]- 세션과 쿠키의 필요성 인지하기- 쿠키와 세션의 차이를 이해하기- 내가 사용하고 있는 서버언어의 쿠키, 세션 이용방법 찾아보기 [세션이란]- 쿠키보다 안전하고, 조금 더 많은 정보를 저장할 수 있음- 쿠키가 클라이언트 측(웹브라우저)에 이전 통신 정보를 저장하는 것(HTTP 통신은 이전 통신 상태, 정보를 알지못함) : 장바구니, 로그인 정보 등 - 쿠키 보안 이슈 (1) 사용자의 웹브라우저와 서버가 통신하는 과정에서 중요한 정보(로그인시 아이디 비밀번호)가 왔다갔다하는데 중간에 탈취가능성 (2) 클라이언트 컴퓨터 해킹 - 쿠키 정보 탈취 가능성 - 세션 (1) (쿠키 방식 + 서버 측 db에 정보 저장) 혼용(2) 쿠키 방식 - 브라우저 저장(사용자 식별자값만 저장), 실제 값(비밀번호)은 서.. 2017. 4. 5.
[자바스크립트] this 바인딩 [this란]- 자바에서의 this는 객체 자신을 가리킴, 매개변수명과 객체가 가진 멤버변수명이 같을 때 구분하기위한 용도로 사용됨1234567public class Person{ private String name; Person(String name){ this.name = name; //전자는 클래스의 name이고, 후자는 매개변수의 name }}Colored by Color Scriptercs - 자바스크립트의 this는 함수 호출 패턴에 따라 this가 어떤 객체의 this가 될지 정해짐(어디에 바인딩될지 정해짐) [함수호출과 this]1) 함수가 객체의 속성이고, 객체를 통해 함수를 호출할 때 : 객체 각각의 속성을 가리키게됨123456789101112131415var obj1 = { name:.. 2017. 3. 31.
[웹 기본개념] 쿠키 [쿠키]HTTP는 상태가 없음 : 끝난 HTTP 통신(이전)의 상태를 알 수 없음(예시 : 로그인 했는지 안했는지 정보)넷스케이프에서 쿠키(이전 통신정보 기억하기)를 만듬로그인 정보 기억, 쇼핑 장바구니 목록 등을 가져올 수 있음 웹서버에 보낸, 받은 정보를 웹브라우저가 가지고 있다가 서버에 요청시(Request) 이전 상태값(쿠키)을 전송함웹브라우저가 가진 쿠키 보기 : 개발자도구 > 페이지.html 도큐먼트 파일 > Request Headers > Cookie -서버로 전송할 값 서버가 받고 보내는 쿠기 : 개발자도구 > 페이지.html 도큐먼트 파일 > Response Headers > Set-Cookie - 웹브라우저로 전송할 값 쿠키 유효 범위 밖유저가 요청하는 주소값(사이트 주소)이 달라질 경.. 2017. 3. 28.
[웹 기본개념] URL / URI / REST API [URL]프로토콜 : http, https, ftp 등호스트네임 : 도메인 or ip (서버컴퓨터의 이름 - 위치)URL path : 서버컴퓨터(호스트)에서 클라이언트가 요청한 파일 디렉토리쿼리 : 추가적인 질문사항 [URI]Identifier : 식별자, 자원 식별자, id값(index)차이 : URL은 서버컴퓨터에서 클라이언트가 요청한 파일의 디렉토리를 나타낸다면, URI는 자원의 고유 식별자(id값)를 나타냄URI가 URL을 포함하는 개념예시 : http://clooo.loooooo.net/lectures/114 - lecture(db 테이블 네임)라는 db에 저장된 자원의 114번째 자원 [REST API]서버에 리퀘스트할 때 자원의 id와 자원에 대한 처리(HTTP METHOD)를 포함하여 리퀘.. 2017. 3. 24.
[자바스크립트] scope [scope란]- 변수의 범위를 말함- 전역변수 / 지역변수로 구분됨 [자바스크립트 scope 특징]- 자바스크립트 만의 변수 범위가 있음- 자바스크립트는 c-family 언어(block-level scope : 코드블럭( { .... } )내에서 유효함)와 다른 스코프를 가지고 있음12345678int getSum(int a, int b) { int sum = a + b; /* sum은 해당 코드 블럭 내에서만 유효함 (굳이 sum은 필요없지만 보여주기위해) */ return sum;}Colored by Color Scriptercs - 자바스크립트는 function-level scope임 => 코드 블럭과는 상관없이, function(함수) 내 정의된 변수는 함수 내에서만 사용가능함 1234567va.. 2017. 3. 21.
[웹 기본개념] HTTP 통신 [HTTP란] - 하이퍼텍스트 트랜스퍼 프로토콜(HyperText Transfer Protocol)- 컴퓨터(클라이언트)와 컴퓨터(서버)간의 통신 : 엄격한 규약이 있음- 웹브라우저(클라이언트)와 웹서버(서버) 간의 통신규약- 웹브라우저와 웹서버가 서로 데이터를 주고받을 때 사용하는 규약들- 도메인 + 자원위치(URL), 도메인 + 자원의 식별자(URI) 를 통해서 요청을 하고, 서버가 요청에 따른 (.html 문서)응답을 해줌- 예시 : https://opentutorials.org/course/2136/12063 - opentutorials.org(서버컴퓨터 ip 도메인네임) 서버컴퓨터의 course 폴더에 있는 자료(문서)를 요청함 -> 그에 대한 응답을 함 [HTTP 통신 정보보기] - 크롬 ->.. 2017. 3. 21.
[자바스크립트] 프로토타입 [프로토타입]- 자바스크립트 객체지향 방식- 자바스크립트의 모든객체는 부모역할을 하는 객체와 연결되어있음 => 클래스 기반 객체지향처럼 부모 역할 객체의 프로퍼티, 메서드를 상속개념(프로토타입체인)과 같이 받아올 수 있음 => 이러한 부모역할 객체를 프로토타입(Prototype)이라함 => 부모역할 객체가 function이라면 prototype 속성이 있는데 이 프로퍼티에 공통 프로퍼티, 메서드를 정의함 => 부모역할 객체가 객체리터럴로 생성된 객체라면 리터럴에 공통프로퍼티, 메서드를 정의함 [prototype과 __proto__ 속성 차이](콘솔이미지 : function을 가지고 객체 생성하고 __proto__속성 리뷰)1) function 객체에서 new를 통해 객체를 생성하였음2) new를 통해 생.. 2017. 3. 18.
[자바스크립트] 함수는 무엇이다 [함수란]1) 일반적 기능- 특정 작업에 필요한 일련의 구문들을 그룹화하기위한 개념- 동일 작업을 필요할 때마다 불러오기위해 필요한 개념 : 코드 재사용 2) 자바스크립트 기능- 객체생성 : 생성자함수(http://jinbroing.tistory.com/54 : 생성자함수 검색)=> 정보은닉(데이터), 함수 생성, 모듈화- 함수도 객체(first-class object, 일급객체)이기때문에 변수나 객체, 배열에 저장될 수 있고, 다른 함수의 파라미터, 반환값으로 사용될 수 있음 [함수정의]1) 함수선언식 : function 키워드로 선언함- 함수명 : 함수명 생략 불가, 함수명으로 재귀적 호출(자신 호출), 디버거가 해당함수를 구분할 수 있는 식별자 역할- 파라미터(매개변수) : 함수가 호출될 시 필요한.. 2017. 3. 15.
[자바스크립트] 객체 #2 [객체지향]- 공통의 속성, 동작을 지니고 있지만 각기 존재마다 본인만의 특징이 있음, 이를 구현하기위한 방법- 인간의 표현방법과 똑같이 만듬 : 주어(S)가 (무엇을) 한다(V) - 객체.메소드 : 객체가 동작한다(메소드) - 이를 지향하는 프로그래밍 언어를 지칭하여 객체지향 프로그래밍 언어라 함- 객체지향에는 두가지 방법이 있음 : 객체를 지향하는 것은 맞지만 각기 다른 방법에 의해 객체를 구현함 [두 객체지향의 차이]1) 클래스 기반 객체지향 : 주로 c-family 언어(c++, java 등)- 객체 설계도인 클래스를 만듬 : 공통 속성, 동작(메소드), 공통 속성에 대한 값을 초기화하기위한 생성자 메서드를 가지고 있음- 클래스(설계도)에 맞춰 객체(new)를 생성함- 생성자 메서드에서 각 공통의.. 2017. 3. 14.