프로젝트
-
[typeChain 2] 타입스크립트 첫걸음프로젝트/[typescript]typeChain 2018. 7. 30. 16:39
Typed 언어 TS에선 어떤 종류의 변수와 데이터인지 설정해야한다.TS만의 섬세함.코드를 읽을 때, 무슨 일이 일어날 지 예상이 가능하다. index.ts//변수를 생성. js와 같다.const name = "samsara", age = 24, gender = "female"; //함수를 생성const sayHi = (name, age, gender) => { console.log(`Hello ${name}, you are ${age}, you are a ${gender}`) //'가 아닌 ₩를 사용.} //함수 실행sayHi(name,age,gender); //ts의 룰, 이 파일이 모듈이 된다는 것을 알려줌export{}; console.log를 할 때 ' 가 아닌 tap 위의 ₩를 사용해야한다. ..
-
[typeChain 1] 타입스크립트란?프로젝트/[typescript]typeChain 2018. 7. 18. 16:45
typescript로 간단한 blockChain을 만든다.typeScript란 ? superset of javaScript.자바스크립트는 엄격한 규칙이 없어서 수정해서 사용하기 쉬운 장점을 가지고있다.하지만 팀프로젝트를 한다던가, 큰 프로젝트를 한다던가 버그를 최소화하고 싶을땐 단점이 된다.타입스크립트는 자바스크립트에 없는 규칙들을 가지고있다.언어를 예측가능하게 하고, 읽기 쉽게 하여 자바스크립트를 더 잘 활용할 수 있게한다. git repo 생성 , 세팅https://github.com/samsara1019/typechaingit clone https://github.com/samsara1019/typechaingit remote add origin https://github.com/samsara101..
-
[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..
-
[todo_app_12] 할일 update, 실제 디스크에 저장프로젝트/[react]todo_app 2018. 6. 1. 11:51
업데이트 함수 _updateToDo = (id, text) => { this.setState(prevState => { const newState = { ...prevState, toDos: { ...prevState.toDos, [id]: { ...prevState.toDos[id], text: text } } }; this._saveToDos(newState.toDos); return { ...newState }; }); }; 저장하기_saveToDos = newToDos => { const saveToDos = AsyncStorage.setItem("toDos", JSON.stringify(newToDos)); }; 저장한 정보를 로드하기 _loadToDos = async () => { try { ..