혼자 적어보는 노트

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

useRef javascript에서는 getElementById, querySelector 와 같이 특정 DOM을 선택할 수 있는데 react 에서는 ref를 사용하여 특정 DOM을 선택 할 때 사용한다. ref를 사용 할 때는 useRef라는 hook을 사용한다. const inputRef = useRef(); 이렇게 input에 ref를 useRef()로 만든 변수명을 넣어주면 사용 가능하다. myInput을 console.log에 출력해보면 console.log(inputRef) /* {current: HTMLInputElement} current: */ 위와 같이 current에서 input이 나타나며 myInput.current를 사용하면 해당 input에 접근이 가능하다. + Class com..

state 업데이트 함수는 비동기식(asynchronous) 함수이다. state를 업데이트를 하고 그 값에 맞춰서 처리하는 함수가 아래에 있을 경우 순서대로 처리가 되지 않아서 오류를 접할 수 있다. 예를들어 아래의 코드를 보자. function Example(){ let [count, setCount] = useState(0); let [data, setData] = useState('2를 만들어 주세요') function handleClick() { setCount(count+1); if(count === 2){ setData('2 입니다'); } } return( { data } count : {count} ) } 버튼을 클릭하면 count가 하나씩 증가하고 count가 2가 되었을 때 date를..