1.Symbol 이란?

1997년 자바스크립트의 ECAMScript로 처음 표준화된 이래로 자바스크립트에는 6개의 타입 즉 String,Number,boolean,undefined,null,Object가 있었다.

심볼은(symbol)은 es6에서 새롭게 추가된 7번째 타입으로 변경이 불가능한 원시타입이다. 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용된다.

객체의 프로퍼티 키로 사용할 수 있는 값은 빈 문자열을 포함한 모든 문자열 또는 심볼값이다.

2.Symbol의 생성

##2.1. Symbol 함수

심볼 값은 Symbol 함수를 호출하여 생성한다. 다른 원시 값은, 즉 문자열,숫자,불리언 ,undefined,null은 타입의 값은 리터럴 표기법을 통해 값을 생성할 수 있지만 심볼값은 심볼을 함수를 호출해야 생성해야한다. 이때 생성된 심볼 값은 노출 되지 않으며 다른 값과 절대 중복 되지 않는 유일무이한 값이다.

1
2
3
4
5
6

//Symbol 함수를 호출하여 유일무이한 심볼값을 생성한다.
const mySymbol = Symbol();

//심볼 값은 노출되지 않는다.
console.log(mySymbol) // Symbol();
console.log(typeof mySymbol) //symbol

언뜻 보면 생성자 함수로 객체를 생성하는 것 처럼 보이지만 Symbol함수는 String, number, Boolean 생성자 함수와는 달리 new 연산자를 사용하지 않는다. new연산자와 함께 생성자 함수 또는 클래스를 호출하면 객체 (인스턴스)가 생성되지만 심볼 값은 변경이 불가능한 원시 값 이다.

1

new Symbol();  //TypeError: Symbol is not a constructor

1.제네레이터

es6에서 도입된 제너레이터 함수는 이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 이터러블을 구현 할 수 있다. 또한 제너레이터 함수는 비동기 처리에 유용하게 사용된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//이터레이션 ㅍ,로토콜을 구현하여 무한 이터러블을 생성하는 함수
const createInfinittbyIteration = function (){
  let i =0;//자유 변수
  return {
    [Symbol.iterator](){return this;},
    next(){
      return {value:++i};
    }
  };
};
for(const n of createInfinitbyIteration()){
  if(n>5)break;
  console.log(n)//1 2 3 4 5
};

//무한 이터러블을 생성하는 제너레이터 함수
function* createInfinittbyIteration(){
  let i =0;
  while(true){yield ++i;}
}
for(const n of createInfinittbyIteration()){
  if(n>5) break;
  console.log(n) // 1 2 3 4 5
}

제너레이터 함수는 일반 함수와는 다른 독특한 동작을 한다. 제너레이터 함수는 일반 함수와 같이 함수의 코드 블로그을 한번에 실행하지 않고 함수 코드 블록의 실행을 일시 중단했다가 필요한 시점에 재시작 할 수 있는 특수한 함수이다.

1
2
3
4
5
6
7
8
9
10
11
12

function* counter(){
  console.log('첫번째 호출');
  yield 1;								//첫번째 호출시에 이 지점까지 실행된다.
  console.log('두 번째 호출');
  yield 2;								//두번째 호출 시에 이 지점까지 실행된다.
  console.log('세번째 호출')// 세번째 호출 시에 이 지점까지 실행한다
}
const generatorObj = counter();

console.log(generatorObj.next());//첫번째 호출 {value:1,done:false}
console.log(generatorObj.next());//두번째 호출 {value:2,done:false};
console.log(generatorObj.next());//세번째 호출 {value:undefined,done:true};

일반 함수를 호출하면 return 문으로 반환값을 리턴하지만 제너레이터 함수를 호출하면 제너레이터를 반환한다. 이 제너레이터는 이터러블이면서 동시에 이터레이터인 객체이다. 다시 말해 제너레이터 함수가 생성한 제너레이터는 Symbol.iterator메소드를 소유한 이터러블이다. 그리고 제너레이터는 next()메소드를 소유하며 next메소드를 호출하면 value,done 프로퍼티를 갖는 이터레이터 객체를 반환하는 이터레이터이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//제너레이터 함수 정의
function* counter(){
  for(const v of [1,2,3])yield v;
  //=>yield* [1,2,3];
}
//제너레이터 함수를 호출하면 제너레이터를 반환한다.
let generatorObj = counter();

//제너레이터는 이터러블이다.

console.log(Symbol.iterator in generatorObj) //true;

for(const i int generatorObj){
  console.log(i)// 1 2 3 
}

generatorObj = counter();

