리액트 웹개발 #2 - 스톱워치 만들기

in #dclick5 years ago

안녕하세요. @u robotics 입니다.
리액트는 매우 손쉽게? 개발을 할 수 있게 돕는 도구입니다.
자바스크립트 라이브러리죠.
687474703a2f2f6465762e746f7068656d616e2e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031352f30342f6c6f676f2d72656163746a732e706e67.png

리액트로 개발을 하면,
리액트 돔은 웹 개발을 도와주고요.
리액트 네이티브는 IOS 및 안드로이드 앱 개발을 도와줍니다.

리액트는 거의 개발표준 정도로 올라온 기술이라서
이것만 배워도 그냥 웹 개발자가 될 수 있는 기술이에요.
ㅇ_ㅇ 대박이죠.
이것만 알면 당신도 웹 개발자. !!! 두둥.
(쪼금만 더 배우면 앱 개발자도 됨!!! 두두둥)

그래서 리액트로 웹 개발하는 걸
총 10회 정도 써볼려고 합니다.

저도 리액트 공부를 하고,
관심있는 분들도 리액트 배우고 하는
좋은 의미로 시작해봐요. ㅎㅎㅎ

지난 1강 에서는
리액트로 간단하게
웹을 띄우는 것까지 해봤습니다.
https://steemit.com/kr/@urobotics/react-1st

이번 2차에서는스톱워치를 만들려고 합니다.
역시 create-react-app을 활용합니다.

기본요구 사양은 있어요.
(1) nodejs 설치하기.
(2) Atom 같은 텍스트 에디터 설치하기.
(Visual Studio Code나 Sublime Text3, WebStorm 다 괜찮습니다.
편한 걸로 쓰세요.)

자, 그럼 시작해봅시다.
명령프롬프트를 찾아서 열어주세요.

윈도우 왼쪽하단 검색에서 열어서 명령 프롬프트 검색.
(아니면, windows키 + r )
{맥은 터미널 여시면 됩니다.}

명령프롬프트.jfif

창이 열리면 cmd를 쳐주세요.
cmd.jfif

그러면 명령프롬프트가 열립니다.
여기서부터 명령어를 입력하면 됩니다.

요것입력.jfif

역시, 딱 3줄만 입력하면 되는데요.
이번에는 이름을 좀 바꿔봅시다.

stopwatch 로요.
그러면 이렇게 됩니다.

create-react-app stopwatch
cd stopwatch
npm start

이렇게 한줄씩 차례로 입력하고
엔터치고.

3번다 입력해주세요.
그러면 또 웹이 뜹니다.

화면이 뜬다.jfif

이번에는 조금 수정해보겠습니다. ^^

소스를 다 보시면 아시겠지만,
가장 중요한 파일은 index.js 입니다.
그걸 수정하면 돼요.
index.js에서 stopwatch.js 를 쓰겠다고 하고
그걸 stopwatch.js에 만들어주면 됩니다.

결국 할 일은
(1) index.js 수정.
(2) stopwatch.js 만들기
이렇게 됩니다.

해보죠. ㅎㅎㅎ ^^

일단 index.js 파일을 찾아서 수정해야죠.
src 폴더 안에 있습니다.
1.jpg

파일을 보시면
3번째 줄을 import StopWatch from './StopWatch' 로 써주시고요.
6번째 줄의 App을 StopWatch로 바꿔주시면 됩니다.

index.js파일.jpg

그리고 src 폴더 밑에
StopWatch.js 파일을 하나 만들어줍니다.
이 파일 복사해서 붙여넣으시면 됩니다.

import React, {Component} from 'react'
class StopWatch extends Component{
constructor(props){
super(props)
this.state={
isLive:false,
curTime:0,
startTime:0
}
this.timerId = 0
}
//마운트 했을 때
componentWillMount(){
this.timerId = setInterval(e=>{
this.tick()
}, 1000)
}
//언마운트 했을 때
componentWillUnmount(){
clearInterval(this.timerId)
}
//매초 실행됩니다.
tick(){
if(this.state.isLive){
const v = new Date().getTime()
this.setState({curTime:v})
}
}
//시작/중지 버튼을 클릭했을 때
clickHandler(e){
//중지할 때
if(this.state.isLive){
this.setState({isLive:false})
return
}
//시작할 때
const v = new Date().getTime()
this.setState({
curTime:v,
startTime:v,
isLive:true
})
};
//출력할 시계를 생성합니다.
getDisp(){
const s = this.state
const delta = s.curTime - s.startTime
const t = Math.floor(delta / 1000)
const ss = t % 60
const m = Math.floor(t/60)
const mm = m % 60
const hh = Math.floor(mm / 60)
const z = (num) => {
const s = '00' + String(num)
return s.substr(s.length -2, 2)
}
return
{z(hh)}:{z(mm)}:{z(ss)}

}
//화면에 보여주기(rendering)
render(){
let label = 'START'
if(this.state.isLive){
label = 'STOP'
}
const disp = this.getDisp()
const fclick = (e) => this.clickHandler(e)
return (


{disp}

{label}
)
}
}

