Back Ground

morgan 현재 콘솔에 나오는 GET / 200 51.267 ms - 1539 같은 로그는 모두 morgan 미들웨어에서 나오는 것이다. 요청에 대한 정보를 콘솔에 기록해준다. app.js12345...var logger = require('morgan');...app.use(logger('dev'));...cs 함수의 인자로 - dev- short- common- combined 등을 줄 수 있다. 인자에 따라 콘솔에 나오는 로그가 다르다.dev인 경우 GET / 200 51.267 ms - 1539의 [의미] HTTP요청 주소 응답속도 응답바이트 GET / 200 51.267ms 1539 보통 개발 시에는 short나 dev를 많이 쓰고,배포 시에는 common이나 combined를 많이 사용한다...

먼저, 기본 setting을 해준다. https://backback.tistory.com/331 커스텀 미들웨어 만들기요청이 들어올때 콘솔에 메시지를 찍는 단순한 미들웨어를 만들어보자. logeer보다 위에 다음 코드를 적어준다. app.js1234567891011121314151617app.set('views', path.join(__dirname, 'views'));app.set('view engine', 'pug'); app.use(function(req,res,next){ console.log(req.url, '저도 미들웨어입니다'); next();}); app.use(logger('dev'));app.use(express.json());app.use(express.urlencoded({ exte..

Express 공식 사이트 : https://expressjs.com/ko/ 미들웨어는 익스프레스의 핵심이다.요청과 응답의 중간(middle, 미들)에 위치하여 미들웨어 라고 부른다. 라우터와 에러 핸들러 또한 미들웨어의 일종이므로 미들웨어가 익스프레스의 전부라고 해도 과언이 아니다 미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고, 나쁜 요청을 걸러내기도 한다. 미들웨어는 주로 app.use와 함께 사용한다.먼저 app.use의 역할에 대해 알아보자. app.js1234567891011121314151617181920212223242526app.use(logger('dev'));app.use(express.json());app.use(express.urlencoded({ extended: fal..

템플릿 템플릿은 서식이나 틀을 말한다. 익스프레스의 템플릿은 html 템플릿이다. [템플릿과 프레임워크의 차이점]- 템플릿은 CI프레임워크의 MVC 중 V 즉 view에 해당합니다.- 프레임워크는 URL라우팅과 데이터베이스, 기타 유용한 라이브러리(템플릿도 포함 가능)의 모음이라 할 수 있습니다. 출처 : https://cikorea.net/bbs/view/free?idx=5932 html 의 header 와 footer 중에 하나라도 수정해야 한다면 모든 파일을 바꾸지 않는다.프로그래밍의 핵심은 반복의 최소화하는 건다. DRY(Don't Repeat Yourself)라고 하는 원칙이다. 이를 해결하기 위해서 템플릿이 있다. Pug(구 Jade) 가장 유명한 템플릿 중 하나로 Pug가 있다. Jade로 ..

백앤드 개발을 하든 프런트앤드 개발을 하든 자바스크립트 프로젝트에서 NPM(Node Package Manager)을 사용하는 것은 거의 필수가 되었습니다. 이번 포스트에서는 실무에서 자주 사용되는 NPM 커맨드들에 대해서 살펴보겠습니다. 프로젝트 생성npm init 커맨드를 사용하면 현재 디렉토리에 NPM 기반으로 프로젝트를 생성할 수 있습니다. 커맨드를 실행하면 패키지 이름, 버전, 설명 등등을 입력하게 됩니다. 1234567891011121314$ npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defau..

익스프레스 프레임워크는 익스프레스 외에도 많은 패키지를 사용하므로입문자 입장에서는 필요한 패키지를 찾아서 설치하기가 어렵기때문에 프레임워크에 필요한 package.json을 만들어주고 기본 폴더 구조까지 잡아주는 패키지가 있다.바로 Express-generator이다. [콘솔]npm i -g express-generator( npm i == npm install) 설치가 완려되었다면 새 익스프레스 프로젝트를 생성해본다.새로 프로젝트를 만들고자 하는 폴더로 이동해서 express 을 입력한다. [콘솔]express learn-express --view=pug ( ... ) create : learn-express\views\layout.pug create : learn-express\app.js creat..

create-react-app으로 만들때 버전에 따라 가능한지는 모르겠지만최신버전으로서는 쉽게 css Module을 설정 할 수 있다. CSS ModuleCSS Module 은 CSS 클래스를 불러와서 사용 할 때 [파일이름]_[클래스이름]__[해쉬값] 형태로 클래스네임을 자동으로 고유한 값으로 만들어주어서 컴포넌트 스타일 중첩현상을 방지해주는 기술입니다. 이를 사용하기 위해선, [파일이름].module.css 이런식으로 파일을 저장하셔야 합니다.한번, CSSModule.module.css 라는 스타일을 먼저 작성해봅시다.src/CSSModule.module.css/* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마음대로 사용가능*/ .wrapper { background: black..

Rest Api와 라우팅 REST API는 REpresentational State Transfer의 약어이다.네트워크 구조의 한 형식이다.서버의 자원을 정의하고, 자원에 대한 주소를 지정하는 방법을 가르킨다. 주소는 의미를 명확히 전달하기 위해 명사로 구성된다./user이면 사용자 정보에 관련된 자원을 요청하는 것이고, /post라면 게시글에 관련된 자원을 요청하는 것이라고 추측할 수 있다. REST API는 주소 외에도 HTTP요청 메서드라는 것을 사용한다.폼 데이터를 전송할 때 GET 또는 POST 메서드를 지정해보았나?여기서 GET과 POST가 바로 요청 메서드이다. 거기에 PUT,PATCH, DELETE까지 총 다섯 개가 메서드로 많이 사용된다 . GET : 서버 자원을 가져오고자 할 때 사용한..