07. scss 연동하기
07. scss 연동하기 - PostCSS 설치한다 : plugin 사용하여 css 변환 도구, autoprefixer, cssnext, CSS Modules 와 비슷- SCSS 설치한다 : preprocessor 로 LESS, SASS, Stylus 와 같은 컴파일 to CSS 중 SCSS 사용. 01. postcss, scss 설치 npm install postcss-modules --save-devnpm install -g node-sass 02. .postcssrc 파일 셋팅 - .postcssrc 파일 만들고 아래와 같이 입력{ "modules": true, } 03. styles.scss 파일 만들고 내용작성 - styles.scss - App.vue 04. 실행 05. 만약 vuejs 가 아..
06. vuejs 사용해보기
06. vuejs 사용해보기 - 아래와 같이 파일 구성해서 vuejs 사용해보자- Git_parcel-vue/index.html- Git_parcel-vue/src\main.js- Git_parcel-vue/src\App.vue 01. index.html 02. APP.vue {{ msg }} export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App!' } } } #app{ color: #56b983; } 03. main.js import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', render: h => h(App) }); 04. 만약 아래..
05. vue, babel 설치 .babelrc 셋팅 하고 출력하기
05. vue, babel 설치 .babelrc 셋팅 하고 출력하기 - Vue 사용을 위해서 의존성 설치 : vuejs 사용을 위해서 라이브러리 설치하고, package.json 에 이제 사용하겠다는 의미를 선언한다고 이해하면 된다. - Babel 사용을 위해서 플러그인과 프리셋 설치, .babelrc 셋팅 : babel은 javascript 트랜스파일러이다. 브라우저마다 JS코드를 실행하는 인터프리터 버전과 지원이 서로 다른데 이러한 것들 (ES2016 문법 등) 을 ES2015로 안전하게 바꾸어 줄 것이다. - .babelrc 파일은 babel의 구성파일이다. 사실 Babel 구성하는 방법에는 packge.json에 다음과 같이 플러그인 및 사전 설정을 할수는 있다. // package.json{ "..
04. npm init
04. npm init - 본격적으로 npm init 을 통해 package.json 만들어보자 01. 터미널에서 npm init npm init - 아래와 같은 화면이 뜰 것이다. - 쭉쭉 엔터로 넘어가고 - description 에서 Github 적었던 설명 입력 정도 해주고 - 완성되었으면 yes 를 타이핑해서 마무리 02. 완료 모습 03. scripts 에 run 명령어를 통해서 실행할 것 추가하기 "scripts":{ "start": "parcel index.html" } 이렇게 등록하고 나면 터미널에서 아래와 같이 사용한다. npm run start npm run start = parcel index.html 과 같다 [ 참고 링크 ] - parcel 설치~ React 연동하고 Typescr..
03. md 파일작성
03. md 파일작성 - md 파일작성 부분은 패스해도 된다 - 마크다운이라고 부르며 - 아래 이미지와 같이 Github 등에서 간략하게 정보를 나타내기 위해 많이 사용한다. - HTML 태그와 같은 개념을 쉽고 빠르게 표현한다. 01. 파일 생성 - 새 파일 > README.md 파일 생성한다. 02. VSC 에서는 마크다운 문서를 실시간으로 볼 수 있다. - 보기 > 명령 팔레트 - Markdown: Open Preview 선택 03. 편집기 분할 - 왼쪽에는 RE..
02. VSC 터미널 Nodejs's npm 이용하여서 parcel 설치
02. VSC 터미널 Nodejs's npm 이용하여서 parcel 설치 - Visual Studio Code(이하 VSC) 에서 터미널 실행되기 때문에 작업하기가 편하다 터미널 종류는 Nodejs와 Window Power Shell 등 을 사용할 수 있다. - Node.js 설치는 필수이다. - 여기서는 Window Power Shell 사용한다. 01. 파일 > 폴더열기로 아까 생성한 Git_parcel-vue 폴더 지정해서 Open. 02. 터미널 실행 - 보기 > 통합 터미널 - 기본 터미널은 power shell 이므로 별다른 지정 필요없다. 03. npm 최신 버전으로 업데이트 - nodejs의 NPM 사용하여 패키지 관리 할 것이다. 제일먼저 npm 먼저 업데이트 하자 NPM 개념은 여기서 ..
01. 원격저장소 만들고 Clone 하기
01. 원격저장소 만들고 Clone 하기 - 원격에서 저장소를 만들고 Clone을 시작으로 Visual Studio Code 연동한다. 원격 저장소와 Clone 순서를 잘 모르겠으면 이 글을 참조 - Git, SourceTree 에 대한 경험이 처음이면 이 글을 순서대로 참조 01. Github에서 새로운 저장소 생성한다. - Add .gitignore 에 Node 추가한다 02. URL 입력하고 로컬에 폴더 만들어서 지정해준다. - 로컬 폴더 이름은 Git_parcel-vue 로 정하였다 [ 참고 링크 ] - parcel 설치~ React 연동하고 Typescript 강좌 : 작성 내용의 상당부분 이 강좌에서 도움받았다 강좌에서 React 로 가는걸 나는 Vuejs로 노선을 바꾸었을뿐https://ac..