//제너레이터는 이터레이터이다.
console.log('next' in generatoroBJ)	//true;

console.log(generatorObj.next()) //{value:1,done:false};
console.log(generatorObj.next()) //{value:2,done:false};
console.log(generatorObj.next()) //{value:3,done:false};
console.log(generatorObj.next()) //{value:undefined,done:true};

2.제너레이터 함수의 정의

제너레이터 함수는 function* 키워드로 선언을 한다. 그리고 하나 이상의 yield문을 포함한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

//제너레이터 함수 선언문
function* genDecFunc(){
  yield 1;
}
let generatorObj = genDecFunc();

//제너레이터 함수 표현식
const genExpFunc = function* (){
  yield 1;
}

//제너레이터 메소드 
const obj ={
  *generatorObjMethod(){
    yield 1;
  }
}
generatorObj = obj.generatorObjMethod();

//제너레이터 클래스 메소드
class MyClass{
  *generatorClsMethod(){
    yield 1;
  }
}
const myClass = new MyClass();
generatorObj = myClass.generatorClsMethod();

1. Set

Set 객체는 중복되지 않는 유일한 값들의 집합(set)이다. Set 객체는 배열과 유사하지만 아래와 같은 점에서 차이가 있다.

이러한 Set 객체의 특성은 수학적 집합의 특성과 일치한다. Set은 수학적 집합을 구현하기 위한 자료 구조이다. Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다.

1.1. Set 객체의 생성

Set 객체는 Set 생성자 함수로 생성한다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다.

1
2

const set = new Set();
console.log(set); // Set(0) {}

Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다.

1
2
3
4
5

const set1 = new Set([1, 2, 3, 3]);
console.log(set1); // Set(3) {1, 2, 3}

const set2 = new Set('hello');
console.log(set2); // Set(4) {"h", "e", "l", "o"}

중복을 허용하지 않는 Set 객체의 특성을 활용하여 배열에서 중복된 요소를 제거할 수 있다.

스코프

식별자(변수)가 유효한 범위,식별자와 깊은 관련,함수와 관련
어떨때 유효하고 어떨때 유효하지 않은가?
함수는 스코프를 만든다.(var키워드로 선언한 경우)

var 키워드는 함수의 코드블록만을 코드 블록으로 인정하는 함수레벨 스코프를 따른다. var 키워드는 함수가 스코프를 만든다.

중첩함수-스코프도 중첩이 된다.(어떤 우선순위를 가지는 가?을 아는 것이 중요)
스코프는 간단하게 말하면 자바스크립트엔진이 식별자를 찾는 규칙이다.

1
2

var a=1;
//선언하고 할당할때 a라는 식별자를 찾는다.

즉 스코프는 식별자에 존재한다. 프로퍼티는 prototype체인에 존재한다.

스코프의 생명주기
함수에 매개변수가 업ㄱ다면 외부와 단절이 된다. 하지만 매개변수는 없는 것이 가장 좋다.->외부에 의존하기 때문에

함수는 재사용을 한다. 변수를 왜쓰는가?-어떤 상태를 유지해야할때 사용한다.
변수를 공용으로 쓸때는(전역변수와 관련하여)? 고정되어 변하지 않는 값ㅇ르 가지는 경우에 사용한다.
상수는 재할당을 금지시킨다. 따라서 전역변수는 상수개념이 아니면 사용하지 않는것이 좋다.

1.순수함수-1언제나 동일 한 반환값(return x+y)
x(2,3)=5

2.비순수함수 -외부함수에 영향을 받음

1.CSR(클라이언트 사이드 렌더링)

-1.Server Sending Response to Browser
-2.Browser Downloads JS
-3.Browser executes React
-4.Page Now Viewable and Interatable

서버에서 비어있는 html와 js파일들을 받아오고 , 데이터는 서비스에 필요한 리소스를 다운로드한후 브라우저에서 렌더링한다.그렇기 때문에 초기 View을 보기가지 SSR보다 시간이 더 걸린다. 하지만 사용자에게 보여진 view의 기능은 동시에 동작한다.

2.SSR(서버사이드 렌더링)

-1.Server Sending Ready tobe redered HTML Response to Browser
-2.Browser Renders the page,Now Viewable,andBrowser Downloads JS
-3.Browser execute React
-4.Page Now interatable

서버에서 렌더링해 가져오기 때문에 ,첫 로딩 매우 짧다.
그러나 클라이언트가 js파일을 모두 다운로드하고 적용하기전가지는 각각의 기능은 동작하지않는다는 단점이 있다

3.SPA(Single page application)

