분류 전체보기

    [NestJs] 01 - NestJS 설치

    본 게시물 시리즈는 https://wikidocs.net/147787 1.1 NestJS 소개 NestJS는 Node.js에 기반을 둔 웹 API 프레임워크로써 Express 또는 Fastify 프레임워크를 래핑하여 동작합니다. 기본으로 설치하면 Express를 사용합니다… wikidocs.net 위키독스 (NestJS로 배우는 백엔드 프로그래밍) 책을 학습하며 정리한 글입니다! NestJs는 Express와 같은 자바스크립트를 기반으로 백엔드를 작업할 수 있는 웹 개발 프레임워크이다. NodeJs는 손쉽고 뛰어난 확장성이 있다는 장점이 있지만 이로인해 어떠한 기능을 사용할때마다 알맞는 라이브러리를 찾는데 시간을 할애해야 하는 단점이 있다. NestJS는 ORM,설정 등등 많은 기능을 기본으로 탑재하고 ..

    [Node.js] 서버에서 클라이언트로 파일 전송하기

    저번 글에서 클라이언트에서 formData를 통해 서버로 파일을 보내고 저장하는 법을 알아보았다 이번에는 서버에서 클라이언트로 파일을 보내고 읽는방법에 대해 알아보겠다. 우선 express로 구성된 node.js에 이미지 파일들이 저장되어 있다고 생각해보자. 이때 res를 이용하면 파일을 보낼 수 있다. //파일 이미지 받아오기 app.post("/getImage", async (req, res) => { const file = fs.readFileSync(`uploads/${req.body.filename}`); res.writeHead(200, { "Context-Type": "image/jpg" }); res.write(file); res.end(); }); 헤더를 이미지타입으로 정의하고, 파일을 ..

    [TypeScript] File 타입과 FileList 타입

    타입스크립트엔 File이란 타입이 있다. 예를들어 위처럼 이미지들을 업로드 할수있는 컴포넌트를 하나 만들었다고 생각해보자. const handleFile = (e: React.ChangeEvent) => { const files = e.target.files; }; 해당 input태그에 onChange이벤트를 건 후에, files를 찍어볼 수 있다. 그렇다면 이 files의 타입은 무엇일까?? 이미지 개개인별로의 타입은 File이며, 위처럼 여러개를 묶어진 경우에 FileList란 타입으로 지정되게 된다. https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_..

    [node.js] multer,fetch를 활용한 파일 업로드

    multer,fetch를 활용한 파일 업로드를 구현해 보겠다. https://maximorlov.com/fix-unexpected-field-error-multer/ Fix "Unexpected field" Error From Multer Learn how to decypher & fix this cryptic error message from multer, and finally implement working file uploads in Node.js. maximorlov.com http://daplus.net/javascript-js-fetch-api%EB%A1%9C-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%97%85%EB%A1%9C%..

    [프리즈마] prisma 사용

    Prisma란 Node.js와 TypeScript를 위한 오픈소스 차세대 ORM이다. ORM??? ORM은 우리의 소스코드와 DB사이의 다리역할을 해주는 역할이다. SQL문법을 공부하지 않아도 손쉽게 데이터베이스에 접근할 수 있게 해주는 도구라 생각하면 된다. 프리즈마를 사용하기위해서 우선 VSCODE 에 확장프로그램을 설치해 주자. npm i prisma -D 그 후에 npm을 사용해서 설치해준다. 설치를 한 후에 npx prisma 를 입력하면 프리즈마에 대한 설명들이 나온다. 그럼이제 본격적으로 사용을 한번 해보자. prisma init 위 명령어를 사용하면 prisma 폴더와 .env파일이 생성된다. 다음과 같이 provider를 mysql로 설정한 후에, .env파일로 가서 DATABASE_UR..

    [React] .env 사용하기

    웹 개발을 하다보면 .env파일을 활용하여 환경변수 설정을 해주어야 할 경우가 있다. .env 파일을 정의하면 하드코딩을 피할 수 있고, 보안,유지보수적으로도 도움이 많이 된다. .env파일은 프로젝트 최상위 루트에 파일을 만들어 둬야한다. 리액트에서 .env를 사용하기 위해서는 변수명이 REACT_APP_ 으로 시작해야한다. create-react-app에서 환경변수 유출을 막기위해 위와같이 시작하지 않는 변수는 무시하기 때문이다. REACT_APP_변수이름 = 값 와같은 형태로 .env파일에 저장하고 사용하면 된다. 사용하는 경우에는, const value = process.env.REACT_APP_변수이름 으로 사용하면 된다.