As i wish

안녕하세요. 엄티입니다. 오늘은 Lotto Game 을 만들어 보겠습니다. 제 포스팅은 '제로초' 님의 웹게임 강좌를 기반으로 제가 복습한 형태로 진행 됩니다. 제로초님의 웹게임 강좌 리액트 무료 강좌(웹게임) - YouTube www.youtube.com 일단 지난번에 라이프사이클에 대하여 배웠는데, 오늘은 조금 더 자세하게 배웠습니다. 일단 기본적인 라이프 사이클은 constructor -> render -> ref -> componentDidMount -> (setState/props changed), shouldComponentUpdaet(true) -> render -> componentDidUpdate -> (부모가 없앨 때) componentWillUnmount -> 소멸 이런식이고요 지난 ..

오늘은 가위바위보 게임을 바탕으로 React에 라이프 사이클, 고차 함수, Hooks useEffect에 대하여 포스팅 해보겠습니다. 계속 해서 언급 하지만 제 포스팅은 '제로초' 님의 리액트 강좌를 바탕으로 합니다. 제로초님의 웹게임 강좌 리액트 무료 강좌(웹게임) - YouTube www.youtube.com 먼저 라이프사이클에 대하여 알아보겠습니다. 리액트 라이프 사이클은 하나의 component의 생명 주기를 의미 하는데요. 처음 component가 rendering 되고 없어 질 때 까지 를 의미 합니다. 여러가지가 있는데, 기본적으로 componentDidMount, componentDidUpdate, componentWillUnMount 요 3가지가 가장 중요하죠. 대략적인 의미는 다음과 같..

리액트 프로젝트를 수동으로 셋팅 할 때에 필요한 프로젝트 셋팅과 개발의 편의를 위한 웹팩 적용을 포스팅 해보겠습니다. 기존 포스팅 한것을 한곳에 모은 것이기 때문에 링크를 클릭하여 확인해 주시면 되겠습니다. 프로젝트 셋팅 [React 구구단] React 프로젝트 셋팅 안녕하세요. 엄티 입니다. 이제부터 React를 사용해서 간단한 구구단 게임을 만들어 보겠습니다. 그전에 React를 사용하기 위한 간단한 프로젝트 세팅을 해보겠습니다. 참고로 제 포스팅 유명하신 '제로초'님 강좌.. eomtttttt-develop.tistory.com webpack, hot loader 적용 [React 끝말잇기] webpack-dev-server 및 react-hot-loader 안녕하세요. 엄티 입니다. 오늘은 리액트..

