StarLord

커먼 JS는 모든 버전의 노드에서 지원하는 일반적인 모듈 패턴이다.(https://oreil.ly/CN-gA). 여전히 이런 방식의 모듈을 바벨이나 웹팩에서 사용할 수 있다. 커먼 JS를 사용하면 module.exports를 사용해 자바스크립트 객체를 익스포트할 수 있다.  예를들어 커먼 JS에서 print와 log 함수를 객체로 반환할 수 있다. const print(message) => log(message, new Date());const log(message, timestamp) => console.log('${timestamp.toString()}: ${message}'}; module.exports = {print, log}; 커먼 JS는 import 문을 지원하지 않는다. 그 대신, ..

자바스크립트 모듈은 다른 자바스크립트 파일에서 이름 충돌이 없이 쉽게 불러서 활용할 수 있는 재사용 가능한 코드 조각을 말한다. 자바스크립트는 모듈을 한 모듈당 하나씩 별도의 파일로 저장한다. 모듈을 만들고 외부에 익스포트 하는 방법에는 한 모듈에서 여러 자바스크립트 객체를 외부에 노출시키는 방식과 한 모듈에 하나의 자바스크립트 객체를 노출시키는 방식이 있다.  text-helper.js 파일에 있는 다음 모듈은 두 함수를 외부에 노출시킨다.export const print(message) => log(message, new Date());export const log(message, timestamp) => console.log('$(timestamp.toString()): ${message}'}; e..

ES2015이전에는 공식적으로 자바스크립트 명세에 클래스 문법이 없었다. 클래스가 도입되면서 자바나 C++ 과 같은 전통적인 객체지향 언어와 비슷한 구문을 제공한다는 점으로 인해 흥분한 개발자들이 많았다. 과거 몇 년간은 리액트 라이브러리가 사용자 인터페이스 컴포넌트를 만들때 클래스에 주로 의존했다. 오늘날, 리액트는 점차 클래스를 멀리하기 시작했고, 함수를 사용해 컴포넌트를 구성한다. 하지만 레거시 리엑트 코드나 다른 자바 스크립트 세계에서 클래스를 자주 볼 것이다. 따라서 간단하게 클래스에 대해 살펴보자.  자바스크립트는 프로토타입을 사용한 상속라고 불리는 방법을 사용한다. 이 기법은 객체지향처럼 느껴지는 구조를 만들어내기 위한 기법이다. 예를 들어, new를 사용해 호출해야 하는 Vacation 생..

1. 단순한 프라미스와 FetchREST API에 요청을 보내는 일은 상당히 귀찮은 일이었다. REST API로 부터 간단한 데이터를 앱이 받아오려면 20 줄이 넘는 코드를 작성해야 한다. 그 후 Fetch()함수가 등장하면서 구현이 편해졌다.fetch("https://api.ramdomuser.me/?nat=US&results=1").then(res => console.log(res.json()));  then은 프라미스가 정상적으로 완료되면 콜백함수를 한번만 호출한다. 이 콜백함수가 반환하는 값은 그다음에 오는 then 함수의 콜백에 전달되는 인자가 된다. 따라서 성공적으로 처리된 프라미스를 처리하기 위해 then 함수를 연쇄적으로 호출할 수 있다. fetch("https://api.ramdomus..

객체와 배열ES2016부터 객체와 배열을 다루는 방법과 객체와 배열안에서 변수의 영역을 제한하는 방법을 다양하게 제공하기 시작했다. 이런 기능으로는 구조 분해, 객체 리터럴 개선, 스프레드 연산자 등이 있다.  구조 분해를 사용한 대입구조 분해를 사용하면 객체 안에 있는 필드 값을 원하는 변수에 대입할 수 있다. 다음 sandwich 객체를 생각해보자, sandwich에는 4개의 필드가 있다. 하지만 그중에서 bread와 meat 필드의 값이 필요하다. const sandwich = { bread: "더치 크런치", meat: "참치", cheese: "스위스", toppings: ["상추","토마토","머스타드"]};const {bread, meat} = sandwich;console...

함수 선언function logCompliment() { console.log("잘했어요!");}logCompliment(); 함수 표현식함수 표현식은 이름없는 함수를 만들며 변수에 값을 대입할 수 있다.const logCompliment = function() { console.log("잘했어요!");};logCompliment(); 함수 선언과 함수 표현식 중 어떤 쪽을 사용할지 결정할때 알아둬야 할 내용으로 함수 선언은 호이스팅되지만, 함수 표현식은 그렇지 않다는 점을 들 수 있다. 즉 함수 선언을 작성하기 전에 함수를 호출해도 된다. 하지만 함수 표현식에 의해 만들어진 함수를 함수 표현식이 실행되지 건에 호출할 수는 없다.  인수넘기기const logCompliment = function(firs..

1. var : 일반적인 변수. 변경 가능var pizza = true;pizza = false;console.log(pizza); // false 2. const : 값을 변경할 수 없는 변수이다.  3. let : 구문적인 변수 영역 규칙 이 코드에서 if 블록안의 topic 변수를 변경하면 if 블록 밖의 topic 변수 값도 변경된다.var topic = "자바스크립트";if (topic) { var topic = "리엑트"; console.log('블록', topic); // 블록 리엑트}console.log('글로벌', topic); // 글로벌 리엑트 let 키워드를 사용하면 변수의 영역을 코드 블록 안으로 한정시킬 수 있다. let을 사용하면 블록 안에서 글로벌 변수를 보호할 수 있다..

관련 공지 링크 : https://developer.chrome.com/blog/document-domain-setter-deprecation/ Chrome disables modifying `document.domain` - Chrome for Developers If your website relies on setting document.domain, your action is required. developer.chrome.com Chrome 115버전부터 document.domain의 수정을 금지한다. 기존에 DOM 내부에서 CORS(Cross Origin Resource Sharing)를 지원하기 위해 사용하던 방법인데, 이제는 다른 방안을 찾아야 한다. 팝업이나 iframe에 document...

우선 Registry 주소 확인하기 $ npm config get registry $ yarn config get registry Registry 주소 변경하기 $ yarn config set registry https://registry.npmjs.org/ NPM이나 yarn으로 아래 오류 발생할때 There appears to be trouble with your network connection. Retrying... 일반적인 방법 $ yarn config delete proxy $ yarn config delete https-proxy $ yarn install --network-timeout 600000 $ yarn cache clean 위 것도 안되면 yarn.lock 파일 지워보자.. 난 이..

[에러] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. 본 포스팅은 아래의 링크를 참조하였습니다. 제 삽질을 덜어주셔서 감사합니다. https://velog.io/@black-pepper/Invalid-options-object.-Dev-Server-has-been-initialized-using-an-options-object-that-does-not-match-the-API-schema [에러] Invalid options object. Dev Server has been initialized using an options object tha..