바르고 뜨겁게

Javascript - fs(파일 시스템)fs 모듈 : 로컬의 파일 및 폴더를 읽기/쓰기/삭제 가능 사용법비동기 방식 const fs = require('fs'); ​ fs.readFile('./readme.txt', (err, data) => { if (err) { throw err; } console.log(data.toString()); }); 동기 방식 const fs = require('fs'); ​ const data = fs.readFileSync('./readme.txt') console.log(data.toString()); 프로미스 방식 const fs = require('fs').promises; ​ fs.readFile('./readme.txt') .then((data) => con..

Javascript - 프로미스(Promise)Promise 란?비동기 작업의 결과값(성공,실패)를 저장하고 있는 컨테이너, resolve 와 reject를 통해 원하는 시점에 결과를 리턴할 수 있다. Promise 생성 const promise = new Promise((resolve, reject)=>{ if(true){ resolve() }else{ reject() } }) Promise를 사용한 콜백 처리.미국 달러와 원화 , 엔화를 차례대로 서버에 요청하는 예제이다.CORS를 피해갈 마땅한 GET 요청이 없어서 아래 API 사용했으므로 과다한 호출은 삼가 부탁드립니다. 각 나라별로 차례대로 환율을 비교해야하는 상황에 동시에 조회하는 API가 없다면 콜백 헬이 엄청나게 깊어 질 수도 있다.하지만 ..

Javascript - 객체 리터럴 (object literal)Javascript 객체 생성 방법 new Object() Object.create()리터럴 표기법객체 초기자(object initializer)는 0개 이상인 객체 속성명 및 관련값 쌍 목록이 콤마로 분리되어 중괄호({})로 묶인 형태 용어의 뜻 : literal 이란?컴퓨터 과학 분야에서 리터럴(literal)이란 소스 코드의 고정된 값을 대표하는 용어다. 거의 모든 프로그래밍 언어는 정수, 부동소수점 숫자, 문자열, 불린 자료형과 같은 용어를 가지고 있다. 어떤 언어는 열거 타입이나, 배열, 자료형, 객체와 같은 용어도 있다. 리터럴과 대조적으로, 고정된 값을 가질 수 있는 변수나 변경되지 않는 상수가 있다. 객체 리터럴 생성 및 접근..

[JavaScript] 실행 컨텍스트와 호이스팅자바스크립트는 함수 선언보다 함수 실행을 먼저 하더라도 동작이 된다.코드는 위에서 아래로 실행이 된다고 알고 있는데 왜 그런걸까? 실행 컨텍스트실행 컨텍스execution context는 실행할 코드의 환경 정보를 모아놓은 객체로, 가장 먼저 실행되어 스택에 들어가게 된다.이 실행 컨텍스트가 생성될 때, 호이스팅이 된다. 호이스팅호이스팅hoisting이란 실행 컨텍스트에 환경 정보를 저장할때 매개변수의 이름, 함수 선언, 변수명등을 끌어 올려서 기록하는 것 입니다.원본 코드 var a // 수집대상 var a = 3 // 선언부만 호이스팅, 할당은 원래 자리에 남겨둠. ​ function f (arg) { // 수집대상(함수 선언문은 호이스팅됨) var fv..

setInterval 사용시 func.apply is not a function 에러자바스크립트에서는 함수 호출 자리에 함수의 이름이 아니라 함수명() 처럼 코딩시 정의된 함수가 즉시 호출되어 버린다.따라서 아래와 같이 코딩하면 func.apply is not a function 에러를 만나게 된다. 잘못된 사용법_myFunc = () => { ... } ​ this._timerId = setInterval(this.myFunc(),1000);코드 실행시 즉시 1번 호출이 되고, 10초 뒤엔 func.apply is not a function 에러를 만나게 된다.의도는 myFunc() 함수를 10초마다 호출하여 실행하는 것이지만, 해결 방법_myFunc = () => { ... } ​ this._time..

Vanilla JS - Array.includes배열안에 특정 argument가 포함되어 있는지 검사한다. const numbers = [153, 8, 45, 68, 4153, 5, 8541, 635, 153, 3, 5, 1, 85, 1, 3, 5, 85]; ​ ​ if(numbers.includes(153)){ console.log('153 존재'); }else{ numbers.push(153); // 배열에 추가함 } 153 존재

Vanilla JS - Array.filterarray.filter : 배열의 각각의 argument 에 Function 실행하고 true를 리턴할 경우만 배열로 만든다 const numbers = [153, 8, 45, 68, 4153, 5, 8541, 635, 153, 3, 5, 1, 85, 1, 3, 5, 85]; ​ ​ // 10보다 큰 argument 가 리턴됨 const biggerThan10 = numbers.filter(number => number > 10); console.log(biggerThan10); ​ // 5를 제외한 argument 가 리턴됨 const del5 = numbers.filter(number2 => number2 !== 5); console.log(del5); [..

Vanilla JS - Array.maparray.map : 배열내의 각각의 argument 에 function을 [실행] 후 [return]return 을 해줘야 값이 저장된다. const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"]; ​ ​ // 리턴 없음 const temp = days.map(newArray => console.log(newArray)); console.log("temp : ", temp); ​ // 각각의 배열 파라미터에 happy를 추가하여 리턴 const smilingDays = days.map(newArray => `happy ${newArray}`); console.log("smilingDays : ", smilingDays); ​ //..

Vanilla JS - classes (자바스크립트 객체 지향 프로그래밍) 프로그래밍 패러다임함수형 프로그래밍(Functional Programming)객체 지향 프로그래밍(OOP-ObjectOrientedProgramming) ES6 부터 자바스크립트에서 객체 지향 프로그래밍이 가능하다. class Human{ constructor(name, lastName){ this.name = name; this.lastName = lastName; } } ​ // Human 상속 const myName = new Human("Right","Hot"); ​ console.log(myName); console.log(myName.name); console.log(myName.lastName); ​ class Bab..

오브젝트에서 변수꺼내기 (비구조화 할당 Object Destructuring)1. 변수명 변경해서 꺼내기2. 오브젝트 변수명으로 받3. 배열 형태로 꺼내기 const obj = { depth1_0: "1단계 0", depth1_1: "1단계 1", depth1_2: { depth2_0: "2단계 0", depth2_1: "2단계 1" } } ​ // 기존방식 const oldDepth1 = obj.depth1_0; const oldDepth2 = obj.depth1_2.depth2_0; ​ console.log(`기존방식 oldDepth1: ${oldDepth1} / oldDepth2: ${oldDepth2}`); ​ // (비구조화 할당 Object Destructuring) // 변수명변경 , 그대로..