본문 바로가기
반응형

분류 전체보기339

ESLint 끄는법 리액트를 하다보면 ESLint가 에러가 아닌데 에러가 나도록 표시하는 경우가 있다. 몹시 짜증나므로 ESLint를 끄는방법을 배워보도록 하자 간단하다. .env 파일에서 아래와 같이 추가해준다. DISABLE_ESLINT_PLUGIN=true 2022. 12. 2.
리액트에서 카메라 사용법 https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia MediaDevices.getUserMedia() - Web APIs | MDN The MediaDevices.getUserMedia() method prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media. developer.mozilla.org 1. 개요 React에서 카메라를 사용하려면 getUserMedia() 함수를 사용하면 됩니다 허나 이 함수는 단순히 카메라만 사용하는것이 아닌 마.. 2022. 12. 2.
부모 컴포넌트에서 자식 컴포넌트 함수 호출하기 1. 개요 부모 컴포넌트에서 자식 컴포넌트의 함수를 호출하려면 다음 두가지를 알아야 한다 forwadRef : 자식 컴포넌트의 요소에 대해 ref를 따는 API useImperativeHandle : 자식 컴포넌트의 여러 요소를 부모에게 노출시키는 hook. 여러개의 요소를 오브젝트의 형태로 담아 부모에게 전달 할 수 있다. 위 두가지는 서로 짝짝쿵이며 이에 대한 설명은 아래 글에 간단하게 적어놨다. (링크타기 부담스러우신분들은 안타도 충분히 위 두줄로 이해 되니깐 그냥 패스하세용) [React] forwardRef, useImperativeHandle에 대한 이해 1. 한줄요약 자식 컴포넌트의 element에 대해 ref를 따고 싶으면 forwardRef를 사용해라! 2. forwardRef에 대한 예.. 2022. 11. 17.
forwardRef, useImperativeHandle에 대한 이해 1. 한줄요약 자식 컴포넌트의 element에 대해 ref를 따고 싶으면 forwardRef를 사용해라! 2. forwardRef에 대한 예제 아래와 같은 FancyButton이라는 컴포넌트가 있다고 하자 function FancyButton(props) { return ( {props.children} ); } 이 컴포넌트를 자식으로 두는 부모의 컴포넌트가, 저 의 ref를 따고 싶다면? forwardRef를 사용하면 된다. const FancyButton = React.forwardRef((props, ref) => ( {props.children} )); // You can now get a ref directly to the DOM button: const ref = React.createRef(.. 2022. 11. 17.
이벤트 버블링과 캡처링 https://www.robinwieruch.de/react-event-bubbling-capturing/ React: Event Bubbling and Capturing Event bubbling in React explained with examples. You will learn how to prevent events from bubbling, how to capture events before the bubbling, and how to access the target and currentTarget ... www.robinwieruch.de 1. 개요 리액트 컴포넌트를 여러개 tree구조로 만들고 각각의 컴포넌트에다가 click 리스너를 달았다고 하자. 그리고 클릭 이벤트를 발생시켰다. 그럼 t.. 2022. 11. 17.
리액트에서 특정페이지 스크롤 막기 useEffect를 이용하여 컴포넌트가 마운트 될 때 스크롤을 막고, 컴포넌트 정리를 할 때 return 값으로 스크롤을 해제해준다. useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = 'auto'; } }, []); 2022. 11. 16.
[RN] 리액트 네이티브 웹뷰 스와이프 제스처 enable하기 리액트 네이티브 웹뷰에 safari처럼 swipe를 이용하여 페이지 앞 뒤로 이동하고 싶으면 다음과 같은 항목을 enable하면 된다 그러면 사파리처럼 앞뒤로 스와이프 네비게이션을 사용할 수 있다! 2022. 11. 15.
[RN] 리액트 네이티브 카메라, 마이크 권한 얻기 1. 서론 웹뷰로 카메라 쓸 일이 생겼었다. 헌데 아이폰에서 리액트 네이티브 웹뷰를 올리니깐 카메라 권한 물어보는 리퀘스트가 뜨지를 않는다. 찾아보니 리액트네이티브에서는 자체적으로 권한요청을 제공하지 않고 react-native-permission이라는 라이브러리를 사용해야한다. 깃허브 주소는 아래를 참고 https://github.com/zoontek/react-native-permissions GitHub - zoontek/react-native-permissions: An unified permissions API for React Native on iOS and Android An unified permissions API for React Native on iOS and Android - Git.. 2022. 11. 15.
[AWS] React EC2 인스턴스에 백그라운드로 배포하기 react를 백그라운드로 ec2인스턴스에 배포하는데 nohup으로 하고 나왔더니 자꾸 죽는다... fastapi 서버는 nohup으로 해도 멀쩡시 살아있는데 말이다. 찾아본 해결책은 다음과 같다 1. pm2 이용하기 npm install -g pm2 pm2 start index.js 2. forever 이용하기 npm install -g forever forever start index.js 이상하게 둘다 적용하면 접속이 안된다.. 뭐지 포트번호 틀렸나. 그러다 찾은 해결법... 3. sudo nohup 이용하기 sudo를 붙여주니깐 죽지 않는다... 혹시나 자꾸 리액트 죽으시는 분들은 sudo를 붙여보세용.. sudo nohup npm start & 2022. 11. 15.
초 간단 Redux 사용법 https://redux.js.org/tutorials/quick-start Quick Start | Redux - How to set up and use Redux Toolkit with React-Redux redux.js.org Redux란? state를 관리해주는 라이브러리 왜씁니까? state를 선언했는데 이를 어디 저 밑에 있는 자식컴포넌트한테 줘서 쓸일이 있다고 칩시다. 그럼 죄다 props 뚫어줘서 state랑 setState함수 넘겨줘야 되는데 끔찍함. 그래서 state를 전역으로 관리하는게 필요할 때 씀 1. 설치 npm install @reduxjs/toolkit react-redux 2. 개념 알아둬야할 개념 세가지가 있음 Store : 말그대로 상태를 저장하는곳 Provider :.. 2022. 11. 8.
[AWS] API Gateway를 활용하여 HTTPS 적용하기 지난번에 Route53 도메인구입 + ACM + 로드밸런서 조합으로 https 적용하여 서버 배포를 하였습니다. 관련 후기는 아래 참고... https://lucky516.tistory.com/m/228 [AWS] AWS 서버 배포 + HTTPS 적용 간단한 이해 자세한 내용은 나와 있지 않고 큰그림 수준에서 정리하는 내용입니다. 세부적인 내용을 찾으시는거라면 뒤로가기 회사에서 내부적으로 테스트하던 개발서버를 직접 배포할 일이 생겼습니다. lucky516.tistory.com 이번에는 훨씬 쉬운 방법으로 배포된 서버에 HTTPS를 적용해 보겠습니다. 바로 AWS의 API Gateway를 이용하는것 인데요. API Gateway는 쉽게말하면 서버 맨 앞에 문짝 하나 놓는다고 생각하시면 됩니다. nginx나.. 2022. 11. 2.
Framer 애니메이션 배우기 https://www.framer.com/docs/introduction/ Introduction | Framer for Developers Get started with Framer Motion and learn by exploring interactive examples. www.framer.com 리액트에서는 애니메이션 구현방법이 여러가지이이다. 그중에서 가장 많이 쓰는 Framer에 대해 배워보도록 하겠다. (본 내용은 위 사이트를 번역한 내용임) 1. Overview, 프레이머 간단히 둘러보기 먼저 프레이머가 어떻게 돌아가는지, 어떤 기능들이 있는지 살펴보자. 그리고 각각의 자세한 내용은 후반부에 설명하겠다. 컴포넌트 프레이머에서는 애니메이션을 하기 위해서 기존 DOM 요소들에 motion을 붙.. 2022. 11. 1.
[AWS] AWS 서버 배포 + HTTPS 적용 간단한 이해 자세한 내용은 나와 있지 않고 큰그림 수준에서 정리하는 내용입니다. 세부적인 내용을 찾으시는거라면 뒤로가기 회사에서 내부적으로 테스트하던 개발서버를 직접 배포할 일이 생겼습니다. 서버를 직접 배포해보는 것은 처음이라 많이 삽질하였습니다. 또한 HTTPS를 반드시 적요해야 했기에 많이 힘들었네요. 세부적으로 하는 방법은 인터넷에 많으나 전체적인 flow를 설명하는 내용은 없어서 살짝 정리하고 갑니다. 큰그림만 이해하면 세부적인건 쉽게 따라갈 수 있다는게 제 철학이라 도움되셨으면 좋겠습니다. 완전 초보적인 내용이니 너그럽게 봐주시면 감사하겠습니다. 1. 서버 배포에 대한 간단한 이해 본인이 만들어본 서버를 모든 사람들이 접속해 사용해 볼 수 있는 과정입니다. Deploy 또는 Hosting 이라고도 하며, .. 2022. 10. 18.
WebRTC 튜토리얼 https://webrtc.org/getting-started/peer-connections 피어 연결 시작하기 | WebRTC Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 피어 연결 시작하기 피어 연 webrtc.org Peer Connection peer connection이란 두개의 서로다른 컴퓨터에 돌아가는 application을 p2p방식으로 연결해주는 것 이다. 피어간에 통신은 비디오, 오디오 또는 임의의 바이너리 데이터(RTCDataChannel API를 지원할 때) 가 될 수 있다. 두 피어가 서로를 발견하기 위해서는, 두 피어 모.. 2022. 10. 7.
[Git] Could not read from remote repository 언제부턴가 깃에서 ssh로 주소를 등록하면 지랄맞게 push가 되지 않는다. 해결책을 찾아봤는데 하나같이 귀찮은 것 들이다. 이걸 매번 해 줄 수 없는 노릇이고 그러다 기가막힌 방법을 찾았다 깃허브 셋업에서 아래와 같이 https로 주소를 바꿔준다! 그럼 편안하게 푸시가 잘 되는것을 확인 할 수 있다. 아니 이럴거면 뭐하러 ssh를 그리 지랄맞게 만들었대.... 2022. 9. 29.
[Firebase] Storage 사용하기 https://firebase.google.com/docs/storage/web/start?hl=ko&authuser=0 웹에서 Cloud Storage 시작하기 | Firebase Storage 2022년 10월 18일에 오프라인과 온라인으로 진행될 Firebase Summit에 참여하세요. Firebase로 앱을 빠르게 개발하고 안심하고 앱을 출시하며 손쉽게 확장하는 방법을 알아보세요. 지금 등록하기 의견 보 firebase.google.com 1. 기본 구성 아래와 같이 getStorage로 storage 서비스를 불러온다 import { initializeApp } from "firebase/app"; import { getStorage } from "firebase/storage"; // TOD.. 2022. 9. 26.
[Firebase] 파이어스토어 realtime update 처리하기 https://firebase.google.com/docs/firestore/query-data/listen#web-version-9 Cloud Firestore로 실시간 업데이트 가져오기 | Firebase 2022년 10월 18일에 오프라인과 온라인으로 진행될 Firebase Summit에 참여하세요. Firebase로 앱을 빠르게 개발하고 안심하고 앱을 출시하며 손쉽게 확장하는 방법을 알아보세요. 지금 등록하기 의견 보 firebase.google.com 파이어스토어에 데이터가 업데이트 되었다고 하자. 당신이 이 업데이트된 내용을 실시간으로 처리하고 싶다면? 결론부터 말하자면 onSnapshot() 메소드를 이용하면 된다. 리액트에서는 아래처럼 사용한다. import { doc, onSnapshot.. 2022. 9. 23.
브라우저 콘솔기록 지우는 방법 clear() 을 입력하면 지워진다 2022. 9. 23.
[Firebase] React에 파이어베이스 데이터베이스 사용하기 https://firebase.google.com/docs/firestore/quickstart#web-version-9 Cloud Firestore 시작하기 | Firebase 2022년 10월 18일에 오프라인과 온라인으로 진행될 Firebase Summit에 참여하세요. Firebase로 앱을 빠르게 개발하고 안심하고 앱을 출시하며 손쉽게 확장하는 방법을 알아보세요. 지금 등록하기 의견 보 firebase.google.com 0. 사용하기 앞서 파이어베이스는 두가지 서비스가 있다. Firestore realtime database 이게 한글로 설명된건 참으로 애매하게 설명해 놨는데 간단히 정리하자면 둘다 똑같이 데이터베이스인데 Firestore가 더 최신버전이고 성능도 좋다 라고 영어문서에 적혀있음.. 2022. 9. 22.
Cannot find file does not match the corresponding name on disk 리액트를 하다가 파일 임포트를 할 때 absolute path 설정을 해주면 가끔 저런 에러가 뜬다. 분명 파일 위치를 제대로 정해줬는데 왜 못찾는다고 난리일 까... 원인을 알아보니 망할 vscode의 자동완성 때문이였다. 나는 위에처럼 Root라는 컴포넌트를 임포트하고 싶었는데 vscode가 자동으로 위와같이 경로를 만들어 주었다. 허나 확인해보니 실제 경로는 아래처럼 되어있다. 무엇이 문제인지 진짜 한참 고민하다가 겨우 알았다... 실제 경로는 'routes/root' 가 아니라 'routes/Root' 라는 것을... vscode는 소문자로 찾아서 임포트 해주었지만 실제로는 대문자를 적어줘야 했던 거다 맨날 android studio같은 갓IDE만 쓰다가 vscode 쓰니깐 화병나 미춰버리긋네.... 2022. 9. 21.
반응형

티스토리툴바