~2023.02/JS
Content-Type
1. Content-Type header Content-Type header는 현재 request 혹은 response의 body에 들어 있는 데이터가 어떤 타입인지를 나타낸다. Content-Type header의 값은 '주 타입(main type)/서브 타입(sub type)'의 형식으로 나타낸다. 1. 주 타입이 text인 경우 (텍스트) - 일반 텍스트 : text/plain - CSS 코드 : text/css - HTML 코드 : text/html - JavaScript 코드 : text/javascript 2. 주 타입이 image인 경우 (이미지) - bmp 이미지 : image/bmp - git 이미지 : image/gif - png 이미지 : image/png 3. 주 타입이 audio인..
이벤트 타입 정리
1. 마우스 이벤트 이벤트 타입 설명 mousedown 마우스 버튼을 누르는 순간 mouseup 마우스 버튼을 눌렀다 떼는 순간 click 왼쪽 버튼을 클릭한 순간 dblclick 왼쪽 버튼을 빠르게 두 번 클릭한 순간 contextmenu 오른쪽 버튼을 클릭한 순간 mousemove 마우스를 움직이는 순간 mouseover 마우스 포인터가 요소 위로 올라온 순간 mouseout 마우스 포인터가 요소에서 벗어나는 순간 mouseenter 마우스 포인터가 요소 위로 올라온 순간 (버블링 발생X) mouseleave 마우스 포인터가 요소에서 벗어나는 순간 (버블링 발생X) 2. 키보드 이벤트 이벤트 타입 설명 keydown 키보드의 버튼을 누르는 순간 keypress 키보드의 버튼을 누르는 순간 ('a', ..
Web API와 REST API
우리가 어떤 리퀘스트를 보냈을 때, 무슨 리스폰스를 받는지는 모두 그 서비스를 만드는 개발자들이 정하는 부분이다. 실제 개발 현장에서 일어나는 상황은 다음과 같다. 개발자는 크게 두 가지 종류가 있다. 첫 번째는 사용자가 직접 보는 웹 페이지나 앱 등의 화면을 만드는 프론트엔드 개발자이고, 두 번째는 웹 브라우저나 앱이 보내는 리퀘스트를 받아서 적절한 처리를 한 후 리스폰스를 주는 서버의 프로그램을 만드는 백엔드 개발자이다. 하나의 서비스를 만들 때에는 프론트엔드 개발자들과 백엔드 개발자들이 모여 프론트엔드에서 이 URL로 이렇게 생긴 리퀘스트를 보내면, 백엔드에서 이런 처리를 하고 이런 리스폰스를 보내주는 것으로 합시다. 와 같은 논의를 하고, 이런 내용들을 정리한 후에 개발을 시작한다. 이것을 'We..
자바스크립트 객체 표기법과 JSON 문법의 차이
1. JSON이란? JavaScript Object Notation 어떤 정보를 교환할 때 사용하기 위해 만들어진 데이터 포맷 자바스크립트의 문법을 빌려 만들어짐 2. 자바스크립트와 JSON의 차이점 자바스크립트에서 객체와 배열을 나타내는 문법은 JSON에서 그대로 사용된다. 그러나 두 개가 완벽히 동일한 것은 아니다. 차이점 JSON에는 프로퍼티 이름과 값을 표현하는 방식이 제한적이다. JSON에서는 프로퍼티 이름을 반드시 " " 로 감싸 주어야 한다. JSON에서는 값이 문자열일 때 ' ' 이 아닌 " "를 사용해야 한다. JSON에서 표현할 수 없는 값들이 존재한다. 자바스크립트에서는 프로퍼티 값으로 undefined, NaN, Infinity 등을 사용할 수 있지만, JSON에서는 사용이 불가능하..
자바스크립트에서 세미콜론(;) 사용
자바스크립트에서는 특별한 경우를 제외하면 일반적으로 표현식인 문장은 세미콜론으로, 표현식이 아닌 문장은 문장 자체의 코드 블록(중괄호)로 그 문장의 범위가 구분된다! 여기서 표현식과 문장이란? 표현식 : 결과적으로 하나의 값이 되는 모든 코드 문장 : 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리 // 표현식 (1 + 2) * 3; console.log('Hello!'); // 문장 while(true) { x++; } 따라서 작성된 코드를 볼 때 세미콜론과 중괄호를 따라가 보면 좀 더 쉽게 표현식인 문장과 표현식이 아닌 문장을 구분할 수 있다. 우리가 코드를 작성할 때 이런 점을 잘 구분해서 세미콜론을 사용하면 좋을 것이다.
자바스크립트 동작원리
1. 데이터 타입 number string boolean undefined null object symbol bigint 2. 데이터 타입 유연성 자바스크립트는 데이터 타입이 유연한 프로그래밍 언어이다. 따라서 잘 이해하고 활용한다면 좀 더 간결한 코드를 작성하고 빠르게 개발할 수 있다는 장점이 있다. 3. Truthy값과 Falsy값 // falsy Boolean(false); Boolean(null); Boolean(undefined); Boolean(0); Boolean(NaN); Boolean(''); // truthy Boolean(true); Boolean('codeit'); Boolean(123); Boolean(-123); Boolean({}); Boolean([]); falsy값에는 fa..
자바스크립트에서 this와 Arrow Function
const getFullName = () => '${this.firstName} ${this.lastName}'; const user = { firstName: 'Adam', lastName: 'Smith', getFullName: getFullName, }; console.log(user.getFullName()); Arrow Function에서 this의 값은 일반함수처럼 호출한 대상에 따라 상대적으로 변하지 않고, Arrow Function이 선언되기 직전에 유효한 this값과 똑같은 값을 가지고서 동작하게 된다. getFullName이 선언될 때 this의 값은 전역 객체인 window 객체가 된다. getFullName 함수를 실행하려고 하면, window 객체의 firstName과 lastNa..
값으로서의 함수
1. 자바스크립트의 함수 typeof 연산자로 함수의 타입을 확인해보면 function이 리턴된다. 그러나 자바스크립트의 함수는 엄연히 따지면 객체이다. 자바스크립트의 함수는 선언 자체로도 값으로 평가될 수 있다. (변수에 함수 선언을 할당하는 함수 표현식 가능) 변수나 다른 데이터 구조 안에 할당할 수 있고, 다른 함수의 파라미터로 전달될 수 있다. 다른 함수의 리턴값이 될 수도 있다. 이러한 조건을 모두 만족하는 함수를 일급 함수(First-Class-function)이라고 부른다. 2. 값으로서의 함수 예제 // 함수 표현식으로 함수 만들기 const sayCodeit = function() { console.log('Codeit'); }; sayCodeit(); // 객체 프로퍼티로 함수를 선언해..
AND와 OR 연산 방식
JavaScript에서 AND 연산자(&&)는 왼쪽 값이 truethy하면 오른쪽 값을, falsy하면 그대로 왼쪽 값을 리턴하는 방식으로 동작한다. Or 연산자(||)는 왼쪽 값이 truethy하면 그대로 왼쪽 값을, falsy하면 오른쪽 값을 리턴한다. 사용 예시 1) console.log(null && undefined); console.log(0 || true); console.log('0' && NaN); console.log({} || 123); null true NaN {} 사용 예시2) function print(value) { const message = value || 'Codeit'; console.log(message); } print(); print('JavaScript'); 함수..