VSCODE에 Prettier를 설치해서 코드 스타일을 통일하고 있는데, 이해가 되지 않는 일이 있었다. 세미콜론 사용여부를 false로 설정해두었는데도 특정코드 앞에 세미콜론(;)이 계속 붙는 것이었다. 문제발생 샘플코드 - Prettier 적용전 import loadFunction from './loadFunction.js'; loadFunction(); (async () => { const stuff = await doStuff() setThings(stuff) })() 샘플코드 - Prettier 적용후 import loadFunction from './loadFunction.js' loadFunction() ;(async () => { const stuff = await doStuff() set..
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..
ES2020에 Promise.allSettled이라는 녀석이 추가 되었다. 이게 추가가 되었다는 말은 어딘가에 쓰니까 추가 되었을텐데, 일단 오늘은 이녀석에 대해 알아보자. Promise.allSettled란? Promise.allSettled 메서드는 주어진 모든 프로미스를 이행하거나 거부한 후, 각 프로미스에 대한 결과를 나타내는 객체 배열을 반환합니다. 즉, 10개의 Promise객체를 가진 배열을 수행하여, fulfilled와 rejected를 배열에 담아 반환한다는 의미이다. Promise.allSettled는 어떤 때 사용할까? 그럼 이제 Promise.allSettled에 대해서 알았다. 결국 Promise객체를 담은 배열을 수행하여 성공한 객체와 실패한 객체 전부들 배열에 담아 리턴해준다는..
저번 글에서 젠킨스(Jenkins) 서버를 Windows기반으로 설치해보았다. 이제 자동 빌드 및 배포를 위해 젠킨스를 Git과 연동해야 한다. Git과 연동하기 전에 대충 내가 이해한대로 젠킨스의 로직을 그려보았다. 내가 생각한 젠킨스 CI/CD 로직 젠킨스에서 개발자가 원하는 파이프라인(빌드,배포,테스트)을 자동으로 수행하기 위해서는 개발자가 소스가 수정(push, merge)될 때마다 변경사항을 감지하고 있어야 한다. 그래서 젠킨스서버를 Git과 연동해서, 젠킨스는 Git서버의 변경사항을 24시간 감시하고 있게 해야 한다. 그럼 이제 젠킨스 서버와 Git서버를 연동해보자. 젠킨스 서버와 Gitea 연동하는 방법 젠킨스가 설치 되어 있지 않다면 아래 링크를 참조해서 설치하도록 하자. (Gitea는 W..
우리가 자주 사용하는 import ...from은 정적인 방식이며, 제약사항이 많다. 오늘은 제약사항과 import()의 사용법에 대해 정리하려고 한다. 기존 import의 제약사항 제약사항1 import ... from getModuleName(); // 모듈 경로는 문자열만 허용되기 때문에 에러가 발생합니다. 제약사항2 if(...) { import ...; // 모듈을 조건부로 불러올 수 없으므로 에러 발생 } { import ...; // import 문은 블록 안에 올 수 없으므로 에러 발생 } 이런 제약사항이 생기게 된 건 import/export가 기본적으로 코드구조의 중심을 잡아주기 때문인데 그렇게 때문에 항상 최상위 레벨에서 import를 해야했다. ( 괄호안에 쓰면 에러남.. ) 근데 ..
2015년 ES6문법이 도입되면서 javascript에서도 모듈을 가지고 올 수 있는 import와 export가 생겼다. import를 할 때 아래와 같은 2가지의 방식이 있는데 1. import() 2. import ...from 이 친구들 똑같이 모듈을 import하지만 작동방식이 다르다. 오늘은 그 작동방식에 대해 정리해보려 한다.(간단히) import ...from의 작동방식 import하기전에 모듈들을 미리 로드 해놓고 import를 수행함 import.html import.js const temp = "temp입니다."; export { temp }; 결과 결과를 보면 temp에 모듈에서 export한 temp변수가 제대로 들어온 것을 확인할 수 있다. 그리고 눈 여겨봐야 할 점은 좌측의 소..