[cloudType] Boiler - 클라우드 타입에서 React 프런트와 Express 백엔드 배포하고, 연결하기

EB_썼으면_압축만_450번함 aws는 안정성이 뛰어나고 효율적인 관리가 가능한데다 유명하지만, 나같은 프리티어 개발자에게는 언제 과금의 위험이 생길지 모른다는 크나큰 두려움이 있다. 배포 자동화를 해도 되는데 그럼 과금당할 여지가 너무 커짐.. 그렇다고 백엔드를 수정할 때마다 압축파일을 업로드하자니 너무 번거롭다. 예전에는 이런 과정을 해결해주는 헤로쿠를 통해 배포가 가능했지만, 프리티어 서비스를 종료한 헤로쿠로는 더이상 백엔드를 무료로 배포할 수 없다. 헤로쿠의 차세대로 요즘은 Fly.io 를 많이 선택하는 것 같았는데, 찾아보니 국내에! 일정 용량의 무료 배포를 지원하는 클라우드 서비스가 있다고 해서 한번 사용해 보기로 했다. 깃허브 연결도 되고, 깃허브 액션을 통해 배포 자동화도 할 수 있다고 한..

• format_list_bulleted 프로젝트/배포일기
• · 2023. 1. 21.
• textsms

배포 중 axios 의 CORS 오류

Axios와 Express의 cors에서 POST 요청이 충돌하고 있다. axios설정과 서버의 index.js에서 cors 설정을 모두 바꾸어 주어야 한다.. 리액트에서 AXIOS 요청을 보낼 때 크리덴셜을 true로 하고, 백엔드를 설정했는데 그때마다 다른 오류를 만났다 ㅠㅠ 구글링한 결과를 따라 아래 코드를 사용하였더니, 와일드카드 에러가 남았다. app.use( cors({ origin: "*", // 출처 허용 옵션 credential: "true", // 사용자 인증이 필요한 리소스(쿠키 ..등) 접근 }) ); true로 바꾸면 된다는 말이 있어서 해보았는데 해결이 되지 않음.. app.use( cors({ origin: true, credential: true, }) ); true를 문자열..

• format_list_bulleted 바보일기
• · 2023. 1. 21.
• textsms

5. [React + Express + MongoDB] Perfect Boiler - 이메일 인증을 하는 로컬(자체 로직) 회원가입 구현

이번에는 제대로된 ! 보일러 플레이트를 만들기 위해, 이메일 인증을 하는 자체 회원가입 로직을 작성하였다. 저번 코드를 요모조모 뜯어보니 엉망진창 . . 인 것 같아서, 해당 프로젝트를 보완할 겸 새 프로젝트를 만들어 시작했다. 이번 글에서 약간 수정하기는 했지만, 프런트엔드는 먼저 완성하였다 : https://make-somthing.tistory.com/84 이 과정을 진행하면 굳이 게시판을 만들지 않아도, 회원가입 하나만으로 CRUD를 한번에 경험할 수 있다. 임시 데이터를 생성했다가 수정했다가 지웠다가 읽었다가 해야하기 때문이다... * express와 mongodb를 사용하는 글이기 때문에, express와 몽고db 연결이 되어있다고 가정하고 진행합니다. 소요 기간 - 1일 Frontend - ..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2023. 1. 20.
• textsms

[Express] express-session

express-session 터미널에서 npm install express-session 을 이용해 설치한다. npm install express-session express-session은 세션 관리용 미들웨어이다. 세션은 사용자별로 req.session 객체 안에 저장된다. 이 라이브러리는 세션을 관리할 때 클라이언트에 세션 쿠키를 전송한다. 안전하게 쿠키를 전송하기 위해서는 쿠키에 서명을 추가하는 것이 좋은데, 이때 secret의 값이 필요하다. const session = require("express-session"); app.use( session({ resave: false, saveUninitialized: false, secret: process.env.COOKIE_SECRET, cook..

• format_list_bulleted NODE.JS(Express)
• · 2023. 1. 19.
• textsms

[Express] 미들웨어란?

미들 웨어 미들웨어 : 요청과 응답의 중간(middle) 에 위치하여, 미들웨어라고 부른다. 미들웨어를 사용해 요청과 응답을 조작하여 기능을 추가하거나, 올바르지 않은 요청을 걸러낸다. 미들웨어를 만들 때는 req, res, next라는 매개변수를 주어야 한다. req는 요청, res는 응답, next는 미들웨어의 작동을 마치고 다음으로 넘어가라는 뜻이다. 모든 미들웨어는 app.use를 통해 사용할 수 있으며, app.user(미들웨어) 로 사용한다. 이때 첫 번째 인수로 주소를 넣어줄 수도 있는데, 주소를 넣어주면 해당 요청에서만 미들웨어를 실행하게 된다. app.use(미들웨어) 모든 요청이 들어올 때 미들웨어를 실행함 app.use('/login',미들웨어) login로 시작하는 요청이 들어올 때..

• format_list_bulleted NODE.JS(Express)
• · 2023. 1. 19.
• textsms

[React] 리액트 실시간 개발 환경 모바일에서 확인하기

IPv4 주소와 현재 리액트 개발을 위해 사용하고 있는 포트 번호를 알면, 모바일 기기에서 웹주소를 통해 바로 화면을 실행해 볼 수 있다. ctrl + s 를 눌러 저장을 할 때마다 화면이 즉각 변동되므로, 웹앱을 개발할 때 편리하다. 1. cmd를 열고, ipconfig를 입력해 IPv4 주소를 알아낸다. 2. 내가 사용하고 있는 리액트 포트는 3000번이다. 만일 IPv4주소가 123.456.78.90 이라면, 휴대폰 주소창에 123.456.78.90:3000 을 입력한다. 내 포트는 리액트를 실행했을 때 나오는 콘솔로 알 수 있다.

• format_list_bulleted 카테고리 없음
• · 2023. 1. 19.
• textsms