방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러, 리엑트, 뷰108 리엑트 파이어베이스 데이터 저장소 연동(React firebase firestore) 리엑트에서 파이어베이스 데이터 저장소를 연동하는 방법을 소개 합니다. 파이어베이스에서 제공하는 데이터베이스는 클라우드형식의 저장소로 어디서는 접근이 가능한 장점이 있기 때문에 포트폴리오나 간단한 웹으로도 많이 쓰이는 것 같습니다. : - ) 연동단계는 아래와 같습니다. 파이어베이스 가입 > 프로젝트 생성 > 저장소 생성 > 인증정보 획득 > 로그인 등록 > 리엑트 프로젝트에 Lib 설치 > 사용 > 인증 써 놓고보면 단계가 상당하지만 천천히 하다보면 그렇게 어렵지 않습니다. #1. 파이어베이스 가입 > 프로젝트 생성 > 저장소 생성 > 인증정보 획득 먼저 파이어베이스에 가입해야 합니다. 네이버나 구글 검색엔진에 "firebase" 라고 입력을 한 뒤 가입하도록 합니다. 이때 구글계정이 필요합니다. 그리고.. 2021. 12. 8. 리엑트 익스플로러 동작(React explorer) 리엑트를 익스플로러에서 동작 시키는 방법 입니다. #첫번째 ───── 먼저 아래 모듈을 설치하여 줍니다. npm install react-app-polyfill package.json에서 설치되었는지 확인합니다. #두번째 ───── 다음으로 설치된 모듈을 index.js에 추가하여 줍니다. 여기서 index.js는 가장 먼저 부트스트랩(bootstrap)되는 파일을 의미 합니다. 이름을 바꾸셨다면 아래 사진처럼 리엑트와 관련된 내용이 있는 파일을 찾아서 수정하시면 됩니다. // IE11의 경우 import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; #세번째 ───── 그리고 캐쉬라는 디렉토리를 제거 합니다. 위치는 node_module.. 2021. 5. 3. 리엑트 후크(React Hook) useEffect cleanup function 리엑트를 개발하면서 만난 경고(Warning)입니다. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup 이러한 경고(오류)가 나오는 원인은 페이지 이동 이벤트(routing)가 일어나면서, 기존의 useEffect 내부의 내용이 이미 지나버린 페이지에 대해서 동작하였기 때문입니다. 아래와 같은 코드가 있었습니다. const [myData, setData] = useSt.. 2021. 4. 22. 리엑트(React) 새로고침 방지(F5 key, prevent refresh, React HashRouter) 리엑트(React)도 앵귤러(Angular)처럼 순수 클라이언트(client) 코드 이므로 오직 브라우저에서만 동작 합니다. 웹팩(webpack) 환경에서는 새로고침(F5) 이슈가 상관 없으나 개발이 완료되고 난 이후에 실제 서버에 적용 할 때는 문제가 될 수 있습니다. 다시 말해, 실제 적용 해야되는 어플리케이션 서버에서 새로고침을 하는 경우 404 오류가 발생 할 수 있습니다. 이를 극복하는 방법은 2가지 입니다. 1. 리엑트에서 라우터를 변경한다. 2. 서버에서 404 페이지에 대해서 작업한다. 먼저 리엑트에서 사용하는 라우터를 변경하는 방법 입니다. 앵귤러(Angular)에서는 useHash 라는 옵션을 라우터 설정에서 추가하면 샵(#)기호가 주소에 붙으며 새로고침을 방지 할 수 있습니다. 아래는.. 2021. 4. 13. 리엑트(React) Javascript 띄어쓰기(whitespace) 경고 파셀, 웹팩 등 개발환경에서 만나는 경고(warning) 입니다. 내용은 아래와 같습니다. Unexpected whitespace before property then no-whitespace-before-property 이번엔 리엑트(React)에서 개발하다 만난 상황이며, 경고(warning)의 의미 이므로 실제로 프로젝트가 동작하는 데 문제는 없습니다. 자꾸 거슬리는 게 싫어서 뭐가 문제인지 찾아보았습니다. 내용은, 기대하지 않는 띄어쓰기로 인한 경고라고 하는데.. 해당 경고가 나오는 곳을 아무리 살펴봐도 띄어쓰기가 잘못 되어 있는 것 같지는 않았습니다. 55번째 9번줄은 new로 시작하는데 뭐가 오류지 하고 한참을 들여다 본 순간.. 아래 then함수 구간이 보였습니다. then함수가 한칸 띄어쓰.. 2021. 4. 13. 리엑트(React) 에서 전개연산자(Spread operator) 오류 (엣지, Edge) 전개연산자는 매우 훌륭하게 객체에 대한 정보를 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다. * 출처 : developer.mozilla.org 크롬, 파이어폭스 및 사파리 등 해당 브라우저에서는 문제없이 동작하는데.. 엣지(Edge)등을 통해서 전개연산자 부분을 만나면 동작을 하지 않고 앱이 멈추어 버렸습니다. 아래와 같은 경우를 의미 합니다. 사실 쉬운 이슈거리이긴 하나 막상 만나면 매우 당황스럽습니다. 해결 방법은 간단 합니다. 일반적으로 우리는 create-react-app 명령어를 통해서 앱을 생성하고 나면 package.json 의 내용이 압축된 상태로 나오게 .. 2021. 4. 13. 이전 1 2 3 4 5 6 7 8 ··· 18 다음
