포시코딩

https://cchoseonghun.github.io/OCR_Helper OCR Helper Camera Upload Reset Preview Default Grayscale OTSU Change Excel Download cchoseonghun.github.io https://github.com/cchoseonghun/OCR_Helper GitHub - cchoseonghun/OCR_Helper: Free Online OCR Free Online OCR. Contribute to cchoseonghun/OCR_Helper development by creating an account on GitHub. github.com 진행기간 2023년 6월 21일 ~ 7월 27일(약 한달) 기능 인식을 위한 이..

개요 자료구조를 공부할 때 파이썬이 다루기 쉽다해서 자료구조, 알고리즘은 파이썬으로만 해왔는데 얼마전, 토스 코딩테스트에서 node.js 부문에 대해 문제를 봤을 때 오로지 JavaScript로만 풀 수 있게 되있는걸 볼 수 있었다. 문제를 풀 수 있고 없고를 떠나, 앞으로 node.js 관련 개발을 베이스로 깔고 갈텐데 자료구조나 알고리즘을 JavaScript로 다루지 않는다는게 좀 웃긴거 같아서 당분간은 죽이되든 JavaScript로 연습해볼 생각이다. Queue class Node { constructor(data) { this.data = data; this.next = null; } } class Queue { constructor() { this.head = null; this.tail = n..

개요 Computer Vision 오픈 소스 라이브러리인 OpenCV.js를 통해 이미지 흑백처리, 이진화 등의 전처리 작업을 진행할 수 있다. https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html OpenCV: OpenCV.js Tutorials Core Operations In this section you will learn some basic operations on image, some mathematical tools and some data structures etc. docs.opencv.org 세팅 https://docs.opencv.org/3.4/d0/d84/tutorial_js_usage.html 위 링크에 들어가면 opencv.js 파..

개요 이미지상의 텍스트 인식을 도와주는 라이브러리 C++로 만들어진 Tesseract OCR engine의 JavaScript 포팅 버전이다. https://github.com/naptha/tesseract.js GitHub - naptha/tesseract.js: Pure Javascript OCR for more than 100 Languages 📖🎉🖥 Pure Javascript OCR for more than 100 Languages 📖🎉🖥 - GitHub - naptha/tesseract.js: Pure Javascript OCR for more than 100 Languages 📖🎉🖥 github.com 세팅 문서상의 Installation 항목을 따라하면 된다. 나는 CDN 링크를 사용할 거..

개요 canvas를 활용한 이미지 자르기 기능을 도와주는 라이브러리 저장된 이미지 또는 업로드한 이미지를 원하는 크기만큼 잘라 활용할 수 있다. https://fengyuanchen.github.io/cropperjs/ Cropper.js fengyuanchen.github.io https://github.com/fengyuanchen/cropperjs/tree/main GitHub - fengyuanchen/cropperjs: JavaScript image cropper. JavaScript image cropper. Contribute to fengyuanchen/cropperjs development by creating an account on GitHub. github.com 세팅 Croppe..

개요 이전 포스팅에 이어 업로드한 이미지에 대해 원하는 부위를 자르는 방법에 대해 알아보자 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..

개요 {selectRoom()}}> {exitChat(meetup.id)}}>나가기 많이 코드가 생략 됐지만 대충 이런 엘리먼트가 존재할 때 나가기 버튼을 눌렀는데 selectRoom() 함수가 실행되는 문제를 발견했다. 백엔드쪽에선 별로 고려하지 않아도 되는 부분이라 예전에 배웠다가 완전 까먹고 있었는데 이번 상황에 생각이 나서 다시 해결 방법을 기억할 겸 정리해보았다. 해결 방법 이런 현상은 '이벤트 버블링' 이라고 한다. div 안에 button이 있는 형태라 button을 누르면 div도 눌렸다는 상황이 발생하는건데 나가기 버튼에 있는 함수에 아래의 코드 한줄을 추가하여 간단하게 해결할 수 있다. function exitChat() { e.preventDefault(); // .. 그 후 코드 작..

개요 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에서 input 태그에 작업을 하다가 onKeyPress 를 쓰려고 하니 @deprecated 이 뜨면서 빗금이 쳐지는걸 보았다. 이런 경우 더 이상 사용되지 않으니 다른걸 쓰라고 추천하는건데 검색해보니 정말 keyPress는 더 이상 지원되지 않으니 다른걸 쓰라고 나왔다. 이유가 궁금해 찾아보았지만 따로 찾아볼 수는 없었다. :( 대신 keyDown, keyUp을 쓰라고 추천하는데 개인적으로 keyDown 같은 경우 한글에서는 글자를 다 완성하지 않았는데도 실행할 경우가 있으니 keyUp을 쓰는걸 추천한다.