electron 개발을 하면서 기본적으로 html과 JS 간의 상호작용이 필요할 때가 있다. 바로 이럴때 빈번하게 쓰이는 document.getElementById 와 addEventListener에 대해서 알아보자. html의 요소를 가져와서 사용하고 싶을 때 해당 요소를 가지고 오려면 document.getElementById를 사용하면 된다. 상황을 설정해서 만약 html에서 result라는 버튼이 있고, 그 버튼을 눌렀을때 "결과"이라는 글씨가 바뀌어야 한다고 하자. 결과 정답? // document.getElementById('id')를 이용해서 해당 html을 정의해주고 const result = document.getElementById('result'); const set = documen..

출처. https://www.youtube.com/watch?v=PuG2VW18O1E&t=5s 어떤 함수를 어려워하는 구독자 때문에 만드셨다고 한다. 마음씨가 정말 따뜻하시다. 나도 배워야겠다. // Don't give up // 함수 선언 function doSomething(add) { console.log(add); //함수를 이용해서 안에서 사용 가능 const result = add(2, 3); console.log(result); } function add(a, b) { const sum = a + b; return sum; } // 함수 호출 doSomething(add); //함수를 전달함. 함수 자체를 전달해버림 function add() {} // const result = add(1,..

출처. https://www.youtube.com/watch?v=aoQSOZfz3vQ 드디어 입문의 마지막이다. 동기와 비동기. 멀티스레딩이 아닌 곳에서 유용하게 쓰이는 만큼 어렵다. callback -> promise -> async, await으로 이어지는 전개가 좋았다. 'use strict'; const { reject } = require("async"); // async & await // clear style of using promise :) // 1. async // function fetchUser에 들어와서 10초 동안 처리를 기다리고 그 다음 일을 수행하게 된다. function fetchUser() { // do network request in 10 secs... return '..

출처. https://www.youtube.com/watch?v=JB_yU6Oe2eE&t=1053s JS꽃 동기와 비동기라니 C언어의 꽃 포인터가 생각나는 건 나뿐인가...? 어쨌든 어렵고 그만큼 강력하기에 꽃이라고 했겠지? 'use strict'; // Promise is a JavaScript object for asynchronous operation. // State: pending -> fulfilled or rejected // Producer vs Consumer // 1. Producer // when new Promise is created, the executor runs automatically. const promise = new Promise((resolve, reject) => ..

출처. https://www.youtube.com/watch?v=s1vpVCrT8f4 callback 지옥이라서 호출 스택이 많이 쌓여서 지옥인가? 했는데 프로그래머에게 지옥의 의미는 유지, 보수, 수정이었다. error가 나는 부분이나, parameter를 가지고 와서 어디서 어떻게 쓰이는지 정말 보기 어려우니 지옥이였구나... 다음 편 promise를 어떻게 쓰는지가 중요할 것 같다. 'use strict'; // hoisting // Synchronous callback function printImmediately(print) { print(); } // Asynchronous callback function printWithDelay(print, timeout) { setTimeout(print..

출처. https://www.youtube.com/watch?v=FN_D4Ihs3LE&t=222s 예전에 프로젝트를 하면서 JSON을 썼었는데 JS에서 쓰니 깔끔한 것 같다. C#이나 Python, c++은 복잡했던 기억이... 콜백 함수를 parameter로 줄 수 있어서 stringify 된 value값을 다시 obj로 살리는 reviver는 정말 이름값 하는 것 같다. // JSON // JavaScript Object Notation // 1. Object to JSON // stringfy(obj) let json = JSON.stringify(true); console.log(json); json = JSON.stringify(['apple', 'banana']); console.log(jso..

출처. https://www.youtube.com/watch?v=3CUjtKJ7PJg&t=122s API종류도 많고 Python의 map과 비슷한 개념과 .filter().join() 같이 두 번 연속으로 API를 쓰는 건 연습을 잘해야겠다. sort에서 .sort((a,b) => a-b) 는 정말 익숙하지 않다 ㄷㄷ // Q1. make a string out of an array const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(','); console.log(result); //apple,banana,orange // Q2. make an array out of a string const fruits = 'apple, ..