프로젝트/[parcel]parcel-experiments
-
[parcel 5] typography js, build프로젝트/[parcel]parcel-experiments 2018. 7. 18. 16:44
typography Js자바스트립트와 함께하는 css typopgraphy자동으로 구글 폰트를 연결해주는 등의 기능이 있다. 먼저 설치해주자yarn add typography typography.js 파일 생성import Typography from "typography"; const typography = new Typography({ baseFontSize: "18px", baseLineHeight: 1.666, googleFonts: [ { name: "Montserrat", styles: ["700"] }, { name: "Open Sans", styles: ["400"] } ], headerFontFamily: ["Montserrat", "Helvetica Neue", "sans-serif"],..
-
[parcel 4] CSS Modules프로젝트/[parcel]parcel-experiments 2018. 7. 8. 22:40
PostCSS :scss를 css로 바꾸기 .postcssrc 파일 생성{ "modules": true} postcss를 설치yarn add postcss-modulesyarn global add node-sass src/styles.scss 생성.title{ color: blue;} App.js에 scss파일 importimport React from "react";import styles from "./styles.scss"; export default () => Test!; scss가 css로 잘 변환된 걸 볼 수 있다 auto prefixer webkit, moz, ms...등을 자동으로 생성하는 플러그인 먼저, 설치yarn add autoprefixer .postcssrc 수정어떤 브라우저를 호..
-
[parcel 3] React,ES6프로젝트/[parcel]parcel-experiments 2018. 7. 2. 22:31
순서 1.컴포넌트 렌더2.리액트 호출3.리액트돔으로 랜더 src/App.js 생성import React from "react"; export default () => Test!; index.html에 돔을 붙힐 루트를 만들어줌 index.js수정import React from "react";import ReactDOM from "react-dom";import App from "./src/App"; ReactDOM.render(, document.getElementById("app")); 자꾸 ReactDOM을 ReactDom으로 써서 오류낸다 ㅠㅠ
-
[parcel 2] hello parcel!프로젝트/[parcel]parcel-experiments 2018. 6. 25. 14:00
설치yarn add react react-domyarn add babel-preset-env babel-preset-react --dev바벨을 예전버전, 개발자버전으로 설치 index.html 만들기vs파일에서 ! 치고 엔터누르면 DOCTYPE html> Document 여기까지 자동으로 생성된다. hello parcel!공식홈페이지(https://parceljs.org/getting_started.html)의 설명을 빌려보자그럼, index.html과 index.js파일을 만들어 봅시다. console.log("hello world");Parcel은 파일 변화를 자동으로 다시 빌드(rebuild) 하고 빠른 모듈 교체를 지원하는 내장 개발용 서버가 있어 빠른 개발이 가능해 집니다. 그저 진입 파일을 지..
-
[parcel 1] parcel?프로젝트/[parcel]parcel-experiments 2018. 6. 15. 13:52
웹팩리액트 js 프로젝트를 할 때 auto reload, sass, jsx 등을 사용하기위해CRA(create react app) 를 사용한다 -> 웹팩파일CRA는 자동으로 scss지원, css module auto refresh도 되고 여튼 자동임 웹팩은 모던 js->old js변환, scss->css 변환을 해준다 문제는 웹팩이 너무 크고 복잡해서, 작은 프로젝트에 적합하지 않다.그럴때 파셀을 사용한다. parcel 빨리 시작할 수 있고, 많은걸 설정하지 않아도 된다. repo를 만들고yarn init을 통해 package.json 생성하자.yarn global add parcel-bundler 터미널에서touch README.md로 리드미 생성 가능하다. 새로운 사실을 알았는데,명령팔레트에 make..