package.json에서 '&&' 와 '&' 차이

디자인 시스템 변경사항을 스토리북에 바로 반영하기 위해 --watch 옵션을 추가한 script를 추가하여 스토리북 실행과 디자인시스템 빌드를 동시에 진행하려 하였다. 

    "dev:all": "yarn dev:storybook && yarn dev:packages",

 

스크립트는 오류없이 실행되었지만 스토리북만 실행되고 디자인시스템 패키지 빌드는 실행되지 않았다.

원인은 '&&' 와 '&'의 차이를 간과하고 무심코 사용한 '&&' 연산자 때문이었다.

 

'&&' 연산자는 여러 명령을 순차적으로 실행하는 데 사용된다. 이때 앞의 명령어가 성공적으로 실행 후 종료까지 되어야만 뒤에 명령어를 실행한다. 

'&' 연산자는 명령어를 백그라운드에서 실행하도록 한다. 즉 두 명령이 병렬로 실행되므로 앞의 명령의 성공유무와 상관없이 뒤의 명령도 실행된다.

내 경우는 스토리북을 별도의 명령어로 종료시켜 주지않는 이상 앞의 명령이 종료가 되지않기 때문에 뒤에 명령이 실행되지 않았다.

아래처럼 '&' 연산자를 사용하는 방식으로 수정하니 두 명령어가 동시에 실행되어 디자인시스템의 변경사항이 스토리북에 바로 반영되는 것을 확인할 수 있었다.

    "dev:all": "yarn dev:storybook & yarn dev:packages",