charonne-k

[charonne-k]

Today I learned 13 Nov 2019

그새 시간이 흘러 ‘오랜만'이 되었습니다. 오늘부터는 자바스크립트의 전역객체부터!!

우리는 지금 전역객체로 들어가기 전에 다시 키워드 별로 복습이 필요합니다.

객체 함수 속성 메소드  이 4가지 키워드가 어떻게 다른지 잘 알아야 헷갈리지 않을 것입니다.

function func( ){

alert(“Bonjour’”);

}

로 func( ) 이라는 함수를 선언한 후,

func( ); 으로 불렀을 때, 아주 올바르게 알림창으로 Bonjour 가 출력됩니다.

그런데 이때, window.func();

로 불러주면 어떻게 될까요? 윈도우를 붙여주기 전과 마찬가지로 똑같이 Hello world 알림창이 실행됩니다.

이때 우리가 짚어야할 것은, func이라는 함수 앞에 온점이 찍히는데, 온점 앞 window 부분을 ‘객체’는 것이고, 그리고 온점뒤에 나오는 부분을 속성이라고 한다. 그런데 그 속성에 소괄호가 붙어있다! 그렇다! 함수이다! 우리는 함수의 속성을 뭐라고 부르기로 했다? 맞다! 메소드라고 부르기로 했다!

그래서 우리는 사실 window.func( )를 바라보고 func( )를 가리켜 window라는 객체의 메소드라고 말합니다! 그렇지만, 우리는 더 길어지는 거를 싫어하기 때문에 window. 라는 ‘전역객체’ 부분을 생략합니다! 그래서 생략해도 ‘암시적으로’ window. 가 표시된 것처럼 내부적으로 마찬가지로 동작되는 것이다.

따라서 우리는 이제 큰 그림에 조금 더 근접했다(?!) 우리가 자바스크립트에서 사용하는 변수와 함수, 전역변수와 전역함수도 모두 사실 window.라는 전역객체의 속성(property)인 것이다!!

이 말이 진짜임을 아래 예제를 통해 확인하자.

var geckchae = { ‘func’: function( ){ alert(‘Bonjour’)}}

window.geckchae.func( ); 를 실행해도 Bonjour 가 실행된다. 따라서 즉 자바스크립트에서는 모든 객체(여기서는 geckchae라는 객체)가 전역객체의 property이다!!!

그렇지만 우리가 알아두어야 할 것은 이 큰그림도 여러 개고 서로 다르다는 것이다. 전역객체의 메소드가 있는 곳도 없는 곳도 있다.(ex 브라우저에서는 alert()메소드 있고 node.js 에서는 없다) 그리고 전역객체의 이름도 다를 수 있다.(웹브라우저에서는 전역객체는 window이지만 node.js에서는 이름이 global이다)

[charonne-k]

Today I learned Nov 7 2019

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px '.Apple SD Gothic NeoI'} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; min-height: 14.0px} span.s1 {font: 12.0px '.Apple SD Gothic NeoI'} span.s2 {font: 12.0px 'Helvetica Neue'}

생성자와 new !

자바스크립트는 어떻게 객체지향이라는 패러다임에 접근하고 있을까? 자-크는 아주 독특하게도 자신만의 스타일을 갖고 있다. Prototype-based Programming 이라고 분류된다. 이고잉피셜: 알면 알 수록 어렵지만 규제에 대해 유연하다. 

서로 연관되어 있는 변수, 메소드를 하나의 객체���는 껍데기에 넣는다. 그리고 다른 껍데기에는 연관되지 않은 애들을 모아놓았다. 그래서 객체는 독립성을 갖게 된다. 그래서 좋은 부품의 로직을 만드는 것이 우리 객체지향의 궁극적 목표이다!

그러면 객체를 만들자. 이미 배웠듯이 우리는 대괄호를 사용해서 object 를 만든다. 이 object 라는 그릇에 우리가 변수를(키를 달고) 담그려면 내객체이름.속성이름 을 통해서 집어 넣으면 된다. 이때 속성에 담긴 키가 함수라면 우리는 그 키, 그 함수를 메소드method 라고 한다. 

그런데 우리가 객체를 한 개만 만들어서 사용할 것이 아닌데, 객체를 여러개 만들고 나니 각 개체 안에 토씨 하나 다르지 않은 내용의 메소드가 들어있다면? 그때는 어떠한가? 우리가 사실 객체화를 한다고 할 때 서로 연관되지 않게끔 구분지어 그루핑한다고 했는데, 위와 같은 경우에는 ‘중복'을 발생시키며 그루핑한 결과가 되지 않는가? 중복이 발생했다는 것은, 우리가 극히 꺼려야 하고 조심해야 하는 부분이다. 우선 코드가 가독성이 떨어지고 코드내용이 많아지고, 오류 및 수정 시에 중복된 전체를 다 손대야 한다. 그럼 이런 중복이 발생하지 않으려면 어떡할까?

자, 맞다, 우리가 자-크를 함수형 언어라고도 한다. 객체지향언어 이전에 함수형 언어기 때문에 함수라는 단위/역할이 가지는 위엄이 자-크에서 매우 크다. 그래서 자-크에서 함수는 단순히 재사용 가능한 로직들을 그루핑한 덩어리로만 볼 것이 아니라, ‘객체 창조자’라는 역할을 유심히 봐야한다. 

 예시

 function Human( ){ } 

var h0 = Human(); 

우리가 휴먼이라는 함수를 호출했을 때 대괄호 안에 아무것도 없어서 아무것도 리턴하고 있지 않기 때문에 우리가 h0 에 담긴 값을 확인할 때 undefined 로 출력되는 것이다. 다시 말해서 휴먼이라는 함수 내용을 채워주고 return 값을 지정해줬다면 우리는 h0을 불렀을 때 undefined가 아닌 특정 값을 보여줬으리렸다!

그런데, 

우리가 똑같이 var h1 = new Human(); 이라고 선언하고 부르면  Human { } 이 출력된다. 이건 비어있는 객체라는 뜻이다. 우리는 좀 전에 var h1 을 선언할 때 new 를 붙여서 함수 하나를 선언했는데, 이때 new 가 붙은 함수 Human() 은 기존에 붙지 않았었던 애들과는 성격이 매우 다른 것이다. 우리가 new 를 붙여서 선언할 때 그 맥락에서 우리는 Human( ) 함수를 생성자 constructor 라고 부른다!! 즉, 생성자는 객체를 만드는 역할을 하는 함수이다!! 선언시 new 땜시 비어있는 객체를 반환해서 h1 에 넣었기에 h1에는 비어있는 객체가 만들어진거답.. 지금 단계에서는 var h1 = { } 과 같다고 할 수 있다. 

기존에 java 같은 언어에서는 클래스 안에 생성자가 존재했다. 생성자를 호출함을 통해서 클래스의 객체를 만들어냈었다. 근데 우리 자-크에서는 생성자는 그냥 어디에도 속하지 않는 그냥 함수이다. 그리고 클래스라는 게 존재하지 않는다!

좋아, 그러면 우리는 이 생성자 new 붙인 함수를 어떻게 사용할 수 있을까? 내가 원하는 객체의 모양이 머리에 들어있는데 이걸 때마다 일일이 적지 않고 ‘틀’처럼 불러 쓰고 싶을 때 사용하면 되겠다! 

이고잉님의 예제를 ‘모양’에 주목해서 보자.

function Person(){}

var p1 = new Person();

p1.name = 'egoing';

p1.introduce = function(){

    return 'My name is '+this.name; 

}

document.write(p1.introduce()+"<br />");

  var p2 = new Person();

p2.name = 'leezche';

p2.introduce = function(){

    return 'My name is '+this.name; 

}

document.write(p2.introduce());

vs

function Person(name){

    this.name = name;

    this.introduce = function(){

        return 'My name is '+this.name; 

    }   

}

var p1 = new Person('egoing');

document.write(p1.introduce()+"<br />");

  var p2 = new Person('leezche');

document.write(p2.introduce());

첫번째 예시는 우리가 객체를 하나 생성했는데 같은 모양을 가진 다른 객체를 또 하나 생성함에도 우리는 그냥 줄줄이 코드를 써줬다.  반면에 두번째 예시에서는 내가 원하는 모양을 구체적으로 채워주고, 그 모양 즉,일종의 그 모양틀을 그대로 불러다가 p1 p2 객체를 각각 생성해주었다. 이게 가능한 이유는 애초에 안에 담기는 값은(현재 name 이라는 매개변수에 담길 인자) 다르더라도 원하는 모양이 둘이 서로 일치하기 때문이다. 그래서 하나 Person(name)이란 함수를 만들어놓고, 그 함수 모양을 조각해놓은 다음, p1 에는 ‘egoing’을 입혀주고, p2에는 ‘leezche’를 입혀준 것이답. 

이 개념이 이해가 되었다 ! 추카추카! 근데 우리가 생성자 함수를 직접 만들어서 객체를 생성해낼 때에 문법이 익숙치 않아서 특히 this 로 인한 혼란이 클 거 같다. 그렇지만 반대로 말하면 this 만 정복하면 여러 가지를 다 해낼 수 있다는 것이기 때문에 긍정적으로 생각하기로 한다!!! COOL!!!

[charonne-k]

Today I learned 6 Nov 2019

객체 지향 프로그래밍 렛츠기릿!

이고잉님피셜 객체들은 마치 레고 블럭처럼 조립해서 하나의 프로개름을 만드는 것이 객체지향 프로그래밍이라고 한다. 그러니까 작은 부품들을 모아서 하나의 큰 부품이 되는 모습을 떠올리면 될 것 같다. 

즉 소프트웨어 들의 총집합이라는 ‘막장' 상태에서 우리는 정돈의 필요를 느끼게 되고 이를 위해 그루핑을 하게 되는데 그 하나 하나의 그루핑 된 단위가 객체이고 우리는 그런 객체 중심의 프로그래밍을 하는데 이게 객체 지향 프로그래밍 Object Oriented Programming OOP 이다. 이때 추상적이고 모호하다면 우리는 그루핑을 한 의미를 잃게 된다. 때문에 객체를 만들 때 매우 구체적인 문법과 기능을 언어에서 제공한다.