export default StopWatch

그래서 마지막으로
커맨드 창[명령프롬프트] 으로 돌아가서요.
create-react-app stopwatch
cd stopwatch
npm start
해주시면 이런 화면이 뜹니다.

실행1.jpg

START를 눌러주시면 진행됩니다.
실행2.jpg
STOP 눌러서 꺼주시면
재시작이 됩니다.

여기까지 읽어주셔서 감사합니다.
감사합니다. ^^ 좋은 하루 되세요.


Sponsored ( Powered by dclick )
태풍 콩레이를 가르고(2) ....부안 ‘내소사’에서

태풍 콩레이 그리고 부안 ‘내소사’ 둘째 날 그 비와 바람을 가르고 ‘내소사’를 다녀왔습니다....

logo

이 글은 스팀 기반 광고 플랫폼
dclick 에 의해 작성 되었습니다.

Sort:  

뚝딱뚝딱 짜짠~
개발자분들은 연금술사 같네요.
뭔가 눈에 보이는게 있으니 1강부터 따라가봐야겠네요.
리액트 아직은 모르지만 가보장~!!

아. 그리고 10강까지 가실 예정이라면 글 끝머리에 과거 포스팅 list를 달아주시면 좋을 것 같습니다^^

ㅎㅎㅎㅎ 감사합니다. 이제 개발력 시작이라서요. ㅎㅎㅎ
예. ㅎㅎㅎ 리액트 재밌고 유용합니다.

제가 1강 링크는 앞쪽에 써놨는데, 지금 dclick 붙여놔서 수정이 어렵군요.
담부터는 글 제일 밑에 지난강의 링크 다 걸어놓겠습니다.
감사합니다. ㅎㅎㅎ

리액트로 스톱워치앱을 정말 간단하게 만들었네요.

예. ㅎㅎㅎ 그냥 간단하게 맛만 봤습니다. ㅎㅎㅎ

오홋...! 좋은 강의 감사드립니다. 구독과 좋아요! 누르고 갑니다ㅋㅋㅋ

덕배님 감사합니다. ㅎㅎㅎ 구독과 좋아요는 약간 블로그 느낌인데요. ㅋㅋㅋ

@urobotics 님 설명이 간결하게 좋습니다.

@codingart 님 감사합니다. ^^ ㅎㅎㅎ

안피곤 형아는 파이썬
형아는 자바스크립트네
안피곤형아 대회 연거 처럼 형아도 대회 열꺼야?
나 참여할께 열어주라 형아 ㅋㅋㅋㅋ

어. 형아. ㅎㅎㅎㅎ 둘다 표준에 가까운 기술임. ㅎㅎㅎ
대회를 열고 싶어도 참여자가 있어야 되는거지 . ㅎㅎㅎ
오. 지수형이 참여해주면 고맙지. 흥행 대박 나겠는데.
10번 다 쓰고 나면 대회열께. ㅋㅋㅋ
감사. 감사. ㅎㅎㅎㅎ

예전 대학에서 C언어 배우던 생각이 문득 드네요ㅎㅎ 정말 머리 아팠는데, 대단하십니다^^

ㅎㅎ저도 그때 포인터 때문에 C를 정복 못했네요. C는 아직도 조금밖에 몰라요 ㅎㅎ 이건 좀더 쉬운 기술이라서 열심히 배울려구요 ㅎㅎ

리액트를 배워보고싶었는데 좋은 글이네요 ㅎㅎ
팔로우 하고 갑니다 :)

감사합니다. 저도 리액트 배워보고 싶어서 써요. ㅎㅎㅎ 맞팔했습니다. 감사합니다. ㅎㅎㅎ

오늘 해봐야겠네요.
잘읽어봤어요.

예 ㅎㅎ 좋죠.
읽어주셔서 감사합니다.

Coin Marketplace

STEEM 0.35
TRX 0.12
JST 0.040
BTC 70601.11
ETH 3576.21
USDT 1.00
SBD 4.78