개발공작소
728x90
article thumbnail
[JS] 프로미스 팩토리 함수의 사용 방법과 사용하는 이유에 대한 정리
FrontEnd/JavaScript 2024. 1. 25. 17:10

서론 제목에는 거창하게 프로미스 객체와 프로미스 팩토리 함수의 차이점에 대한 정리라고 써놓긴 했는데 그냥 new 생성자를 이용한 프로미스 객체 생성과 프로미스 객체를 리턴하는 함수에 대한 차이점을 정리하려고 한다. 프로미스 함수란? 프로미스 팩토리 함수(프로미스 함수)란 프로미스 객체를 리턴해주는 함수를 의미한다. 샘플코드 const promise = () => { return new Promise((resolve, reject) => { // code... }); } 어렵지 않다.. 위와 같이 그냥 new Promise를 리턴해주면 된다.. code는 각자 필요한 비동기 작업을 작성해주면 된다.. 일반 프로미스 객체와 프로미스 함수의 차이점 1. new 생성자를 통한 Promise 객체를 생성 //(1..

[JS] javascript에서 IIFE(Immediately Invoked Function Expression)패턴이란?
FrontEnd/JavaScript 2024. 1. 22. 12:57

IIFE패턴에 대해 정리하게 된 계기 프로젝트에 프리티어를 적용하는데, 이상한 구문을 발견... 처음에는 프리티어가 제대로 작동하지 않는다고 생각했다.. 하지만 나중에 이게 IIFE패턴이고 프리티어는 정상적으로 작동하고 있다는 것을 알게 되었다. 관련 내용은 아래 링크 참조 [Prettier] 프리티어 사용시 IIFE패턴 앞에 세미콜론(;)이 붙는 현상에 대한 이야기 [Prettier] 프리티어 사용시 IIFE패턴 앞에 세미콜론(;)이 붙는 현상에 대한 이야기 VSCODE에 Prettier를 설치해서 코드 스타일을 통일하고 있는데, 이해가 되지 않는 일이 있었다. 세미콜론 사용여부를 false로 설정해두었는데도 특정코드 앞에 세미콜론(;)이 계속 붙는 것이었다. 문 bongra.tistory.com II..

article thumbnail
[JS] javascript에서 원시타입(primitive)은 어떻게 함수를 사용할 수 있는 것일까? ( 원시타입의 객체화 )
FrontEnd/JavaScript 2024. 1. 19. 14:57

저번에 원시타입과 참조타입에 대한 차이점을 한번 정리해보았는데, 길어져서 따로 올린다. 이번에는 원시타입에 대해 조금 더 정리하려고 한다. 원시타입은 함수를 가지는가? 전에 정리한 내용은 원시타입은 객체가 아닌 "단순 값"이라고 했다. 샘플코드 const str = '안녕하세요' const yn = true const num = 15 위 코드를 보면 str변수는 String이고, yn변수는 boolean, num변수는 Number이다... 그런데 javascript 개발을 해본 사람들은 다 알 것이다. 이 친구들로 함수를 쓸 수 있다는 것을... 샘플코드 const str = '안녕하세요' const yn = true const num = 15 str.substr(0,3) // '안녕하' yn.toStr..

article thumbnail
[JS] 원시타입(primitive) VS 참조타입(reference)의 차이점 (1)
FrontEnd/JavaScript 2024. 1. 19. 14:03

javascript에는 2가지의 데이터 타입이 있는데 원시타입(primitive)과 참조타입(reference)이다. 데이터타입이라고 하면 문자열(String)이나 정수(Number), 배열(Array), 객체(Obejct)와 같은 친구들이 떠오를텐데 여기서의 원시타입과 참조타입은 위의 친구들의 조금 더 상위(?)개념이라고 이해하면 편할 거 같다. 원시타입(primitive) VS 참조타입(reference)의 종류 원시타입에는 Number, Bigint, String, Boolean, Null, Symbol, Undefined 이렇게 7종류가 있고 참조타입에는 Object, Array, Function, Date 등이 있다. - MDN 참조 각 타입들에 대해서는 따로 설명하지 않고 원시타입과 참조타입이..

[JS] nullish 병합연산자 '??'에 대한 설명 및 사용방법 ( feat. OR연산자와 비교 )
FrontEnd/JavaScript 2023. 11. 25. 22:06

nullish 병합연산자란? Nullish 병합(??) 연산자는 왼쪽 피연산자가 null or undefined일 때 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환하는 논리연산자입니다. 보통 우리는 OR을 의미하는 '||'연산자를 사용하는데 이 연산자의 문제점은 왼쪽 피연산자가 boolean으로 true/false를 체크하기 때문에 0이나 ""와 같은 빈값을 그대로 출력하고 싶어도 출력하지 못하는 상황이 발생하기도 한다. 샘플코드 기본사용법 const foo = null ?? 'default string'; console.log(foo); // expected output: "default string" const baz = 0 ?? 42; console.log(baz); // expec..

[JS] 동적으로 모듈을 import(dynamic import)하는 방법 : import() 사용
FrontEnd/JavaScript 2023. 11. 24. 17:32

우리가 자주 사용하는 import ...from은 정적인 방식이며, 제약사항이 많다. 오늘은 제약사항과 import()의 사용법에 대해 정리하려고 한다. 기존 import의 제약사항 제약사항1 import ... from getModuleName(); // 모듈 경로는 문자열만 허용되기 때문에 에러가 발생합니다. 제약사항2 if(...) { import ...; // 모듈을 조건부로 불러올 수 없으므로 에러 발생 } { import ...; // import 문은 블록 안에 올 수 없으므로 에러 발생 } 이런 제약사항이 생기게 된 건 import/export가 기본적으로 코드구조의 중심을 잡아주기 때문인데 그렇게 때문에 항상 최상위 레벨에서 import를 해야했다. ( 괄호안에 쓰면 에러남.. ) 근데 ..

728x90