OneMoreEnergyDrink OneMoreEnergyDrink

메타태그메타태그란?메타 태그란 로 작성하는 HTML 태그이다.이는 구글 검색 페이지의 사이트 설명 및 링크 미리보기에서 사용된다.메타 태그 사용 예시 1HTML 문서의 문자 인코딩을 utf-8로 지정한다. 브라우저가 웹페이지를 해석하는 방식을 지정해서 문서의 깨짐을 방지한다.name="viewport" 설정으로 반응형 웹 사이트를 제작할 수 있다.width=device-width: 장치의 화면 너비를 따르도록 페이지 너비를 설정한다.initial-scale=1: 브라우저에서 페이지를 처음 로드할 때 배율을 1로 설정한다.minimum-scale=1: 최소사이즈를 1배로 처리해서 축소를 못하게 막는다.maximum-scale=1: 최대사이즈를 1배로 처리해서 확대를 못하게 막는다.user-scalable..

인터랙티브 자바스크립트 시작하기웹 서비스와 JavaScriptHTML과 CSS만으로는 인터렉티브한 웹을 만들 수 없고 따라서 JavaScript를 사용한다.우리는 웹을 통해 인터넷과 상호작용하며 여러 정보를 주고 받을 수 있다.id로 태그 선택하기document.getElementById(’id’);자바스크립트에서 위 코드로 접근할 수 있다.없는 id에 접근하면 null을 반환한다.id는 고유값이고 하나의 요소에 접근할 때 사용한다.HTML에서 id속성을 부여하고,class로 태그 선택하기document.getElementByClassName(’color-btn’);위 코드로 접근할 수 있다.배열은 아니지만 length나 대괄호 표기법([])으로 요소에 접근이 가능하다.없는 class에 접근하면 빈 HT..

-Fetchfetch() 옵션method(메소드): `'GET'`, `'POST'`, `'PATCH'`, `'DELETE'`headers(헤더): 자주 설정하는 헤더로는 `'Content-Type'`가 있다.body(바디):  JSON 문자열로 바꿔서 보내야 한다.GET 리퀘스트 const information = await fetch(”~~”);리퀘스트를 보내고 response를 얻을 수 있다.POST 리퀘스트 const information = await fetch(”~~”, { method: 'POST', body: JSON.stringify(surveyData), });POST 리퀘스트를 보낼 수 있다.JSON.stringify로 값을 JSON형태로 변환 시킬 수 있..

콜백함수:어떤 함수의 아규먼트로 전달되는 함수를 콜백 또는 콜백 함수라고 부른다.비동기 실행:자바 스크립트의 코드는 순차적으로 실행된다. (동기)만약 수행이 오래걸리는 코드가 있을 경우 이를 무시하고 다른 줄부터 수행하는 것을 비동기 실행이라 한다. 비동기 실행에서 무시되는 코드는 중간에 다른 작업을 처리하다가 다시 돌아와서 마무리한다.(예: 서버에 데이터를 요청하고 응답을 받는 경우)setTimeout()함수를 통해 이를 테스트 해볼 수 있다.비동기 함수는 이후에 있는 모든 코드를 실행한 뒤 콜백을 실행한다.실행할 콜백이 여러개이면 동기적으로 실행됨.그 외 비동기 함수:setInterval() 함수clearInterval(변수명)으로 중지할 수 있음.setInterval() 함수는 시간 간격을 두고 콜..

자바스크립트 객체지향 기본기1. 객체와 클래스객체 지향 프로그래밍이란? 구성:프로퍼티(property): 변수메소드(method): 함수*절차 지향 프로그래밍(Process-Oriented Programming, POP):    데이터 구조와 이에 수반하는 동작들을 분리하는 컴퓨터 프로그래밍의 패러다임  객체 만들기 1-1: Object-Literalconst user = { email: 'chris123@google.com', birthdate: '1992-03-21', buy(item) { console.log(`${this.email} buys ${item.name}`); },};중괄호를 쓰고 그 안에 프로퍼티와 메소드를 나열하는 것 객체 만들기 1-2: Factory functionf..

자바스크립트의 문법과 표현-문장과 표현식문장 (statements): 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리표현식 (expressions): 결과적으로 하나의 값이 되는 모든 코드*문장과 표현식의 차이는 변수에 할당해 보면 알 수 있다. (error나면 표현식 아님)- 조건을 다루는 표현식`조건 ? a : b` 엘비스 연산자 (조건 연산자)*표현식이기 때문에 반복문의 실행, 변수의 할당 등은 불가.-spread 구문배열명 앞에 …을 붙으면 ‘ ‘를 두고 나열함.이를 활용하면 배열을 복사하는 것도 가능 (참조 x)const codeit = {name: 'codeit',};const codeitClone = { ...codeit, // spread 문법!}; console.log(co..

모던 자바스크립트란?JS는 시간이 지나며 유용한 기능이 추가되고 발전하는데 ECMA international에서 이를 관리한다.새로운 내용이 추가될 때마다 ES1, ES2, ~, 로 출시중이다.웹 브라우저는 최신버전을 항상 완벽하게 지원하지는 못한다.따라서 현시점에서 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 스크립트를 모던 자바스크립트라고 부르게 되었다.자바스크립트의 동작원리-데이터 타입의 특징과 종류유연한 데이터 타입: 상황에 따라 타입이 변할 수 있음. (연산 등)추가된 데이터:- Symbol: 유일한 값    `const user = Symbol('this is a user');`    이런식으로 사용한다~    어떤 값과 비교해도 false를 반환한다.- BigInt: 엄청 큰 수..

객체:객체와 프로퍼티여러 값을 한번에 저장하기 위해 사용함.포로퍼티는 Property Name과 Property Value로 나뉨Property Name은 문자, _, $ 중 하나로 시작해야하고 -는 사용할 수 없음.typeof 사용시 object 반환*숫자형 프로퍼티 name은 대괄호 표기법으로만 접근되고 이 key값은 출력시 String으로 출력된다.객체에서 데이터 접근점 표기법: 객체명.프로퍼티이름으로 접근가능.대괄호 표기법:객체명[’프로퍼티이름’]으로 접근가능.객체 다루기존재하는 프로퍼티의 값을 수정할 수 있다.존재하지 않는 프로퍼티에 새로운 값을 할당하면 프로퍼티를 추가할 수 있다.delete 프로퍼티이름을하면 프로퍼티를 삭제할 수 있다.프로퍼티이름 in 객체이름을 하면 객체 안에 프로퍼티가 있..