어제로 PintOS 과정이 끝나고 오늘부터 나만의 무기 프로젝트를 시작했습니다
5주 동안 4~5명의 사람이 아이디어 회의를 해서 한가지 서비스를 구현해야 합니다
저희 조는 아이디어는 정했지만, 아직 언어나 기술 스택을 정하지 못해서 일단 사용할 가능성이 큰 Java Script를 공부하기로 했습니다
Java Script
자바스크립트(JavaScript, 줄여서 JS)란?
프로그래밍 언어로, HTML 상에서 쓸 수 있는 언어입니다
왜 브라우저는 Javascript만 알아들어요? HTML안에다 파이썬, Java 같은 언어를 써서 주면 안되나요?
불가능한 이야기는 아닙니다. 다만, 이 "역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 응답(response) 데이터로 주게 되어있죠.
Java와 Javascript는 어떤 차이는?
햄과 햄스터 처럼 아무 관련 없습니다.
자바스크립트 기초 문법
변수 선언
1. var
var i; // 선언, "undefined"가 저장됨
var sum = 0; // 선언과 초기화
var i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음
var i=0, sum=10, message=”Hello”; // 선언과 초기화를 동시에 해줄 수 있음
name = "javascript"; // 선언되지 않은 변수는 전역 변수가 됨var문에서 변수에 초기 값을 지정하지 않는다면, 변수는 값이 설정될 때까지 undefined 값을 갖게 됩니다.
함수 유효범위
함수 유효범위는 어떤 함수 안에서 선언된 모든 변수는 그 함수 전체에 걸쳐 유효하다는 의미다. 이는 변수가 미처 선언되기 전에도 유효하다는 뜻이기도 합니다.
Hoisting
자바스크립트 코드는 함수 안에 있는 모든 변수를 함수 맨 꼭대기로 끌어올린 것처럼 동작합니다.
var scope = “global”;
function f() {
console.log(scope); //"undefined"를 출력한다.(global이 아니다)
var scope = “local”;
console.log(scope); //"local"을 출력한다.
}
=> 실제로 실행되는 코드는 이렇다.
function f() {
var scope; //끌어올림(hoisting)이라고 한다.(대신, 정의만 끌어올려진다)
console.log(scope); // "undefined"가 저장되어 있다.
scope = "local"; // 초기화는 끌어올려지지 않는다.
console.log(scope);
}var문은 문제가 많아서 다음에 나올 let으로 대체되어 지금은 사용하지 않지만, 과거에 작성된 코드에 많이 사용됐을 수 있으므로 알아두는 게 좋을 것 같습니다
2. let
let i; // 선언, "undefined"가 저장됨
let sum = 0; // 선언과 초기화
let i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음
let i=0, sum=10, message=”Hello”; // 선언과 초기화를 동시에 해줄 수 있음블록 유효 범위
let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언합니다. 이는 var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점입니다.
프로그램이나 함수의 최상위에서는 let과 var는 서로 다르게 행동합니다.
var는 전역 객체의 프로퍼티를 생성하지만, let은 전역 객체의 속성 값을 생성하지 않습니다.
hoisting되지 않습니다.
변수가 초기화(선언)되기 전에 참조할 경우 ReferenceError가 발생합니다.
3. const
블록 범위의 상수를 선언합니다. (let과 같은 블록 유효범위)
상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.
그래서 처음 선언할 때, 반드시 초기화를 해야합니다.
보통 대문자를 사용해서 선언합니다. (강제는 아니지만 관습!)
const MY_NUM = 7;2. 함수
함수에서는 단지 함수 선언만 상단으로 끌어올려집니다. 함수 표현식은 그렇지 않습니다.
/* 함수 선언 */
foo(); // "bar"
function foo() {
console.log('bar');
}
/* 함수 표현식 */
baz(); // TypeError: baz is not a function
var baz = function() {
console.log('bar2');
};전역변수
전역 변수는 사실 global 객체의 속성(property)입니다. 웹 페이지에서 global 객체는 window 이므로, windows.variable 구문을 통해 전역 변수를 설정하고 접근할 수 있습니다.
전역 변수를 선언하는 것은 전역 객체의 프로퍼티를 정의하는 것입니다.
자바스크립트 전역 변수는 전역 객체의 프로퍼티이고,
지역 변수는 규정된 것은 없지만, 변수를 각 함수 호출(또는 블록)과 연관된 객체의 프로퍼티로 생각해도 됩니다. (선언적 환경 기록)
자바스크립트는 this 키워드로 전역 객체를 참조할 수 있습니다.
전역변수는 프로그램 전체에 걸쳐 유효합니다.
지역변수는 변수가 선언된 함수 전체(또는 블록)에 걸쳐 유효합니다. (그 안에 중첩된 함수 내에서도 유효하다.)
유효범위 체인
자바스크립트의 모든 코드 무더기는 그것과 연관된 유효범위 체인을 가지고 있습니다. 이 유효범위 체인은 해당 코드 무더기의 ‘범위 안’에 있는 변수를 정의하는 객체의 체인, 다시 말해 리스트입니다.
함수(또는 블록)가 정의될 때, 함수는 유효범위 체인을 저장합니다. 함수가 호출될 때, 해당 함수의 지역 변수를 저장하기 위해서 새로운 객체를 하나 생성하고, 해당 객체를 기존에 저장된 유효범위 체인에 추가합니다.
변수 해석
변수 x의 값을 얻어야 할 때, 처음 유효범위 체인에 있는 객체에서 x를 찾기 시작합니다. 만약 이 객체가 x 프로퍼티를 가지고 있다면, 그대로 사용하고, 없다면, 유효범위 체인에 있는 다음 객체에서 x 프로퍼티를 찾습니다.
두 번째 객체가 x 프로퍼티를 가지고 있지 않다면, 또 다음 객체에서 찾습니다. 찾을 때까지 이런 식으로 체인을 탐색합니다. 만약 x가 유효범위 체인 안에 있는 객체의 프로퍼티가 아니라면, x는 유효범위 안에 없기 때문에 ReferenceError가 발생합니다.
개발자 도구
크롬 개발자 도구의 Sources탭에서 중단점을 설정하고, 로드하면, 오른쪽 하단 Scope 창에서 유효범위를 알아볼 수 있다.
오늘은 10시까지 아이디어 회의를 하고 공부를 진행해서 간단하게만 집어봤습니다
내일도 10시부터 6시까지 AWS에서 강의를 해주신다고 해서 그게 끝나고 나서 나머지 공부를 할 거 같습니다
