You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[EXPRESS] 📚 미들웨어 확장법 사용 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyKnhz%2FbtrqMvBygi6%2F9XKk3KeYv6ui5Pb0kT9nT1%2Fimg.png)
[EXPRESS] 📚 미들웨어 확장법 사용 정리
미들웨어 확장법 미들웨어 안에 미들웨어를 넣는 방법으로 조건에 따라 다른 미들웨어를 적용하는 패턴이다. app.use(morgan('dev')); // 보통 이렇게 바로 app.use()에 미들웨어를 넣어서 사용하지만 // app.use()의 콜백 함수 내에 미들웨어를 넣는 방법을 일컫는다. app.use((req, res, next) => { morgan('dev')(req, res, next); }) 이때, 미들웨어에 함수호출 인자를 명시해주는데, 원리는 간단하다. 예를들어, app.use(morgan('dev'))의 인자 함수 부분 morgan('dev')도 사실 메소드 내부 내에서 위 사진 처럼 함수 인자를 전달받아 콜백 함수 호출이 이루어 진다. 이 원리를 이용해서 (req, res, next)..
![[EXPRESS] 📚 req.params / req.query / req.body 🤔 차이 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcBjdwM%2FbtrkyO7mGoc%2FYQsM2aG1xClKWVzp8mCKr1%2Fimg.png)
[EXPRESS] 📚 req.params / req.query / req.body 🤔 차이 정리
req.params 라우터의 매개변수 예를 들어 /:id/:name 경로가 있으면 ":id"속성과 ":name"속성을 req.params.id, req.params.name으로 사용할 수 있다. www.example.com/post/1/jun 일 경우 1과 jun을 받는다. // 요청온 url : www.example.com/public/100/jun router.get('/:id/:name', (req, res, next) => { //../100/jun 부분이 담기게 된다. console.log(req.params) // { id: '100', name: 'jun' } }); req.query 경로의 각 쿼리 문자열 매개 변수에 대한 속성이 포함 된 개체다. (주로 GET 요청에 대한 처리) 예를 들..
![[EXPRESS] 📚 에러처리 미들웨어 렌더링 문법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbMjE4h%2FbtrjNcuLY2l%2F6ZGjXF9caBLTGKJHIB8HXK%2Fimg.png)
[EXPRESS] 📚 에러처리 미들웨어 렌더링 문법
에러 처리 미들웨어 에러 발생 시 템플릿 엔진과 상관없이 템플릿 엔진 변수를 설정하고 error 템플릿 문서를 렌더링. Node // ... // 404 에러 내용부분만 만들어서 최종 처리를 에러 미들웨에 보낸다. app.use((req, res, next) => { const error = new Error(`${req.method} ${req.url} 라우터가 없습니다.`); error.status = 404; next(error); // 에러미들웨어로 점프 }); // ... app.use((err, req, ers, next) => { res.locals.message = err.message; // 템플릿 엔진 변수 설정 res.locals.rror = process.env.NODE_ENV !=..
![[EXPRESS] 📚 요청 객체와 응답 객체 (req, res) 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbcDPoz%2FbtrjBw794q7%2FaZITWC00ISkuCVc9tWkI3k%2Fimg.png)
[EXPRESS] 📚 요청 객체와 응답 객체 (req, res) 정리
응답 객체 - response res.app: 똑같이 res 객체를 통해 app 객체에 접근한다. res.app.get('')같이 사용 가능. res.set(헤더, 값) / res.setHeader(헤더, 값): 응답의 헤더를 설정한다. req.get()이 헤더값을 가져오는거라면 이건 헤더 설정 res.status(코드) / res.sendStatus(코드): 응답 시의 HTTP 상태 코드를 지정한다. res.type(type) : Contents-Type 헤더를 설정할 수 있는 간단한 메서드. res.cookie(키, 값, 옵션): 쿠키를 응답에 설정하는 메서드이다. (cookie-parser 패키지가 필요) res.clearCookie(키, 값, 옵션): 쿠키를 응답에서 제거하는 메서드이다. res...
![[EXPRESS] 📚 라우터 (Router) 개념 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbrs5Kq%2FbtrjLw6TkF6%2FRqAXJkuS3Wtdwhrq5kEUXK%2Fimg.png)
[EXPRESS] 📚 라우터 (Router) 개념 정리
라우터 (Router) 익스프레스를 사용하는 이유 중 하나가 라우팅을 깔끔하게 관리할 수 있다는 점이다. 예를 들어, app.js에서 app.get 같은 메서드가 라우터 부분이다. 그러나 라우터를 많이 연결하면 app.get() 도배가 되어버려서, 코드가 매우 길어진다. 그래서 익스프레스에서는 라우터를 분리할 수 있는 방법을 제공한다. routes 폴더를 만들고 그 안에 index.js와 user.js를 다음과 같이 작성해주자. // routes/index.js const express = require('express'); const router = express.Router(); router.get('/in', (req, res) => { res.send('Hello, World !'); }); mo..
![[EXPRESS] 📚 dotenv 미들웨어 사용법 💯 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbYwOyi%2FbtrjGcvxFnS%2F6eSZi5cVBTFFBGXUrMKpqk%2Fimg.png)
[EXPRESS] 📚 dotenv 미들웨어 사용법 💯 정리
dotenv 모듈 dotenv는 환경변수를 .env파일에 저장하고 process.env로 로드하는 의존성 모듈이다. dotenv를 사용하는 이유는 우리가 개발을 하는 과정에서 서버주소, 고유 API KEY 값 등 필요한 정보들을 저장을 하게 된다. 그리고 이러한 정보들은 민감한 정보임과 동시에 보안이 이루어져야 하는 정보들이다. 만약 이러한 정보들이 오픈소스(깃허브)에 공개될 경우, 해킹을 당하거나 보안적인 면에서 위험할 수 있다. 이러한 문제로 dotenv 패키지를 이용하여 환경변수 파일(.env)을 따로 만들어 관리하고, 개발 초기 단계에서 세팅하기를 권고한다. 선행 학습 ✍️ dotenv은 환경변수를 다루는 모듈이다. 따라서 dotenv을 배우기 전에 노드에서 환경변수를 어떻게 다루는지에 대한 학습..
![[EXPRESS] 📚 multer 미들웨어 사용법 💯 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcfOzlj%2FbtrjIzQW5cJ%2FgxEJ5RDHaKmAuEtl3xZ70k%2Fimg.png)
[EXPRESS] 📚 multer 미들웨어 사용법 💯 정리
multer 모듈 멀터는 사용 방법이 다소 어려운 미들웨어다. 이미지, 동영상 등을 비롯한 여러 가지 파일들을 멀티파트 형식으로 업로드할 때 사용하는 미들웨어이다. 멀티파트 형식이란 enctype이 multipart/form-data 인 폼을 통해 업로드하는 데이터의 형식을 의미한다. 먼저 multipart.html 파일을 다음과 같이 만들어 데이터를 업로드할 수 있도록 해보자. Submit multer 문법 이제 multer를 설치하고 사용해보자. multer 패키지 안에는 여러 종류의 미들웨어가 들어있다. storage는 저장할 공간에 대한 정보. 디스크나 메모리 저장 가능. diskStorage는 하드디스크에 업로드 파일을 저장한다는 것 destination은 저장할 경로 filename은 저장할 ..
![[EXPRESS] 📚 express-session 미들웨어 & Session Store 사용법 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmNbtw%2FbtrjJAarNye%2FBObJevhtHXKcnAnASfYEok%2Fimg.png)
[EXPRESS] 📚 express-session 미들웨어 & Session Store 사용법 정리
세션 동작순서 클라이언트 요청 (사용자가 웹사이트 접근) 서버는 접근클라이언트의 Request-Header필드인 cookie를 확인하여, 클라이언트가 해당 세션ID를 보냈는지 확인 세션ID가 존재하지 않는다면, 서버는 세션ID를 생성해 클라이언트에게 전송. 서버에서 클라이언트로 준 세션ID를 쿠키를 사용해 서버에 저장한다. 클라이언트는 재접속시, 이 쿠키를 이용하여 세션ID값을 서버에 전달한다. express-session 모듈 세션 관리용 미들웨어. 로그인 등의 이유로 세션을 구현하거나, 특정 사용자를 위한 데이터를 임시적으로 저장해둘 때 매우 유용하다. 세션은 사용자별로 req.session 객체 안에 유지된다. app.use(cookieParser(process.env.COOKIE_SECRET); ..
![[EXPRESS] 📚 static 미들웨어](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb03gq1%2FbtrjD10EhzD%2FpvoMo4wBtf4s0hyRPUdHf0%2Fimg.png)
[EXPRESS] 📚 static 미들웨어
static static 미들웨어는 express에서 제공하는 기본 미들웨어이며 express 객체 안에서 꺼내 바로 사용할 수 있다. app.use('요청 경로', express.static('실제 경로')); app.use('/', express.static(path.join(__dirname, 'public'))); 기본 경로인 / 로 왔을 때, express는 public 폴더 안에 있는 해당 경로의 파일을 찾는다. 즉 https://localhost:3000/css/style.css 와 같은 요청을 하게 되면, 실제 static에서 반환하는 파일은 ./public/css/style.css가 된다. public 디렉토리 아래에 있는 다음과 같은 폴더와 파일들을 Express/public/index..
![[EXPRESS] 📚 bodyParser / cookieParser 미들웨어 💯 사용법 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPgUYY%2FbtrjvsMaOAc%2FkQPi8AKwivsJajXVxnL58K%2Fimg.png)
[EXPRESS] 📚 bodyParser / cookieParser 미들웨어 💯 사용법 정리
노드 - cookie 다루기 생 노드에서 http 모듈을 쓸때는, 이렇게 일일히 쿠키 설정을 코딩해 줘야 했었다. // 쿠키 문자열을 자바스크립트 객체로 변환하는 함수 const parseCookies = (cookie = '') => cookie .split(';') .map(v => v.split('=')) .reduce((acc, [k, v]) => { acc[k.trim()] = decodeURIComponent(v); return acc; }, {}); http .createServer(async (req, res) => { // 먼저 저장되어있는 쿠키가 있는지 없는지 검사 const cookies = parseCookies(req.headers.cookie); // 변환 -> { mycooki..
![[EXPRESS] 📚 morgan 미들웨어 💯 사용법 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbr5gvj%2FbtrjFAuGVs2%2FNsHhA9TEmYcqZUoAF39VNK%2Fimg.png)
[EXPRESS] 📚 morgan 미들웨어 💯 사용법 정리
morgan 모듈 morgan에 연결 후 포트에 접속하면 기존 로그 외에 추가적인 로그를 볼 수 있다. 위 코드를 실행하여 3000번 포트에 들어간 후 콘솔을 보면 아래와 같은 로그가 찍혀있는 것을 볼 수 있다. 마지막 로그는 morgan 미들웨어에서 나오는 것이다. 이처럼 morgan은 요청과 응답에 대한 정보를 콘솔에 기록한다. const express = require('express'); const path = require('path'); const morgan = require('morgan'); // 미들웨어 연결 const app = express(); app.set('port', process.env.PORT || 3000); // 로그 기록 if (process.env.NODE_ENV ..
![[EXPRESS] 📚 미들웨어 이론 & 실용 💯 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbFHomW%2FbtrjyInqrTA%2FfdeFGxkvSMiCKIUGpUpzp0%2Fimg.png)
[EXPRESS] 📚 미들웨어 이론 & 실용 💯 정리
미들웨어 작성 미들웨어는 익스프레스의 핵심이다. 요청과 응답의 중간(middle, 미들)에 위치하여 미들웨어 라고 부른다. 미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고, 나쁜 요청을 걸러내기도 한다. 익스프레스 내에서 웹 요청과 응답에 대한 정보를 사용해서 필요한 처리를 진행할 수 있도록 분리된 독립적인 함수이다. 그리고 각각의 미들웨어는 next() 메소드를 호출해서 그 다음 미들웨어가 작업을 처리할 수 있도록 순서를 넘길 수 있다. 위 사진에서, function(req, res, next) {} 부분이 바로 미들웨어 인 것이다. ⚠️ 뇌정지 당하기전의 예방지식! 노드를 배우면서 우리는 함수 인자에 콜백함수가 들어가 있는 형태를 자주자주 봐왔다. 이 함수는 비동기 함수가 처리되고 그 결과를..
