목록Front-End/Javascript (23)
NOW OR NEVER
Javascript 객체 배열 안에 여러 개 객체 넣기 가능비어있는 객체 비어있는 객체 생성 후 사용자 액션에 따라 속성을 삭제할 수도 추가할 수도 있다. 객체 안 메소드도 추가 가능 with 동일한 객체를 이용한 객체.속성이름 들을 객체. 이 아닌 with(객체이름){ 속성이름}으로 사용 가능 속성이름은 key를 뜻함 속성 값은 value in 배열 속 값들을 하나씩 가져올 때 사용 ex) for(var i in array) : i는 인덱스 생성자 함수 대문자로 이름 작성 그냥 함수와 달리 생성자 함수는 this 사용 : 해당 클래스의 속성, 멤버 정의, 자바의 클래스 만드는 것과 비슷 즉 this 있으면 생성자 함수, 없으면 그냥 함수 tips input 태그 값 추가 후 해당 input 태그 값 비..
Javascript 객체 프로그래밍 : 자바처럼 클래스를 만들 수 있다. 웹프로그래밍 동적인 html을 생성 서버 사이드 스크립트 : 서버에서 동작하는 웹 프로그래밍, 서버 코드가 노출되지 않는다. ex) jsp 클라이언트(웹 브라우저) 사이드 스크립트 : 클라이언트 쪽에서 동작하는 웹 프로그래밍, 어떻게 만들어졌는지 서버코드가 노출 됨 ex) javascript jsp 안에서도 자바스크립트 표현 가능 : script 태그 사용 src/main/resources/static : 정적인 문서 만들 때 이 폴더에 작성 ex) html,css,script src/main/resources/templates : 사용자 요청에 의해 컨트롤러가 저장한 모델을 가지고 html을 동적으로 만들어주는 것을 통칭하여 vi..

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..

Class와 Callback 함수 class : 다양한 object를 만들기 위한 청사진 class에서 함수 선언시 function 키워드 사용하지 않아도 됨 class에 원하는 기능을 다 정의하게 되면 사용하는 사람이 자세하게 control할 수 없고 재사용률이 떨어진다. callback 함수 class를 하나의 완전히 다 만들어진 완전체로 만들기 보다는 레고로 조립을 해서 원하는 것을 만들 수 있는 것처럼 원하는 기능을 끼워 맞춰서 재조립이 가능한 것으로 만드는 것이 좋다. 그래서 callback 함수를 이용하는 것이다. class 내에서 callback 함수 활용 시 장점 callback 함수를 전달함으로써 원하는 기능을 수행할 수 있다. 사용하는 사람이 원할 때 원하는 기능을 수행할 수 있다. c..

연산자 boolean boolean : 어떤 data type이든 boolean이 될 수 있고 true가 될 수 있다. truthy한 값 falsy한 값들을 제외한 모든 값 무언가 data가 있다면 다 true object는 그 안에 data가 있든 없든 object 자체가 만들어진 것이기 때문에 true에 속한다. empty array(텅텅 비어진 배열) 자체는 object이기 때문에 true이다. falsy한 값 프로그래밍 언어에서 data가 없고 비어있는 것들은 false에 속한다. 0, -0, 텅텅 빈 문자열('', " "), null, undefined, NaN(숫자가 아닌 값들) 변수 선언 후 값을 할당하지 않는다면 그 변수에는 undefined 값이 할당되어지게 되어 falsy한 값이 된다...

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

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

함수에서 헷갈릴 수 있는 부분 정확히 이해해야 하는 포인트 선언과 호출의 차이점 이해 함수 선언 어떤 값을 전달받아 올건지 인자들을 정의하고 나서 코드 블럭 작성 선언만 해놓으면 작성한 코드블럭은 수행되지 않는다. javascript에서는 function이라는 키워드를 이용하며 함수 이름을 원하는 이름으로 작성 가능 function Name(parameter){ 실제로 함수 안에서 실행될 코드 } 함수 호출 functionName(); 정의한 선언한 함수를 실행하기 위해서는 함수를 호출해야 한다. 함수를 호출하기 위해서는 함수이름 옆에 괄호를 이용해서 함수에서 원하는 정의된 인자값들을 전달하면서 호출해야 한다. 괄호를 쓰지않고 함수 이름만 어디에 할당하거나 전달하면 함수 자체를 전달하는 것이다. 함수를 ..

async & await 개념 비동기의 핵심 무언가 오래 걸리는 코드를 비동기적인 처리를 전혀 하지 않으면 js 엔진은 동기적으로 코드를 실행하기 때문에 즉 한줄이 끝나야지 그 다음줄로 넘어가는 동기적인 처리를 하기 때문에 오래 걸리는 코드가 처리가 끝날 때까지 필요한 기능을 구현하는 코드를 구현하지 못해 사용자는 텅텅 빈 웹페이지만 보게 될 수 있다. promise를 조금 더 간결하고 간편하고 그리고 동기적으로 코드를 작성하는 것처럼 보이게 만들어 주는 것들 promise chaining을 계속하게 되면 코드가 복잡해질 수 있는 데 이런 거 위에 조금 더 간편한 api로 async와 await을 사용하면 동기식으로 코드를 순서대로 작성하는 것처럼 간편하게 작성할 수 있게 도와준다. 기존에 존재하는 pr..

Promise JS에서 비동기(async)를 자동으로 처리할 수 있도록 도와주는 object 정해진 장시간의 기능을 수행 후 정상적으로 기능이 수행이 되어졌다면 성공의 메세지와 함께 처리된 결과 값을 전달 기능을 수행하다가 예상치 못한 문제 발생한다면 에러 전달 Promise is a Javascript object for asynchronous operation JS에 내장되어 있는 object async operation을 위해 쓰임 비동기적인 것을 수행할 때 callback 함수 대신에 유용하게 쓸 수 있는 object 중요 포인트 state 상태 process가 heavy(무거운)한 operation을 수행하고 있는 중인지 아니면 이 기능 수행이 다 완료가 되어서 성공했는지 실패했는지 이런 상태에..