FE/JavaScript4

• 

  [JavaScript] call back, promise, async await call back 1-1. 콜백(call-back)함수란? 파라미터로 함수를 전달하는 함수 한마디로 말해서 함수안에 함수가 있는 형태이다. console.log('1'); setTimeout(()=>console.log('2'),1000); console.log('3'); // Synchronous callback function printImmediately(print){ print(); } printImmediately(()=>console.log('hello')); // Asynchrous callback function printWithDelay(print, timeout){ setTimeout(print,timeout); } printWithDelay(()=>console.log('async c.. FE/JavaScript 2022. 8. 5.

• 

  [JavaScript] 브라우저 동작원리, JSON 1. 동작 원리 브라우저와 html css javascript 만 보고 따졌을때 동작 원리는, 즉, 브라우저가 HTML을 한줄한줄씩 parsing 하면서 css와 병합해서 DOM요소로 변환한다. 동작을 하다가 js가 필요하다고 인식이 되면 js를 다운받기 시작하고 실행한다. 그후에 는 다시 HTML로 돌아가서 parsing 하기 시작한다. 만약 , asyn 나 defer 가 붙을수 있는데 , ex) async는 전에 react나 자바스크립트 클론코딩에서 썼던 비동기방식으로 위에 그림과 같은 동작 구조에서 HTML 을 불러오고 js를 읽어오는 과정에서 비동기적으로 , 즉 병렬수행을 하는 것이다. 위험한 점으로는, js를 읽어왔는데 실행하는데 필요한 html은 아직 읽어오지 않았을 수도 있다는 점 등이 있다.. FE/JavaScript 2022. 8. 4.

• 

  [JavaScript]vanilla javascript로 To do list 클론코딩 (노마드코더) 최근에 노마드코더에서 바닐라 자바스크립트로 To do list를 만드는것을 해보았다. 확실히 프론트엔드라 그런지 무언가를 만들때마다 바로바로 결과가 나타나서 재밌었다. HTML/ CSS / JAVASCRIPT로 나누어서 파일을 각각 만들었다. 밑에는 결과물이다. index.html 00:00:00 style.css .hidden { display: none; } body{ background-color: #2d3436; text-align: center; color: #ecf0f1; padding: 1%; } .bgImg{ position: absolute; top:0; left: 0; width:100%; height: 100%; z-index: -1; } #login-form > input{ bord.. FE/JavaScript 2022. 7. 21.

• 

  [JavaScript] addEventListener 및 event 처리 평소에 JavaScript에서 어떤 이벤트가 있는지 대충밖에 모르고 있었으나, 클론코딩 공부중에 조금이나마 자세하게 알아보는 시간을 가졌다. 우선, 이런것들이 세부적으로 뜨는것을 볼수있다. 이중에서 나는 event 처리에 관련된 것들이 궁금하기때문에 찾아보았다. 위의 사진을 보면 평소에 자주 썼던 onclick, onchange, oncopy등을 볼수 있다. 그후에 마우스 관련 이벤트들을 찾아보면, 이걸 보고 vscode에다가 작성해보면 //주석 은 앞에 코드랑 같은 의미를 가졌다는 뜻이다. 그리고 HandleClickListenr()대신 HandleClickListenr를 쓴 이유는 click event가 발생 했을경우에만 함수를 호출하기 때문이다. 만약에 HandleClickListener()를 써버.. FE/JavaScript 2022. 7. 19.