포시코딩

https://4sii.tistory.com/691 { queryStream.on('data', (chunk) => { // stream을 통해 받는 데이터 data array에 밀어넣기 data.push(chunk); }); queryStream.on('end', () => { // stream 종료 시 resolve() resolve(); }); queryStream.on('error', (err) => { reject(err); }); }); return this.excelService.createExcelFile('target', data); } 위 코드에선 stream으로 받는 데이터가 모두 받아진 후 엑셀로 만들기 때문에 굳이 stream을 쓸 필요가 없다고 생각한다. target.contro..

https://nangman14.tistory.com/27 Onclick vs AddEventListener 어떤 것을 사용해야 할까? Onclick과 AddEventListener 라는 비슷한 메소드 중 어떤 것을 사용해야 할까? 우선 Onclick() 메소드는 다음과 같이 사용할 수 있다. 1 element.attachEvent('onclick', function() { /* do stuff here*/ }); attachEvent() 메소드 nangman14.tistory.com https://ko.javascript.info/bubbling-and-capturing 버블링과 캡처링 ko.javascript.info

개요 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..

개요 오랜만에 Vue를 통해 프론트엔드를 구현하게 되었는데 Vue 2.0때와 사용 방법이 크게 달라지는 부분이 있어 포스팅하게 되었다. Before export default { data() { return { inputRef: null, uploadedImage: '', }; }, methods: { handleChange(e) { // change 이벤트 함수 showImage(); }; handleDrop(e) { // drop 이벤트 함수 showImage(); }; showImage() { } }, }; 기존이 위처럼 data에서 변수명을 선언하고 methods에서 함수를 선언해 사용했다면 After import { ref } from 'vue'; export default { setup() ..

https://4sii.tistory.com/601 [OCR] Tesseract 사용방법 (mac) 설치 homebrew install tesseract pip install pytesseract pip install pillow # 이미지 분석, 처리 라이브러리 테스트 코드 test.py 파일과 테스트할 이미지를 같은 위치에 둔 상태로 아래 코드로 테스트 진행 from PIL i 4sii.tistory.com 어제 Tesseract에 대해 처음 알게되어 파이썬으로 테스트를 해봤고 생각보다 괜찮은 결과물을 얻을 수 있었다. 만약 내가 사이트를 구현하게 된다면 react에서 이미지 업로드 -> tesseract로 이미지에서 텍스트 추출 -> 추출된 결과물 및 이미지 서버로 전송 의 플로우를 거치게 될텐데 ..

문제 발견 상품 등록 사진 속 빨간 네모 쳐진 버튼에 대해 위의 코드로 구성되어 있는데 눌러도 location.href로 설정되어 있는 주소로 이동하지 않고 뒤에 ?만 붙는 현상이 발견 관리자 모드로 버튼을 찍어보아도 잘 설정되어 있는데 왜 이러는지 모르겠음 주소창에서 직접 입력하면 잘 이동된다. 해결 방법 계속 새로고침 되는거에서 포인트를 잡아 생각하다 뭐가 문제인지 발견했다. form 태그 안에 button이 위치해 발생한 문제였음.. 아오 HTML 상품 등록 JavaScript // const createProducts = () => { // location.href = '/admins/products/create'; // return false; // }; document.querySelector..

https://github.com/10-10-gaza/wonbin GitHub - 10-10-gaza/wonbin Contribute to 10-10-gaza/wonbin development by creating an account on GitHub. github.com https://eunoia07.tistory.com/entry/%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4Infinite-scroll-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0?category=900349 [JS] vanilla js로 무한 스크롤(Infinite scroll) 구현하기 🤔무한 스크롤(Infinite scroll)이란? 무한 스크롤은 사용자가 페이지 하단에 ..

다형성 (Polymorphism) 다른 모양의 코드를 가질 수 있게 해준다. 다형성을 이룰 수 있는 방법은 제네릭을 사용하는 것이다. 제네릭 (Generic) 제네릭은 placeholder 타입을 쓸 수 있도록 해준다. (concrete 타입 x) 때가 되면 TypeScript가 알아서 placeholder 타입을 concrete 타입으로 바꿔준다. 예시 polymorphism, generic, class, interface를 다 합쳐서 작업해보자 localStorage와 비슷한 기능을 만들어볼거임 우선 interface Storage { } 이렇게 작성하면 잘 알고 있는 JavaScript의 web storage API를 위한 인터페이스가 이미 있다는 것을 알 수 있다. 이 상태에서 property를 ..