본문 바로가기

전체 글

 (686)
"오후에 내 사무실 좀 들를 수 있어요?" 영어로 표현해 봅시다 오늘 알아볼 표현은, 약간은 디테일한 뉘앙스 차이와 관련된 표현입니다. 몰라도 크게 지장은 없지만, 알아두면 어디 가서 살짝 아는 척 하기 좋은 표현이니 상식 수준에서 알아두셨으면 좋겠습니다. 우리가 흔히 "어딘가에 들르다"라는 표현을 자주 사용하게 됩니다. 만약에 여러분이, 다음과 같은 문장을 영어로 표현하게 된다고 했을 때, 어떻게 표현하시겠나요? "이따 오후에 내 사무실에 들를 수 있나요?"  아마 많은 분들이 어렵지 않게 번역(?)해내셨을 거라 생각합니다. 그리고 80% 이상의 확률로...[visit]을 사용하셨을 것 같습니다. 대략 이런 문장이 만들어졌을 겁니다. "Can you visit my office this afternoon?" 약간의 표현 차이는 있겠지만, 대체로 동사 [visit]..
11. Javascript 실행 컨텍스트(4) - 스코프 체인 1 스코프 체인 앞서 살펴본 실행 컨텍스트의 변수 객체 생성 과정을 기억하신다면, 변수 객체의 요소 중 하나였던 [[scope]]를 기억하실 것입니다. 우선 스코프 체인은 Javascript에서 선언된 변수들을 사용 범위(유효 범위)를 나타내는 단위이자 흐름입니다. 즉, 함수와 중괄호( { } ) 블록 내에서 사용된 변수가 어디에서 선언되었는지, 어디서 선언된 변수인지를 확인하기 위한 구조를 의미하게 됩니다. 우리가 배웠던 프로토타입 체이닝과 비슷한 개념이죠. Javascript가 일반적인 OOP 프로그래밍 언어와 다른 부분은 여기에 있습니다. 통상적으로 C나 JAVA 등의 언어에서 변수의 사용 범위는, 해당 변수가 선언된 블록에 한정됩니다. 즉, 어떤 중괄호 블록에서 선언된 변수는 해당 블록이 끝나는 순간..
11. Javascript 실행 컨텍스트(3) - 코드 실행과 함수 호이스팅 자, 앞에서 예제 코드의 실행 컨텍스트 생성 과정을 하나씩 살펴보았습니다. 이제 이 코드가 실행되는 구체적인 프로세스를 확인해 보겠습니다. function execute(param1, param2){ var a = 1; var b = 2; function func(){ return a + b; } return param1 + param2 + func(); } execute(3, 4); 위의 코드 실행을 통해, 실행 컨텍스트의 변수 객체가 생성이 완료되면 아래 그림과 같은 구조를 형성하게 됩니다. 이미 설명했던 내용이지만, 현 단계에서 초기화는 이루어지지 않은 상태입니다. 이렇게 변수 객체가 만들어지고 나서, 본격적으로 표현식의 실행이 시작됩니다. 변수 객체의 생성 과정에서는 변수 a, b의 존재만 선언되..
11. Javascript 실행 컨텍스트(2) - 실행 컨텍스트 생성 프로세스 이제 하나의 함수를 선언하고, 그 함수가 실행되는 과정과 함께 실행 컨텍스트가 형성되고 어떤 정보가 처리되는지를 살펴보도록 하겠습니다. 아래와 같은 코드를 통해 함수를 선언하고 실행한다고 가정해 보겠습니다. function execute(param1, param2){ var a = 1; var b = 2; function func(){ return a + b; } return param1 + param2 + func(); } execute(3, 4); (1) 변수 객체(활성 객체)의 생성 함수의 실행과 함께, 하나의 실행 컨텍스트가 형성되고 이 컨텍스트 안에는 여러 가지 실행 정보를 담는 변수 객체를 만들게 됩니다. 이 변수 객체에 매개변수, 변수, 객체 등이 저장되고 이 변수 객체에서 새로운 실행 컨텍..
11. Javascript 실행 컨텍스트(1) - 실행 컨텍스트의 개념 실행 컨텍스트의 개념 Javascript에서의 실행 컨텍스트 개념은 저도 공부하면서 상당히 추상적인 개념이라 학습하기 어려웠습니다. 다만, C#이나 JAVA 등의 일반적인 OOP 기반 언어들과의 근본적인 차이를 불러오는 개념이기 때문에, 어렵지만 잘 이해해야 하는 개념이기도 합니다. 아마 가장 큰 차이점은 변수의 가용 범위를 결정하는 프로세스가 될 것입니다. 특히 명시적으로 클래스와 이에 따른 상속 개념을 기반으로 가용 범위가 정해지는 언어와 범위를 결정짓는 방법이 다르기 때문에 기존 언어를 사용하는데 익숙하신 분들이라면 오히려 Javascript가 어렵게 다가올 것입니다. 우선, 실행 컨텍스트는 [실행할 수 있는 자바스크립트 코드를 구분하는 추상적인 개념이고, 코드가 실행되는 환경]이라고 볼 수 있습니..
"플레이스테이션5는 쿠팡에서 80만원 정도 해" 영어로 표현해 봅시다 어떠한 물건이나 서비스의 가격을 표현할 일이 종종 있습니다. 사실 이는 상황에 따라 천차만별로 다른 표현을 사용하기도 하고, 반대로 심플하게 "It's $100."와 같이 간단하게 표현할 수 있는 내용입니다. 굳이 이런 표현을 따로 배워야 할 필요성이 있을까? 싶기도 합니다. 하지만 일상생활에서 가격을 얘기할 때 항상 비슷한 뉘앙스로 이야기를 하지는 않습니다. 오늘 아티클에서 살펴볼 표현은 어떤 상황에서 가격을 이야기하는 것일까요? 칼로 무 자르듯이 특정한 상황에 대입할 내용은 아니지만, 한 번 다음과 같은 표현을 하게 됐다고 생각해 봅시다. "플레이스테이션5는 쿠팡에서 80만원 정도 해." 어떠신가요? 여러분이라면 이 표현을 어떻게 하실건지 떠오르시나요? 분명 어려운 표현은 아닌 것 같은데 깊이 생각하..
10. Javascript 프로토타입 체이닝 (7) - 쓰기를 할 때의 프로토타입 체이닝 프로토타입 체이닝의 여러 특성에 대해서 알아보았는데, 마지막으로 하나 더 특징을 알아보도록 하겠습니다. 바로 '프로토타입 체이닝은 (프로퍼티)읽기 / (메서드)실행 시에만 발생한다'는 점입니다. 이거 갑자기 무슨 소리인지? 생각이 드실 분들도 있겠지만, 의외로 실수가 발생할 수 있는 지점입니다. 풀어서 설명을 하다 보면 오히려 헷갈릴 수 있는 내용이니, 예제를 먼저 살펴보고 나서 설명하겠습니다. // 생성자 함수 function Rapper(rapName) { this.rapName = rapName; } Rapper.prototype.lable = 'AOMG'; var loco = new Rapper('LOCO'); var jayPark = new Rapper('JAY.PARK'); console.lo..
10. Javascript 프로토타입 체이닝 (6) - 디폴트 프로토타입 객체의 변경 함수의 프로토타입 객체를 덮어쓴다고? 앞선 아티클에서 살펴본 내용이지만 다시 언급하자면, 기본 프로토타입 객체는 함수가 생성될 때 같이 생성이 되고, 함수의 prototype 프로퍼티에 연결됩니다(함수.prototype). 그리고 여기에는 constructor 프로퍼티가 존재하고 이는 함수 자신과 연결된다고 했었습니다. 더불어 프로토타입 함수가 포함되지요. 그런데 기본적으로 이러한 구성을 가진 함수의 프로토타입 객체는, 일반 객체로 변경할 수 있다는 특징을 가지고 있습니다. 즉 우리가 위에서 설명한 프로토타입 객체의 구성을 사용자가 정의한 객체로 덮어쓸 수 있다는 것이죠. 그런데, 이런 성질을 어디다 쓸까요? 괜히 애써 배운 객체 구조만 꼬이게 될 것 같은데 말이죠. 이런 프로토타입 객체의 성질은 추후 ..

티스토리툴바