NOW OR NEVER

html article 태그 이용해 시작화면 / 문제화면 / 결과화면 순으로 구현 mbti에서 type별 점수를 hidden type의 input 태그를 이용해서 앞의 것의 점수를 네가지 type별로 저장하는 칸을 만듦(바깥에는 보이지 않지만 내부적으로 정보를 저장할 경우에는 hidden input 태그 사용) button A와 button B를 사용해서 A버튼을 눌렀을 때만 해당 type의 앞의 글자에 대한 점수를 저장할 수 있도록 만듦, B 클릭시 점수는 저장되지 않고 다음 문제로 넘어가게 하기 javascript(jquery) num을 사용해서 1번부터 하나씩 증가하도록 만듦 q라는 javascript 객체를 이용하여 각 문제 번호 별로 해당하는 정보를 담을 수 있도록 함(저장) result 라는 ..

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

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에게 보내주는 방..