Bootstrap - free theme <CORONA> 설치

Getting started

---

컴파일되고 바로 사용할 수 있는 버전의 템플릿을 직접 사용할 수 있습니다. 
또한, 템플릿을 광범위하게 사용자 정의할 수도 있습니다.

 

 

index.html이나 pages 폴더에 있는 sample 템플릿을 바로 사용할 수도 있고, 

필요한 컴포넌트들을 찾아 직접 만들 수도 있습니다.

 

데모 목적으로 필요한 vender 파일을 'vendors' 폴더에 묶었습니다. 
응용 프로그램에 해당 vender가 모두 필요하지 않을 수도 있습니다. 
vender 패키지 파일을 변경하려면 gulpfile.js 파일에서 관련 작업에 대한 src 경로를 변경하고 
bundleVendors 작업을 실행하여 vender 파일을 다시 빌드해야 합니다.

 

 

 

gulpfile.js를 확인해 보니 gulp-tasks를 봐야 할 것 같습니다.

 

 

아마도 여기에서 필요한 vendor를 잇는 src 주소를 변경해야되지 않을까 싶습니다.

저는 Chart.js 대신 Echarts를 사용할 예정이라 일단 나중에 다시 확인하기로 하고 넘어갑니다.

 

 

 

 

 

Installation

---

1. node.js 설치

 

사용자 지정을 위해 이 프로젝트에 대한 패키지 파일/종속성을 설치해야 합니다. 
그러면 먼저, 컴퓨터에 node와 npm이 설치되어 있어야 합니다.
npm은 노드와 함께 번들로 제공되므로 npm을 별도로 설치할 필요가 없습니다.

 

Node.js❓ 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 논블로킹 I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. https://ko.wikipedia.org/wiki/Node.js

 

그럼 node.js를 설치해 보도록 합시다.

 

 

대부분의 사용자에게 추천된다는 왼쪽 편의 버전을 다운받겠습니다.

agree 체크박스를 누르고 next를 몇번 누르다 보면 이런 화면이 나옵니다.

 

 

'npm module들이 C/C++과 같은 언어로 컴파일되어야 하기 때문에

Python이나 visual studio와 같은 tool이 필요하니 자동 설치해줄까?'

라는 의미이므로 이미 tool이 있다면 체크하지 않고 next를 누릅니다.

 

설치가 완료되고 나면 CORONA를 다운로드한 폴더 내의 'template' 폴더로 가

command prompt창을 열어 아래의 명령을 해줍니다.

(원하는 폴더에서 명령 프롬프트를 여는 방법은 여기를 참조해 주세요.)

npm install

 

이 방법대로 하다보니 엄청난 에러들과 씨름하게 됩니다....

원인은 <CORONA>가 Bootstrap4와 이전 버전의 node.js, npm을 사용했기 때문인데요.

저는 그래서 그냥 node.js를 바로 다운받지 않고 모두 삭제한 후!(프로그램 추가/제거에서 삭제)

nvm이라는 node version manager를 사용하였습니다.

1.1.7 version을 사용했고, 설치는 여기서 하시면 됩니다.

설치 후, <CORONA>의 template 폴더에서 cmd 창을 열고 아래의 코드를 입력합니다.

 

nvm install 14.15.0

 

<CORONA>에서 사용한 node.js 버전이 14.15.0 이기 때문에 직접 지정해줬습니다.

그러면 node.js와 함께 npm도 설치가 됩니다.

그리고 저 node.js 버전을 사용하기 위해 아래 코드를 입력합니다.

 

nvm use 14.15.0

 

그리고 다시 <npm install>을 해줍니다.

 

 

 

 

 

2. gulp 설치

 

이렇게 하면 루트 디렉터리의 로컬 node_modules 폴더에 개발 종속성이 설치됩니다.

그런 다음 Gulp를 설치해야 합니다. 
우리는 개발 프로세스에 Gulp 작업 관리자를 사용합니다. 
Gulp는 SCSS 파일의 변경 사항을 감시하고 파일을 CSS로 자동 컴파일합니다.

Gulp를 시작하는 것은 매우 간단합니다. 
먼저 아래 명령을 사용하여 컴퓨터에 Gulp-cli를 설치해야 합니다.

 

npm install -g gulp-cli

 

gulp❓ Fractal Innovations과 깃허브 오픈 소스 커뮤니티의 오픈 소스 자바스크립트 툴킷으로, 프론트엔드 웹 개발의 스트리밍 빌드 시스템로 사용된다. Node.js와 npm 기반의 태스크 러너이며, 소형화, 연결, 캐시 버스팅, 유닛 테스트, 린팅, 최적화 등 웹 개발에 수반되는 시간 소모적이고 반복되는 태스크들을 자동화하기 위해 사용된다. https://ko.wikipedia.org/wiki/Gulp.js

 

중요한 것은 gulpfile.js가 있는 디렉토리에서 명령어를 실행해야 한다는 것입니다.

 

 

이렇게 하면 Gulp-cli가 컴퓨터에 전역적으로 설치됩니다. 
Gulp가 필요로 하는 또 다른 것은 실제로 모든 작업을 수행하는 gulpfile.js입니다. 
이 파일에서 실행할 모든 작업을 설정합니다.

이 프로젝트를 개발 모드에서 실행하려면 아래 명령을 입력하십시오. 
이것은 gulp로 파일 감시를 시작하고 파일이 수정될 때마다 
SCSS 파일을 컴파일하여 CSS 파일을 만듭니다.

 

gulp serve

 

문제는 여기서부터 발생합니다....

 

 

계속해서 이런 에러가 뜨기 시작한 건데요.

에러 메세지에 따라 'npm rebuild node-sass'를 입력해 보니 또 이런 에러가 뜹니다.

많은 사람들이 시도해 본대로 해보려 했지만 'rm'이 실행이 안됩니다.

npm cache clean --force
rm -rf node_modules
rm -rf package-lock.json
npm install

 

구글링 해보니 결국 문제는 node-sass와 node 버전이 맞지 않아서라고 하는데 

추가적인 설명은 여기를 참조해 주세요.

 

저도 에러의 원인을 찾아 node-sass/lib/extensions.js 에서 getHumanNodeVersion을 보니

node.js 14 버전까지 지원이 됩니다.

 

또 다른 방법으로는 node-sass를 삭제하고 다시 install하는 방법인데요.

npm uninstall node-sass
npm uninstall -g node-sass
npm install node-sass@4.14.1

역시 안됩니다....

저도 완성도 있는 포스팅을 하고 싶었는데요....

설치만 하다 시작도 못하겠다 생각이 들어서 

'gulp serve' 부분은 일단 넘어가기로 했습니다....

어차피 gulp는 scss 파일이 수정됐을 때 자동으로 css로 

컴파일해주는 친구니 일단 그 부분을 안 건들이면 되지 않을까요?! 😂😂

 

역시 초보 개발자의 설치길 쉽지 않음을 느끼며 이번 포스팅은 일단 마무리 하는걸로...ㅎ

오류 해결을 하게 되면 이 부분은 다시 포스팅하도록 하겠습니다!