NOW OR NEVER

ES6(2015) Shorthand property names https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer js에서 object는 항상 key와 value로 이루어져 있는데 key와 value의 이름이 동일한 경우 하나로 축약해서 작성 가능 ex) name : name -> name Destructuring assignment https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment object {} 이용 const { key1, key2 } = object js에서 o..

함수 프로그래밍을 짤 때 무언가 반복적으로 계산되는(수행되는) 로직들이 있을 때 함수로 만듦. 왜냐하면 함수로 만들면 재사용이 가능하기 때문이다. 함수 선언 function 함수이름(인자){기능 수행 영역(code block)} 함수 선언시 function 키워드 사용 {} 즉 코드 블럭을 수행하는 것들을 함수이름으로 가리키게 됨 함수 이름 함수 자체를 가리키는 것 함수를 가리키고 있는 주소(refernce)를 가지고 있다 함수 이름 지정 가능 가능하면 의미있는 이름으로 설정 변수에서 이름을 원하는대로 지정하는 것처럼 함수 또한 원하는대로 이름 지정 가능 짧고 간결하지만 의미있는 이름으로 설정 인자 함수를 호출하는 사람으로부터 필요한 data를 받아오기 위해서 그리고 필요한 data를 받아올 때 함수 내..

변수 프로그래밍 언어에서 처리해야하는 data를 담을 수 있도록 도와주는 것, 즉 data를 담고있는 것이다. 변수를 통해서 data에 접근하고 data를 업데이트 할 수 있다. let 키워드를 활용해 변수를 만듦, 변수이름은 원하는대로 지정이 가능하다. let의 경우 변수를 선언하고 나서 값을 또 바꿀 수 있다. const 상수 변수 한번 선언하고 나면 값을 변경할 수 없다. 상수 변수가 담겨있는 메모리 공간 변경 불가 변수 이름 설정시 프로그래밍을 할 때 로직과 연관된 조금 더 의미있는 이름을 지정해서 만드는 것이 좋다 변수 선언시 무조건 그 변수를 위한 공간이 생긴다.(메모리에 어느정도 byte size의 공간이 확보된다) 변수1에 변수2 할당시 무조건 그 변수2에 들어있는 값이 복사되어서 들어가진..

Async 비동기 프로그래밍 관련 단어 hoisting : var 변수 선언과 function declaration 함수 선언들이 자동적으로 제일 위로 올라가는 것 callback 함수 : 전달한 함수를 나중에 불러줘 라는 개념, 보통 arrow function 형식으로 작성 1000 ms : 1초 1. 동기와 비동기 synchronous : 정해진 순서(작성한 순서)에 맞게 코드가 실행되는 것 Javascript is synchronous 자바스크립트는 동기적이다. Executing the code block in order after hoisting : hoisting이 된 이후부터 코드가 작성한 순서대로 하나 하나씩 동기적으로 실행된다(나타나는 순서대로 자동적으로 실행됨) javascript 엔진은..

JSON(Javascript Object Notation) HTTP(HYpertext Transfer Protocal) hypertext : 웹사이트에서 이용되어지고 있는 hyper links만 이야기하는 것이 아니라 전반적으로 쓰여지고 있는 resource들, 문서나 이미지 파일들 등을 다 포함해서 말한다. 어떻게 hypertext를 서로 주고 받을 수 있는지를 규약한 protocal의 하나 브라우저에서 동작하고 있는 웹사이트나 웹 어플리케이션과 같은 client들이 어떻게 Server와 통신할 수 있는지를 정의한 것 client가 server에게 data를 request(요청) 할 수 있고 server는 client가 요청한 것에 따라서 그에 맞는 response(응답)을 client에게 보내주는 방..

