본 문서는 기본적인 사용법과 사용스택에 대한 설명이 들어있습니다.
먼저 깃허브의 클론버튼을 눌러 링크 복사해둡니다.
터미널에서 프로젝트폴더가 들어갈 곳으로 cd 명령을 통해 이동 후 다음 명령을 사용합니다.
git clone {복사한 주소}
실행하면 자동으로 프로젝트 폴더와 코드들을 가져올 것입니다. 여기서 다음 명령을 통해 라이브러리도 가져옵니다.
npm install
package.json에 적혀진 필요 라이브러리를 자동으로npm이 받아주는 명령입니다.
이후 다음 명령을 사용하면 기본 소스코드를 컴파일 해줍니다.
npm run webpack
실행후 잠깐 시간이 지나면 숫자들과함께 기동된것을 확인 할 수 있습니다.
이후 새로운 터미널창을 열으셔서 다음명령으로 앱을 기동합니다.
npm run hot
NodeJS의 API가 사용가능한 브라우저라고 보시면 됩니다.
브라우저에서 사용하는 Javascript는 NodeJS처럼 require를 통해 바로 불러 올 수 없으므로 Webpack을 사용해서 모듈들을 묶어 하나의 번들 파일로 만들어줍니다.
개발을 좀더 편하게 하기 위한 설정입니다. 지금 설정된 웹팩은 번들 파일을 생성하는 대신에 메모리상에서 로컬 서버를 세워 호스팅해줍니다. 이 행동은 메모리에서만 일어나기때문에 번들파일을 작성하는 것 보다 훨씬 빠르고 모듈별로 따로 관리하기때문에 갱신된 모듈만 빠르게 교체하여 재 호스팅과 앱까지 자동으로 변경사항을 반영시켜줍니다.
Javascript 렌더링 라이브러리입니다. HTML 태그들을 좀더 Javascript에서 관리하기 쉬운 컴포넌트 형태로 작성하게 해줍니다. 코드를 보시면 render 메소드가 들어있는 컴포넌트가 그것으로 JSX로 쓰여있습니다.
기본적인 Javascript에서 HTML과 같은 코드를 병기할 수 있습니다. Javascript에서 하던건 그대로 쓸 수 있으니 어렵지 않으나, 브라우저는 이를 바로 읽지 못합니다. 하지만 Webpack을 통과할때 Babel이라는 모듈을 거쳐 자동적으로 순수하게 Javascript로 만들어 주는 부분이 포함되어 있습니다.
최신 문법을 사용한 Javascript나 JSX를 일반 브라우저가 사용할 수 있는 코드로 바꿔주는 라이브러리입니다. 직접 부르지는 않고 Webpack이 자동적으로 사용합니다.
외양을 꾸미기 위해 사용하는 CSS의 확장언어입니다. 일반적으로 CSS는 <link> 사용하지만 여기선 모두 Javascript처럼 require를 통해 부르면 Webpack이 자동적으로 CSS로 컴파일하여 <link>를 자동생성해 줍니다.