As i wish

리액트를 공부하면서 도움이 되었던 자료들을 정리합니다. 계속 업데이트 됩니다. (최신 업데이트 날짜 20190718) create-react-app 사용시 웹에서 proxy 를 통하여 CORS 문제 해결 [ Webpack ] Proxy 설정으로 CORS 도메인 문제 해결 CORS (Cross-Origin Resource Sharing) 란? 웹브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 스팩이다. 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식.. ryulog.tistory.com Infinity scroll 만들기 React에서 Infinite Scroll 구현하기 - 허정민 - Medium 이번 시간에는 요즘 많은 사이트들에서 흔히쓰는 Infini..

안녕하세요. 엄티입니다. 이번에는 실질적으로 React-redux를 사용해 보겠습니다. 기존에 프로젝트에 각각 Redux 에 필요한 action, reducers, store 세팅은 지난 포스팅에 있기 때문에 참고해주세요. Redux - React 프로젝트 세팅 [React 틱 택 토] Redux - React 프로젝트 세팅 안녕하세요. 엄티 입니다. 오늘도 역시 리액트 포스팅을 해보겠습니다. 저의 리액트 포스팅은 '제로초' 님의 웹게임 강좌를 바탕으로 포스팅 합니다. 제로초 님의 웹게임 강좌 리액트 무료 강좌(웹게임) - YouTube.. eomtttttt-develop.tistory.com 일단은 조금 더 큰 프로젝트에서는 Component 를 나눕니다. UI 를 담당하는 Presentational ..

안녕하세요. 엄티 입니다. 오늘도 역시 리액트 포스팅을 해보겠습니다. 저의 리액트 포스팅은 '제로초' 님의 웹게임 강좌를 바탕으로 포스팅 합니다. 제로초 님의 웹게임 강좌 리액트 무료 강좌(웹게임) - YouTube www.youtube.com 오늘은 Redux 를 적용해 보겠습니다. 일단 개념이 처음에는 잡기 힙든데 몇번 사용하다가 익숙해지면 정말 편한 라이브러이입니다. 한마디로 쉽게 정의하면 '상태 관리 라이브러리' 라고 할 수 있죠. 리덕스를 왜 쓸까? 리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (ii) | VELOPERT.LOG 이 포스트는 이어지는 튜토리얼 입니다. 1편 을 먼저 읽고 오시길 바랍니다. 리덕스의 3가지 규칙 리덕스를 프로젝트에서 사용하게 될 때 알..

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

안녕하세요. 오늘은 '반응속도 체크' 게임을 만들어 보겠습니다. 앞서 계속해서 언급했지만 제 포스팅은 '제로초' 님의 유투브 강좌를 듣고 복습하는 내용으로 꾸며집니다. 제로초님의 웹게임 강좌 리액트 무료 강좌(웹게임) - 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 ..

안녕하세요. 엄티 입니다. 오늘은 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로 연결해 보았습니다.