[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%..

→2022.10.06

BackEnd/DB

[프리즈마] 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..

→2022.10.02

FrontEnd/React

[React] .env 사용하기

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

→2022.09.30

FrontEnd/웹 지식

gitHub OAuth 로그인 구현

gitHub OAuth 로그인 구현하는법을 정리해 보겠다! https://www.oauth.com/oauth2-servers/accessing-data/create-an-application/ Create an Application - OAuth 2.0 Simplified Before we can begin, we'll need to create an application on GitHub in order to get a client ID and client secret. On GitHub.com, from the "Settings" page, www.oauth.com gitHub의 공식 문서를 참조해서 만들어보았다. https://github.com/settings/applications/new Git..

→2022.09.30

FrontEnd/웹 지식

리액트 build파일 경로 설정

리액트 프로그래밍을 하다보면 build파일이 생성되는 위치를 바꾸고 싶은 경우가 있다 "build": "BUILD_PATH='./dist' react-scripts build", package.json 에서 위와같이 바꾸면 경로를 바꿀 수 있는 기능이 추가되었다고 하는데 적용이 되지 않아서 계속 찾아보니, window 환경에서는 동작하지 않았다... "build": "react-scripts build && ROBOCOPY build ../be/build", window 환경에서 작업하는 분들은 위처럼 설정하면 된다!! ../be/build 부분에 원하는 경로를 두고 생성하면 build파일이 저절로 생성되게 된다. 참고로 ROBOCOPY는 파일 백업,일치화를 도와주는 명령어이다. 만약 위처럼 했는데 안되..

→2022.09.26

프로젝트/알바일기(알바스케쥴러)

03_Index 첫페이지

http://54.180.70.202/ 먼저, 글을 작성하기 전에 아마존 서버를 이용해서 직접 올리는 과정까지 진행해봤다! 링크는 위에 올려두었으니 한번 둘러봐도 좋을 것 같다. Index 페이지의 컨테이너는 아래와 같다. import React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { getUserinfoApi } from "../api/UserApi"; import Header from "../components/Header"; import Introduce from "../components/Introduce"; import MkProject from "../componen..

→2022.03.22