웹 공부일지

Windows NVM 설치 1. github nvm-windows repository 방문 https://github.com/coreybutler/nvm-windows 밑으로 내려서 Download Now! 버튼클릭 버튼을 클릭하고 들어왔다면, 밑으로 내려서 nvm-setup.exe 다운로드 nvm-setup.exe 실행 다운받은 파일을 실행해서 쭉 진행합니다. 만약 이미 NodeJs가 깔려있다면.. nvm이 원래 깔려있던 버전을 관리하는 것을 허용하겠냐는 알림이 뜹니다. 이부분은 알아서 선택하시면 됩니다. NVM이 잘 설치되었나 확인 window키 + r 을 눌러서 실행창을 띄운 뒤, cmd를 입력하고 명령프롬프트 접속. nvm —version (nvm version) 입력해서 해당 설치한 버전이 뜬다..

base64Image 변환하기 base64String Base64는 인코딩 방식 중 하나로, 이진 데이터를 문자열로 변환하는 과정을 말합니다. 이진 데이터는 0과 1로 이루어진 이진수로 표현되는 데이터로, 문자열로 표현하기 어렵기 때문에 Base64 인코딩을 사용하여 문자열로 변환합니다. Base64는 이진 데이터를 일종의 알파벳으로 이루어진 문자열로 변환합니다. 이 문자열은 인코딩과 디코딩을 거쳐 다시 이진 데이터로 변환할 수 있습니다. Base64는 MIME(Multipurpose Internet Mail Extensions) 표준에서 이메일을 통해 전송되는 이진 데이터를 안전하게 인코딩하기 위해 사용됩니다. Base64는 네트워크에서 이진 데이터를 안전하게 전송하는 데 사용되는 바이너리 인코딩 알고..

js - tagged template literal 설명 template literals 의 더욱 발전된 한 형태는 tagged templates 입니다. 태그를 사용하면 템플릿 리터럴을 함수로 파싱 할 수 있습니다. 태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함합니다. 나머지 인수는 표현식과 관련됩니다. 결국 함수는 조작 된 문자열을 반환 할 수 있습니다 (또는 다음 예제에서 설명하는 것과 완전히 다른 결과를 반환 할 수 있습니다). function 이름은 원하는 어떤 것이든 가능합니다. Tagged Template Literal은 ES6(ES2015)부터 도입된 새로운 문자열 처리 방법인 템플릿 리터럴(Template Literal)을 확장하는 기능으로, 독특한 문법을 통해 개발자들이 더욱 효..

JS function vs arrow function function 키워드의 쓰임새 1. 실행문으로써의 일반함수 function normalFunc(...args) { console.log(this); // window(브라우저 환경) || global (Nodejs 환경) return args; } const ret = normalFunc(1, 2); console.log(ret); // [ 1, 2 ] 2. 생성자함수로써의 함수 // 생성자 함수 정의 function Person(name, age) { this.name = name; this.age = age; } // 생성자 함수의 프로토타입에 메서드 추가 Person.prototype.sayHello = function () { console...

Javascript this this JavaScript에서 "this"는 현재 실행 중인 코드의 컨텍스트를 참조하는 특별한 키워드입니다. 이 컨텍스트는 주로 함수 또는 메소드가 호출되는 방법에 따라 결정됩니다. this는 호출될 때 결정되며 호출될 때 this가 특정 객체에 바인딩된다고 합니다. 여러 상황에서의 this의 값 1. 브라우저 환경일 경우 브라우저 콘솔에 this를 찍어보세요 console.log(this); // window function whatIsThis() { console.log(this); // window } whatIsThis(); 2. 엄격모드일 경우 "use strict"; function whatIsThis() { console.log(this); } whatIsThi..

async / await 1. async / await란? async/await는 JavaScript에서 비동기적인 동작을 처리하기 위한 문법입니다. 이를 사용하면 비동기 코드를 동기적으로 작성하고 관리할 수 있습니다. async 함수는 항상 Promise를 반환하며, 이것은 async 함수의 반환값이 Promise.resolve()에 전달된 다음 호출자에게 반환된 것과 같습니다. await 키워드는 Promise가 완료될 때까지 해당 코드의 실행을 일시 중지합니다. await 키워드는 async 함수 내에서만 사용할 수 있습니다. 따라서, await를 사용하려는 코드가 async 함수 내에 위치하도록 주의해야 합니다. **async / await** 구문을 사용하면 각 비동기 작업에서 다음 구문을 실행..

Promise.allSettled(iterable); Promise.allSettled()메서드는 주어진 모든 프로미스를 이행하거나 거부한 후, 각 프로미스에 대한 결과를 나타내는 객체 배열을 반환합니다. 일반적으로 서로의 성공 여부에 관련 없는 여러 비동기 작업을 수행해야 하거나, 항상 각 프로미스의 실행 결과를 알고 싶을 때 사용합니다. 반환된 각 객체별로 status를 확인할 수 있습니다. 만약 fulfilled상태라면 value를, rejected상태라면 reason속성을 확인할 수 있습니다. value나 reason을 통해 각 Promise가 어떻게 이행(또는 거부)됐는지 알 수 있습니다. 예시 Promise.allSettled([ Promise.resolve(33), new Promise(re..

Promise.all(iterable) 주로 배열을 인자로 받아서 인자로 받은 반복가능한 객체들을 순회하면서 비동기 작업들을 처리합니다. 입력 값으로 들어온 프로미스 중 하나라도 거부 당하면 Promise.all()은 즉시 거부합니다. 만약 비동기 작업이 아니라 의미없는 [1,2,3]와 같은 데이터를 인자로 넘겨주면 all메서드는 다음과 같은 작업을 자동으로 수행합니다. Promise.all([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)]); 이는 내부적으로 Promise.resolve()메서드가 호출되어 인자로 전달된 값이 프로미스 객체로 변환되기 때문입니다. 빈 객체를 전달한 경우, (동기적으로) 이미 이행한 프로미스를 반환합니다. Prom..

프라미스 (Promise) 1. Promise란 무엇인가? ECMA 2015부터 표준이 되었고, 노드버전 4부터 기본적으로 사용할 수 있다. 콜백을 대신할 강력한 대안으로 발돋음 하게 된다. 프라미스는 비동기 작업의 최종적인 결과(또는에러)를 담고있는 객체 입니다. 비동기 작업이 아직 완료되지 않았을 때, Pending (대기중) 작업이 성공적으로 끝났을 때, Fullfilled (이행됨) 작업이 에러와 함께 종료 됐을 때, Rejected (거부됨) 이 때, Promise가 이행되거나 거부됐을 때, 이것을 Settled (결정됨) 이라고 부른다. Promise가 Settled 되면 이행됐거나, 거부된 결과의 관련된 에러를 받기 위해서 프라미스 인스턴스의 then() 함수를 사용할 수 있습니다. prom..