안녕하세요. 오늘은 '반응속도 체크' 게임을 만들어 보겠습니다. 앞서 계속해서 언급했지만 제 포스팅은 '제로초' 님의 유투브 강좌를 듣고 복습하는 내용으로 꾸며집니다. 제로초님의 웹게임 강좌 리액트 무료 강좌(웹게임) - YouTube www.youtube.com 오늘은 '반응속도 체크' 게임을 통하여 jsx 안에서 조건문, 그리고 타이머에 관하여 공부했습니다. 일단 결과창 부터 확인해 보겠습니다. 이렇게 상태가 총 3가지 정도가 있고 파랑 -> 빨강 -> 초록 에 따라서 클릭 했을 때에 변화를 주는거죠. 먼저 파랑(waiting) 일때 클릭하면 빨강(ready)화면이 됩니다. 그 다음 특정 시간이 지나면 초록(now) 화면이 되는데 이 때, 화면을 클릭해서 반응속도를 체크하는거죠. 물론 빨강(ready..

안녕하세요 엄티 입니다. 오늘은 component 분리와 props에 대하여 공부해봤습니다. 저는 제로초 님의 웹게임 강좌를 기준으로 공부 합니다. 제로초임의 웹게임 강좌 리액트 무료 강좌(웹게임) - YouTube www.youtube.com 일단 그 전에 간단하게 React 에서 파일을 불러오는 두 방법 import 와 require에 대하여 알아보겠습니다. import ClassApp 을 하려면 파일에 export default ClassApp 이라고 정의되어 있어야 하며 import { hello, bye } 같이 다중으로 import 하려면 export const hello = 'hello', export const bye = 'bye' 라고 정의되어 있어야 합니다. 이와 마찬가지로 const ..

안녕하세요. 엄티 입니다. 오늘은 리액트 프로젝트를 만들 시에 코드 수정과 함께 자동으로 결과창이 변할 수 있도록 세팅을 한번 해보겠습니다. 사실 앞선 포스팅에서는 계속해서 코드를 바꾸고, webpack 빌드를 하고, index.html을 열거나 새로고침을 하는 식으로 코드를 고쳐나갔는데요. 사실 실제로 업무를 하다 보면 이런 시간이 상당히 아까워집니다. 따라서 코드를 수정하고 저장만 하면 바로 결과창에 나와서 실시간으로 코드를 고쳐나가게 하는 것이 이번 포스팅에 목표입니다. 예를 들어 ionic 일 때는 ionic cordova run android -lcs와 같이 livereload 기능이 있는데 이와 비슷하다고 보시면 됩니다. 없어서는 안 될 기능이죠!!! 먼저 필요한 플러그인을 설치해 줍니다. $..

안녕하세요. 엄티 입니다. 오늘은 React 구구단에 이어서 '끝말잇기'를 만들어 보겠습니다. 잘 아시다시피 저의 포스팅은 '제로초' 님의 유투브 강좌를 기준으로 합니다. '제로초' 님의 리액트 무료 강좌(웹게임) 리액트 무료 강좌(웹게임) - YouTube www.youtube.com 그럼 간단하게 끝말잇기를 만들어 보겠습니다. 먼저 결과창부터 확인해 보겠습니다. 처음에 글자가 주어지고요. Input창에 글씨를 입력한 후 끝말잇기가 되면 입력한 글자가 주어진 글자로 변경되고, 끝말잇기가 안되면 Wrong이라고 띄워 주면 되는 간단한 게임입니다. 사실 전 포스팅인 구구단과 상당히 비슷하기 때문에 이 포스팅을 보고 계신 여러분이 직접 한번 해보는것을 추천드려서 결과창부터 보여드렸습니다. 구구단 웹게임 [R..

안녕하세요. 엄티 입니다. 오늘은 React로 간단한 구구단 게임을 만들어 보겠습니다. 기본적인 Project 세팅은 앞선 제 포스팅을 참고 부탁 드립니다. React project setting [React 구구단] React 프로젝트 셋팅 안녕하세요. 엄티 입니다. 이제부터 React를 사용해서 간단한 구구단 게임을 만들어 보겠습니다. 그전에 React를 사용하기 위한 간단한 프로젝트 세팅을 해보겠습니다. 참고로 제 포스팅 유명하신 '제로초'님 강좌.. eomtttttt-develop.tistory.com 참고: 제 포스팅은 '제로초' 님 강의를 제 나름대로 정리한 것입니다. 자세한 정보를 알고 싶으시면 '제로초' 님 강의를 참고해 주세요. '제로초' 님의 리액트 무료 강좌(웹게임) 리액트 무료 강좌..

안녕하세요. 엄티 입니다. 이제부터 React를 사용해서 간단한 구구단 게임을 만들어 보겠습니다. 그전에 React를 사용하기 위한 간단한 프로젝트 세팅을 해보겠습니다. 참고로 제 포스팅 유명하신 '제로초'님 강좌를 바탕으로 만들어져 있기 때문에 (사실 포스팅은 저의 공부 및 복습 용) 더 자세히 알고 싶으시면 유튜브에 '제로초' 님 강좌를 보시면 되겠습니다. '제로초' 님의 리액트 무료 강좌(웹게임) 리액트 무료 강좌(웹게임) - YouTube www.youtube.com 일단 폴더 부터 만들어야겠죠? (저는 참고로 맥입니다!) $ mkdir ~/Projects/personal-project/react-study/gugudan 이렇게 만들었습니다. 이건 뭐 중요한 건 아니기 때문에 편하신데 만드시면 됩..

create-react-app [project name]을 하여서 앱을 실행하게 되면localhost:3000 으로 연결 됩니다. 즉, PORT가 3000으로 열리게 되죠. 그런데 개발을 하게 되면 다른 PORT로 열여야 할 일이 종종 있게 됩니다.따라서 다른 PORT로 다른 앱을 열라면 아주 간단합니다. $PORT=[PORT NUMBER] npm start 라고 하면 새로운 PORT NUMBER로 연결됩니다. 간단하죠?? 저는 3001로 연결해 보았습니다.