객체 지향 언어(Class vs Object) class를 이용해서 상속과 다양성이 일어날 수 있다. 이런 모든 것들이 일어날 수 있는 곳이 객체지향 언어이다. 객체 지향 언어로 프로그래밍을 잘하는 개발자 = 풀어야 하는 문제나 구현해야 되는 기능들을 객체로 잘 정의해서 만들 수 있는 개발자 js에 class나 object가 없다면 정의한 변수들이 여기저기에 둥둥 떠다니면서 규모있는 프로젝트를 만들기 힘들었을 것이다. 실제로 살아가는 세상에는 수많은 물체와 사물들이 존재한다. 프로그래밍을 할 때 또한 사물과 물체들을 class나 object로 정의해서 프로그래밍 하는 것이 조금 더 자연스럽기 때문에 개발자들이 편하고 유연하게 프로그래밍을 할 수 있게 도와준다. 상속 Inheriance class 상속받을..

Functions 함수 function : 프로그램 안에서 각각의 작은 기능들을 수행하는 것, 즉 프로그램을 구성하는 굉장히 기본적인 building block 프로그램 안에서 각각 저마다 기능을 진행하는 함수들 존재, 이런 절차적인 언어같은 경우 함수가 프로그램에서 굉장히 중요한 기능을 담당하고 있어 sub-program이라 불리기도 한다. 또한 함수는 여러번 재사용이 가능하다는 강점이 있다. 대체적으로 function은 한가지의 task나 어떠한 값을 계산하기 위해 쓰여진다. 추가된 class의 경우에도 java 처럼 pure한 oriented가 아니라 prototype을 베이스로한 가짜의 object oriented 이므로 자바스크립트도 procedural language(절차적인 언어)라고 볼 수..

데이터 타입 프로그래밍에서 가장 중요한 것 : 입력, 연산, 출력 사용자에게 콘솔이나 UI에서 입력받은 데이터를 잘 처리하고 연산해서 알맞게 다시 사용자에게 출력해주는 것이 제일 중요, 물론 그데이터를 전송을 이용해서 서버로 보내고 다시 받아오는 것도 중요하다. 연산을 하면서 CPU를 효율적으로 사용할 수 있도록 CPU에 최적화된 연산(logic)을 작성하는 것도 중요하고 메모리를 최소화해서 사용하는 것도 중요하다. variable rw(read / write) : variable은 메모리의 값을 읽고(read) 쓰는(write) 것이 가능하다. 그래서 변경이 가능한 값이다. 변경이 가능한 값(mutable data type) let : js에서 변수 선언할 수 있는 키워드, es6에서 추가되어진 키워드..

async와 defer html에서 javascript 표현시 어떻게 포함하는 것이 효율적인 것인가 사용자가 html 파일 다운로드시 브라우저가 한줄 한줄 분석한다(parising HTML) > 한줄한줄 분석하고 이해한 것을 CSS와 병합해서 DOM 요소로 변환 async : boolean 타입의 속성값으로 선언하는 것만으로도 true로 설정되어 옵션 사용 가능 head 안에 script 태그 html parsing하다가 script 태그 발견시 src안 js파일을 다운받아야하네 하고 이해하게 된다. 그래서 html parsing하는 것을 잠시 멈추고 그 js을 다운받아서 실행한다음에 다시 html parsing을 시작한다. 단점 : 해당 js 파일 용량이 어마어마하게 크고 인터넷도 느리다면 사용자가 그..

console node js에서도 실행 가능하고 web api인 console api에서도 실행 가능 많이 쓰이는 문법이라 거의 web api 뿐만아니라 프레임워크 등에서도 다 실행가능 Devtool console js 작성해서 실행 가능 간단한 js기능 구현 가능 source 디버깅시 유용 작성한 코드 확인 가능 break point 를 걸어서 디버깅할 때도 유용하게 쓰임 network network가 어떻게 발생하는지, 얼마나 많은 사이즈들의 데이터가 오고가는지 검사 가능 performance 분석, memory 분석 등 굉장히 다양한 것들을 볼 수 있다. 'use strict'; js를 strict 모드로 개발하기 위한 것 순수 vanilla js 작성시 js 최상단에 'use strict'; 정의..