티스토리

포시코딩

검색하기

블로그 홈

포시코딩

4sii.tistory.com/m

https://github.com/cchoseonghun

구독자: 6

방명록 방문하기

주요 글 목록

[NestJS] How can I respond with a file and delete with interceptor 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.. 공감수 0 댓글수 1 2024. 2. 27.
Onclick vs. AddEventListener, 버블링, 캡쳐링 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 공감수 0 댓글수 0 2023. 7. 17.
OpenCV.js - CV(Computer Vision) 오픈 소스 라이브러리 개요 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 파.. 공감수 1 댓글수 0 2023. 7. 9.
Tesseract.js - (OCR) 이미지 텍스트 인식 라이브러리 개요 이미지상의 텍스트 인식을 도와주는 라이브러리 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 링크를 사용할 거.. 공감수 0 댓글수 0 2023. 7. 9.
Cropper.js - 이미지 자르기 라이브러리 개요 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.. 공감수 0 댓글수 0 2023. 7. 9.
[Vue 3.0] data()와 methods() 대신 setup() 사용하기 개요 오랜만에 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() .. 공감수 0 댓글수 0 2023. 6. 21.
[OCR] Tesseract.js 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로 이미지에서 텍스트 추출 -> 추출된 결과물 및 이미지 서버로 전송 의 플로우를 거치게 될텐데 .. 공감수 0 댓글수 0 2023. 6. 15.
location.href 안먹히는 현상 문제 발견 상품 등록 사진 속 빨간 네모 쳐진 버튼에 대해 위의 코드로 구성되어 있는데 눌러도 location.href로 설정되어 있는 주소로 이동하지 않고 뒤에 ?만 붙는 현상이 발견 관리자 모드로 버튼을 찍어보아도 잘 설정되어 있는데 왜 이러는지 모르겠음 주소창에서 직접 입력하면 잘 이동된다. 해결 방법 계속 새로고침 되는거에서 포인트를 잡아 생각하다 뭐가 문제인지 발견했다. form 태그 안에 button이 위치해 발생한 문제였음.. 아오 HTML 상품 등록 JavaScript // const createProducts = () => { // location.href = '/admins/products/create'; // return false; // }; document.querySelector.. 공감수 0 댓글수 0 2023. 2. 5.
[IntersectionObserver] 무한 스크롤 (Infinite scroll) 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)이란? 무한 스크롤은 사용자가 페이지 하단에 .. 공감수 1 댓글수 0 2023. 1. 24.
[TypeScript][노마드코더] #4 CLASSES AND INTERFACES(5) - Polymorphism, Generic 다형성 (Polymorphism) 다른 모양의 코드를 가질 수 있게 해준다. 다형성을 이룰 수 있는 방법은 제네릭을 사용하는 것이다. 제네릭 (Generic) 제네릭은 placeholder 타입을 쓸 수 있도록 해준다. (concrete 타입 x) 때가 되면 TypeScript가 알아서 placeholder 타입을 concrete 타입으로 바꿔준다. 예시 polymorphism, generic, class, interface를 다 합쳐서 작업해보자 localStorage와 비슷한 기능을 만들어볼거임 우선 interface Storage { } 이렇게 작성하면 잘 알고 있는 JavaScript의 web storage API를 위한 인터페이스가 이미 있다는 것을 알 수 있다. 이 상태에서 property를 .. 공감수 0 댓글수 0 2023. 1. 22.
[TypeScript][노마드코더] #4 CLASSES AND INTERFACES(4) 추상 클래스 (Abstract class) 추상 클래스 사용 예시 abstract class User { constructor ( protected firstName: string, protected lastName: string ) {} abstract sayHi(name: string): string abstract fullName(): string } class Player extends User { fullName(): string { return `${this.firstName} ${this.lastName}` } sayHi(name: string): string { return `Hello ${name}. My name is ${this.fullName()}` } } 추상 클래스인 User 클.. 공감수 0 댓글수 0 2023. 1. 22.
[TypeScript][노마드코더] #4 CLASSES AND INTERFACES(3) readonly TypeScript type Words = { [key: string]: string } class Dict { private words: Words constructor() { this.words = {} } add(word: Word) { if (this.words[word.term] === undefined) { this.words[word.term] = word.def; } } def(term: string) { return this.words[term]; } } class Word { constructor ( public term: string, public def: string ) {} } const kimchi = new Word('kimchi', '한국의 음식'); cons.. 공감수 0 댓글수 0 2023. 1. 22.
[TypeScript][노마드코더] #4 CLASSES AND INTERFACES(2) Class 심화 Constructor에서 직접 초기화 되지 않는 property 만들기 type Words = { [key: string]: string } class Dict { private words: Words // Error! } 위 코드는 에러가 발생한다. words는 initializer가 없고 Constructor에서 정의된 sign이 아니라는 에러인데 Constuctor에 포함시켜주지 않다보니 발생하는걸 볼 수 있다. type Words = { [key: string]: string } class Dict { private words: Words constructor() { this.words = {} } } 하지만 이렇게 작성할 경우 에러가 사라지는걸 볼 수 있다. 예제 type Wor.. 공감수 0 댓글수 0 2023. 1. 22.
TypeScript를 공부하면서 드는 의문점 정리 - 계속 작성중 @types/~~의 한계? TypeScript를 쓰다보면 추가로 사용할 라이브러리에 대해 @types/라이브러리 와 같이 설치해줘야 해당 라이브러리 타입을 사용 가능한데, 만약 @types/~~ 를 했는데 없다면 어떻게 될까? 컴파일? 트랜스파일? 컴파일은 코드를 기계가 읽기 쉽게 변환해주는거고 TypeScript에서 JavaScript로의 변환은 트랜스파일이라고 배웠는데 왜 자꾸 가르치는 영상들에서 (내배캠 튜터뿐만 아니라 노마드코더의 니꼬쌤마저!) '컴파일'이라고 말하는걸까 -> 그냥 대충 퉁치는건가? 기존 JavaScript 파일 -> TypeScript 적용하기 tsconfig.json "strictNullChecks": true, "noImplicitAny": true 두 설정이 적용될 시 an.. 공감수 0 댓글수 0 2023. 1. 22.
[TypeScript][노마드코더] #4 CLASSES AND INTERFACES(1) Class 클래스 TypeScript에서 Class를 만들 때 기존 JavaScript에서 하던 행동들을 줄일 수 있다. 예시 TypeScript Class Player { constructor ( private firstName: string, private lastName: string ) } 변환된 JavaScript class Player { constructor (firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } } 하지만 private 선언을 한게 사라졌는데 위에서 private 키워드는 오로지 TypeScript가 보호해주기 위해서만 사용하는 것이고 JavaScript에서는 사용되지 않는다. TypeS.. 공감수 0 댓글수 0 2023. 1. 20.
[TypeScript][노마드코더] #3 FUNCTIONS(2) 다형성(Polymorphism) poly: 많은, 다수의 morphos or morphic: form(형태), structure(구조) 즉, 형태나 구조, 모양 polymorphous: 여러가지 다른 형태, 구조, 모양들 Generic type type SuperPrint = { (arr: number[]): void (arr: booleanp[): void } const suerPrint: SuperPrint = (arr) => { arr.forEach(i => console.log(i)) } superPrint([1, 2, 3, 4]) superPrint(true, false, true) superPrint(["a", "b", "c"] 위의 코드에서 superPrint로 오게될 파라미터들에 대해 계속.. 공감수 0 댓글수 0 2023. 1. 17.
[TypeScript][노마드코더] #3 FUNCTIONS(1) Call Signature type Add = (a: number, b: number) => number; const add:Add = (a, b) => a + b; 먼저 함수의 타입을 설명하고 나서 코드를 구현하는 방법 Overloading(오버로딩) 오버로딩은 함수가 여러 개의 call signature를 가지고 있을 때 발생시킨다. 그냥 여러 개가 아닌 서로 다른 여러 개의 call signature을 가졌을 때! type Add = { (a: number, b: number) => number (a: number, b: string) => number } const add:Add = (a, b) => a + b; // Error! b가 number or string이라 string과 number를.. 공감수 0 댓글수 0 2023. 1. 17.
[TypeScript] cannot find name 'console' error 해결방법 개요 TypeScript 처음 사용 시 tsc --init 했음에도 console에 대해 빨간 밑줄이 쳐지면서 에러가 생기는 분들이 있을 것이다. 이대로 tsc하여 트랜스파일을 시도하면 lib에 dom을 포함시켜야 한다고 나온다. tsconfig.json { "compilerOptions": { "lib": ["ES2021", "dom"], // dom 추가 "esModuleInterop": true, "target": "ES2021" } } 이렇게 해결하는 방법도 있지만 다른 방법이 있다. 해결 방법 npm init -y npm i @types/node 원인은 기존 JavaScript에서 쓰는 console에 대해 타입을 알지 못해 에러가 나는 거였는데 @types/node를 설치하여 node 전용 T.. 공감수 0 댓글수 0 2023. 1. 17.
[TypeScript][노마드코더] #2 OVERVIEW OF TYPESCRIPT 정리(2) TypeScript에만 존재하는 타입 unknown let a: unknown; let b = a + 1; // Error! if (typeof a === 'number') { let b = a + 1 } let b = a.toUpperCase(); // Error! if (typeof a === 'string') { let b = a.toUpperCase(); } void 아무것도 return하지 않는 함수 타입 // function hello(): void { // 이렇게 써도 되지만 생략 가능 function hello() { console.log(); // return 하지 않는다. } never nerver는 함수가 절대 return하지 않을 때 발생 function hello(): never .. 공감수 0 댓글수 0 2023. 1. 17.
[TypeScript][노마드코더] #2 OVERVIEW OF TYPESCRIPT 정리(1) 참고로 티스토리에서도 TypeScript 코드블럭을 지원한다. 변수의 타입 basic let a = 1; let b = "123"; let c = true; let a: number = 1; let b: string = "123"; let c: boolean = true; 타입을 명시해줘도 되지만 TS에서 알아서 추론하여 지정해주기 때문에 웬만하면 직접 명시해주지 않는걸 추천한다. let a = [1, 2]; let b: string[] = ["123", "abc"]; // let b = ["123", "abc"] let c: boolean[] = [true]; // let c = [true] let d: number[] = []; 배열도 마찬가지. 다만 d처럼 명확히 알 수 없을 경우에는 명시해주는 것.. 공감수 0 댓글수 0 2023. 1. 17.
WebSocket(웹 소켓) - 작성중 JavaScript에 넣을까 Node.js에 넣을까 noServer 옵션 const wss = new ws.Server({ noServer: true }); 참고 https://www.reddit.com/r/node/comments/sfgmum/can_someone_kindly_explain_what_noserver_mode/ Can someone kindly explain what noServer mode actually means in this websocket constructor? * I am trying to setup websocket with ws library * In the documentation here, [it talks about noServer... www.reddit.com 공감수 0 댓글수 0 2023. 1. 9.
String.padEnd(), padStart() str.padEnd(targetLength: number [, padString: string]) targetLength: 목표 문자열 길이. 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환. padString: 현재 문자열에 채워넣을 다른 문자열. default는 '' 좌측부터 채우려면 str.padStart(targetLength: number [, padString: string]) str이 목표 길이보다 길면 그대로 반환하고 채워넣을 padString이 길면 좌측부터 들어갈 공간에만 일부를 잘라 넣어 반환한다. ex) '99'.padStart(5, '12345678'); // '12399' 공감수 0 댓글수 0 2022. 12. 20.
모듈(Module) 모듈(Module)이란? Javascript 파일 단위로 분리된 코드를 일컫는다. 여기서 Javascript 파일은 특정한 기능을 가진 여러 개의 함수와 변수들의 집합이다. 모듈(Module)은 하나의 모듈에서 다른 모듈을 호출하여 사용할 수 있다. 모듈(Module)은 그 자체로도 하나의 프로그램이면서 다른 프로그램의 부품으로도 사용할 수 있다. 보통 1개의 파일이 1개의 모듈이 된다. 모듈의 필요성 코드 베이스를 분리할 수 있으며, 이를 통해 코드를 구조적으로 관리할 수 있다. 코드를 재사용 가능하게 만들어준다. 즉, 모듈화(modularize)된다. 모듈의 인터페이스(Interface)만 노출 시킬 수 있다. 즉, 인터페이스 이외에는 모든 정보를 은닉하는 정보은닉(information hiding).. 공감수 0 댓글수 0 2022. 12. 13.
자바스크립트 동기/비동기, 블로킹/논블로킹, async/await 관련 https://joshua1988.github.io/web-development/javascript/js-async-await/ 자바스크립트 async와 await (중급) 자바스크립트 개발자를 위한 async, await 사용법 설명. 쉽게 알아보는 자바스크립트 async await 개념, 사용법, 예제 코드, 예외 처리 방법 joshua1988.github.io https://inpa.tistory.com/entry/%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB-%EB%8F%99%EA%B8%B0%EB%B9%84%EB%8F%99%EA%B8%B0-%EB%B8%94%EB%A1%9C%ED%82%B9%EB%85%BC%EB%B8%94%EB%A1%9C%ED%82%B9-%EA%B0%9C%EB%85%9.. 공감수 0 댓글수 0 2022. 12. 12.
Javascript에서 유용할 수도 있는 연산자 모음 https://medium.com/오늘의-프로그래밍/자바스크립트에서-유용할-수도-있는-연산자들-모음-3450083838fb 자바스크립트에서 유용할 수도 있는 연산자들 모음 신박해보일 수 있는 연산자 몇 개를 추려보았다. medium.com 공감수 0 댓글수 0 2022. 12. 12.
자식 Class 생성자에서의 super() 사용예제 class User { // User 부모 클래스 constructor(name, age, tech) { // 부모 클래스 생성자 this.name = name; this.age = age; this.tech = tech; } getTech(){ return this.tech; } // 부모 클래스 getTech 메서드 } class Employee extends User{ // Employee 자식 클래스 constructor(name, age, tech) { // 자식 클래스 생성자 super(name, age, tech); } } const employee = new Employee("조성훈", "29", "Node.js"); console.log(employee.name); // 조성훈 .. 공감수 0 댓글수 0 2022. 12. 12.
객체 리터럴 객체(Object)란? Javascript의 데이터 타입은 크게 원시 타입과 객체 타입으로 분류된다. 원시 타입은 단 하나의 값만을 나타내고, 원시 타입의 값은 변경이 불가능 한 값 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료 구조이고, 객체 타입의 값을 변경 가능한 값 Javascript는 객체(Object) 기반의 프로그래밍 언어이고, Javascript를 구성하는 거의 모든 것은 객체로 구성되어 있다. 객체(Object)는 0개 이상의 프로퍼티로 구성된 집합이며, 하나의 프로퍼티는 Key와 Value로 구성되어 있다. 객체 리터럴 이란? 리터럴(literal)은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법이다. 여기서 객체 리터럴은 객체를 생성.. 공감수 0 댓글수 0 2022. 12. 12.
Promise, async/await을 통한 순차실행 (2) function setTimeoutFunc(time) { return new Promise((resolve, reject) => { setTimeout(() => { console.log(time, '에 해당하는 시간이 지났습니다.'); resolve(); }, time); }) } async function main() { // console.log('시작 되었습니다.'); // setTimeoutFunc(1000); // console.log('종료 되었습니다.'); console.log('시작 되었습니다.'); await setTimeoutFunc(1000); console.log('종료 되었습니다.'); } main(); 시작 되었습니다. 1000 에 해당하는 시간이 지났습니다. 종료 되었습니다. 공감수 0 댓글수 0 2022. 12. 12.
JavaScript 학습목표 공감수 0 댓글수 0 2022. 12. 12.
for of 문, for in 문 (Array, Object) Array와 함께 쓰는 for of 문 let arr = ['aaa', 'bbb', 'ccc']; for (e of arr) { console.log(e); } // 'aaa' // 'bbb' // 'ccc' Object와 함께 쓰는 for in 문 let obj = {'qqq': 111, 'www': 222, 'eee': 333}; for (key in obj) { console.log(key); } // 'qqq' // 'www' // 'eee' 공감수 1 댓글수 1 2022. 12. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.