객체라는 단단한 껍데기 안에 메소드와 변수를 가둬놓는데 이 때 한 껍데기(객체)는 다른 껍데기(객체)와 엄연히 구분이 되니까 서로 다른 껍데기에 갇혀있는 것이다. 

우리는 반영해야할 복잡한 현실을 단순화하여 소프트웨어를 설계를 하는 과정을 ‘추상화'라고 한다. ex 지하철 노선도

우리가 그루핑해놓은 객체들은 사실 다른 곳 혹은 여러 곳에서도 쓰일 수 있다. 즉, 재활용이 가능하다! 그래서 우리는 그루핑하는 작업 즉 객체화 하는 작업은 부품화하는 작업이다! 그래야 나눠진 것들을 또 다른 알맞은 데에 사용될 수 있으니까요!

메소드는 프로그램 안에 여러가지 기능에서 중복적으로 사용되는 걸 하나의 로직으로 별도로 빼서 재활용할 수 있는 특성이 있는데 그 발상이 객체화와 비슷하다. 

즉, ‘연관성'을 기준하여 묶고 분리하는 방향으로 프로그래밍은 나아가고 있다. 그렇게 우리는 재활용이 용이한 객체를 사용하고 있는데, 내가 한 객체를 재활용하려고 할 때 그 객체에 대해 자세히 알아야 하는가? 그래야만 객체를 사용할 수 있는가? 그렇지 않다. 객체의 내부 동작 원리는 숨기되, 사용자는 객체를 사용방법만 알면 사용 하는데 무리가 없다는 장점을 가리켜 ‘은닉화’ ‘캡슐화'라고 한다. 내부 동작원리를 숨기므로 ‘은닉화', 캡슐 안에 내용물은 모르지만 삼켰을 때 캡슐 약의 효과를 볼 수 있단 특성과 나란히 하는 ‘캡슐화’. 말 뜻을 이해하면 이 개념을 더 잘 수용할 수 있다. 

그렇다면 객체는 ‘부품'이라고 볼 수 있다고 했는데, 그럼 그 부품들은 서로 잘 연결되어 완제품을 이루는 데 무리가 없게 해야할 것이다. 또한 한 부품이 고장나도 이와 연결된 타 부품에는 영향을 끼치지 말아야 하며, 고장난 부품은 쉽게 결함없는 부품으로 교체될 수 있어야 겠다. 이를 수월히 가능케 하는 연결점이 ‘인터페이스’이다.  예로 HDMI 케이블을 보자. 이 케이블은 모니터와 컴퓨터를 연결하는 표준 규격을 지닌다. 이 표준 규격에 맞게 컴퓨터 제조업자와 모니터 제조업자는 제품을 설계할 것이다. 그렇게 되면 그 어떤 컴퓨터 그 어떤 모니터의 조합이든지 모두 순조롭게 HDMI라는 표준 규격화된 선을 통해 연결될 것이다. 만약 이러한 표준화된 연결점이 없다면 어떻게 될까? 효용 가치가 하락하므로 부품의 가치도 하락할 것이다. 더불어 인터페이스는 서로 결합되지 않는 관계 ex 모니터와 프린터 에는 절대 결합되지 않도록 애초에 연결 경로를 차단하는 기능도 한다. 

그럼 우리는 지금 하드웨어를 비유로 들어서 소프트웨어를 이해해봤는데, 둘이 비슷하다고 느껴지지만 사실 매우 다르므로 이 예시 때문에 혼동하지 말자! 

이고잉님피셜 : 소프트웨어가 있기 이전부터 하드웨어가 이룩한 성취를 잘 수용하면서 동시에 소프트웨어 다운 소프트웨어를 만드는 것은 우리에게 주워진 숙제라고 할 수 있다.

우리 모두 하드웨어를 수용하는 소프트웨어 정복을 꿈꿔봅시다 화이��!!!

[charonne-k]

Today I learned Nov 5 2019

Argument /= Parameter

인자 /= 매개변수

이 사실만 제대로 잡고 있으면 문제 없다.

자바스크립트는 매개변수의 개수와 인자의 개수가 일치하지 않아도 된다는 유연함이 있음에 놀라웠다. 매개변수를 따로 지정하지 않은 함수에 인자값을 우리 임의의 개수만큼 넣어도 자크는 똑똑하게 잘 처리한다는 것이다. 이 점 때문에 우리는 함수에 인자의 값과 개수가 무엇이 얼만큼 들어올지 모르므로 arguments.length 라는 메소드를 이용한다. 이 메소드로 인자들의 개수를 알 수 있으니 반복문에서의 반복할 횟수를 지정할 때 얼마나 반복해야하는지 알 수 없어서 당혹할 필요가 전혀 없다. 그리고 특별한 것이, 이렇게 원하는 만큼의 인자를 함수에 넣었는데, 그런데 이 인자들은 함수 안에서 그 어느 변수에도 저장되지 않는다..왜냐하면 매개변수를 지정 안 했기 때문에 당연히 인자들은 자신이 어디로 들어가야할지 모른다. 그러나 이때 자크는 arguments[ ] 라는 ‘임의배열’을 생성하여서 인자들의 인덱스 순서대로 담아둔다. 그러므로 사실상 코드 중에서 어디 하나 소위 ‘빵꾸’가 나는 곳이 없다.

갑자기 헷갈릴 때가 온다면 나는 이 예제를 보면서 다시 스스로에게 이해를 시킬 것이다.

function sum(){

   var i, _sum = 0;    

   for(i = 0; i < arguments.length; i++){

       document.write(i+' : '+arguments[i]+'<br />');

       _sum += arguments[i];

   }  

   return _sum;

}

document.write('result : ' + sum(1,2,3,4));

위 예제 코드에 대한 결과로 이렇게 출력된다.

그런데 이 arguments.length 를 통해서는 매개변수가 몇 개 정의되있는지 알 수는 없다. 즉 인자로 들어온 것만 세는 얘다.

그러므로 우리는 함수의 매개변수를 세는 것과 인자를 세는 것을 구별해야한다.

예제

function one(arg1){

console.log(

‘one.length’, one.length, ‘arguments’, arguments.length

);

};

one(‘val1’, ‘val2’);

라는 함수를 실행했을 때에 이 함수는 매개변수로 정의한 게 arg1 1 개 뿐이기 때문에 one.length의 값으로는 1, 그리고 arguments.length로의 값은 ‘val1’, ‘val2’ 두 개의 인자가 들어갔기 때문에 2가 출력된다!!

만약 우리가 이 두 개의 개수가 같기를 원한다면 코드를 짤 때에 이 함수이름.length 와 arguments.length 의 길이가 === 하기를 원한다고 작성하면 되므로 우리는 그에 대한 아주 간단한 해결법을 알게 되었답!! 쿨~

다음은 함수의 호출이다. 함수를 호출하는 방법은 함수를 정의한 후에 내함수( ); 이렇게 소괄호로 부르면 되었다. 그런데 자바스크립트는 또 다른 방법도 제공한다. 바로 .apply 이다!

예제

Function sum(arg1, arg2){

return arg1+arg2;

}

alert(sum.apply(null, [10,20]))

우리가 흔히 사용하는 방법은 alert(sum(10,20)) 일텐데 apply 와 null 과 대괄호가 등장해버렸다!!

apply 를 사용하면 함수가 호출되는 그 시점에서의 함수의 this 값을 프로그래밍적으로 변경해서 마치 이 함수가 객체의 속성인 것처럼 실행되게 할 수 있다. 이게 무슨 말인지는 아직 완전히 수용이 안 된다. 그러네 알 수 있는 건 내함수이름.apply(내객체)를 한다면 내객체에 들어있는 메소드처럼 내함수이름을 사용할 수 있다는 것이다. 좋아.. this 와 null 부분은 좀 더 후에 차차 알게 될 것이답!!

[charonne-k]

Today I learned 3 Nov 2019

어제에 이어서 클로저를 살펴보자. 클로저의 특이점은 외부함수가 종료되었을 때에도 내부함수가 외부함수에 접근할 수 있다는 것이다. 더불어 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다고 한다. 거의 불사신인가 싶다. 흠 클로저를 온전히 이해하는데 에너지가 너무 많이 든다 .. 깨달음이 왔을 때 다시 BRB 하겠다 ㅠㅠ!

강의를 재차 들어보니 클로저가 더 이해가 됐다. 외부함수 안에 객체를 생성하고, 객체 안에서 외부함수의 지역변수 값을 변경할 수 있는 것이다. 외부함수가 호출되고 return 값을 반환한 뒤 종료되면 정말 그 함수는 생을 마감하는 것인데, 그 후에도 그 안의 내부함수의 메소드로 외부함수의 변수에 접근할 수 있단 것이다. 그렇게 된다면 다시 말해서 외부함수 안의 내부함수의 키값을 통해서만, 다른 어느 것도 아닌 외부함수의 변수를 가져다 사용하는 내부 함수의 메소드, 외부함수가 죽은 후에도 접근할 수 있단 것이고 다른 방법은 없다. 따라서 이때 내부함수의 키를 ‘프라이빗 변수’라고 한다. 이 특성을 통해 우리는 사용자들이 외부변수에 접근하려는 통로를 우리가 원하는 형식과 방향으로 만들어 제한 가능하다.

내일 또 더 클로저의 응용 강의를 보며 클로저를 탐구하겠다..

[charonne-k]

Today I learned 2 Nov 2019

ㅂ값으로서의 함수와 콜백 시작해보자

함수는 값이 된다. var a = function( ) { } 를 보면 a라는 변수에 함수가 담겼다.

또, 객체 안에 키에 대한 value값으로 함수도 들어갈 수 있다. 이때 객체 안에 마치 키key값이 변수와 같이 작용한다면 우리는 속성/property 라고 따로 불러준다! 그리고 그 속성에 저장 되어있는 value값이 함수라면 우리는 그 함수를 method 메쏘드 라고 부른다.

