분류 전체보기
-
[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 { ..
-
[todo_app_11] 완성, 미완성 할일프로젝트/[react]todo_app 2018. 6. 1. 11:51
완성된 할일, 미완성된 할일을 구분하자 _uncompleteToDo = id => { this.setState(prevState => { const newState = { ...prevState, toDos: { ...prevState.toDos, [id]: { ...prevState.toDos[id], isCompleted: false } } }; this._saveToDos(newState.toDos); return { ...newState }; }); }; _completeToDo = id => { this.setState(prevState => { const newState = { ...prevState, toDos: { ...prevState.toDos, [id]: { ...prevState.t..
-
사생활오늘뭐했지 2018. 5. 30. 23:37
2주 전에 컴활1급, 2급 실기 시험 봤다.1급은 엑셀이 생각보다 어렵게 나와서 떨어질 것 같다 ㅠㅠ 엑세스는 엄청 쉬웠는데! 시간 나면 재수해볼 생각.2급은 무난하게 잘 풀었다. 합격일 듯! 학교에서, 컴활을 취득하면 2학점을 주는데 그걸 못 받으면 졸업을 못한다..공지에 애매한 부분이 있어서 전화로 확인해봐야 할 듯.. >해당 학기 개시일 2년 이내에 한하여 취득한 자격증만 인정함. 이라고 적혀있는데, 그럼 학기 시작 전에 취득했어야 하는 건지 헷갈린다 ㅠㅠ저걸 못 받으면 계절학기 당첨! 흑흑.. 정보처리기사 필기에도 합격했다.이제 6월 30일에 있을 실기시험을 준비해야 하는데.. 계속 자격증을 준비하니까 스트레스가 생각보다 많이 쌓인다.재밌기도 한데, 공부하지 않는 시간에 공부해야 할 것 같은 압박..
-
너비 우선 탐색알고리즘공부 2018. 5. 28. 17:44
너비 우선 탐색 Breath-First Search두 항목 간의 최단 경로를 찾는다.너비 우선 탐색은 두 가지 질문에 대답할 수 있다. 질문 1. 정점 A에서 정점 B로 가는 경로가 존재하는가?질문 2. 정점 A에서 정점 B로 가는 최단 경로는 무엇인가? 망고 판매상 찾기 문제 (질문 1. 나의 네트워크에 망고 판매상이 있는가?)나는 망고 농장의 주인이다.망고를 팔기 위해 페이스북 친구 목록 중 망고 판매상을 찾으려고 한다.먼저, 페이스북 친구 목록을 살펴보았다. 그런데, 친구 중에 망고 판매상이 없다.이제 친구의 친구를 찾아볼 차례이다. 만약 앨리스가 망고 판매상이 아니면 앨리스의 친구를 목록에 올린다.앨리스의 친구, 앨리스의 친구의 친구, 이런식으로 망고 판매상을 찾을 때까지 전체 네트워크를 탐색하게..