boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS#10 SECURE PRIVATE INFO with ENV file 몽고DB에 연결할 때 사용하는 사용자 비밀번호 같은 보안 정보는 따로 분리해서 가지고 있는 것이 좋다. 이번 강의에서는 config 폴더에 상용(prod), 개발(dev) 파일을 따로 만들었다. dev 파일에는 secret 변수들이 직접 저장되고 prod에는 dev와 같은 변수들이 저장되지만 환경 변수로 불러온다. 마지막으로 key 파일을 만들어 환경변수인 NODE_ENV의 값이 production이면 prod에 담긴 내용을 가져오고 production이 아니면 dev에 담긴 내용을 가져온다. 이번 강의까지 진행된 프로젝트 구조이다. config파일을 정의하기에 ..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS#9 SET UP NODEMON 강의에서는 nodemon을 설치하지만 나는 typescript로 하고 있기 때문에 nodemon과 비슷한 tsc-watch를 설치하려고 한다. 이 모듈들은 파일의 변경사항을 감시한다. 코드를 수정하고 다시 저장 했을 때 서버를 자동으로 재시작해준다. 개발할 때 편리한 모듈이다. 1. tsc-watch 설치 npm i -D tsc-watch 2. package.json 스크립트 적용 "scripts": { "start": "tsc-watch --onSuccess \"node dist/src/server/index.js\"" }, 3. node 실행 npm start tsc-watch로 실행하면 파일의..

boilerplate 유튜브 강의 시리즈 Blog ReactJS NodeJS#8 Register Function using Postman 1. cookie-parser 모듈 및 type definition 패키지 설치 (나중에 사용!) npm i -S cookie-parser npm i -D @types/cookie-parser 2. json, URL-encoded, cookie 형식의 본문을 파싱하기 위해 아래와 같이 추가 ./src/server/index.ts import express from 'express'; const app = express(); const port = 3000; import mongoose from 'mongoose'; // 추가 import cookieParser from..

boilerplate 유튜브 강의 시리즈 세 번째 MERN STACK Bolier Plate #4 CREATE USER MODEL (ReactJS NodeJS) 1. 사용자 모델 생성을 위한 파일 생성 경로 : ./model/user.ts 2. user 스키마 작성 import { Document, Schema, Model, model } from 'mongoose'; const UserSchema: Schema = new Schema({ name: { type:String, maxlength:50 }, email: { type:String, trim:true, unique: 1 }, password: { type:String, minlength: 5 }, lastname: { type:String, m..

boilerplate 유튜브 강의 시리즈 두 번째 MERN STACK Boiler Plate #3 CONNECT TO MONGO DB(한글자막) (React JS, Node JS) 1. 몽고 DB 회원가입 몽고 DB 사이트에 접속하여 회원가입을 한다. 2. free tier로 클러스터 생성 아쉽게도 우리 나라는 Resion에 없기 때문에 가장 가까운 싱가포르를 선택한다. Free forever로 잘 선택하고 클러스터를 생성한다. (몇 분 소요됨) 3. 클러스터 connect 세팅 왼쪽 위에 보이는 CONNECT 버튼을 클릭한다. Add Your Current IP Address 버튼을 누르고 Add IP Adress를 눌러 클러스터에 IP를 연결한다. Create a Database User 항목에서 서..

유튜브 강의를 보고 node에서 react를 활용하여 보일러플레이트 코드를 작성하는 것을 따라하면서 전체적인 구조나 사용법 등을 공부하고 익힐 예정이다. 그리고 typescript에도 관심이 있어서 여기서 설명하는 js문법을 typescript로 바꿔서 해볼 예정이다 이후에 이 보일러플레이트를 기본 베이스로하여 유튜브를 클론하는 강의가 있는데 이것도 끝나고 할 예정이다. 벌써 완성된 유튜브 클론 사이트가 눈에 아른거린다.. 얼른 완성해서 보고싶다. 유튜브 강의 첫 번째 세팅 부분을 보고 typescript로 바꿔서 정리한 내용이다. MERN Stack Boiler Plate #2 DOWNLOAD NODE AND EXPRESS(한글 자막) (ReactJS NodeJS) 1. 작업 폴더 세팅 // 작업 폴더..