그렇다, 이제 자바스크립트는 함수가 값이 될 수 있단 거 꼭 기억해야한다. 이 점을 붙잡고 바라보면, 함수도 값이기 때문에 함수의 인자로 전달될 수 있다! 예제를 보자.

function cal(func, num){ 

return func(num)}

function increase(num){

   return num+1}

function decrease(num){

   return num-1}

이때 cal이라는 함수는 첫번째 인자로 func이란 함수를 전달받는다. 그리고 두번째 인자로 num을 받아서 함수내용 안에 반환값 속 func이라는 함수의 인자로 전달한다. 그러면 밑에 첫번째 alert문을 보자. cal 함수의 첫번째 인자로 increase함수를 전달한다. cal 함수의 두번째 매개변수 num 자리에 1을 인자로 전달받았다. 그러면 이 1은 increase 함수의 return 값 num에 전달되고  +1되어 alert의 결과로 2가 출력된다. decrease도 마찬가지로 보면 된다. 조금 머릿속이 어지럽다.

alert(cal(increase, 1));

alert(cal(decrease, 1));

함수는 또 배열의 값으로도 사용될 수 있다! 예제 그림에서 볼 수 있듯이, 배열(대괄호)의 각 원소가 각각 함수이다. 우리는 for문으로 process라는 배열의 원소를 각각 부른 후 마지막의 input 값을 받아 alert 시킬 것이다. 이 예제를 통해 다시금 for문의 원리에 따른 논리를 되새김할 수 있다. 이렇듯 함수는 변수도 되고 매개변수도 되고 반환값도 된다. 함수는 정말 ‘값'이다. 그래서 이렇게 다기능을 하는 데이터를 우리는 first class object/citizen 이라고 한다! 

자 그럼 콜백! callback을 보자. callback의 개념은 callback 함수를 수신하는 메소드가 메소드의 인자로 callback 함수를 전달받아 내부적으로 호출하는 것을 통해서 메소드(메소드도 사실 속성에 대하여 함수이지?)의 동작방법을 변경한다. 값으로서 함수를 사용할 수 있기 때문에 오리지널 메소드 함수의 동작방법을 함수로 값을 전달함을 통해서 메소드 함수의 동작방법을 변경가능하다! 우리는 이렇게 메소드 함수의 인자로 불림받는 함수를 callback 함수라고 부른다. 

Ajax.. 정신이 없다!!! Ajax 를 이해하기 위해선 좀 책을 읽으며 필요한 개념들을 일련적으로공부해야할 거 같다.

클로저!! closure 를 알아보자. 클로저는 재밌는 개념이다. 자바스크립트는 함수 안에 함수를 또 생성할 수 있다는 것에 대해선 거부감이 없다. 그런데 안쪽함수가 바깥쪽함수를 호출하는 것은 좀 신기하다. 즉, 내부함수에서 외부함수의 지역변수를 접근할 수 있다는 게 = 클로저라는 개념의 핵심이다.

[charonne-k]

Today I learned 31 Oct 2O19

오잉 자바스크립트가 함수형 언어였다고????

자자자 오늘은 유효범위부터 알아보자. 시즌 2 개봉박두!

유효범위는 변수의 수명이다!! 즉 변수가 생성된(선언) 후로부터 그 변수는 언제까지 살아있냐는 것이다. 우리는 어떤 한 함수를 만들어놓고 그 안에서 변수를 선언할 수 있다. 근데 그 변수는 그 함수라는 틀안에서만 살아있는 ‘지역변수 local variables'이다. 만일 그 함수 밖에서 그 변수를 부른다면 그 틀 밖에서 울리는 소리는 들리지 않기 때문에 해당 지역변수는 움직임이 없다. 반면에 함수라는 지정된 틀 밖에서 선언된 변수는 ‘전역변수 global variables'는 어디서나 자신을 부르는 소리가 울리면 얘 귀에는 들린다. 즉, 함수 안에서 전역변수를 사용해도 알맞게 응답한다. 

그렇다면 변수를 선언할 때 우리가 앞에 붙여주는 var 에 대해서 따져보자. 사실 그동안 별 의미가 없다고 생각해서 변수를 선언할 때 var 을 생략하고 변수를 생성했다. 그런데 var 은 사실 ‘지역변수'의 성질을 부여하여서 명확히 변수의 성격을 구별지어주는 역할을 하는 것이었다. 즉 삽화에서 보다시피 우리는 6번째 줄에서 vscope이란 변수를 alert시킬 때에 ‘local’이 출력될지 ‘global’이 출력될지 궁금해졌다. fscope( ) 함수 안에 vscope이 var과 함께하므로 이 변수는 이 함수 안에서만 살아있는 애다. 즉 우리가 alert으로 이 변수를 불렀을 때 fscope 함수 안에 있는 애들은 못 듣는다. 따라서 global 이 출력된다. 

그러나 만일 fscope 함수 안에 vscope이 var없이 변수로 선언된다면 함수라는 틀 안에서 생성되었지만 성질은 전열변수의 성질을 가진다 따라서 우리가 alert(vscope); 하기 이전에 fscope( ) 을 부르고서 alert을 실행하였으므로 fscope 함수 안에 살고 있는 vscope이 재빠르게 불려서 함수 바깥 (현재에서) 최상위에 이미 ‘global’ 로 선언된 vscope이란 변수에 담긴 값을 재빠르게 ‘local’로 변경한다. 따라서 alert으로 vscope을 부를 때는 이미 값이 바뀌어버린 뒤이므로 자연스럽게 local 이 출력된다. 

그렇다면 fscope( ) 안에

var vscope = ‘local’;

vscope = ‘local’; 이라고 두 문장을 연달아 작성한다면?

간단하다. 함수 안에서 선언된 vscope 변수는 이미 var 이 붙여진 지역변수로 선언되었다. 이렇게 생성될 때부터 지역변수의 성질을 부여받고 생선된 변수는 지역 안에서만 살아있는 애다. 때문에, 지역 안에서 또 자신을 부르는 뒷문장으로 인해 vscope 의 값은 재차 ‘local’ 이다. 이후에 fscope ( ) 을 부르고, 그다음 alert(vscope) 을 부른다면 우리가 기대하는 값은? global이다. 왜냐하면 fscope 안에 있는 vscope 변수는 이미 지역변수이므로 생성되었으므로 ‘local’이 ‘happy local’로 바뀌었든 어쨌든 간에 그 fscope이라는 함수 내에서만 자기들끼리 놀고 있는 것이므로 fscope 밖에서 vscope을 불렀을 때에 자신은 듣지 못한다. 따라서 당연히 함수 밖에 있던 전역변수 vscope이 그대로 global 로서 자신을 내보이는 것이다. 여기까지 good!

따라서 우리는 웬만하면 무조건 var을 붙여서 변수를 선언한다는 것이다. 우리는 함수를 하나 어렵게 만들어냈을 때 그 안을 누가 헤집고 다니는 것을 싫어한다. 때문에 그 누구로부터 함수 안에 내용이 뒤죽박죽 되는 것을 사전에 막는 방법이 그 변수들의 생명을 그 함수 안에서만 부여하는 지역변수로 생성하는 것이고 이걸 가능케 해주는 방법은 간단하게도 var 을 변수 이름 앞에 붙여서 변수를 선언하는 것이다! Cool!

그럼 더 체감적으로 지역변수와 전역변수의 성격 차이를 느끼기 위하여 위 삽화를 이해하자! 그렇다 이 반복문은 5회를 반복하는 것이 아닌 0을 무한히 출력할 것이다.. ㅠ

그렇다면 전역변수의 사용을 회피하고 싶다면? 

불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용한다. 즉 우리는 지난 시간 객체를 살펴보았다. 객체를 생성하고 우리는 객체의 이름 뒤에 온점을 찍어서 속성들을 이용했다. ex name.pop( )  이런 방법도 있고, 또 익명함수 형식을 사용하자. 함수를 만들 되, 함수에 이름을 달지 않고 바로 부르는 것도 방법이 될 수 있다. 

논리적으로 걸고 넘어져야하는 구석이라 예리해져야 하는 유효범위! 조금.. 재미있다!

[charonne-k]

Today I learned 30 Oct 2019

자바스크립트의 객체를 알아보자!

객체는 중괄호 안에 들어온다. 

{ ‘apple’:1500 ‘oragne’:1000 ‘kiwi’:800} 객체를 만들었다.

우리는 이 객체에 이름을 정해주어 fruits = { ‘apple’:1500 ‘oragne’:1000 ‘kiwi’:800} 이렇게 fruits 안에 이 중괄호를 넣어주고, fruits를 통해서 이 객체를 제어한다.

물론 객체는 미리 fruits = { } 이렇게 만들어둔 후  fruits[ ‘apple’ ] = 1500

이런식으로 하나씩 중괄호 안으로 넣어주어도 된다. 혹은 fruits = new Object( ) 로 선언하면 fruits는 빈 중괄호 형태로 하나 생선된 거와 마찬가지이다. 

 그래서 fruits = {‘apple’:1500 ‘oragne’:1000 ‘kiwi’:800} 일 때 우리는 각 과일 이름을 key 라고 하며 이 키는 인덱스 기능을 한다. 또 그 각각의 key에 대응하는 값을 value 라고 한다. 예를 들어 ‘apple’ 이라는 key의  value 는 1500인 것이다. 즉 배열에서는 인덱스가 상수여서 정수 숫자로 0번째부터 n번째까지 불렀다면 객체는 각 문자가 인덱스이기 때문에 value 1500 을 부르기 위한 key는 ‘apple’이다.

���미있는 점은 우리가 value 값을 가져오려고 할 때 key 값으로 불러내는 그 방법이 여러가지라는 것이다. 배열이었다면 해당하는 인덱스 숫자로만 가능했을텐데 인덱스가 이제는 문자열로 형식이 바뀌었기 때문에 가능한 소리다. 

