혼자 적어보는 노트

자바스크립트의 데이터 타입에는 기본형(원시형)과 참조형이 있다. 기본형: 숫자(number), 문자(string), 불린(boolean), 심볼(symbol), bigint, null, undefind 참조형: 객체(object), 배열(array), 함수(function), 날짜(date), 정규표현식(RegExp) 불변값 기본형의 값은 불변의 값이다. var a = 10; 위의 코드에서의 변수는 변할 수 있는 수(값)인 10을 의미하며 식별자는 데이터를 식별하는데 사용되는 이름, 즉 변수명인 a를 칭한다. 변수에 값을 할당할 때 단순하게 값을 할당한다고 생각할 수 있겠지만 변수와 데이터는 각각 다른 공간에 저장이 된다. [변수 영역]에서 빈 공간을 확보하고 그 공간에 식별자 (a)를 지정한 후 [데이..

clientWidth / clientHeight border 안의 사이즈 값 요소의 너비와 패딩을 포함한 값 (*스크롤바의 너비는 포함하지 않는다) clientWidth : 기본 width(300px) + 양 쪽 padding (25px + 25px) = 350 clientHeight : 기본 height(200px) + 위 아래 padding (25px + 25px) = 250 스크롤을 추가해보자. //생략 스크롤이 없었을 땐 clientWidth 가 350였지만 스크롤이 추가 되니 콘텐츠의 영역에 스크롤바가 할당되어 333으로 줄어든 것을 볼 수 있다. *스크롤바의 너비는 브라우저마다 다르다 scrollWidth / scrollHeight clientWidth와 clientHeight과 비슷하지만 스..

스크롤이나 요소의 위치 등에 따라 변경되는 엘리먼트들 혹은 터치구현이나 그런것들을 작업하면서 계산을 하는 방식을 적용할 때 필요에 따라 검색해서 사용하곤 했지만 헷갈리는 부분이 좀 있기 때문에 정리해보도록 하겠다. offsetParent / offsetLeft, offsetTop offsetLeft, offsetTop은 지정된 요소가 가까운 조상 요소를 기준으로 얼마나 떨어져 있는지를 의미한다. offsetParent 지정된 요소의 가까운 조상 요소이다. body값은 브라우저마다 약간의 기본 margin이 있어서 0으로 초기화해 두었다. CSS position으로 설정된 부모요소가 없을 경우엔 가장 가까운 를 기준으로 한다. 위 코드의 offsetParent는 자동으로 body가 된다. offsetPar..

async와 await async와 await을 사용하면 프라미스를 좀 더 편하게 사용 할 수 있다. async를 함수앞에 붙이면 자동으로 프라미스로 반환된다. async 함수 async는 function앞에 위치하며 해당 함수는 항상 프라미스를 반환한다. async function loadData(){ return "Hey"; } loadData().then(console.log); 위의 함수가 실행되면 result가 "hey"인 이행 프라미스가 반환된다. async function loadData(){ return Promise.resolve("Hey"); } loadData().then(console.log); // Hey 위와 같이 async에 프라미스를 반환하는 것도 가능합니다. async가 붙..

Promise 서버에 요청을하거나 큰데이터를 읽거나 하는 것을 동기적으로 처리할 경우 다음 작업을 하는데에 시간이 걸린다. 그래서 네트워크 통신이나 파일을 읽는 등 시간이 걸리는 작업을 할 경우에는 비동기적(Asynchronous)으로 처리를 하는것이 좋다. 비동기 처리로는 promise가 있고 async await이 있는데 일단 promise부터 알아보자. let promise = new Promise(function(resolve, reject) { // executor() }); new promise가 만들어 질 때 executor(실행함수)가 자동적으로 실행된다. executor는 처리 성공 여부에 따라 resolve나 reject를 호출하게 된다. resolve(value) - 요청한 일이 성공..

javascript에서 Callback에 대한 이해 javascript는 동기적인(synchronous)언어이다 작업을 실행한 후에 완료가 된 후에 다음 작업을 처리 한다. 즉 코드를 적은 순서대로 작동이 된다. 비동기적인 처리를 위한 방법들이 존재하기는 하지만 ( async, await, promise) 일단 동기/비동기 처리의 이해를 위해 callback function에 대한 이해를 제대로 해보기로 한다. CallBack 함수란 요청을 보내고 돌려받는 함수이다. function loadScript(src){ let script = document.createElement('script'); script.src= src; document.head.append(script); } loadScript('..

class를 종종 접하게 되다 보니 이제는 기본적인 정리가 필요할 것 같아서 이번에 이해를 한 바탕으로 정리를 해 보았다. Class 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위한 템플릿이다. 클래스는 객체를 정의하기 위한 변수와 메서드(함수)로 구성된다. 함수 선언과 클래스 선언의 차이점은 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 호이스팅이 일어나지 않기 때문에 클래스를 먼저 선언해 주어야 한다. 기본 문법 사용해보기. class User { constructor(name){ this.name = name; } myName(){ console.log(this.name); } sayHello(){ console.log("Hello"); } } let user = new Use..

fetch() 원격 api를 간편하게 호출할 수 있는 내장함수. 라이브러리를 사용해도 되지만 간단한 호출에는 라이브러리의 도움 없이 내장된 fetch() 함수를 사용하여 처리할 수 있다. fetch사용법. fetch는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고 promise타입의 객체를 반환한다. API호출이 성공 했을 경우에는 response객체를 반환하며 실패했을 경우에는 error 객체를 반환한다. GET 요청 fetch()은 defualt로 get요청이므로 get요청을 할 경우 옵션인자가 필요가 없다. Response {status: 200, ok: true, redirected: false, type: "cors", url: …} API들은 위와 같이 대부분 JSON형태로 제공되며 ..