본문 바로가기

FE 톺아보기🔬10

제너레이터(Generator) 제너레이터란? 일반 함수는? 하나의 값 만을 반환한다. 제너레이터를 사용하면 여러 개의 값을 필요에 따라 하나씩 반환할 수 있다. 제너레이터와 이터러블 객체를 함께 사용하면 손쉽게 데이터 흐름 집합체를 만들 수 있다. 제너레이터 함수 function* 제너레이터 함수를 호출하면 코드가 실행되지 않고, 제너레이터 객체가 반환된다. function* generatorFunc() { yield 1; yield 2; return 3; } let generator = generatorFunc(); console.log(generator); // Object [Generator] {} next() 제너레이터 주요 메서드 가장 가까운 yield 문을 만날 때까지 실행이 지속 yield 문을 만나면 실행이 멈추고 산출.. 2023. 6. 16.
MVVM 패턴 📖 목차 1. 비즈니스 로직과 프레젠테이션 로직 2. MVVM이란? 3. Recoil을 접목시킨 MVVM 패턴 이번에 collusic-new, about 프로젝트에 mvvm 패턴을 적용하면서 디자인 패턴에 대해 처음 공부하게 되었다. model, view, viewmodel이란 각각의 용어도 생소했지만, 무엇보다 mvvm을 react에 적용시키는 방식이 예제마다 너무 달라서 혼란스러웠다. 또한, 뷰로직과 비즈니스 로직이 정확히 어떤 차이가 있는지 와닿지 않아 프로젝트를 하는 도중, 코드를 분리하면서도 개운치가 못했다. 따라서 오늘 내용은 비즈니스 로직과 프레젠테이션 로직(뷰 로직과 비슷한 개념인 것 같다...)부터 얘기해보려고 한다. 1. 비즈니스 로직과 프레젠테이션 로직 비즈니스 로직? 위키피디아에서 .. 2023. 6. 16.
익명함수(Anonymous Function) 함수? 함수이름을 호출하여 재사용이 가능하다. function sum(a, b) { let m = a + b; return m; } let sumanswer = sum(1, 2); console.log(sumanswer); // 3 익명함수란? 함수 리터럴 방식으로 만들어진 이름없는 함수. 리터럴? 문자 그대로 데이터를 만들 때 흔히 사용하는 방식 let a = 10; let name = 'superman'; 익명함수 구조 변수에 함수의 코드를 저장하는 대신 함수명을 사용하지 않음 변수 명을 함수 명처럼 사용해서 함수를 호출하거나 변수 값을 이동시키는데 사용할 수 있음 let hello = function () { document.write("Hello World"); }; hello(); // Hell.. 2023. 6. 16.
CommonJS와 ES Modules은 왜 함께 할 수 없는가? CommonJS에 대하여 NodeJS에서 기본 모듈 시스템으로 채택하고 있다. require()와 module.exports 를 사용한다. 문제점 script 파일이 global scope 처럼 사용된다. module.exports 1. 여러개의 객체를 내보낼 경우, exports 변수의 fields로 할당한다. const canadianToUs = function (canadian) { return roundTwoDecimals(canadian * exchangeRate); }; function usToCanadian(us) { return roundTwoDecimals(us / exchangeRate); } exports.canadianToUs = canadianToUs; // 내보내기 1 expor.. 2023. 6. 16.