NOW OR NEVER

Array APIs 1. join arrayName.join('seperator'); join(separator?: string): string; 배열에 있는 모든 아이템들을 문자를 통해서 각각 구분자(seperator)를 넣어 더해서 seperator string으로 return ? 뜻은 전달해도 되고 안해도 된다는 뜻, 즉 seperator은 넣어도 되고 안넣어도 되는데 안넣게 되면 구분자는 ,로 들어가게 됨 2. split arrayName.split('seperator', limit); split(separator: string | RegExp, limit?: number): string[]; seperator과 limit 총 두가지의 parameter을 받음 seperator 필수 작성 stri..

Array 배열 자료 구조란? 일상생활에서 비슷한 것들만 모아서 각 바구니에 모아놓는 것처럼 프로그래밍 언어에서도 비슷한 종류의 데이터들을 묶어서 한 곳에다가 보관해놓는 것들을 자료구조라고 한다. 자료구조에는 어떤 방식으로, 어떤 형식으로 데이터를 담느냐에 따라서 굉장히 다양한 타입들이 있다. object와 자료구조의 차이점 object는 서로 연관된 특징과 또는 행동들을 묶어놓는 것을 말한다. 자료구조는 비슷한 type의 objec들을 묶어놓는 것을 말한다. js가 아닌 다른 언어에서는 보통 자료구조에는 동일한 type의 object를 담을 수만 있다. 즉 type이 있는 언어에서는 동일한 type의 데이터만 담을 수 있다. js는 dynamically typed language이기에 type이 동적으..

Object https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object 어떤 데이터가 들어갈 수 있는지 정의를 하고 선언된 틀인 class를 이용해서 실제로 데이터를 넣어서 만드는 것이 object이다. instance of a class : class를 이용해서 새로운 instance 생성시 object가 됨 created many times : object는 class를 이용해서 굉장히 많이 만들 수 있다. data in : class에 실제로 데이터를 넣으면 object가 되어 메모리에 올라가게 됨 붕어빵 틀인 class에 팥이라는 data를 넣으면 팥붕어빵이 되고, cream data를 넣으면 크림붕어빵이..

객체 지향 언어(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(절차적인 언어)라고 볼 수..

연산, 반복문 1. String concatenation 문자열 + 문자열 = 새로운 문자열 숫자로 된 문자열('1') + 숫자 = 숫자 ` `을 활용한 string literals, ${}을 함께 이용하면 변수 값을 계산해서 string으로 포함해 문자열을 만들 수 있다. 줄을 바꾸거나 특수문자인 single quote(' ') 등을 이용해도 고대로 문자열로 변환되서 나온다 single quote(' ') 문자열 만들 경우 중간에 single quote나 특수 기호가 인식이 되지 않는다. 이럴 경우 \를 이용해서 특수 기호를 넣어줘야지 제대로 표시됨 \single quote 줄바꿈 : \n tab : \t 2. Numeric operators add(더하기) : + substract(빼기) : - di..

데이터 타입 프로그래밍에서 가장 중요한 것 : 입력, 연산, 출력 사용자에게 콘솔이나 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'; 정의..

Javascript 역사를 통한 개념 정리 역사 1993년 : 컴퓨터가 집집마다 없었던 시절에 생긴 컴퓨터를 모르는 사람도 쓸 수 있는 UI요소가 더해진 Mosaic Web Browser가 시장에 나옴 1994년 Mosaic Web Browser를 만든 개발자 Mac Andreessen이 Netscape을 창립하면서 조금 더 UI요소가 더해진 Netscape Navigator을 시장에 내놓음, 시장에서 80%의 점유율을 자랑하면서 급격히 성장한다, Mac Andreessen은 좀 더 다이나믹한 사이트를 만들기 위한 scripting언어를 추가하고 싶어 했다. scheme을 만든 개발자 Brendan Eich를 데려와 자바의 요소와 scheme을 융합한 언어를 10일만에 새로 만들고자 했다. 프로토타입을 ..