다소 도발적으로 들리는 제목을 가지는 4분동안 웹 디자인 하기.라는 프로젝트가 github에서 난리가 났습니다.

2016/07/28 Today’s Best

jgthms/web-design-in-4-minutes
_web-design-in-4-minutes - Learn basics of web design in 4 minutes_github.com

일단 한번 보시죠.

사이트 하나가 약간씩 변해가는 모습의 움짤을 만들어 봤습니다.

이 움짤이 어디서 왔냐 하면 깃헙 페이지의 링크인

Web Design in 4 minutes
_Learn the basics of web design in 4 minutes with this interactive tutorial._jgthms.com

에서 시작이 됩니다.

들어가시면 그냥 휑한 페이지만 보일 것입니다. 그런데 Next를 위한 링크들이 계속 계속 보입니다.

처음엔 Content를 집어 넣으라는군요. 클릭했더니 style.css파일을 지정하라고 합니다.

Style.css를 하면 제일 먼저 뭘해야 하는지 질문합니다.

Center 정렬이라는군요!

body {  
margin: 0 auto;  
max-width: 50em;  
}

이렇게 정렬하면 되. 라고 클릭하면.

헐 이게 왠열 정렬이 됩니다. 그리고 폰트 적용까지

마지막 이미지 백그라운드를 줄 때까지 4분이면 정말 CSS의 기초를 배울 수 있습니다.

대부분의 웹 개발자라면 알고 있는 내용이겠지만

처음 개자인너나 디발자를 꿈꾸는 영링에게는 포스가 함께 하기를 빕니다~

By Keen Dev on July 28, 2016.

Exported from Medium on May 31, 2017.

react-native를 쓰면서 정말 좋았던 것 중에 하나는 react-native 명령어로 react-native app을 직접 만들 수 있다는 것이었습니다. 그걸 보고 거꾸로 react에도 내가 일일이 boilerplate를 설정하지 말고 그냥 명령어로 만들면 좋겠다. 라고 생각했었습니다.

이런 내 마음을 읽은 것일까요?

facebookincubator에서 create-react-app 프로젝트를 내 놓았습니다.

2016/07/27 Best Project

facebookincubator/create-react-app
_create-react-app - Create React apps with no build configuration._github.com

설치

$npm install -g create-react-app

실행

$create-react-app my-app  
$cd may-app  
$npm start

정말 간단하네요.

watchify도 적용되어 있는 거 같습니다. 바로 저장하자마자 뿅~

deep inside

create-react-app으로 설치를 하고 나면 기본적으로

와 같은 구조의 파일들이 생깁니다.

package.json을 살펴보면

{  
"name": "my-app",  
"version": "0.0.1",  
"private": true,  
"devDependencies": {  
"react-scripts": "0.1.0"  
},  
"dependencies": {  
"react": "^15.2.1",  
"react-dom": "^15.2.1"  
},  
"scripts": {  
"start": "react-scripts start",  
"build": "react-scripts build",  
"eject": "react-scripts eject"  
}  
}

형태의 간단한 프로젝트가 생성이 됩니다.

dependency가 react 만 가지게 되어 있고 dev-dependencies를 살펴보니 react-script 라는 녀석이 있습니다.

react-script를 살펴보았습니다.

babel, webpack, eslint등의 많은 일들을 해 주고 있습니다.

즉 create-react-app이라는 것은 보일러 플레이트 메이커 정도로 이해하면 될 거 같습니다.

$npm build

명령어를 통해서 production 레벨의 스크립트로 만들어 주는 부분들도 지원을 합니다.

react-script라는 녀석이 깃헙에 있을까 찾아보았는데 그게 보이지는 않고 create-react의 devDependency오 동일한걸 보니 파일들을 생성하는 역할만으로 끝인듯 합니다.

By Keen Dev on July 27, 2016.

Exported from Medium on May 31, 2017.