즉 fruits.[‘apple’] 은 1500

fruits.apple 은 1500

fruits.[‘ap’+‘ple’] 은 1500

fruits.‘ap’+‘ple’ 은 syntax error 가 발생한다. 이렇게 객체의 속성에 접근하는 방법이 유연하다 그러나 안되는 것은 안 되는 것이니 억지 부리지 말자. 

그럼 이제 객체와 반복문이 만난다면?을 살펴보자.

우선 배열은 순서가 있었다. 근데 객체는,, 순서가 없다! 다만 key와 value가 존재할 뿐.

반갑게도 우리는 for in 문을 사용하면 일일이 불러내는 수고를 덜 수 있다. 

fruits = {‘apple’:1500 ‘oragne’:1000 ‘kiwi’:800} 라는 객체를 생성했을 때

for(key in fruits){

    console.log(fruits[key])

}

를 한다면 우리는 

1500 1000 800 각 key의 각 value 를 차례대로 출력해서 볼 수 있다.

대신에 console.log(key) 를 사용한 각 key를 차례대로 볼 수 있다. 

그렇다면 객체에는 무엇을 넣을 수 있는가?

자료에서 볼 수 있듯이 우리는 grades 라는 객체 하나를 만들었는데, 이 안에는 ‘list’ 라는 또다른 객체가 들어있다. 더불어 ‘show’라는 함수도 들어있다. 이렇게 우리는 객체 안에 들어가는 원소에는 객체, 함수가 포함됨을 알 수 있다. 당연히 grades안에 있는 show 함수를 부를 때는 ( )을 뒤에 붙여서 불러야함을 잊지 말자. 

그렇다면 자-크에서 지원하는 this 라는 기능을 살펴보자

좀 전에 위에서 만든 grades 라는 객체이다. 이 객체 안에는 함수가 존재한다. 이때 우리는 this 라는 우리가 지어낸 변수가 아닌 이미 자-크에서 만들어서 존재하는 용어를 사용하여 이 grades를 되받는다. 정말 this 라는 영어의 지시대명사의 역할을 자-크에서도 똑같이 해준다는 느낌이 든다. 따라서 show() 함수 안에 내용에 for in 문을 살펴보면 this.list 안에 있는 name을 들여다봐서, 그 이름과, 그 이름(key)의 value값을 꺼내 보여드릴게요 라는 반복문 로직을 만들었다. 그리고 반복문 밖에서 grades.show( ) 혹은 grades.[ ‘show’ ] 로 이 grades 안에 있는 show 함수를 불렀다. 그 결과 show 함수 안에 있는 for 문이 실행되었고 결과로 egoing 10  k8805 8 sorialgi 80 세 쌍이 출력되었다. 그리고 짚을 점은 출력할 때 “쌍"으로 불리도록 해준 건 ,쉼표 이다! 앞으로 이 형태에 익숙해지자.

그럼 이제 모듈을 살펴 보자. 

우선 내가 이해한 바로는 모듈화란 뭉텅뭉텅 뭉쳐있는 큰 덩어리를 기능 단위로 작게 작게 소분해서 그 기능을 특수화 시키는 것이다. 즉 우리가 만약 방청소하기 라는 큰 덩어리가 있다면 방쓸기, 방닦기, 방바닥닦기, 방환기시키기 등등 작은 단위들을 묶음화 하여서 방청소라는 큰 덩어리가 된 것이다. 그런데 방바닥닦기라는 작은 기능은 사실 복도바닥닦기에도 똑같이 기능하지 않는가? 이렇게 모듈화를 하면 사용될 수 있는 여러 군데에 다 적용해 사용할 수 있고, 방청소하기를 하다보니 문제가 있었고 이 문제를 해결할 때에 모듈화가 되어있다면 작은 단위 별로 체크해가며 고칠 수 있기 때문에 무턱대지 않고 어디를 손봐야하지? 그리고 어디에 어느 부분이 잘못 된 거지? 쉽게 알아내고 쉽게 그 부분만 수정하면 될 것이다. 따라서 1) 재사용성up 2) 한 부분만 수정하면 이 모듈을 사용하는 다른 애플리케이션에들에서도 자동적으로 수정되므로 일을 두 번하지 않아도 됨. 3) 메모리 낭비 네트워크 트래픽 down 

그럼 모듈이 없을 때의 상황을 보자. 

모듈이 없다면 함수를 만들고 그 내용이 길어질 때에 우리는 그 함수를 이곳 저곳에 사용할 때마다 그 안에 내용까지 끌어다가 쓸 것이다. 그러면 우리는 이미 아는 내용 혹은 알지 않아도 되는 내용까지 계속해서 끌어안고서 사용하는 것이다. 그런데 이때 모듈을 사용해서 파일 하나로 즉 .js 형식으로 묶어내면 우리는 그 파일 이름으로만 불러다가 사용하면 되기 때문에 그 복잡하고 가시성이 떨어지는 함수내용을 때마다 보지 않고 숨겨놔도 되는 것이다. 드는 생각은 C에서 library 기능과 파이썬에서 import 로 파일을 불러다 쓰는 것과 같은 맥락인가 싶다.

그렇게 생각하던 찰나에 라이브러리가 등장했다! 소오름..? 역시 모듈과 라이브러리는 뗄 수 없는 관계인 것이다. 모듈이 부품이라는 관점으로 보았을 때라면 라이브러리는 그 모듈의 알맹이인 로직을 잘 정리해둔(편하게 사용하도록) 집합체라는 것이다. 위에서처럼 참 영어이름을 잘 붙인 것이다. 책이라는 정보들의 집합체의 의미를 지니는 library 를 생각하면 자-크에서 쓰는 용어의 의미도 머리속으로 그려진다. 

자바스크립트는 jQuery 라는 라이브러리가 가장 유명한데 이를 온라인에서 다운로드 받아서 자바스크립트 작성 시에 가져다가 쓰면 되다고 한다. 지금은 jQuery 를 어떻게 활용해야 하는지 사실 감이 안 잡히는데 앞으로 차차 자-크(발음이 불어의 Jacques ;영어의 Jack에 해당 와 비슷해서 너무 재밌음)의 세계를 더욱 손에 잡히는 세계로 만들어 가보자. 그리고 JQuery에서도 API 라는 축약어가 등장하는데... 나는 왜 L’Alphabet phonétique internationals(국제음성기호)이 더 먼저 떠오르는가.. 여기 가나 저기 가나 API 가 반겨주니 몸둘 바를 모르겠다! 아주!

[charonne-k]

Today I learned 29 Oct 2019

함수! function! (fr. fonction) 

함수는 재사용성이 중요하다!

함수의 문법은 예상가능게도 

function 내함수이름( ) {

내가 원하는 문장;

#return

}

이런 형태로 정의하고,

작성된 함수를 호출할 때는 내함수이름(); 이럻게 불러주면 된다.! 변수랑 다르게 소괄호도 이름 뒤에 붙여줘야 된다는 거는 직관적으로 받아들이자. 그럼 우리는 왜 함수라는 기능을 사요하느냐? 귀찮음을 줄여주어 효율을 높여주기 때문이다. 즉 수십 수백 개의 문장을 원하는 기능을 실행해야할 때마다 줄줄이 다 써주지 않고 ‘하나의 로직’을 하나로 묶어서 한 기능으로 정의하고 필요할 때마다 그 기능의 이름으로 원하는 자리로 불러내어 사용가능하다! 따라서 번잡하게 보이는 형태를 콤팩트하게 묶음질 하여 때마다 꺼내쓰면 되는 것이다. 이게 함수이다.

함수이름 뒤에 소괄호 안에는 인자 즉 매개변수가 차례로 들어온다. 이 안에 들어온 값은 함수가 호출될 때 함수의 로직 즉 중괄호 안의 내용으로 전달되는 변수이다. 생략이 가능하다.

더불어 함수는 ‘재사용성' ‘유지보수' ‘가독성' 을 높이는데 일조하며 앞으로 프로그래밍 언어도 이 세 특성에 주목해서 발전하고 있다. 즉 하나의 로직을 하나로 묶어서 사용한다면 로직 내의 변경사항 혹은 변경된 환경에서 쓰일 때에 일일이 손봐야하는 번거로움을 확 낮출 것이다.

함수 = 수의 상자

함수의 입력과 출력

출력: 함수 내에서 return이 등장하면 return 뒤에 값이 그 함수의 출력값으로서 그 함수 밖으로 뱉어내는 값이고 ��으면서 즉 값을 반환하고 그 함수는 종료된다.  그래서 한 함수에 return을 여러번 작성해도 첫번째 return을 만나면 함수는 종료되는데 그 때 return 뒤에 값이 적혀있으면 그 값을 뱉어내고 종료하고 없다면 그냥 종료되고 그 뒤에 나오는 문장들은 전혀 부름을 받지 못하고 작별한다.

입력: 함수에 대해 얘기할 때 우리는 인자와 매개변수를 동일시하여 칭하곤 하는데 엄밀히는 서로 다르다. 매개변수 parameter 는 이름 그대로 함수 내부 즉 중괄호 안에 있는 어떤 변수를 지칭하는 것이고(보이지 않는 끈으로 연결되어 있다고 생각하면 편함), 인자는 해당 함수를 호출할 때에 우리가 ‘이 값'이 함수 정의 시에 매개변수가 있었던 그 소괄호 그 자리로 들어가는 값입니다 라고 특정한 값을 얘기하는 것이다. 이해가 되는가? 즉 매개변수는 좀 더 직책같은 지위 느낌이고, 그 직책을 맡는 당사자의 느낌을 인자라고 보면 된다.

따라서 이렇게 매개변수 자리로 들어온 인자 값은 함수 안에 자기가 가야할 위치로 적절하게 입력되어 함수의 로직을 다 통과하고 상자 밖으로 나왔을 때 return의 값으로 함께 나올 수도 있다. 더불어 삽화에서 볼 수 있듯이 매개변수와 인자는 1개 이상일 수 있다!

