고리타분한 개발자

Javascript Syntax Basic구문 (Statement)프로그램(스크립트)은 컴퓨터(Client-side Javascript의 경우, 엄밀히 말하면 웹 브라우저)에 의해 단계별로 수행될 명령들의 집합이다.각각의 명령을 statement(구문)이라 하며 statement가 실행되면 무슨 일인가가 일어나게 된다.구문은 값(Value), 연산자(Operator), 표현식(Expression), 키워드(Keyword), 주석(Comment)으로 구성되면 세미콜론(;)으로 끝나야 한다. var x = 5; var y = 6; var z = x + y; console.log(z); // 11구문은 코드 블록(code block, {...})으로 그룹화할 수 있다. 그룹화의 목적은 함께 실행되어져야 하는 ..

브라우저 동작 원리구글의 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임 환경인 Node.js의 등장으로 Javascript는 웹 브라우저를 벗어나 서버 사이드 어플리케이션 개발에서도 사용되는 Full stack 개발 언어가 되었다. 하지만 Javascript가 가장 많이 사용되는 분야는 역시 웹 브라우저 환경에서 동작하는 웹 페이지/애플리케이션이다.대부분의 프로그래밍 언어는 운영체제(Operating System, OS) 위에서 실행되지만 웹 애플리케이션의 Javascript는 브라우저의 틀 안에서 HTML, CSS와 함께 실행된다. 따라서 Javascript는 브라우저 환경을 고려할 때 보다 효율적 프로그래밍이 가능하다.브라우저의 주요 기능은 사용자가 참조하고자 하는 ..

Hello WorldJavascript는 interactive한 웹페이지 작성을 가능하게 한다. 예를 들면, 이벤트(e.g. 버튼 클릭, 웹페이지 로딩 완료 등)에 반응하여 HTML 요소에 접근하고 HTML 요소를 조작할 수 있다. 정적인 HTML을 동적으로 변경할 수 있는 유일한 방법은 Javascript를 사용하는 것이다.사용자에 의해 버튼이 클릭되면 정적 HTML을 조작하는 간단한 Javascript 예제를 만들어 보자.DOCTYPE html> Hello World button { color: red; } click me! var heading = document.getElementById('heading'); var myButton = document.getElementById('my-btn');..

HistoryJavascript는 1995년 Brendan Eich(Netscape)이 Navigator 2를 위하여 웹페이지에 포함되는 스크립트 언어로서 개발되었으며 LiveScript로 명명되었다. 이후 Microsoft는 IE 3.0에서 동작하는 JScript를 만들었고 Netscape는 Ecma International에 JavaScript의 표준화를 요청하였다.1997년 7월 ECMA-262라 불리는 명세가 완성되었고 상표권의 문제로 Javascript는 ECMAScript로 명명되었다. 이후 1999년 ECMAScript 3(ES 3)이 공개되었고 10년만인 2009년 출시된 ECMAScript 5(ES 5)는 HTML5와 함께 출현한 표준안이다.2015년 ECMAScript 6(ES 6)가 ..

IntroductionJavascript는 HTML, CSS와 함께 웹을 구성하는 요소중 하나로 웹브라우저에서 동작하는 유일한 언어이다. 1995년 브렌던 아이크(Brendan Eich)가 Netscape Navigator 2를 위하여 개발한 웹페이지에 포함되는 스크립트 언어이다.초창기 Javascript는 웹페이지 제작에 있어서 보조적인 기능을 수행하기 위해 한정적인 용도로 주로 사용되었다. 이 시기에 대부분 로직은 주로 웹서버에서 실행되었고 브라우저(클라이언트)는 서버로부터 전달받은 HTML과 CSS를 렌더링하는 수준이었다. 하지만 웹이 더욱 발전하면서 과거 웹서버에서 수행되던 많은 역할들이 클라이언트로 이동하였는데 이것은 자바스크립트의 발전 덕분이다. 특히 jQuery의 등장으로 다소 번거롭고 논란..

