프로그래밍 심화 주차 - <1>

오늘의 삽질

1. Node.js 설치

• [node.js 문법 종합반] 강의를 보며 안내받은 대로 Node.js를 터미널에 명령어를 입력하는 방식으로 설치를 해보았다.
  => 왠지모르게 node 명령어를 쳐도 없는 명령어라 뜨길래 검색해봄

1. 시스템 환경변수 편집 설정

   • 환경변수에서 시스템 변수 Path에 nodejs가 연결되어있지 않으면 그렇다하여 연결을 해보려 했으나..
     설치한 경로를 터미널 명령어로 통해 설치했기에 몰랐음
     => 바로 파일형으로 설치함 (파일형으로 하니까 환경변수 알아서 설정해줌)

2. npm -v 명령어 오류

   • 터미널에 npm(Node Package Manager)의 버전을 보기위한 명령어를 입력해도

   npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.

   • 이 경고밖에 안나와서 검색해보니 그냥 파일을 지우면 된다해서 지워봄
     => 해결

3. 한글포함 폴더 경로 실행 불가

   • folder 이름을 알기 쉽게 한글로 만든 후 안에 js파일을 넣어서 그 이름대로 node (js파일이름) 을 입력해도 아무런 반응이 없음(console.log()가 파일 내부에 있었음에도)
     => 혹시몰라 폴더경로를 영어로 바꾸니 바로 실행됨

개선점 분석

• 오늘은 강의 시청이 주를 이뤘고, 강의 과제만 제출함
  => 이렇게 [강의 위주 학습]이 주로 이룰때는 지식/정보들을 미리 정리해가며 시청하는게 좋아보임

지식창고

• 기존에 알고있던 지식들이 아닌 기억해두면 좋을 새로운 정보 위주로 작성함

[JS 문법 종합반] 강의

유용한 문법들

• 삼항 연산자 (간략화된 if문)

// 삼항 연산자
// (조건) ? 조건이 true일 때 값 : false 일 떄 값 
let age = 20;
let message = (age >= 18) ? "성인입니다." : "미성년자입니다.";
console.log(message);   // "성인입니다."

• 조건부 실행 (&& 연산자)

// 조건부 실행
// (조건) && 조건이 true일 때 실행
let x = 10;
(x > 0) && console.log("x는 양수입니다.");

• 삼항 연산자와 단축 평가 (|| 연산자)

// 단축 평가
// 변수 x의 값이 없을땐 10을 출력하며 있을 경우 x를 출력
let x;
let y = x || 10;
console.log(y);   // 10

• for in 문 객체의 프로퍼티 접근해서 반복해주는 구문

let person = { name: "John", age: 30, gender: "male" };
for (let key in person) {
  console.log(key + ": " + person[key]);
  // 예상 출력 값 key = name / person[key] = John ...(name ~ gender)
}

• 전개 구문
  배열이나 객체를 구조분해 해주는 구문 […배열/객체]

// 배열
let arr = [1,2,3]; 
let newArr = [...arr, 4]; // [...arr] 출력값 => 1 2 3 
console.log(newArr) // [1,2,3,4]

// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}
user2.name = "nbc2" // 구조분해 할당으로 원본 객체를 수정하지 않음
console.log(user.name) // nbc
console.log(user2.name) // nbc2

• Map() 객체 상위호환 / Set() 배열 상위호환 데이터의 구성, 검색 및 사용을 객체/배열 보다 효율적으로 처리하기 위해 나온 자료구조

// Map 생성 및 활용
const myMap = new Map();
myMap.set('key', 'value'); // set()으로 key/value 추가 key 값도 무엇이든 될 수 있음
console.log(myMap.get('key')); // get()를 이용하여 값 가져오기

for (const key of myMap.keys()){}
// key 값들을 이용한 for of 반복문
for (const value of myMap.values()){}
// value 값들을 이용한 for of 반복문
for (const entry of myMap.entries()){}
// [key : value] 값들을 이용한 for of 반복문

