포시코딩

개요 이전 포스팅에 이어 업로드한 이미지에 대해 원하는 부위를 자르는 방법에 대해 알아보자 crop 기능이라고 하는데 이것도 마찬가지로 라이브러리를 통해 간단히 구현할 수 있다. https://github.com/react-cropper/react-cropper GitHub - react-cropper/react-cropper: Cropperjs as React component Cropperjs as React component. Contribute to react-cropper/react-cropper development by creating an account on GitHub. github.com react-cropper 라이브러리를 사용할 것이다. 설치 npm install react-crop..

개요 이미지를 input 태그로 폴더에서 찾아 넣는 방법은 너무 간단하니 드래그 앤 드랍으로 추가하는 방법을 공부해보았다. 만들기 어려울줄 알았는데 onDrop 이벤트 덕분에 매우 쉽게 구현할 수 있었다. 코드 App.js import './App.css' import { useState } from "react"; function App() { const [imagePath, setImagePath] = useState(""); const handleChange = (e) => { const tempImagePath = URL.createObjectURL(e.target.files[0]); setImagePath(tempImagePath); } const handleDrop = (e) => { e.pr..

개요 https://4sii.tistory.com/602 [OCR] Tesseract.js https://4sii.tistory.com/601 [OCR] Tesseract 사용방법 (mac) 설치 homebrew install tesseract pip install pytesseract pip install pillow # 이미지 분석, 처리 라이브러리 테스트 코드 test.py 파일과 테스트할 이미지를 같은 위 4sii.tistory.com Tesseract를 통해 이미지의 텍스트 인식 기능까지 확인을 마쳤고 실제로 사용하게될 리액트 상에서의 기능 구현을 진행해보았다. 코드 import Tesseract from 'tesseract.js'; import { useState } from "react"; ..

개요 useState, useRef, redux의 state에 대해 정리해보자 비교 useState useRef redux의 state 사용 방법 컴포넌트 내부에서 사용 컴포넌트 내부에서 사용 전역적으로 사용 값을 업데이트 할 때 리렌더링 발생 리렌더링 발생하지 않음 상태를 업데이트하면 즉시 반영 영향 범위 해당 컴포넌트와 자식 컴포넌트 해당 컴포넌트 내부 여러 컴포넌트 간 공유 주로 사용되는 경우 컴포넌트 내부의 로컬 상태 관리 DOM 요소에 대한 접근 및 값 보관 전역 상태 관리 및 상태 업데이트 프로젝트에서 각각 어떻게 사용되었나도 알아보자 useState input value 값 모임 목록 useRef page 검색 키워드 데이터들의 필터 값 (모임 목록에 대해 '내가 참여한 모임', '내가 만..

개요 pressEnterHandler(e)}/> function pressEnterHandler(e) { if (e.key === "Enter") { console.log('pressEnterHandler 실행'); test(); } } function test() { console.log('test'); } 위와 같은 코드를 사용할 때 input에서 엔터를 누르면 이렇게 두 번씩 실행되는 에러를 경험했다. 이리저리 다양한 방법으로 시도해보았는데 해결할 수 없었고 검색을 하다보니 한글 입력 시 이런 현상이 있다는 사실을 알게 되었다. 확인해보니 숫자나 영어 입력 시에는 정상 작동을 하는 것을 확인할 수 있었다. 해결 방법 https://github.com/vuejs/vue/issues/10277#issu..

개요 React에서 무한스크롤 구현할 일이 있어 여기저기 검색해봤는데 나오는 블로그마다 죄다 어렵게만 설명하고 있어서 답답해가지고 내가 직접 간단하게 구현해본 방법을 공유해본다. fetcher, React query, Throttle 이딴거 죄다 필요없다. JavaScript에서 기본 제공하는 Intersection Observer API를 통해 구현하는 법을 알아보자 React가 아닌 일반 JS에서 구현하는 방법을 아래 참고 https://4sii.tistory.com/377 [IntersectionObserver] 무한 스크롤 (Infinite scroll) https://github.com/10-10-gaza/wonbin GitHub - 10-10-gaza/wonbin Contribute to 10..

이전 포스팅(Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - React(1))에서 결과물로 얻은 값은 jwt라고 하는데 jwt는 (Json Web Token)의 약자로, Json 포맷을 이용해 인증에 필요한 정보를 암호화 한 웹 토큰이라고 한다. 자세한건 아래 블로그 참고 https://velog.io/@khy226/jwt로-로그인-기능-만들기-React-Rails jwt로 로그인 기능 만들기 (React + Rails ) jwt란? JWT(Json Web Token)의 약자로, Json 포맷을 이용해 인증에 필요한 정보를 암호화 한 웹 토큰이다. velog.io 먼저 이전 포스팅에서 획득한 jwt의 해석을 위해 jwt-decode 설치 npm install ..

Google OAuth2 - React 연동 프로젝트로 사용할 폴더를 생성한 후 해당 폴더로 VSCODE 켜서 리액트 프로젝트화 시켜준다. npx create-react-app . 리액트 프로젝트가 만들어졌고 우리는 여기서 public/index.html src/App.js 이 두 파일만 사용할거임. index.html 파일에서 태그 안 태그 밑에 해당 코드를 작성해준다. 중간에 gsi 키워드가 들어가는게 포인트임. 다른 블로그들처럼 태그 쓰는건 옛날 방식이니 거르면 된다. index.html파일은 이게 끝 App.js 파일을 위와같이 정리해준 뒤 아래 코드를 따라 쓰자 import { useEffect } from 'react' import './App.css'; function App() { func..

프로젝트를 위해 google oauth2 로그인을 구현하던중 수많은 역겨운 수준의 블로그 포스팅들과 그마저 그대로 따라해도 안되는 샘플들 사이에서 위 안내처럼 거의 대부분의 구현 방법을 다룬 글들은 추후 쓰지 않는 방법이 될거란걸 알았다. google 공식 문서에서도 뒤죽박죽인 상황을 보고선 결국 요즘 구글링보다 더 결과에 만족을 느끼는 유튜브에서 원하는 내용을 찾을 수 있었다. 해당 포스팅에선 GCP (Google Cloud Platform) 에서 공통적으로 설정해야하는 부분을 짚고 React와 Vue 각각의 진행 방법에 대해 따로 포스팅할 예정이다. 정리 겸 올리는 글이기 때문에 내가 참고한 영상 그대로 해보고 싶으면 아래 링크를 통해 따라만 하면 React에서 구글 로그인을 구현할 수 있다. htt..

적용이유 더보기 리액트를 쓰는 프론트에서 node인 백으로 요청을 보낼 때, 개발환경이다보니 똑같은 /list GET 요청임에도 구동하는 컴퓨터일 경우엔 localhost:8080/list 개발 및 구동은 노트북으로 하면서 데스크탑으로 페이지 확인만 하는경우 노트북ip:8080/list build 해서 볼 경우엔 그냥 /list 이런식으로 다 달라지는데 /list 만 아니라 /login 등등 아직 페이지가 몇개 없어서 그렇지 그때그때 수정해줘야하는 곳이 있어서 워낙 귀찮다는 느낌을 받았다. 여러방법을 찾아봤는데 concurrently 를 쓰는 방법은 아닌거같고 예전 회사에서 했었듯이 env 파일에 개발환경, 테스트환경, 배포환경마다의 서버주소를 다르게 세팅할까 했는데 찾아보니 훨씬 사용하기 쉽게 되어있..