쿠키HTTP는 상태가 없음: 끝난 HTTP통신(이전)의 상태를 알 수 없음(예시: 로그인 했는지 안했는지에 대한 정보)넷스케이프에서 쿠키(이전 통신정보 기억하기)를 만듬로그인 정보 기억, 쇼핑 장바구니 목록 등을 가져올 수 있음웹서버에 보낸, 받은 정보를 웹브라우져가 가지고 있다가 서버에 요청시(Request) 이전 상태값(쿠기)을 전송함웹브라우져가 가진 쿠기: 개발자도구 > 페이지.html 도큐먼트 파일 > Request Headers > Cookie - 서버로 전송할 값서버가 받고 보내는 쿠기: 개발자도구 > 페이지.html 도큐먼트 파일 > Response Headers > Set-Cookie - 웹브라우져로 전송할 값쿠키 유효범위 밖유저가 요청하는 주소값(사이트 주소)이 달라질 경우(라우트 설정과..

URL프로토콜: http, https, ftp 등호스트네임: 도메인, ip(서버컴퓨터의 이름 - 위치)URL path: 서버컴퓨터(호스트)에서 클라이언트가 요청한 파일 디렉토리쿼리: 추가 요청사항URIIdentifier: 식별자, 자원 식별자, id값(index)URL과 다른점: URL은 서버컴퓨터에서 클라이언트가 요청한 파일의 디렉토리를 나타낸다면, URI는 자원의 고유 식별자(id값)을 나타냄URI는 URL을 포함하는 개념예시: http://kohlee.com/lectures/404 - lectures(db 테이블네임)라는 db에 저장된 자원의 404번째 자원REST API서버에 요청시 자원의 id와 자원에 대한 처리(HTTP METHOD)를 포함하여 요청 되도록 하는것(URI)을 말함고유 자원에 대..

HTTP HyperText Transfer Protocol컴퓨터(클라이언트)와 컴퓨터(서버)간의 통신규약웹브라우져(클라이언트)와 웹서버(서버)간의 통신규약웹브라우져와 웹서버가 서로 데이터를 주고 받을 때 사용하는 규약클라이언트가 도메인 + 자원위치(URL) 또는 도메인 + 자원식별자(URI)를 통해 요청하면 서버는 해당하는 자료를 전달해줌 HTTP 정보확인 크롬 -> 검사 -> 네트워크Request Header (웹브라우져가 웹서버에 요청할 때 작성한 것)Response Header (웹서버가 작성해서 웹브라우져에 응답할 때 작성한 것)Request Header유저가 서버에 요청(request)한 정보가 담겨있음User-Agent: 웹브라우져, 어떤 웹브라우져인지에 대한 정보가 담겨져 있음, 정보에 따라..

Javascript는 '{}' 블럭이 배배 꼬여 있어도 문법적으로는 잘 처리하지만, Block Scope는 지원하지 않는다. 그래서, Javascript에서는 항상 함수 스코프를 사용한다. function monkey() { // Scope for (var i = 0; i < 10; i++) { // Scope가 아님 // count } console.log(i); // 10} 그리고, Javascript에는 Namespace 개념이 없기 때문에 모든 값이 하나의 전역 스코프에 정의된다. 변수를 참조할 때마다 Javascript는 해당 변수를 찾을 때까지 상위 방향으로 스코프를 탐색한다. 변수 탐색을 하다가 전역 스코프에서도 찾지 못하면 ReferenceError를 발생시킨다. 전역 변수 문제 // sc..

Javascript의 생성자는 다른 언어들과는 다르게 new 키워드로 호출되는 함수가 생성자가 됩니다. 생성자로 호출된 함수의 this 객체는 새로 생성된 객체를 가리키고, 새로 만든 객체의 prototype에는 생성자의 prototype이 할당됩니다. 그리고, 생성자에 명시적인 return 구문이 없으면 this가 가리키는 객체를 반환합니다. function Person(name) { this.name = name;} Person.prototype.logName = function() { console.log(this.name);}; var sean = new Person(); 위 코드는 Person을 생성자로 호출하고 새로 정의된 객체의 prototype을 Person.prototype으로 설정합니다..