Higher의 창작소

자바스크립트에서 자주쓰는 console.log문법 

나는 이걸 왜 쓰는지 의문이었다.

>"안녕하세요"를 적으면  console 내에서 자동적으로 리턴값으로 <"안녕하세요" 이렇게 값을 주는데

굳이 

>console.log("안녕하세요")라고 더 번거롭게 적는 이유가 있는걸까? 하고.

//////////////////////////////////////////

console.log는 말그대로 로그, 그저 기록을 찍어서 보여주는 것이다. 

그래서 리턴값이 없어서 '<'이라고 나온 리턴값 부분에 undefined로 나오는 것이다.

##shift enter를 사용하면 코드를 실행하지않고 한 줄더 늘려서 쓸 수 있다.

##바로 전에 썼던 코드를 다시 쓰고싶으면 키보드 위쪽 화살표를 누르면 된다.

만약에 list에서 내가 ruturn 값으로 여러개의 list값을 보려고 하면 return은 가장 최신의 list[1]의 값만 보여준다.

하지만 console.log를 사용하면 기록을 찍어서 보여주기 때문에 내가 보고싶던 모든 list값을 볼 수 있다.

이런식으로 console.log로 answer의 기록을 찍어놓으면 

var plus3이 실수로 2가 아닌 1로 적혀있었다는걸 찾기 매우 쉽다.

////////////////////////////////////////////////////////////////////////

단 console.log를 사용할 때 주의할 점이 있다!

위와 같이 객체 자체를 직접 콘솔에 찍을 경우 브라우져(크롬)는 obj에 대한 참조를 이용해 console 에 값을 찍어 주기 때문에 스크립트 실행이 끝난 후에 아래와 같은 최종 결과만을 보게 된다.(Node 환경에서는 이런 문제가 없음!)

<정보 출처:min9nim.github.io/2019/07/console-log-obj/>

객체를 만드는 방법은 두 가지가 있다.

<정보출처: ko.javascript.info/object>

var user = new Object(); // '객체 생성자' 문법
var user = {};  // '객체 리터럴' 문법

그 중 주로 사용하는 객체 리터럴로 프로퍼티와 메소드를 알아보자.

콜른(:)을 기준으로 왼쪽엔 키가 오른쪽엔 값이 위치한다. (키는 이름 or 식별자라고도 불린다.)

프로퍼티는 '키:값'을 말하는 것이다. 

값에는 다양한 값이 올 수 있는데

그 중 함수가 오는 것을 메소드라고 부른다.

즉, 값이 함수가 오는 것은 크게 보면 프로퍼티, 세분화하면 메소드라고 볼 수 있는 것이다.

  var Body = {
    setColor:function (color){
      document.querySelector('body').style.color = color;
    },
    setBackgroundColor:function (color){
      document.querySelector('body').style.backgroundColor = color;
    }

<생활코딩 web2 javaScript - 33. 객체의 활용>

생활코딩에서 선생님이 setColor와 setBackgorundColor를 프로퍼티라고 하셔서 

'나는 어? 이거 메소드인데 왜 이렇게 말하셨지?'라고 생각했다.

지금 정리하고 보니 메소드 또한 프로퍼티니까 전혀 문제없는 말씀이셨다.

///////////////////////////////////////////////////////////////////////

추가적으로 형이 말하길 

자바스크립트에서는 배열과 함수도 객체라고 한다. 

어려운 내용이니 일단 그렇다는 것만 알아두자.

UI(User interface)

우리가 만든 웹 앱을 이용하려는 사용자가 버튼과 같은 조작 장치를 이용해서 

웹 어플리케이션을 사용하는데 

사용자가 시스템을 제어하기 위해서 사용하는 조작 창치를 user interface 줄여서 UI라고 부른다.

API(Application Programming interface)

<input type = "button" value="Click me" onclick="alert('Hello world')">

이 한 줄 짜리 코드에는 

경고창의 기능이나 모양 이런 것들이 일체 설명되어 있지 않다.

그것은 웹브라우저를 만드는 사람들이 우리 대신에 경고창 기능을 만들어 두었다가

우리가 alert이라는 함수를 실행하면 경고창을 띄워주겠다고 

javascript의 사용 설명서를 통해서 약속한 것이다.

이렇게 애플리케이션을 만들기 위해서 프로그래밍을 할 때 사용하는 조작 장치들을

Application Programming interface라고 부른다. 

alert이 바로 API인 것이다.

이것은 자바스크립트에 국한 된것이 아닌 모든 프로그래밍 언어에 공통적으로 적용되는 얘기이다.

다른 사람이 만든 소프트웨어를 부품으로 해서 

내가 만드는 소프트웨어의 생산자가 되는 방법을 살펴보자.

라이브러리(도서관)

내가 만들고자하는 프로그램에 필요한 부품이 되는 소프트웨어를

잘 정리정돈해놓은, 재사용하기 쉽도록 되어 있는 소프트웨어를 라이브러리라고 한다.

내가 만들고있는 프로그램에 사용할 부품을 가져오는 느낌이다.

프레임워크

만들고자 하는 것이 무엇이냐에 따라서

ex)게임,웹,채팅

그것을 만들려고 할 때 언제나 필요한 공통적인 부분을 프레임워크가 만들어 놓고

우리는 만들고자하는 것의 기능,개성에 따라 달라지는 부분만 살짝 살짝 수정하게 해줌으로서

만들고자 하는 것을 처음부터 끝까지 만들지 않도록 해주는 반제품과 같은 것이다.