# MERN
MERN #4
Mac으로 npm start 할 때 5000번 포트 사용 에러(Link)https://velog.io/@jsy7517/Error-listen-EADDRINUSE-address-already-in-use-5000
MERN #3
| Method | 설명 | |:------:|:------------------------------------------------:| | GET | 서버에서 리소스 받음 | | POST | 서버에
MERN #1
M : mongoDB (Back-End)E : Express (Back-End)Node.js 프레임 워크, R : React.js (Front-End)사용자 인터페이스 구축에 도움이 되는 브라우저 사이드 자바스크립트 라이브러리Angular라는 라이브러리도 있음N : N
docker + ec2 로 react 프로젝트 배포하기
🚀 배포할 프로젝트의 기술스택🏁 react + node.js (express) + mongoDB 풀스택 프로젝트 🤔 EC2 + docker 로 배포 선정이유 ⇒ ec2 터미널에서 프로젝트 환경을 설치-세팅해서 배포하기보단 docker
express서버에 mongodb(mongoose) 연결하기
클라우스 서비스 Atlasfm를 사용한다.이에 대한 과정은 mongdb 생성 참고 사이트 를 참고했다.아래 과정을 차근차근 따라갔다.관련 모듈 설치npm i bcryptjs body-parser concurrently express is-empty jsonwebtoke
Node-Express + React 연결하기
.com에 접속하면 그에 해당하는 html을 보여주는 장치일 뿐.여기서 html은 React가 손쉽게 만들어준다. React는 그런걸 해주는 편한 장치.nodejs 설치작업 폴더 만들고 server.js 만들기서버 관련 코드 작성npm init -ynpm install
How to deploy full stack App with MERN Stack
하나의 heroku 인스턴스를 사용해서 frontend와 backend를 동시에 호스팅하기 위해셋업 가이드set up folder structurenode_modules, package.json are for the backendfrontend folder has se
TIL 221010 이 아닌 각오!
10/21 => 요기요 코테10/23 => 우코테10/24 => 카카오인턴10/31 => TOSS 지원 마감D-11 !! 하루에 20문제씩 LV0,LV1,LV2 풀기!!MERN STACK YOUTUBE 보기REACT FRONT-END 디자인 강의 보기Oauth , SN
(MERN 스택) 회원가입, 로그인, 로그아웃 기능 구현하기 - passport / 쿠키, 세션
db에 저장 시 비밀번호를 암호화해 보안해야 한다.이 때, bcrypt 라이브러리를 사용해 간단하게 암호화 할 수 있다.npm i bcrypt숫자가 높을 수록 보안성이 좋아진다. 하지만 너무 높으면 성능이 낮아지므로 10~12를 사용한다.passport를 사용하기 위해
MERN - logout 라우터 추가
로그아웃은 간단하다. User에 저장된 token을 지워주기만 하면된다! (cookie에 저장된 것을 지우는 것이 아니다.)유저를 찾아서 token을 지운다.
MERN - 로그인 라우터 추가, JWT
로그인은 크게 3단계로 나눠서 생각할 수 있다.요청된 이메일을 db에서 찾는다.요청된 이메일을 찾으면 비밀번호가 맞는지 비교한다.비밀번호가 갖다면 토큰을 생성한다.클라이언트가 서버에 접속을 하여 로그인하면 서버에서 해당 클라이언트에게 인증되었다는 의미로 토큰을 부여한다
MERN - 회원가입 라우터 추가, body-parser, bcrypt
클라이언트/서버 클라이언트/서버는 두 개의 컴퓨터 프로그램 사이에 이루어지는 역할 관계를 나타내는 것이다. 클라이언트는 다른 프로그램에게 서비스를 요청하는 프로그램이고, 서버는 그 요청에 대한 응답을 해주는 프로그램이다. 클라이언트/서버 개념은 단일 컴퓨터 내에서도 적
MERN - MongoDB 연결
관계형 데이터베이스와 대비되는 NoSQL 데이터베이스로 json 형태로 db에 데이터를 저장한다. 데이터베이스에 관한 개념을 설명하는 글이 아니기에 관계형이니 비관계형이니 하는 자세한 설명은 생략한다.몽구스는 몽고디비를 더 쉽게 사용할 수 있는 도구이다. 몽구스를 설치
MERN - 간단한 서버 만들기
MongoDB : NoSQL(Not Only SQL) DB SolutionExpress.js : Node.js FrameworkReact.js : JavaScript Library (Browser-side/Frontend JavaScript)Node.js : JavaS
[ReactJS] Express + CKeditor5 이미지 업로드 구현해보기 (3) (AWS S3 - Severless 구성)
이번 시간에는 이미지 파일 업로드 기능을 AWS S3 Serverless 구조에서 동작하는 과정에 대해 알아보는 시간을 가져보겠습니다.들어가기 앞서, S3를 사용했을 때의 이점에 대해 간략히 알아보겠습니다.저희가 서버에 이미지를 저장한다고 가정해보겠습니다.서버는 결국엔
[ReactJS] Express + CKeditor5 이미지 업로드 구현해보기 (2) (문제점 해결)
이번에는 저번 글에 이어 이미지 업로드에서 발생했던 문제점에 대한 해결 방안에 대해 한 번 알아보겠습니다! 먼저 저번 문제점에 대해 다시 한번 살펴보자면,사용자가 글 작성 도중 페이지를 나가거나 사진을 삭제해도 여전히 서버에 사진이 남는다는 문제점이 있었습니다.이 문제
[ReactJS] Express + CKeditor5 이미지 업로드 구현해보기 (1)
이번에는 React 환경의 CK에디터에서 업로드된 이미지를 로컬 서버로 저장하는 과정에 대해 알아보겠습니다. Express 서버 (1) 파일 업로드를 위해 multer 모듈을 사용했습니다. multer는 multipart/form-data인코딩 타입의 form 데이
MERN stack 프로젝트 배포하기
MERN stack 배포를 위해 client인 Reactjs는 Netlify, server인 Nodejs는 Heroku를 이용하였다.
Heroku Redis 사용하기 (feat. Nodejs)
MERN 스택을 사용하는 프로젝트를 조금 더 최적화하기 위해 redis를 사용하기로 하였다. 다행히 Heroku에서 redis 기능도 지원해서 쉽게 추가할 수 있었다. 총 3가지 레퍼런스를 참고하여 Heroku에 redis를 추가하고 Nodejs와 연결하였다.
`useFindAndModify` is an invalid option. 오류 해결하기
풀스택 MERN Project의 server/index.js 코드를 작성하다, nodemon에서 useFindAndModify is an invalid option.라는오류를 발견했다. ✅ 기존 코드는 아래와 같다.stackoverflow의 해결방법은, useNewUr