1. Node js 설치
Webpack 과 Babel 같은 도구들 사용하기 위해 설치
2. 코드에디터 설치 (VSCode)
https://code.visualstudio.com/download
설치 후 확장팩 설치 : Auto Close Tag, Auto Rename Tag, Beautify, Debugger for Chrome,
ES7 React/Redux/GraphQL…, ESLint, Korean Language…, Prettier,
VS Color Picker, yarn
3. yarn 설치
https://hello-bryan.tistory.com/96
npm 같은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자, 프로젝트에서 사용되는 라이브러리를 설치하고 해당 라이브러리들의 버전관리를 하게 될 때 사용
4. bable
https://babeljs.io/setup#installation
yarn add @babel/core @babel/cli
npm install @babel/preset-env --save-devJSX 를 비롯한 새로운 자바 스크립트 문법을 사용하기 위해서 사용함
5. webpack
npm install --save-dev webpack webpack-cli
여러가지의 파일을 한개로 결합하기 위해서 Webpack 이라는 도구 사용
6. Git bash
https://git-scm.com/download/win
설치후 회원가입터미널 대신 사용
7. 프로젝트 내려받기
cmd-원하는폴더 이동해서 명령어 실행
git clone http:// ... (깃주소)
8. Chrome: React Developer Tools 다운
[프로젝트 실행]
1. 최초 실행 시, 실행 전에 터미널에서 yarn 실행
yarn
(안될시, npm install로 대체하거나, cmd에서 프로젝트 폴더 찾아가서 동일 명령어 실행)
D:>dir>cd 파일명>dir>cd 파일명>dir
code .(띄어쓰기 포함)
2. VSCode 터미널에서 yarn develop 입력 후 엔터 (pakage.json 참고) or npm run developer
yarn develop
(안될 시, https://romeoh.tistory.com/entry/VSCode-VS-Code-Terminal%EC%97%90%EC%84%9C-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8B%A4%ED%96%89%EC%9D%B4-%EC%95%88%EB%90%A8-Windows 참고)yarn start
3. 빌드 완료후, chrome에서 loaclhost:8000 접속4. 디버깅 모드 : f5
css참고페이지
https://tailwindcss.com/**git 정보
사용자명 : 본인이 6번에서 세팅한 정보
비밀번호 : 본인이 6번에서 세팅한 정보**gatsby란(https://github.com/taylorbryant/gatsby-starter-tailwind)
최신 웹 만드는 거라고함
입력하면 floorstudy 위치에 해당 웹 프로젝트 다운
gatsby new floorstudy https://github.com/taylorbryant/gatsby-starter-tailwind
cd floorstudy 이동 후 code .입력후 vscode 열기