서버로 부터 처음에만 페이지를 받아오고 이후에는 동적으로 페이지를 구성해서 새로운 페이지를 받아오지않는 웹 애플리케이션을 의미한다.
페이지가 한번 로딩된 이후 데이터를 수정하거나 조회할때. 페이지가 새로고침이 되지않고 다른 페이지로 넘어가지 않습니다.

4.MPA(Multi Page Application)

서버로 부터 완전한 페이지를 받아오고 이후에 데이터를 수정하거나 조회할때 다른 완전한 페이지로 이동합니다.단 URL이 바뀔수있습니다.

var person,$elem,_name,first_name,val1;

,쉼표는 연산자다.
자바스크립트는 대소문자를 구분한다.

var FRISTNAME:식별자의 이름을 대문자로 쓰면 개발자들사이에서 ‘상수’라는 것을 암묵적으로 약속한다.

변수는 값의 이름을 나타낼수 있는 의미가 중요하다.
주석은 가급적 많이 사용하지 않는것이 좋다-오히려 주석이 이해를 방해/그만큼 네이밍이 중요하다.

카멜케이스- var fristName변수,함수 기본적으로 사용
파스칼케이스-var FirstName생성자함수,클래스
스테이크케이스-var first_name;
헝가리언 케이스-var strFirstName;
var $elem=$(‘.myClass’);

var a=10+20; 10.+,20은 각각이 토큰이다.

+는 산술 연산자,
식(표현식:10+20)=> 값(value)으로 30;
식이 값이 되려면 자바스크립트 엔진이 식을 평가(evaluation)한다.
var a=10+20;(전체를 문:statement)

데이터 타입(7가지-숫자,문자열,불리언,undefined,null,symbol,객체 혹은 참조)

-데이터 타입이 필요하다->할당할때 변수에 확보해야하는 메모리 공간을 확보할 수있다.

1.키워드:

명령어(뒤에 값을 준다.)
자바스크립트에게 내리는 명령.
변수선언하려면 반드시 키워드 사용(var/let,const)

2.식별자(변수이름):

고유한이름/일종의 카드키와 같다.
식별자(변수이름)-메모리에 있는 값을 구별해서 끄집에 낼 수 있는 값
./어떤 값을 구별하여 식별해 낼 수 있는고유한 이름.

또한 식별자는 메모리 주소를 알고있다.

변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 저장된다.
네이밍 규칙-예약어x/특수문자 _ $가능 숫자 처음 에 안나옴.

3.변수와 선언:

변수-데이터를 다룬다. 하나의 값을 저장할 수있는 메모리 공간에 붙은 이름 혹은 메모리 자체를 의미한다.

변수를 사용하려면 반드시 선언을 해줘야한다.

변수의 선언-
변수를 생성한다. 변수란 컴퓨터의 메모리 와 관련있다.
자바스크립크엔진에 변수이름 등록,값 저장을 위한 메모리 공간을 확보하기위함.

변수-값을 다룬다.(데이터를 다룬다.)

참조-변수에 저장된 값을 읽어들이는것을 참조라한다.

함수/객체 (변수를 모르면 못함)

10(리터럴)+(연산자)20(리터럴):좌변과 우변의 값 +연산자를 메모리에 저장한다.

메모리셀:1byte짜리 방이 존재한다.1byte단위로 저장
메모리주소:각각 셀마다 주소가있다.
인간에게 유의미한 데이터는 최소 1byte이상

숫자를 기억하여 메모리에 저장한다. 연산을 cpu에서 한다. cpu에서 연산 한 후 이를 메모리에 저장을 한다.
메모리에 저장되는 모든 값은 2진수이다.

1+2 안 쓴다표현식(unuse-expression)? 쓴다는 의미? 메모리 어딘가에 저장함.(10과20) 30이라는 값을 더한이유는 이 값을 ‘사용하겠다’는 의미이다.곧 재사용을 할 수없다는 것이다. 값이 메모리에 저장이 됐지만 주소를 알아야 접근할 수있는데,
위치 안알려줌(잘못 저장하면 문제가 생김)/알려준다고해도 문제가 됨.(같은 곳에 저장될 보장이없다.임의의 공간에 저장이 되기때문이다.) 저장된 데이터를 재사용하기 위해서 프로그래밍 언어는 변수를 제공한다.

따라서 변수는 데이터가 저장되는 곳의 메모리 주소를 기억한다.(반드시 변수에는 하나의 값만 저장할 수 있다.)

변수란 하나의 값을 저장할 수 있는 메모리공간에 붙인 이름 또는 메모리공간 자체를 말한다.

여기서 값이란(하나의값)? 메모리에 들어가는 대상.컴퓨터가 인식할 수있는 값의 종류. 7가지 (숫자 문자열 불리언 undefined null symbol 객체-값의 유형)

