mingg IT

interface Author { first : string; last : string; } function getAuthors(database : PostgresDB) : Author[] { const authorRows = database.runQuery('SELECT FIRST, LAST FROM AUTHORS'); return authorRows.map(row=> ({first : row[0], last : row[1]})) } interface DB{ renQuery : (sql:string) => any[]; } function getAuthors(database : DB) : Author[] { const authorRows = database.renQuery('Select FIRST, LA..

협업을 하다보면 자연스레 내가 만든 함수를 다른사람이 봐야할 수도 있고 설명이 필요할 수가 있다. 이때 유용한 주석표기법에 대해 공유하려고 한다. /** 인사말을 생성합니다. 결과는 보기 좋게 꾸며집니다. * @param name 인사할 사람의 이름 * @param title 그 사람의 칭호 * @returns 사람이 보기 좋은 형태의 인사말 */ function greetJSdoc(name: string, title : string){ return 'Hello'; } greetJSdoc('John Doe', 'Sir'); 이런식으로 사용하면 함수이름에 마우스를 올려놓거나, 매개변수에 마우스를 올려놓았을 때 관련 설명을 볼 수 있다. 마크다운 형식으로 꾸며지기 때문에 굵은 글씨로도 표현할 수 있다.

any 타입은 타입스크립트 사용시 컴파일러가 에러를 체크하지 못하기 때문에 지양해야한다. 그렇다면 내가 프로젝트에서 any를 몇개나 쓰는지 알 수 있을까 ? $ npx type-coverage 143878 중 135763이 any가 아닌것을 알려준다. $ npx type-coverage --detail 을 입력하면 any가 있는 파일 위치를 모두 출력해준다.

Throttle vs Debounce Throttle 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 기법. Debounce 연달아 호출되는 함수들 중 마지막 함수만 호출하도록 하는 기법. 사용 예시를 보겠다. 사용하지 않았을 경우 onChange가 발생할 때 마다 axios가 호출된다. 사용했을 경우 한번만 axios가 날라가게 된다. const onDebounceApply = debounce((e: any) => { onClickApply(e); }, 1000); //각 단어는 한개 입력받은 이후 500ms 후에 입력 받음 // 입력 후 1000ms 후에 검색 api 날라감 const onDebounceChange = debounce((e) => { handleTextFi..

제너릭 타입 사용법에 익숙치 않아서 공부하는겸 정리를 해보려고 한다. 제너릭 타입 예시 → 어디다가 만들지 고민. 플로우에서 충분히 쓸 수 있을 텐데. T[keyof T] 는 객체 내의 가능한 모든 값을 나타냄. 허나 이렇게 사용하게 되면 releaseDate 의 타입이 (string | Date)[] 가 된다. 나는 Date[] 만 원함. 이런식으로 사용하면 releaseDates는 Date 타입이 되고, nameInfo는 string 타입이 된다.

NextJs GatsBy는 웹 사이트를 게시하기전에 페이지를 미리생성하고 Remix는 사용자가 요청할 때 서버 측에서 모든 코드를 실행함. NextJs는 모두할 수 있음. Gatsby pages폴더에 index.js, about.js 가 있고 폴더안의 파일들은 URL에 직접 매핑함. localhost:8080/about하면 만든 페이지가 있을거임. gatsby build를 실행하면 public폴더가 생기고 index.html에 우리가 만든 리액트 구성요소를 가져다가 inex.html로 렌더링함. 유저가 웹사이트로 이동할 때 로딩을 기다릴 필요 없이, 앱의 UI를 바로 볼 수 있다. 유저가 HTML을 보고있는 동안 리액트를 다운로드하고 실행하고, HTML과 동기화 되어서 인터렉티브하게 작동함. UI구축을 ..

구글 GCP로 배포를 해보려고 했는데 오랜만에 들어간 프로젝트에서 Swagger 가 정상동작 하지 않았다. https://mingg123.tistory.com/80 [Spring] Swagger UI 사용법 1. maven repository에서 Springfox를 검색한다. 2. Gradle에 있는 내용을 복사하고, build.gradle 파일에서 dependencies에 붙여넣는다. 3. 새로고침 한번 해주고 Spring을 구동한다. 4. http://localhost:8083.. mingg123.tistory.com 해당 방법을 참고해서 해주었으며 build.gradle dependencies { implementation 'org.springframework.boot:spring-boot-star..

require('dotenv').config(); const Koa = require('koa'); const Router = require('koa-router'); const bodyParser = require('koa-bodyparser'); const mongoose = require('mongoose'); const { PORT, MONGO_URI } = process.env; mongoose .connect(MONGO_URI, { useNewUrlParser: true }) .then(() => { console.log('Connected to MongoDB'); }) .catch(e => { console.error(e); }); Node.js에서 mongoose를 이용하여 MongoDB에..