본문 바로가기

react15

[react-native] expo Error: EMFILE: too many open files, watch 에러 해결 방법 expo를 React Native를 사용해서 react-native를 공부하고 있는데, expo start를 입력했을 때, 아래와 같은 오류가 발생했습니다. Error: EMFILE: too many open files, watch 위와 같은 에러가 발생 할 경우, 다음과 같은 방법으로 해결하면 됩니다. brew update brew install watchman 2021. 6. 14.
useEffect의 cleanup 함수 내에서 DOM Ref 사용하기 React를 이용해 어플리케이션을 개발할 때, useRef 로 DOM에 접근해 이벤트를 설정하거나, DOM을 함수 파라미터로 사용하는 경우가 있습니다. 간단한 예시를 통해 먼저 살펴보겠습니다. App 컴포넌트가 마운트되면, useEffect에서 태그에 이벤트를 할당하고, unmount될 때, 이벤트를 제거하도록 설정했습니다. import { useEffect, useRef } from "react"; export default function App() { const divRef = useRef(null); const handleEvent = () => { alert("click"); }; useEffect(() => { if (!divRef.current) { return; } divRef.curren.. 2021. 5. 28.
업로드한 이미지 압축하기(React/browser-image-compression) Javascript에서 이미지를 업로드 했을 때, 이미지 사이즈를 줄여주는 패키지입니다. 설치 yarn add browser-image-compression or npm install browser-image-compression --save 사용법 주요 사용법입니다. import imageCompression from 'browser-image-compression'; function BrowserImageCompression(){ const compressImage = async (image: File) => { try{ const options = { maxSizeMb: 1, maxWidthOrHeight: 300, } return await imageCompression(image, options.. 2021. 5. 27.
React 어플리케이션 Dockerfile 작성(개발용) React로 개발된 어플리케이션을 Docker화 하기 위해서 Dockerfile을 작성하고, Google Cloud Platform에 배포하는 방법을 설명한다. [Dockerfile 작성] # node 설치 FROM node:alpine # 작업 디렉토리 설정하고, package.json 복사 WORKDIR /app COPY package.json /app/package.json # npm 설치 RUN npm install # 앱 실행 COPY . /app CMD ["npm", "start"] [docker image 생성] docker build -t gcr.io/[PROJECT_ID]/[IMAGE_NAME]:[TAG] . [image 리스트 확인] gcloud container images list .. 2020. 3. 4.
[npm] 패키지 설치 시, ENOSELF 에러 react-redux를 공부하다가 npm으로 react-redux 패키지를 설치하는데 에러가 발생 해당 에러는 설치하려는 패키지의 이름과 프로젝트 이름이 같아서 발생한 에러 [해결방법] 프로젝트 디렉토리 명 변경 package.json의 name 변경 [결과] 2020. 3. 4.
[react-native] expo-cli를 이용하여 첫 RN 프로젝트 생성하기 expo expo는 빠르게 react-native 개발을 시작할 수 있도록 도와주는 도구이다. react의 create-react-app과 같은 존재이다. 웹에서 결과를 실시간으로 확인할 수 있고, expo app을 다운받는다면 iOS나 안드로이드에서도 결과를 확인할 수 있다. expo를 이용하여 react-native 프로젝트 생성 expo-cli 설치 npm install -g expo-cli 설치를 완료하였으면, 설치가 잘 되었는지 버전 확인 expo-cli --version expo 프로젝트 생성 expo init [프로젝트 명] 첫 선택화면으로 template을 선택한다. blank로 선택 생성된 프로젝트로 이동하여 프로젝트를 실행 cd [프로젝트 명] npm start 프로젝트가 실행되면서 자.. 2020. 3. 2.