자바스크립트의 특징 - 웹브라우저에서 동작하는 유일한 언어/고속으로 동작하는(웹 브라우저로 돌리는 게임) 어플리케이션에선 불리함

기계어 프로그래밍 언어(어셈블리언어)-만국공용어->어셈블리어 cpu종류마다 실행파일이 다름.그에따라 실질적인 언어 사용

웹 어셈블리어(보통 게임에서 사용) c#,c++뭐로코딩하든 중간으로 떨려서 브라우저를 돌리자.

대부분의 언어 객체지향-> 클래스로함(클래스 기반 객체지향언어)
자바스크립트는-프로토 타입기반의 객체지향

c(절차지향)/java(객체지향)/javascript(멀티 패러다임,객체 절차(명령),함수형 언어)

자바스크립트의 함수는 값이다.(값이란 서로 주고받을 수 있는 특성을 의미한다.why:함수형 프로그래밍을 가능하게 하기 위해)

자바스크립트엔진-자바스크립트를 실행할 수있는 환경

인터프리터-컴파일러가 결합해서 처리속도느린것을 해결-but토끼굴

명령어-절차지향형,함수,프로토타입기반 객체지향 (프로토 타입기반 객체기반을 중심으로 공부를 한다.)-멀티 프로그래밍/객체기반 언어-클래스기반(c#,java).

처음에 학원에 들어오게 되었을때,학원의 광고에 이끌려 이제는 쉽게 개발자로서 나의 커리어를 시작할 도약이 되겠구나 생각했다.하지만 처음에 수업을 듣고 난 후, 나의 생각은 정말 오만하고 생각이 없었다는것을 느꼈다.이세상에 쉬운것은 절대 없었다. 내가 알고있던것은 정말 일부에 지나지 않았다. 처음 수업을 들은 후 나는 굉장히 충격과 좌절을 느꼈다. 수업을 따라가는 것 조차 너무나도 버거웠다. 굉장히 불안하고 힘들었다. 내가 그나마 할 수있는 것은 학원 매니져님을 붙잡고 하나하나 질문하는것 뿐이었다. 그래서 첫 수업이 끝난 후 나는 학원 문을 닫을 때 까지 학원을 떠나지 못했다. 집에 가는 중에도 계속생각했다.내가 잘 할 수 있을까?하는 생각을 끊임없이했다.
처음에는 어떻게 공부해야 할 지도 너무 막막했다.이게 맞는지 저게 맞는지..몇일 동안을 수업이 끝나고 집으로 돌아가는 내내 기분이 안좋았다. 심지어 학원을 환불받아야하나 하는 생각도 했다.하지만 나에게는 포기했을때 선택할 수 있는 다른 선택지가 없다고 느꼈다. 나에게 프론트엔드 개발자의 길은 너무도 멀리있어서 보이지도 않는 하나의 점처럼 느껴졌다.
하지만 조금씩 수업을 듣고 공부를 하면서 조금씩 나아진다는 것을 느꼈다.주말에도 공부를 하고 하다보니까 수업을 듣는것도 이해하는 것도 조금은 수월해 졌다.
내가 항상 걱정했던것은 다른사람들은 잘하는데 나만 제일 못하는 것같고 도퇴되면 어쩌지 하는 두려움이었다. 그러다 문득 느낀것이 다른사람들과 나는 출발점이 달랐던 것이었다.컴퓨터 관련 전공자,현업에서 뛰던 경험이 있는 사람들, 비 전공에 혼자서만 공부를 했던 나와는 출발점이 달랐다.그렇기에 다른 사람과 비교하면 차이가 나는것은 당연한 것 이였다.
어느날 인터넷에서 개발자와 관련된 글을 읽다가 한가지 글이 굉장히 인상에 남았다.’개발자의 길은 남들과 비교하는 순간 끝이다’라는 글이었다.
남들과 비교를 하면서 스스로의 성취에 무뎠었다. 앞으로 나는 나에게만 집중해야겠다 생각했다. 그리고 다른 출발점을 따라 잡기 위해서 더 많은 노력을 할 것이다. 비록 지금은 더디고 느리지만, 나보다 앞선 사람들을 훨씬 추월하고 싶다.그리고 작은 성취를 느끼며 조금씩 조금씩 나아갈 것이다.작은 성취 하나하나가 나를 앞으로 나가게 하는 원동력이 된다. 처음 느꼈던 좌절을 발판삼아 앞으로 나아갈 것이다.앞으로 좌절 보다는 도전하고 극복하겠다.
지켜봐라.