더불어 자바스크립트에는 함수를 정의할 수 있는 방법이 여러 개이다.

위에서 정의한 방법을 기본형이라고 본다면, ‘익명함수’, ‘변수에 대입되는 함수’ 라는 방법도 참고로 알아두자.

즉 함수를 따로 정의한 후에 부르는 기본 방법이 아닌 한 문장 안에 정의, 호출을 같이 두어 내가 정의한 함수가 이름이 필요없도록 한다. 즉 (function(매개변수){함수내용})(); 이렇게 함수를 정의하고 바로 (); 기호로 호출하면 우리는 함수를 지칭할 이름이 굳이 필요없게 된다.

더불어 변수에 대입한다는 것은 기본형 처럼 function 내함수이름 ( ) 이 아닌 순서를 달리하여 내함수이름 = function() 으로 해도 된다는 것이다. 그러면 내함수이름이라는 변수가 함수 자체를 갖게 되므로 우리는 다시 내함수이름(); 을 부름으로써 함수를 그대로 사용할 수 있다! cool cool cool!

배열 

python 에서는 배열이란 말을 사용하지 않고 리스트라는 단어를 사용하는데, 우리 자-크에서는 배열이란 용어를 사용한다. 개념은 마찬가지로 여러 데이터를 하나의 변수에 담아서 관리하고 원하는 원소만 골라서 원하는 때에 골라서 사용하는 것이다. 배열을 만들 때는 [ ] 대괄호를 사용한다. 즉 name = [’kim’, ‘park’, ‘lee’] 이렇게 name이라는 변수에 문자열 3개를 원소로 담았다. 그리고 우리는 왼쪽부터 오른쪽으로 각 원소마다 인덱스라는 색인 번호를 0번부터 부여한다. 따라서 ‘kim’은 0 ‘park’은 1 ‘lee’는 2로 불릴 수 있다. 즉, name[1] 을 alert 시키면 kim 이 출력된다. 

만약 우리가 배열이 없는데 값들을 출력 시키고 싶다면, return은 반환값이 한 개뿐이기 때문에 함수를 때마다 불러와 kim을 리턴시키고 또 함수를 불러와 park을 리턴시키고 또 함수를 불러와 lee 를 리턴시킬 것이다. 불필요하게 반복적인 노동이 요구를 배열을 통해 줄일 수 있다. 

배열은 반복문과 함께 쓰이면 시너지 효과를 낸다. for 반복문에 우리가 만약 name의 원소 갯수만큼 내용을 반복하라고 지정했다면? 우리가 각 원소를 출력하라는 문장으로 반복문 하나만을 선언했다면? 반복문 한 개로 윗 일을 단번에 이뤄냈을 것이다. 

for(i = 0; i < 3; i++){

document.write(name[i]);

}

이것이다. 그런데 만약 i < 3 라고 i의 값을 정해주지 말고 배열의 길이만큼 즉 길이! 배열에 들어간 원소의 개수!만큼 반복하라고 하면 배열의 길이가 바뀔때마다 재정의 해주지 않아도 되니 훨씬 우리가 해야할 일이 줄어들 것이다. 

for(i = 0; i < name.length; i++){

document.write(name[i]);

}

이렇게 하면 끝이다! 이 얼마나 우리가 반복작업이 요구하는 노동으로부터 자유해졌는가!

그럼 이제는 만들어진 배열 변수에 원소를 추가해보자!

.push() 는 배열이 갖고 있는 고유한 명령어이다. 

따라서 위에 name 이라는 배열에 name.push(’hong’)을 하면  [’kim’, ‘park’, ‘lee’, ‘hong’] 으로 홍이 배열의 가장 뒤에 추가 된다!! 

그렇다면 하나만 추가하지 말고 한 번에 여러 원소를 추가하고 싶을 때는?

그때는 .concat( ) 명령어를 사용한다. .push( ) 와 다른 점은 concat([ ]) 이렇게 소괄호 안에 대괄호가 들어간다는 것이다. 그래서 배열에 배열을 집어 넣기. name.concat([’hong’,’ cho’]) 그렇지만  [‘kim’, ‘park’, ‘lee’,[ ‘hong’, ‘cho’] ] 이 아니라 대괄호 떼고 들어간다.  name = name.concat([’hong’,’ cho’])은 name =  [‘kim’, ‘park’, ‘lee’, ‘hong’, ‘cho’]  이므로 걱정 없다!  

그리고 계속 가장 끝에(맨 오른쪽)에 원소가 추가되므로 이번엔 왼쪽에 추가하고 싶다면, 명령어 .unshift( ) 를 사용하면 된다. 즉, name.unshift(‘Yoo’) 를 하면 name 이라는 배열에 가장 첫번째 자리 즉 0번 색인자리를 꽤차고 길이를 1 더 늘린다. 

그렇다면 지금까지 맨 앞, 맨 뒤 이렇게 두 가지 방향성만 옵션을 두고 추가했다면, 이제 배열의 원하는 지점에 원소를 추가하고 싶을 때 .splice( ) 명령어를 사용한다.

.splice ( ) 이 소괄호 자리에는 인자로 여러개의 값이 온다. 첫번째로는 삽입하고 싶은 위치의 인덱스를 지정하고, 그 뒤에 그 해당 인덱스 값 포함하여 뒤로 몇 개를 삭제할 것인지 상수개수를 지정하고, 그 다음 어떤 값을 넣을 것인지를 지정한다. 

따라서 name.splice(1, 0, ‘Choi’)를 실행하면 name = [‘kim’, ‘Choi’, ‘park’, ‘lee’] 가 실행한다. 가운데 인자 값으로 0을 지정했으므로 그 어떤 원소도 삭제되지 않았다. 

그렇다면 삭제는 어떻게 할까?

우리가 배열의 가장 앞에 있는 값을 반환시키고 그 값이 삭제 된 배열은 .shift( ) 명령어를 사용하여 만들 수 있다.

또, 배열의 가장 뒤에 있는 값을 반환시키고 그 값이 삭제 된 배열은 .pop( ) 명령어를 사용하면 된다. 

그래서 name.shift( ) 를 하였을 때 ‘kim’ 이 반환 되고 제거된 [‘park’, ‘lee’] 만 남는다. 

그렇다면 name.pop( )를 하였을 때는 ‘lee’ 가 반환 되어 제거된 [’kim’, ‘park’] 만 남는다. 이렇게 원소를 제거하는 방식은 맨 왼쪽 값 혹은 맨 오른쪽 값을 제거하는 두 방식이 있지만 만약 원하는 위치의 값을 제거한다면 아까처럼 splice( ) 를 사용하면 될 것이다. 

[charonne-k]

Today I learned 10 Oct 2019

생활코딩 자바스크립트 반복문 레츠기릿!

영상에서 강사님이 딱 잘라서 조건문과 반복문은 프로그래밍의 양대산맥으로 이 둘을 잘 조합해서 프로그램 하나를 만들어내는 거라고 하셨다. 그렇게 말해주시니까 정말 그런 거 같다. 코드를 짤 때 머리를 쥐어짜내는 이유 1) 배웠던 문법인데 생각이 안 나는데 어디를 열어야 내가 필요한 문법개념이 나오는지 못 찾겠어서 진짜 이유1) 어떻게 조건을 달아야 내가 원하는 만큼 2) 반복문이 돌도록 할 수 있을까 

이것인 것이다. 그래서 기쁜 마음으로 자바스크립트에서의 반복문 문법영상을 시청했다! 나에게 또 다시 큰 영감을 줄 거라 기대하며.

우선 document.write(); 가 처음 소개됐다. 와일문의 중괄호 안에 들어감으로써 와일문의 소괄호값 = 불린값이 참일 때 중괄호가 실행된다. 그리고 실행이 끝나고 다시 와일문의 소괄호를 확인하고 여전히 참이네 그럼 또 실행해야지 하고 또 coding everybody가 출력된다. 그렇다. 와일문의 조건이 거짓 false 가 될 때 이 반복문은 멈추게 되는데 대놓고 while(true) 이라고 적혀있으니 우리가 실행을 (강제로) 종료시키지 않는 이상 얘는 멈출 명분이 하나도 없기 때문에 계속해서 코딩 에브리바디를 실행할 것이다. voilà 무한루프! 이게 바로 loop인것이다. 이 무한루프가 발생하는 경우는 참담한데 왜냐하면 일어나면 안 되는데 일어난 것이기 때문이다. 무한루프가 되지 않도록 반복문의 조건을 잘 정해야할 것이다.(언젠가는 내가 원하는 그 적합한 때에 불린 값이 거짓이 되게 말이다!)

그래서 와일문에 우리가 변화를 준다. 어떻게? 변수 하나를 만들어서 변수의 값이 원래는 0이었는데 얘가 10이 되면 불린값이 false가 되어서 와일문을 빠져나오는 것으로 말이다! 

따라서 변수 i를 0으로 처음에 선언하고 아까 사용한 document.write()를 이용해 코딩 에브리바디와 줄바꿈 기호를 넣고나서 한 문장이 종료된 것을 ; 세미콜론으로 명시했다. 원래 그렇기 때문에 내가 엔터 키를 사용해서 뒷문장과 구별지어도 되나 현재 sublime이 아닌 구글 크롬 개발자도구에서 실행하기에 여기에 더 편한 내 방식으로 쓴 것이다. 

그리고 우리는 뒷문장이 중요한데 코딩에브리바디 문장이 한번 실행되고 뒤어어 i의 값을 1만큼 증가시기큰 문장도 실행됐다. 이런 식으로 i값은 1씩 계속 증가하다가 10이 되는 순간 10은 10보다 작지 않기 때문에 while의 소괄호 안 조건에 대한 불린값이 거짓으로 변함으로써 이 와일문은 더이상 실행되지 못하고 종료되는데 이때 우리는 와일을 빠져나온다고 할 수 있다. 