// set 생성 및 사용
const mySet = new Set();
mySet.add('value1'); // add()로 value 추가
mySet.has('value1'); // has()를 이용해 값 검색

for (const value of mySet.values()){}
// value 값들을 이용한 for of 반복문

실행 컨텍스트

실행 컨텍스트는 실행할 코드에 제공할 ‘환경 정보’를 모아둔 것으로 크게 3가지로 나뉘어 구분할 수 있다.
(환경 정보는 간단하게 설명하자면 스코프(변수의 범위)를 구분해주는 것이다.)

• VariableEnvironment(변수 환경) [VE]

  • VE 와 LE의 차이는 첫 설정이후의 가변여부다. (어디서 불러왔는지 따라 달라지는 것이 [LE]이다.)

  • VE와 LE는 구성적으로 같다. (아래 LE 구성정보와 동일)

• LexicalEnvironment(사전적 환경) [LE]

  1. environmentRecord(환경 기록)(+ Hoisting)

     • 현재 Context(문맥)와 관련된 코드의 식별자(함수/변수명들) 정보들이 저장됨

     • Hoisting(끌어올리기)
       식별자 정보를 저장하면서 라는 말답게 정의될 변수/함수들을 구문들의 위로 올려서 적용한 듯한 효과를 나타냄

      //예시 구문
      function a () {
        console.log(b);
        var b = 'bbb';
        console.log(b);
        function b() { }
        console.log(b);
      }
      a();
      // 일반적으로 예상되는 출력
      // undifined / bbb / funcition b
     
      //hosting 현상을 표현한 구문
      function a () {
        var b; // 변수 선언부 호이스팅
        function b() { } // 함수 선언(직접 선언)은 내부까지 호이스팅
     
        console.log(b);
        b = 'bbb'; // 변수의 할당부는 원래 자리에
     
        console.log(b);
        console.log(b);
      }
      a();
      // hoisting 현상으로 인한 실제 출력
      // fucntion b / bbb / bbb 
     

  2. outerEnvironmentReference(외부 참고)

     • 현재 Context(문맥)의 상위 객체에서 저장된 환경 기록을 불러온다

ThisBinding

this는 호출을 ‘누가했는지’에 따라 다른 값을 반환하게 된다.

• 전역 공간(최상위 공간)에서의 this 는 전역 객체를 가리킨다

• 함수의 경우 this는 어디있든 전역 객체를 가리킨다(e.g. function())

• 메서드(객체에 연결된 함수)의 경우 this는 상위 객체를 가리키게 된다 (e.g. obj.method())
  (단, 메서드의 내부에서도 호출되는 “함수”가 될경우 전역 객체를 가리키게된다..)

• 함수 중 예외로 화살표 함수는(ThisBinding을 무시하여) 함수가 포함된 현 객체를 반환한다.

• 자주 이용되는 ThisBinding 우회 방법

//1. bind 메서드 사용
var func = function (a, b, c, d) {
 console.log(this, a, b, c, d);
};
func(1, 2, 3, 4); // this 출력 시 전역 객체 

// 함수에 this 값을 미리 적용 => { x: 1}
var bindFunc1 = func.bind({ x: 1 });.
bindFunc1(5, 6, 7, 8); // { x: 1 } 5 6 7 8

// 부분 적용 함수 구현
var bindFunc2 = func.bind({ x: 1 }, 4, 5); // 매개변수의 (a, b)에 4와 5를 미리 적용
bindFunc2(6, 7); // { x: 1 } 4 5 6 7
bindFunc2(8, 9); // { x: 1 } 4 5 8 9

//2. 화살표 함수 사용
var obj = {
 outer: function () {
  console.log(this);
  var innerFunc = () => {
   console.log(this);
  };
  innerFunc(); // 화살표 함수가 outer 내부에서 호출되었다.
 };
};
obj.outer();
// 이 경우 화살표 함수의 this는 함수가 호출된 객체인 outer를 반환한다. 

---