패스트캠퍼스 챌린지 8일차 - 리팩토링 및 Express / 사진 업로드까지

0. 공부 인증

공부 시작 20: 08

공부 종료 21 :55

패캠 강의를 한 챕터단위로 공부하고 있는데,

항상 2시간 정도가 걸리는 것 같다.

전에는 그냥 사용하니깐 사용해야지 였는데,

이제는 어떤 원리로 작동하는지 알아가는 과정이 너무 좋다.

 

여튼 금일 정리한 노트는 아래 있다.

 

1. Pug 사용하기

설치하기 :: npm i pug

app.set('view engine', 'pug')

app.use('/', (req, res) => {
	res.render('index')
})

src/views/index.pug  --> 해당 경로가 기본 views PATH

// 변수사용하기
res.render('index', {
	messgae : "hello"
})

html 
	head
    body
    	div hello, pug!
        div= message

 

2. 스태틱 파일 서빙

스태틱 파일조차 미들웨어로 처리가능.

url 프리픽스 상 라우팅이랑 겹칠 가능성이 있음.

그래서 app.use 를 할때 라우팅 프리픽스를 작성해주면 좋음

// 정적파일 공급하기 -> 미들웨어 추가하면 쌉가능

// app.use(프리픽스, express.static(폴더 주소))
app.use('/public', express.static('src/pubilic'))


// 이후 정적 파일인 css 파일을 서빙하기
html
	head
    	link(rel="stylesheet" href="/index.css")
	body
    	h1 User
        h2.gold gold Class
        div.green green Class

 

3. Express에서 에러 핸들링하기

없는 것좀 요청하지마!!

router.get('/:id' (req, res) => {
	~~
	if(!user){
    	const err = new Error("User not Found")
        err.status = 404
        thorw err
   	}
})


// express use 메소드에서 몇개의 인자를 받는지 알고 있음.
// 그래서 4개의 인자를 받는경우에는 에러 관련 라우팅임을 알고 있음.

app.use((err, req, res, next) => {
	res.status
	res.send(err.message)
})

async await 함수에서는 무조건 try catch(err) 형태를 사용하자.

 

4. jest 를 활용한 API 테스팅 - 사람이 하나하나 할 수 없어!

테스트를 자동화를 도와주는 툴임 for UnitTest

 

우선 테스팅하는 npm을 설치하자

npm i --save-dev jest supertest

 

테스트용 파일을 만들어 줘야함.

src/app.spec.js --> spec 은 앱이 어떤 식으로 작동하는지에 대한 규격 

[jest 만 사용시]

// src/app.spec.js

test('our first test', (req, res) => {
	expect(1 + 2)
    .tobe(3)
})



// 실행하기 위해서는
//package.json 에
"scripts" : {
	"test" : "jest"
}

라고 입력하고 콘솔 창에서 npm run scripts 입력

 

[jest + supertest 사용]

// src/app.spec.js

const supertest = require('supertest')
const app = require('./app')

const request = supertest(app)

test('our first test', (req, res) => {
	request.get(/user/15)
    .accept('application/json )
})

 

테스트 시에 listen을 하고 있으면 불가능함.

그래서 그냥  app.listen은 제외하고 프로그램을 출력하고 

그것을 supertest에서 받아와야함.

 

 

5. 이미지 업로드 핸들링하기

폼에서 포스트 방법으로 enctype = "multipart/form-data" 로 전송을 해주어야 함.

 

프론트엔드 페이지

form(action="~", method = "post", enctype = "multipart/form-data")
	input(type="file" name ="profile")
    button Upload BTN

 

백엔드 페이지

구현 1.  multer 를 설치하기

const multer = require('multer')

구현 2. 멀터 설정 및 미들웨어로 등록하기

~

const multer = require("multer")

const upload = multer({ dest: "uploads/" })

~~

// upload가 가지고 있는 객체 중에서 single 이라고 하는 메소드 호출.
// 그리고 그 인자로 프론트엔드에서 input 에 달아둔 id 값 입력
router.post('/:id/profile', upload.single("profile")), (req, res, next) => {
	// multer 미들웨어를 통하게 되면 
    // req에 뮤테이션으로 files 가 생김
    consol.log(req.files)

	const { user } = req
    const { filename } = req.file
    
    user.profileImage = filename 
    
    res.send("user image changed")
})

 

 

 

 

 

 

환급 챌린지 (8/30)

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지