그래서 중요한 것은 무엇이냐면 1) 와일문의 중괄호가 실행되고난 후에 그 다음으로 내려가는 게 아니라 다시 조건이 여전히 참인지로 묻는 while의 머리로(tête 때뜨) 그래 와일때뜨로 돌아와야한다는 것이다!! 이 점을 염두하면 앞으로 반복문이 여러개가 한꺼번에 나올 때 헷갈리지 않고 로직을 발휘할 것이다! 실행화면에서 코딩에브리바디 옆에서 볼 수 있듯이 우리가 처음에 val i = 0으로 지정했던 변수 i가 점차 증가하고 있다!

두둔! 드디어 포문이 등장했다. 우선 반가운 구석은 C의 for문처럼 자바스크립트가 생겼다는 것이다. voici(보아시 보시오)

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){반복해서 실행될 코드}

이 순서로 구성되어있고 초기화 반복조건은 뒤에 세미콜론이 붙지만 반복이 될 때마다 실행되는 코드 뒤에는 아무것도 붙지 않고 소괄호로 닫는다.

for(var i = 0; i < 10; i++)

{document.write('coding everybody'+i+'<br />');}

이 for 문을 출력해도 위 실행코드처럼 코딩에브리바디가 총 10번 i값은 0에서부터 9까지 출력된다! 훨씬 더 가시적이다.

생활코딩쌤(강사님)이 아주 딱 덜어지는 순서 설명을 해줬다. 단순한 포문은 그냥 그래 이렇게 쓰면 되지 하는데 반복문이 더 복잡해지면 내 머릿속에서 원리를 붙잡고 있어야만 내 머릿속 늪에 빠지지 않고 무사히 logic~ 이라고 외칠 수 있다.. 

초기화 값은 가장 처음 한 번만 해당되고 건드려지지 않는다. 그리고 조건을 확인하고 불린값 참이라면 중괄호 {반복해서 실행될 코드}가 실행된다. 실행이 됐다면 반복이 될 때마다 실행되는 코드가 실행된다. 이 순서이다. 이게 원리이다. 

그렇기 때문에 반복되다가 coding everybody 8이 실행됨 -> i가 9가 됨 -> 9는 10보다 작으니까 참이야 -> coding everybody 9이 실행됨 -> i가 10이 됨 -> 10은 10보다 작지 않으므로 거짓이야. 거짓되면 바로 반복문 탈출. 끝! 

사실 지금 딱 원리를 배울 때는 이해가 완전히 된 거 같지만 실제로 원하는 대로 출력해줄 코드를 내 힘으로 짜보려면 머리가 뒤죽박죽 된다. 그때 우리가 붙들 수 있는 건 이 원리이다! 그리고 나는 python의 for 보다 C의 for가 더 while문스러워서(?) 좋아하기 때문에 자바스크립트에서도 이 문법을 사용한다니 사뭇 기쁘다.

Anyways, 그럼 break 와 continue의 쓰임도 알아보자

이름에서 내포하듯 break는 여기서 그만~ 이란 거고 continue는 계속~ 이란 거다.

continue 는 실행결과에서 보이듯이 coding everybody5 가 출력되지 않았고 나머지 9개 문장이 출력되었다. 

쌤이 알려주셨듯이 i가 5일 때 continue를 만나면 continue가 들어있는 if문을 아래로 내려가서 그 다음 document.write가 실행되는 것이 아니고. 그러나 마치 문제가 없이 실행됐다는 듯이 다시 i가 플러스플러스 되는 것이다. 따라서 i는 6이 되었고 6은 10보다 작기 때문에 그리고 5가 아니기 때문에 coding everybody 6 이 실행됐다. 

break는 말 그대로 ‘여기서 그만~’ 하고 종료되는 것이다. 따라서 if문의 i가 5라면 중괄호 실행하세요. 네, 중괄호 안에는 break가 들어있군요. 그럼 여기서 그만하겠습니다. 쿨하게 뒤 안 ��고 그만두는 것이다. 

알아두면 요긴할 때가 있을 것이라 생각하며 중첩반복문을 보자.

https://youtu.be/tS_kELn3m9U

생활코딩 강좌인데 머리가 또 뒤죽박죽이 될 때에 보고 또 보고 해야할 것 같아 앞으로의 나를 위하여 링크를 복사해둔다!

구글크롬에서 제공하는 디버거 기능을 처음으로 살펴봤다. 디버깅을 하는 걸 누가 좋아하겠냐만은 디버거를 이용해 for 중첩문(이중 포문) 볼 때 어떤 순서 즉 어떤 원리 질서가 기준으로 이뤄지는지 나와있다. 제일 핵심은 바깥 큰 포문이 참일 때 중괄호 내용이 실행되는 거는 기본 질서이고, 또 그 중괄호 안에 안쪽 작은 포문이 자리하는 거니까 안쪽 포문이 실행되어야 하는데 그것도 참이여야 작은 포문의 중괄호가 실행되는 것이다. 그렇게 작은포문이 실행되고 다시 작은포문의 때뜨(head;tête)으로 돌아와 반복조건을 확인하고 그 불린 값이 참인지 보고 또 작은 중괄호가 실행되기를 일차적으로 반복된다. 따라서 작은포문의 때뜨가 false가 될 때에야 탈출하는데 바깥 포문까지 탈출하면 절대 안 되고 이제 다시 큰 포문의 때뜨의 반복조건을 확인하고, 여전히 참이라면 중괄호가 실행되고 중괄호 안의 자리하던 작은포문이 다시 실행될 것인지 작은때뜨를 보는 것이다. 

따라서 작은 포문은 큰 포문에 종속된 것이다..

참, 그리고 재밌었던 것은 상수 i 와 j (i는 보통 큰 포문의 변수 j는 작은 포문의 변수)를 두 자리 정수의 각각의 자리값으로 할 때 i 값에 10을 곱해주고 j를 더해줄 거라 예상했으나(그게 logic이니까; i*10+j) 그냥 i+j로 썼다!!!!! (‘안녕하세요'+i+j+'살 입니다.’)라고 따움표로 된 문자열과 함께 쓰이면 i, j의 type 은 문자열로 취급된다고 한다! 신기방기..

오늘은 여기까지 !!!

[charonne-k]

Today I learned Oct 9 2019

아름다운 한글날! 조건문 공부 레츠기릿!

생활코딩 자바스크립트 조건문 챕터에 5개의 강의 영상이 있다.

영상마다 (내 기준에) 기록해두고 싶은 부분들을 콕콕 집어 여기 옮겨보겠다. 

우선 자바스크립트의 조건문의 기본도 if문이다. 그런데 if 뒤에 소괄호를 적어 조건을 명시하고 조건이 참이라면 명령실행시킬 부분은 중괄호로 묶는다. 

python if 뒤에 : 콜론 붙고 중괄호 대신 들여쓰기를 사용하는데 문법적 차이를 보았다.

더불어 마찬가지로 if 조건이 참일 때만 뒷 문장들이 실행된다. 따라서 조건이 그냥 대놓고 참이라고 명시해주는 true 를 if 소괄호 안에 넣어주면 뒷따라 중괄호로 묶여서 나오는 (물론 단일 문장이라면 줄바꿈 없이 소괄호 뒤에 바로 붙여주고 ;세미콜론 붙여주면 됨) 문장들은 모두 실행된다. 

ex) if(true) {

blah blah

}

반대로 대놓고 거짓이라고 말하는 false를 괄호 안에 넣어주면 소괄호 뒤에 붙는 문장(들)은 실행되지 않는다. 

그럼 else 는 무언가? if 조건이 참이 아니라 if에 딸린 문장이 실행되지 않는다면 그럼 별수없지 하고 실행시키는 문장이다. 그래서 else는 조건이 없다. if가 거짓일 때 남겨진 else가 가 실행되는 것이다.

그렇다 첫번재 문장은 거짓이라 딸린 중괄호가 무시되고(실행 안 되고)

앗 그럼 이 조건은 만족하니? 라고 else if가 물어봤는데 그것도 거짓이라 무시되고

또 밑에 세번째에 else if 가 또 물어봤는데 그것도 거짓이라 무시된다.

if를 이용해 내가 조건들을(else if도 포함) 정했는데 그 누구도 내가 만든 조건들을 만족시키지 못했다면 그랬을 때에 나는 다른 거라도 실행시킬래! 이 마음을 표현해준 게 else 이다.  

따라서 너무 당연하게도 이 코드를 실행했을 때 alert(4)만 실행된다.

자 또 신기한 건 prompt() 이다. 이번에 강좌에서 처음 소개됐다. prompt()를 통해 alert처럼 보여주기만 하는 게 아니라 직접 입력을 받을 수도 있다. 마치 파이썬의 input 문 같다. 

