코드 그라데이션

자바스크립트를 실행하는 와중에 Node.js의 모듈을 이용하여 js 파일을 다른 곳에서 실행할 수 있는 기능이 있었다. index.js const calc = require("./calc"); // 내장함수, 경로 console.log(calc); // 모듈을 출력 console.log(calc.add(1, 2)); console.log(calc.add(4, 5)); console.log(calc.sub(10, 2)); calc.js const add = (a, b) => a+b; const sub = (a, b) => a+b; module.exports = { moduleName : "calc module", add : add, sub : sub, }; 실행 결과

API란? 예시 let response = fetch("https://jsonplaceholder.typicode.com/posts").then((res) => { console.log(res); }) 조금 더 세련되게 json 형식으로 가져와보겠다. async function getData() { let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts"); let jsonResponse = await rawResponse.json(); // json 형태로 반환 console.log(jsonResponse); } getData();

async // async function hello () { return "hello"; } async function helloAsync() { return "hello Async"; } console.log(hello()); console.log(helloAsync()); // async를 붙여주면 자동적으로 비동기 함수가 된다. 이말은 then을 쓸 수 있다는 것인데, async 붙은 함수의 리턴값은, 비동기 작업 객체 Promise의 resolve의 결과값이 된다. 그러니까 async를 붙이고 그냥 리턴만 해도, promise를 리턴하면서 resolve를 이 return 값으로 수행한 것과 똑같은 결과를 얻는다고 생각하면 된다. await 기다렸다가 끝나는 함수를 만들자 일단 async 응용 f..

비동기 작업이 가질 수 있는 3가지 상태 2초 뒤에 전달받은 값이 양수인지 음수인지를 판별하는 작업 만들기 function isPositive(number, resolve, reject) { setTimeout(() => { if(typeof number === "number") { // 성공 -> resolve resolve(number>=0 ? "양수" : "음수"); } else { // 실패 -> reject reject("숫자형 값이 아닙니다.") } }, 2000) //2초 대기 } isPositive(10, // 10은 숫자형이고 양수이기 때문에 성공 (res) => { console.log("성공적 수행 : ", res);// }, (err) => { console.log("실패함 : ",..

이런 상황을 가정하자 실행 순서는크게 상관이 없다고 가정하자. 연산 과정은 코드 한줄한줄마다 다 실행이 된다고 가정. 실습 먼저 동기적 함수 function taskA() { console.log("A 작업 끝"); } taskA(); console.log("코드 끝"); 비동기적으로 바꾸면 function taskA() { setTimeout(() => { console.log("A 작업 종료") }, 2000); // 2초 대기 } taskA(); console.log("코드 끝"); 이번엔 콜백 함수를 활용 function taskA(a, b, callback) { // 파라미터와 콜백함수 추가 setTimeout(() => { const res = a + b; callback(res); }, 30..

function isKoreanFood(food) { if (food === "불고기" || food === "비빔밥" || food === "떡볶이") { return true; } return false; } const food1 = isKoreanFood("불고기"); console.log(food1); const food2 = isKoreanFood("파스타"); console.log(food2); true false 출력됨 이거 업그레이드 가능하다. 입력받은 한식들 중에 해당하는 파라미터가 존재하는지 안하는지만 나타내면 되는 거다. function isKoreanFood(food) { if (["불고기" ,"비빔밥","떡볶이"].includes(food)) { return true; } retu..

단락회로 평가 논리 연산에서 첫 번째 피연샂나의 값만으로 해당 식의 결과가 확실할 때, 두 번째 값은 평가하지 않는 것. truthy와 falsy에서 const getName = (person) => { if(!person) { return "객체가 아닙니다." } return person.getName; }; let person;// undefined로 할당했으나 저 분기에 걸려서 에러 안 났음. const name = getName(person); console.log(name); 이 코드는 "객체가 아닙니다." 출력됨. const getName = (person) => { return person && person.name; // person이 undefined기 때문에 뒤의 값을 고려할 필요가 x..

ex. 기분에 따라 하는 행동 출력하기 function mood(state) { if (state === "good") { // 기분 좋을 때 하는 동작 sing(); } else { // 기분 나쁠 때 하는 동작 cry(); } } function cry() { console.log("액션 : CRY"); } function sing() { console.log("액션 : SING"); } function dance() { console.log("액션 : DANCING"); } mood("good"); 상황에 맞게 하나의 함수로 만드는 게 가능해진다.

1. 순환 함수 (forEach()) 이거를 const arr = [1, 2, 3, 4]; for (let i = 0; i console.log(elm)); 이렇게 바꾸는 거 가능. 그냥함수 형태로 바꾸면 arr.forEach(function (elm) { console.log(elm); }); 출력 결과는 arr.forEach(function (elm) { console.log(elm * 2); }); 하면 2. map() - 원본 배열의 모든 원소를 순회하면서 연산을 해서 반환할 수 있게 만들어주는 함수. 새로운 배열을 리턴함. 응용 2. ..

노드 리스트 노드 정보를 여러개 저장한 것. 배열과 비슷하게 저장함. 새 노드를 추가할 때는 웹 문서에 어떤 소스를 추가할지 먼저 고려하고, 그에 따라 요소 노드나 속성 노드 등을 만들어야 한다. 텍스트 노드를 사용하는 새로운 요소 추가하기 1. 요소 노드 만들기 - createElement() 메서드 document.createElement(노드명) 그런데 이 메서드는 새로운 노드를 만들 뿐 아직 웹 문서에 새로운 노드를 추가한 것은 아니다. 예를 들면 태그의 내용에 해당하는 텍스트 노드도 만들어야 한다. 2. 텍스트 노드 만들기 - createTextNode() 메서드 새로운 요소 노드를 만들었다면 그 다음은 내용을 담는 텍스트 노드를 자식 노드로 만들어 연결해야 한다. document.createT..