코딩/REACT
-
[ 리액트 ] react portal을 사용하여 react-beautiful-dnd 이슈 해결하기코딩/REACT 2020. 12. 3. 23:51
리액트엔 뭐 여러기능들이 있는데 요즘 사용된 기술만 사용했지 다른 것들은 배제하고 사용하고 있었습니다. 그런데 최근에 beautiful-dnd라는 모듈을 사용하다가 이상한 이슈에 빠져서 해매던중에 portal 을 사용하라는 이야기가 있었습니다. 포탈 많이 들어봤는데 제가 사용할 일은 없겠다 싶기도 하고, 굳이 알고 싶지도 않았었는데 당장 고치고싶은 마음이 굴뚝같아서 바로 뒤적여보게 되었습니다 ㅋㅋㅋ..(역시 사람이란...) 포탈이란 리액트 앱은 부모 컴포넌트에서 자식컴포넌트로 렌더링하게 되어있는 구조인데 자식컴포넌트렌더링을 부모컴포넌트가 아닌 다른곳에서 렌더링할수있게끔 하게 해주는 기능입니다 여러예제를 보니까 Modal 컴포넌트를 만들때 주로 사용하는거 같았습니다. 여튼 왜 react-beautiful-..
-
리액트로 간단한 시계 만들기코딩/REACT 2020. 11. 30. 22:48
리액트로 간단한 시계를 만들어보겠습니다. import React, { useState, useEffect } from 'react'; import moment from 'moment'; function ClockContainer() { let timer: any = null; const [time, setTime] = useState(moment()); useEffect(() => { timer = setInterval(() => { setTime(moment()); }, 1000); return () => { clearInterval(timer); }; }, []); return ( {time.format('YYYY-MM-DD')} {time.format('HH-mm-ss')} ); } export d..
-
React와 Node.js를 사용한 영화 검색 웹 만들기 (Feat : naver 영화검색 api)코딩/REACT 2020. 11. 26. 16:33
영화검색 웹 Front 구현 create-react-app 설치 create - react - app 을 통해 리엑트를 세팅해봅시다 window + r cmd를 켜주세요 cd c:// c 드라이브로 이동합니다. mkdir react 디렉토리 생성 cd react 디렉토리 이동 npx create-react-app movie-movie npx는 npm 패키지를 로컬에 글로벌로 설치하지 않고 바로 일회성으로 실행할 수 있게 해주는 도구입니다. 만약 npx가 실행이 안되는 구버전이라면 npm install -g create-react-app create-react-app movie-movie 이렇게 입력해주세요 성공하면 이런식으로 화면이 보이게 됩니다. movie-movie 로 이동하겠습니다. cd movie..
-
React와 라즈베리파이로 스마트 미러 만들기! - 1코딩/REACT 2020. 11. 26. 16:19
예전에 라즈베리파이랑 물려서 뭐든 해보겠다는 10인치 작은 모니터를 처분하려다가, 어느날 스마트 미러를 알게되었습니다 ..음.. 이런저런 걸 보다보니. 딱 내 새로운 toy 프로젝트로 딱이란 생각이 들어서 한번 만들어보도록 할까요~ 스마트 미러를 처음보고 하이테크 기술인줄 알았으나, 간단한 원리가 숨어있었습니다. 사실 하프미러는 주위에도 자주 볼수 있는데 [사진] 그 일례로 하프미러 케이스이런 것들이있습니다. 준비물은 다음과 같습니다 라즈베리파이 3b+ (버전이 높으면 높을수록 좋음 암튼 좋음) 디스플레이 ( 모니터든, 암거나 상관없음) one-way mirror 검색결과 얘는 만들거나, 사거나 둘 중 하나가 있습니다. 1. 만든다 장점 : 저렴하다 단점 : 귀찮다 제가 가진 디스 플레이가 만약 컸으면 ..