신기한 기능이다! prompt("What’s your name?”) 라고 작성하고 엔터를 누르면 바로 이 창이 뜬다.

그리고 답을 작성하고 확인을 누르면 또 코드 창에 그대로 반영된다. 참 예쁜 기능이다!

더불어 이렇게 if 와 else if 와 else를 쭈르륵 나열하듯 작성하지 않고 중첩을 시켜서 첫 번째 조건 그러니까 우선되는 조건을 만족시키면 두번째 조건문이 실행되도록 할 수 있다. 

코드를 이렇게 작성한다면 아이디를 입력해주세요. 문장과 함께 입력칸이 뜨고 칸에 egoing을 입력해야만 비밀번호를 입력해주세요. 문장과 입력칸이 뜬다. 그리고 111111을 입력해야만 인증 했습니다. 라는 문장이 출력된다! 만약 그 외의 비밀번호를 입력한다면 인증에 실패 했습니다. 라는 문장이 출력되고, 애초에 아이디부터 다른 걸 입력했다면 비밀번호 질문 없이 막바로 인증에 실패 했습니다. 문장이 출력된다. 

Yesss 조건문은 논리싸움이다.

그래서 논리연산자를 알아보자.

if(true && true) 

&& 가 등장했다. && 기호는 자신을 기준으로 좌항과 우항이 모두 참일 때 조건문이 만족되는 논리 연산자다. 따라서 한 쪽이라도 거짓이라면 조건문은 거짓이 되어 중괄호는 실행되지 않을 것이다. 이를 이용하여 위 예시에 적용해보면 

if(id=='egoing' && password=='111111') 가 되는데 어차피 우리가 궁금했던 건 아이디가 egoing인 유저여야 하고 그 유저의 비밀번호가 111111 이어야만 인증을 해주는 조건의 조건문이므로 둘 다 참일 때만 참이라고 해주는 &&를 사용하면 딱 알맞다.

얘보다 유연한 애로는 || or기호가 있다. 얘는 자신을 기준으로 좌항이든 우항이든 한 쪽이라도 참이면 조건문이 참으로 만족된다. 꼭 두 개일 필요는 없으며 나는 텔레토비 구성원이 다 모여야만 행복하다고 말해줄 거야! 라고 우긴다면

pseudo code 보라돌이 && 뚜비 && 나나 && 뽀  

이렇게 2개 이상을 묶어도 된다. 물론 그럴 수록 조건이 만족되기는 더욱 까다로워지겠지만!

더불어 ! 느낌표 기호는 자신의 반대로 바꿔주는 기능을 하는 논리연산자로 참이면 거짓으로 거짓이면 참으로 바뀌게 된다. 

그리고 if (true 대신에 1을 넣어도 되고) if (false 대신에 0을 넣어도 된다!) 자스에서도 1은 참 0은 거짓으로 이해한다.

그럼 조건문은 여기까지!

아름다운 한글날 한글을 사용합시당!!! 하지만 내 키보드에는 한글이 적혀 있지 않고 오로지 나의 뇌가 알아서 한글 자판을 기억해 손가락을 열심히 움직일 뿐...

[charonne-k]

Today I leanred Oct 8 2019

ㅇ오늘 자바스크립트 생활코딩은 줄바꿈 챕터부터 재개했다!

사실 어제 공부한 내용과 겹치는 부분이다. 세미 콜론 ; 을 이용해 문장을 구분짓는 것인데 엔터 키로 줄을 바꿔도 똑똑한 자바스크립트는 이해한다. 그런데 강사님이 강조하셨듯이 <<가독성>>이 중요하기 때문에 줄을 바꾸는 것을 세미콜론으로 하는 것이 좋고 더불어 Tab 키를 사용해 들여쓰기(4칸의 띄어쓰기)를 함으로써 가독성을 높이는 게 좋다. 깨알같이 들여쓰기를 해주고 싶은 문장들이 여러 개라면 드래그해서 탭 키를 한 번만 눌러져면 단번에 됨을 이알았다.. 왜 그 동안 마우스와 방향키로 문장마다 맨 앞에 커서를 갖다 대어서 들여쓰기 했는가!!

뒤이어서 비교 챕터를 보면,

우선 연산자가 나온다. 변수 시간에 보았던 = 이 등호 기호는 대입 연산자이다. 즉 이 등호를 기준으로 왼쪽에 위치한 항에 오른쪽 항을 넣겠다는 뜻이다. 여기까지는 쉽게 직관적으로 받아들일 수 있다!

그런데 이제 == 와 === 의 차이에 대해서 공부했다.

사실 C나 Python에서는 === 와 같이 등호기호를 3번 사용하는 경우를 본 적이 없다. 따라서 저 형태에 대해 뜨악 했지만, 놀랄 이유가 없었다. 내가 기존에 알고 있던 == 가 사실 ===였으니까. 그렇다 영문명은 strict equal operator 이다. 그렇다, 그러면 누군가는 strict 하지 않다는 것이다. 예, == 는 그냥 equal operater 로 일치연산자이다. 둘다 일치 연산자에 속하지만 차이는 극명하다.  

우선 우리는 알다시피 코드를 짤 때 ‘자료형’ 즉 그 자료(생활코딩 강좌에선 현재는 정보로 통칭하므로 이하 정보)의 형태를 매우 엄밀하게 구분한다. 따라서 사람이 보기에는 내포하는 정보가 같더라도 컴퓨터가 보기에는 다르다는 것이다. 예를 들어 숫자 1은 ‘1’이 되는 순간 컴퓨터는 전자는 상수, 후자는 문자로 생각하는 것이다. C 같은 상대적으로 엄격한 문법을 고수하는 언어는 이 둘을 엄격히 다르다고 여기지만, 반면에 자바스크립트는 유연하게도 둘을 같다고 여길 수도 있는 것 같다. 따라서 유연한 자바스크립트는 이 둘이 내포하는 정보는 같으므로 == 에 근거해서는 참(True)이라고 판단한다. 그러나 자바스크립트는 엄격하고 근엄하고 진지한 면모도 물론 갖고 있기 때문에 === 라는 strict equal operator 를 통해서 정보의 형태 즉 자료형 즉 정보의 type을 구분하여 거짓(False)로 판단한다. 

자, 윗 화면 캡쳐를 보자. 우리가 쉽게 == 가 일치 연산자이기에  1과 2가 같은지 알림 창으로 알려줄래 라고 자바스크립트(이하 자스)에게 친절하게 ; 세미콜론까지 붙여서 물어보면 친절하게도 false 라고 아니 그건 거짓이야. 둘은 같지 않단다. 라고 알려주지. 이건 C나 Python에서도 마찬가지야.

마찬가지로 우리가 자스에게 1은 1인 거 맞지? 라고 물어보면, 

당연한 소리를 한다고 맞다고 알려주지.

그런데 여길 봐. 자스는 사람 같은 유연한 면모가 있어서 내포하는 정보가 서로 같다고 마치 사람 같이 판단한 자스는 ‘1’ 과 1 이 서로 같은지에 대한 질문에 true 참이라고 맞다고 답해줘. 와우 이렇게 유연한 사고방식을 프로그래밍 언어가 가질 줄이야! 당신, 날 놀래키다니!

하지만 자스도 엄격하고 근엄하고 진지한 면모도 갖고 있기 때문에(of course) === 등호기호 3개로 자스에게 물어본다면

둘은 같은 애가 아닌데 왜 같냐고 물어보냐며 진지한 얼굴로 false라고 답해준다고.

때문에 우리가 짚고 가야할 점은 여타 프로그래밍 언어와 마찬가지로 그리고 사람이 생각하기에도 수긍이 가듯이 문자와 상수는 같지 않아. 문자는 문자인거고 상수는 상수이지. 숫자와 글자 서로 다르니까 애당초 세상에 이 두 단어가 존재하게 된 거잖아. 같은 존재였다면 사람들이 늘상 번갈아가며 사용했겠지. 따라서 자스에서도 자료형 즉 데이터형식 즉 data type 즉 정보가 같아보여도 담긴 형식이 다르면! 다른 거야!! 그걸 같다고 하고싶기도 하고(==) 다르다고 하고싶기도 해서(===) 자스는 두 가지 방식을 모두 구비해둔 거지. 

하지만 나는 프랑스어에서도 e 와 é 는 서로 달라도 한참 다르고 è 랑도 살아온 배경과 각자가 지닌 역사가 다르는 걸 늘 강조하면서 다니기 때문에 늘상 === 를 사용해서 그 어느 때나 그 누구든지 === 로 구별할 것이다!! 여러분도 나처럼 엄격한 사람이 되기를!

아 참, 자스는 친절해서 진실 혹은 거짓을 알려주는 데이터 형식을 갖고 있어서 우리에게 때마다 거짓말탐지기처럼 정답을 알려주는데 이게 가능한 이유는 boolean(사람이름 불린)형 데이터 형식이 있기 때문이다! 이는 python 과 C에서도 제공하는 문법이고 논리학에서는 이 분이 빠지면 학문이 시체가 되기에.. 쿨럭~ 꼭 알아두고 넘어갑시다! 더 자세히는 조건문에서 만나게 된다는 것!

좀 더 심화적으로 === 기호와 == 의 차이를 알아보는 부분에서 신기한 점이 있었다. 프로그래머가 어떤 변수의 값을 일부러 지정하지 않는 행위 vs 원채 값이 지정이 (아직) 안 된 거에 대해서 다른 점을 보여주었다. 즉 null(전자) vs undefined(후자) 를 보았다. 사실 둘 다 값은 없다. 그런데 전자는 작성자가 의도한 것이고 후자는 의도한 건 아니다. 따라서 === 는 이를 또 엄격하게 구분해낸다.

따라서 == 로 일치를 비교하면 일치한다고 해줄 수 있지만 만일 === 로 일치를 비교한다면 이것도 서로 다른 거라고 자스가 생각하기 때문에 false 인 것이다! 호호 아주 재밌다!

더불어 true 는 1로 본다! 

그리고 0은 마이너스가 앞에 붙어도 0이므로 0은 === 로도 서로 일치한다!!

또 NaN(0/0 영을 영으로 나누기)는 수가 아님쓰... 애초에 분모에 0이 들어가는 건 안 되는 거라고 학교에서 배웠음!! 그래서 == 나 === 나 서로 거짓임!

더불어 비교연산자의 부등호와 !표의 부정의 의미 (등호랑 같이 쓰일 때는 등호 앞에 위치!) 를 이렇게 직관적으로 알 수 있다!

http://dorey.github.io/JavaScript-Equality-Table/

생활코딩에 올려져 있는 링크다! == 와 === 가 각 항목 별로 어떻게 다른지 알려줌!!

생활코딩 자바스크립트 비교 챕터 공부 끝!

그렇다 나의 privacy 는 존중하지 않기로 한다..(파란줄로 그림판처럼 가리다가 관둠)

[charonne-k]

Today I learned Oct 7 2019

생활코딩 자바스크립트 변수, 주석 

변수는 여타언어(python,C 한정)와 비슷하게 선언되고 변수라는 그 바구니에 값이 담긴다. 

다른점은 var 이라는 문자를 선행되고, 변수이름, 값 순서의 문법을 따른다는 것이다.

예를 들면 var year = 2019; 

그리고 이때 구문이 끝났다는 뜻의 세미콜론을 가장 끝에 붙이는데 세미콜론을 빼먹고 안 붙이고  엔터 키로 줄을 바꿔도 자바스크립트는 구문이 끝났다고 잘 알아서 이해한다는 것이다. Python은 세미콜론이 문장 구분에 사용되지 않는 반면 C는 필수적으로 사용된다. 하지만 더 명확하고 직관적인 문장 구분을 위해 난 자바스크립트에서 세미콜론을 사용할 것이다!

변수 선언시 선언되는 변수 이름 앞에 var 이 붙는 것 또한 필수적이지 않다. 변수임을 확실히 명시하는 역할을 하는데 때에 따라서 사용하거나 사용하지 않으면 될 것 같다.

변수끼리 계산이 가능하다. 변수라는 바구니에 숫자를 넣어서 산술계산은 물론이고 바구니에 문자열을 넣어서 문자열을 합치는 것도 가능하다.

예제를 변형해보면 a = ‘my’; b = ‘name’; 로 a와 b라는 변수를 선언하며 동시에 각각 문자열이 담기도록 한다. 분명히 alert(a+b); 를 실행하면 웹 창에 알림으로 myname이 뜰 것이다! 

이어서 주석에 대하여 공부했다.

나는 주석을 좋아한다. 

주석의 기능이 없었더라면 늘상 메모장에 지금까지 코딩해온 것을 복사본을 만들어놓고 코드를 수정하고 다시 실행하고를 무한 반복 했을 것이다. 영상에서 언급됐듯이 주석은 “일부러 실행을 지금은 안 시키고 싶은 구문"에 대해 눈에 보이지 않는 ‘투명한 구문'의 지위를 주석을 다시 제거하기 전까지 부여한다. 

이런 기특한 역할을 하는 주석은 자바스크립트에서는 // slash 2개로 할 수 있다. 그런데 // 는 // 바로 뒤부터 해당 구문이 끝나는 부분까지만 투명하게 해주므로 여러 문장을 단번에 혹은 범위를 지정해서 주석 처리하기에는 적합하지 않다.

따라서 /* */ 를 사용하면 된다!!

슬래쉬 별  투명하게 만들고 싶은 구문들 별 슬래쉬 

딱 이 순서를 지키면 된다! 따라서 자바스크립트에는 // 와 /* */ 를 경우에 맞게 사용하면 된다. 

정리해보면 javascript, C는  // ; /**/ 이고 Python은 #샾 ; ’’’작은따움표3개

지금 바로 외웁시다~ 이미 외워버렸지만요~

[charonne-k]

이번주는 개천절에 자바스크립트 스터디 제1회가 진행됐다.

유진이의 리딩 아래 구성원 중 6명이 모였다.

이번주에는 각자 배운 것 중 기억에 남는 부분을 서로 나누었다. 더불어 ‘블로깅'을 권유받아서 이번주부터 매일 하는 ‘Today I learn’을 포스팅 할 수 있도록 노력해보겠다. 늘상 종이(바인더속지)에 끄적이는 것을 해왔기 때문에 타이핑으로 공부자료를 만드는 것이 어색하다. 그러나 사실 수업 중에 종이에 받아 적은 것을 다시 기억을 되새김질 하면서 디지털화 하는 것이 더 보관에 용이하고 색인/검색의 편의를 제공하며 무엇보다도 복습 및 개념정리에 도움이 될 것 같다.

이번주는 #생활코딩 #자바스크립트 전반적인 소개 및 언어 소개 그리고 약간의 문법(숫자와 문자까지) 설명과 앞으로 자바스크립트로 코드를 짤 때 유용한 툴인 sublime을 설치하는 것까지 완수했다. 유투브 동영상 강의자료와 텍스트 자료까지 중간 중간 쉼을 두고 했음에도 한나절이 걸리지 않았다.

함께 나눈 내용 중 내가 느낀 인상적인 부분은 사실 sublime 이라는 editing tool 설치라고 응답했다. C와 Python 을 먼저 배운 덕에 microsoft visual studio 와 python IDLE 는 이미 설치 되어 있는데 또 하나의 언어를 위해 또 다른 프로그램을 설치하는 걸 권유해주셔서 고맙지만 제 노트북은 128GB의 하드디스크이기 때문에 항상 클라우드에 백업(매달 200GB; 배보다 배꼽 큼)을 하면서 공간을 무한대로(??) 넓히고 있는 상황이라 뭐랄까 정말 새로운 언어를 하나 더 시작하는구나임을 압출을 풀면서 실감했다. 그리고 이를 스터디원분들에게 말씀드릴 때 눈치채신분들도 계시지만 내가 피식 웃었다. 왜냐하면 순간 내 뇌에서 이 프로그램 이름을 어떻게 발음해야할지 3초 동안 고민했기 때문이다.. Sublime 은 영어식으로는 서브라임이겠지만 불어로는 수ㅂ리ㅁ(영어의 인물에 대해 아름다움을 찬양할 때 쓰는 gorgeous와 대치됨; 보통 여배우들에게 많이 붇는 칭찬)이기 때문에  정말 진심으로 후자로 발화할 뻔 했다.. 흠,,, 그래요 저는 문과생/어학도입니다….

각설하고, 함께 나눠주신 부분들 모두 공감할 수 있었다. 1) C부터 배웠기에 javascript 문법은 부드럽게 느껴지며 만약 반대 순서로 배웠다면 C에 적응하는데 어려움이 있었을 것 같다라는 점. 2) 굳이 서브라임 아니더라도 누구나 쉽게 접근 가능하며 따로 프로그램의 도움 없이 웹(구글 크롬 사용) 상에서 바로바로 코드를 작성하고 이에 대한 실행결과를 즉각적으로 알 수 있기 때문에 지금까지 배웠던 언어들보다 훨씬 더 체감적인 코딩에 대한 만족이 큰 것 같다. 3) 자바스크립트는 이름에서도 알 수 있듯이 자바의 세례를 받은 언어 4) node.js 에 대한 궁금증!

