javascript (22) 썸네일형 리스트형 [Javascript] 자바스크립트 모듈 (export, import) JavaScript에서 모듈을 사용하면 코드의 재사용성을 높이고, 유지보수를 쉽게 하며, 다른 파일에서 필요한 기능만 가져다 쓸 수 있다. 자바스크립트 모듈의 기본 개념과 export, import의 사용법을 알아보자.HTML 파일에서 자바스크립트 모듈을 사용하는 방법 type="module" 속성을 사용하면, 해당 스크립트 파일이 모듈로 처리된다.export와 import 사용법1. 개별 함수 내보내기 및 불러오기// hello.js export function hello1() { console.log("Hello 1!"); } export function hello2() { console.log("Hello 2!"); } // main.js import { hello1, hello2 }.. [React] useState 사용법과 동작원리 useState란?state는 컴포넌트가 가지고 있는 속성값이다. 이 속성값이 변하면 react는 자동으로 UI를 업데이트 시킨다. 다음 예제에서 name은 state가 아니고 단순 변수이기 때문에 버튼을 클릭해도 화면에 표시되는 이름이 바뀌지 않는다.export default function Hello() { let name = "Mike"; function changeName() { name = name === "Mike" ? "Jane" : "Mike"; } return ( state {name} Change );} state로 만들기 위하여 react hook 중 하나인 useState를 사용한다.https://legacy.reactjs.o.. [Javascript] 호출 스택과 이벤트 루프 자바스크립트는 이벤트 기반 방식으로 동작한다. 이벤트 기반 시스템에서는 이벤트 리스너에 콜백 함수를 등록한다. 예를 들어 버튼을 누르면 경고 창을 띄우도록 설정할 때, 클릭 이벤트 리스너에 경고 창을 띄우는 콜백 함수를 등록한다. 이벤트 루프 - 이벤트 발생 시 호출할 콜백 함수들을 관리한다. 호출된 콜백 함수의 실행 순서를 결정하고, 노드가 종료될 때까지 이벤트 처리를 위한 작업을 반복한다. 태스크 큐(콜백 큐) - 콜백 함수들이 기다리는 공간. 이벤트 루프가 정한 순서대로 콜백 함수들이 줄 서있는 공간. 백그라운드 - 타이머, I/O 작업 콜백, 이벤트 리스너들이 동작하는 곳 function first(){ second(); console.log('첫 번째'); } function second(){ .. [Typescript] 타입스크립트를 쓰는 이유를 알아보자 브라우저들은 타입스크립트를 이해하지 못한다. 자바스크립트로 변환해서 로드해야 실행할 수 있다. 얼핏 생각해도 번거로울 것 같은데 어떤 장점이 있길래 타입스크립트를 쓰는 것일까? function add(num1, num2){ console.log(num1 + num2); } add(); // NaN add(1); // NaN add(1, 2); // 3 add(3, 4, 5); // 7 add('hello', 'world'); // "helloworld" 위 예시에서 add(1, 2)는 원하는 사용방식이고 결과도 잘 나오지만 나머지는 그렇지 않다. 원하는 결과가 나오지 않아도 자바스크립트는 에러 없이 실행된다. function showItems(arr) { arr.forEach((item) => { con.. [Javascript] async, await async, await를 사용하면 Promise의 then 함수를 체이닝 형식으로 호출하는 것보다 가독성이 좋아진다. async 함수 앞에 async를 붙이면 항상 Promise를 반환한다. async function getName() { return "Mike"; } console.log(getName()); // Promise {: "Mike"} getName().then((name) => { console.log(name); // "Mike" }); 리턴값이 프로미스이면 리턴한 프로미스를 그대로 사용한다. async function getName() { return Promise.resolve('Tom'); } getName().then((name) => { console.log(name); // .. [Javascript] 프로미스(Promise) 상점에 가서 물건을 주문하는데 그 물건이 나올 때까지 시간이 걸린다고 가정해보자. 언제 완료되는지 알 수 없고, 물건을 만들다가 실패하는 경우도 있다. 이럴 때 소비자는 10초에 한 번씩 "다 됐나요?"라고 물어본다. 판매자는 "아니요" 또는 "다 됐습니다"라고 대답한다. 실패했다고 말하는 경우도 있다. 그러면 물건을 다시 주문해야한다. 이럴 때 상점에 주문을 하고 상품이 준비되었거나 실패되었으면 알려달라고 하면서 전화번호를 주고 나오는 게 낫다. 상품이 준비되는 동안 다른 작업도 할 수 있다. 상점은 이 번호를 기억했다가 작업이 완료되거나 실패하면 소비자에게 알려준다. 이와 같은 상황에서 사용할 수 있는 것이 Promise이다. 프로미스는 다음과 같이 사용한다. const pr = new Promise.. [Javascript] 클래스(Class) 지금까지 비슷한 형태의 객체를 생성하기 위해 생성자 함수를 사용했었다. const User = function(name, age){ this.name = name; this.age = age; this.showName = function(){ console.log(this.name); }; }; const mike = new User("Mike", 30); 클래스로도 비슷한 형태의 객체를 만들 수 있다. 클래스는 ES6에 추가된 스펙이다. class User2 { constructor(name, age){ this.name = name; this.age = age; } showName(){ console.log(this.name); } } const tom = new User2("Tom", 10); cl.. [Javascript] 상속, 프로토타입(Prototype) const user = { name : 'Mike' } user.name; // "Mike" user.hasOwnProperty('name'); // true user.hasOwnProperty('age'); // false hasOwnProperty는 자신이 프로퍼티를 가지고 있는지 확인하는 함수이다. user 객체에 name이라는 프로퍼티가 있으므로 true가 나오고, age라는 프로퍼티는 없으므로 false가 나온다. hasOwnProperty는 만든 적이 없는데 어디에 있는 것일까? __proto__라는 객체에 들어있다. 객체에서 프로퍼티를 찾으려고 하는데 없으면 여기에서 찾는다. const user = { name : 'Mike' hasOwnProperty : function(){ console.. 이전 1 2 3 다음