이렇게 자바스크립트에 대한 인상을 서로 나눌 수 있어서 이 언어의 장점이 더욱 뚜렷해지는 것 같다. 아직 자바스크립트 grand débutant(입문자) 이기 때문에, 앞으로가 더욱 기대되고새롭게 한 주가 시작되는데 이번주는 좀 더 평일에(공휴일 제외) 일과시간 이외 시간을 효율적으로 활용해서 #생활코딩 강좌를 이어 들어서 반복문까지 잘 이해하기를 바라본다.

추신: 스터디 과목과 관계없이 코딩에 대해서 이번주에 느낀점을 덧붙여 본다. 유투브 채널 중 nomade coder 채널과 Teccboi Wonie 우연히 발견했고 (그렇다, 생활코딩을 유투브로 시청한 후부터 생활코딩이 던져준 쿠키 덕에 추천 영상에 요런 채널들이 뜨는 것이다..) 최근에 탑재된 영상 중에 가장 연봉이 높은 개발자 언어를 차트화한 게 있었다. 그 중 Top #4에 F# 이 선정되었다. 그리고 또 다른 영상에서 개나소나(황송하다) 개발자에 덤벼드는데 자기가 개발자라는 직업이 적성에 맞는지 알아보는 문진법(?)을 알려주었다. 여러 질문 중 하나가 <<평생 공부하며 살 수 있는가?>>였고 이유는 ‘개발'이라는 분야만큼 빠르게 발전/변모하는 곳이 없기 때문에 흐름에 발맞춰서 공부해 나아가지 않으면 뒤쳐지게 되고 뒤쳐진 개발자는 ‘낡은 개발자'라는 타이틀이 붙으며 연차가 높다고 해서 뛰어난 개발자라는 말은 헛소리가 된다는 것이다. 그래서 두 영상을 시청하고 드는 생각은 “정말 그렇다"이다. 사실 나는 인지과학/전산언어학에 아직도 관심이 있는데 (좀 덤벼봤다가 호되게 후려맞았었음에도 불구하고) 그쪽 분야에서 파리에서 박사를 받으시고 모교에서 강의하시는 우리 학부 선배님께서 2015년에 Python은 유럽에서 ‘사어(죽은언어)’ 취급을 받고 있다. 그리고 2017년에 내가 정말 이 분야에 관심있다면 Python이나 C처럼 객체지향 / 구조적인 언어를 배워서 되지 않고 무조건 ‘함수형 언어'를 배워야 한다고 하셨다. 그 대표적인 언어가 마이크로소프트가 먹은 F#이다. 사실 이 언어도 모체가 따로 있지만 MS가 선견지명으로 그 언어를 먹고 보완하고 보완해서 탄생시킨 것이다. 그렇지만 국내 그 어떤 컴퓨터공학과에서 이 언어를 가르치는가.. 카더라통신으로는 카이스트뿐이었다. 하지만 EU 쪽에서는 좀 더 학문이 발전했고, voilà 현재 그 소수가 높은 연봉의 개발자인 것이다..! + 포부를 품고 파리 소재 한 공립대학교에서 함수형 언어 중 하나인 OCaml 과목을 수강했으나 스페인?이태리? 억양이 너무 강한 프랑스어로 300명이 앉아서 듣는 대형 원형강의실에서 수업이 진행되었기 때문에 나같은 본토 발음도 단번에 제대로 알아듣기에 제약을 가진 극동지역에서 온 쩌리는.. ㅜㅜ.. 페북에 페친들에게 그 누가 이 언어를 아냐고 소리쳐 도움을 구했으나 그 누구도 알지 못했다.. 하 그래서 결론은 본인이 관심있는 분야를 파고들어서 시대에 발 맞춰가는 것이 개발자의 숙명이다!!!!!! 학부 무사히 졸업해서 기본기+여유를 갖추면 꼭 함수형 언어 도전해봐야겠다.. Python으로 말��치 처리하는 건 너-무 힘들었어..

이렇게 긴 포스트가 된 이유는 첫 포스트인 점, Today 가 아닌 This week 인 점이란 거 양해 부탁드려요!