MY_STUDY

레이아웃 설치

애플리케이션에 가서 레이아웃을 사용하겠다고 선언하고, 템플릿 엔진을 ejs로, views 파일 경로를 사용할 것

main.ejs 가 레이아웃이다. 저기 <%- body %> 부분이 바뀌는 부분이다. 

라우트파일에서 다음과같이 코드를 작성하면, 서버를 돌린 결과 해당 주소를 달리하면 레이아웃은 똑같고 body 부분의 태그만 변경되는 것을 확인할 수 있다.

"/" 주소와 "/home" 주소 공동으로 body 내용을 받길 원하면 다음과 같이 설정해 줄 수 있다.

보낼 이름이랑 변수 이름이 같다면 생략도 가능...

타이틀 태그를 변경하고 싶으면 해당 타이틀 변수를 만들고 변수를 ejs 파일로 보내면 된다.

그럼 주소에 따라 타이틀도 변경되는 것을 확인할 수 있다.

cookie-parser와 jsonwebtoken 을 설치한다.

JWT_SECRET 비밀키 환경변수를 설정하고, 그것을 컨트롤러에 가져온다.

로그인하는 컨트롤러에 가서 로그인을 할 경우 일치하는 유저가 맞는지, 비밀번호도 맞는지 확인하는 코드를 작성하고 그 후 토큰을 만든다. 그리고 만든 토큰을 쿠키에 저장하도록 한다.

로그인을 하고 난 후, 개발자 도구에서 쿠키를 확인하면 토큰이 저장되어 있는 걸 확인할 수 있다. 마침표로 세 부분이 나뉘어져있는데, 앞에서부터 알고리즘 헤더, 페이로드, 비밀키 이다. 사용자를 인증한 다음에 서버에서 토큰을 만들어주고, 그 토큰을 클라이언트에 보내서 쿠키로 저장한다.

로그아웃 하는 법, 그냥 clearCookie()를 이용하여 해당 토큰을 지우면 된다.

로그인 여부 확인 함수를 다음과 같이 만들고, 적용하고 싶은 라우터 부분에 추가하면 적용된다. 해당 주소로 갔을 경우 로그인 되어 있지 않다면 로그인 주소로 리다이렉트 된다.

bcrypt 방식으로 비밀번호를 암호화 할 것이기 때문에 npm i bcrypt로 설치한다.

User 모델과 bcrypt를 사용을 선언한 후, POST 컨트롤러에 bcrypt로 패스워드를 암호화 한다. 그리고 create()로 user DB에 저장한다. 성공했으면 화면에 json 형식으로 나타나게 하였다.

아이디와 비밀번호를 'admin'으로 등록해봤다. 패스워드가 'admin'이 아닌 암호화 되어 있는 걸 확인할 수 있다.

출처 : https://www.youtube.com/playlist?list=PLG7te9eYUi7vxSvo6hvhOaht8oP0PoCwi

연락처 수정

우선 GET 방식으로 해당 ejs 템플릿(업데이트 페이지)를 서버에서 가져오도록 한다. 수정하길 원하는 contact 값과 함께

업데이트 페이지의 input 값에 수정을 원하는 값들을 집어넣는다.

홈페이지 ejs에서 수정 페이지로 넘어갈 수 있도록 수정 페이지를 보여주는 GET 주소를 넣어준다. (해당 contact의 id 값을 파라미터로 전달)

그럼 수정 버튼을 눌렀을 때, 수정페이지로 넘어감과 동시에 수정하기 원하는 값들 역시 불러와진다.

form 태그는 method 요소에 GET과 POST 밖에 설정할 수 없다. 해당 form을 PUT과 DELETE로 보내고 싶다면 method-override를 이용한다. 서버를 끄고 터미널에 npm i method-override를 쳐서 설치한다.

그럼 애플리케이션에서 method-override를 사용하겠다는 것을 선언해야 한다.

저번에 만들어 놓은 업데이트 컨트롤러, PUT 방식이다. 마지막에 화면 페이지에 json을 보여줄 것이라고 설정했었는데, 이를 지우고 /contacts 경로(홈페이지 경로) 로 리다이렉트 하게끔 했다.

업데이트 ejs 파일에 가서 form에서 action에 수정 컨트롤러 에 대한 주소를 적은 뒤, ?_method=PUT 을 추가하여 이 form이 PUT 방식으로 전달하겠다는 것을 설정한다.

이름이 hong 인 것을 다음과 같이 수정하였다. 제대로 수정된 걸 확인할 수 있다.

연락처 삭제

간단하다 우선 이미 만들어 놓은 delete 컨트롤러에 홈페이지로 리다이렉트 하겠다는 코드를 추가하고, 홈페이지 ejs의 삭제 버튼을 input으로 만든 뒤 다음과 같이 form으로 감싼 후 action 요소의 주소 안에 method로 DELETE임을 설정하였다.

kim 을 삭제하자 리다이렉트 되어 kim이 없어진 걸 확인할 수 있었다.

몽고 DB에서도 확인해본 결과 kim에 대한 데이터가 사라졌다.

출처 : https://www.youtube.com/playlist?list=PLG7te9eYUi7vxSvo6hvhOaht8oP0PoCwi

add.ejs는 연락처 추가 화면, index.ejs는 홈 화면(전체 연락처 보여줌), update.ejs는 연락처 수정 화면

연락처 표시

표시한 곳에 불러온 값들을 보여주려고 한다.

간단하게 값들을 불러왔다.

연락처 추가

우선 연락처 추가 화면을 해당 주소로 보여지게 GET 라우터 추가, Routes.js 에도 추가한다.

form에 post 방식으로 해당 주소로 매핑하면 해당 컨트롤러가 동작하여 값이 추가된다.

정상적으로 추가되었다.

먼저 애플리케이션 파일에서 사용할 템플릿 엔진을 설정하고 템플릿 파일을 저장할 곳을 지정한다.

화면에 띄우고 싶은 ejs 파일

컨트롤러에 가서 get 함수 안에 화면에 보여주고 싶은 ejs 파일을 res.render() 함수를 이용하여 설정한다.

그 결과 해당 get 주소로 가서 보면 해당 ejs 템플릿을 화면에 보여준다.

이제는 원하는 값을 템플릿에 전달하여 화면에서 볼 수 있게 하려고 한다.

다시 해당 컨트롤러로 가서 임의로 변수를 만든 후에 res.render() 함수 뒤에 원하는 값을 중괄호 안에 추가하여 넣는다.

동적인 콘텐츠 처리를 위해  <% : 자바스크립트, <%= 변수 를 사용하였다.

우선 받아온 users 값들을 foreach문을 돌려 전체 값들을 불러오게끔 했다.

주소로 가 보면 다음과 같이 동적인 값들이 불려져 온 걸 확인할 수 있다.

대게 public 폴더에다가 CSS 파일이나 JS 파일, 이미지 파일들을 모아놓고 사용한다.

mongoose 작업으로 MongoDB에 CRUD 작업을 할 예정이다. 지난번에 contactModel.js 에서 만든 모델을 컨트롤러에 전달하였다. 그때 설정했던 모델의 모델명은 "Contact"

값 넣기 (CREATE)

해당 모델에 create() 함수를 이용하여 새로운 도큐먼트를 넣을 것이다. name, email, phone 값을 저장하도록 하였다.

Body의 Json으로 값들을 집어 넣었다.

몽고DB로 가면 myContacts 라는 DB가 생겼다. 이건 이전에 .env 에서 커넥션 스트링을 입력할 때 맨 끝에 슬래쉬 뒤에 적은 DB의 이름이다. 그리고 그 밑의 contacts라는 데이터베이스의 컬렉션 이름이 있는데, 만든 모델의 모델명에서 앞 대문자를 소문자로 바꾼 뒤, s가 붙여진 것이다. 도큐먼트 밑에 내가 저장한 값들이 들어가 있었다.

실험을 위해 INSERT를 다른 내용으로 2번 더 했다.

조회 (READ)

전체 조회를 원할 시, find()라는 함수를 이용한다. 썬더 클라이언트에서 확인해본 결과 모든 값들이 조회되었다.

특정 id의 도큐먼트를 조회하고 싶다면 findById() 함수를 이용한다. req 에서 불러온 파라미터의 id 값으로 조회해본 결과 해당 id의 도큐먼트가 조회되는 걸 확인할 수 있다.

수정(UPDATE)

요청에서 불러온 바디 값들을 불러온다. findById() 함수로 원하는 id의 데이터를 불러와서 db에 있는 값들을 불러온 바디값으로 수정한다.  save() 함수로 바꾼 값들을 저장하면 된다.

Body JSON에 바꾸고 싶은 값을 적어서, 주소에 해당 아이디로 전송하면, 해당 아이디의 도큐먼트내의 값들이 Body로 보낸 값으로 수정된다는 것을 확인할 수 있다.

삭제(DELETE)

수정 보다 간단하다. 해당 ID 값을 파라미터로 불러와서 해당 id의 도큐먼트를 불러온 뒤, deleteOne() 함수를 이용하여 삭제하면 된다.

지난번에 만든 라우터 미들웨어가 작성된 contactRoutes.js 의 코드이다. 이 코드를 간단하게 하기 위해 컨트롤러를 만들 예정이다.

컨트롤러 파일 안에 js 파일을 만들었다. 먼저 파라미터가 없는 "/" 경로의 get과 post를 만들었다. 비동기 처리 방식으로 getAllContacts 함수, createContact 함수를 만들고 contactRoutes.js 의 get, post의 코드들을 잘라내기하여 붙여넣었다. 그 후 module.exports를 통해 외부로 전달

contactRoutes.js 에서 컨트롤러에서 불러온 함수들을 각각 get() 라우터와 post() 라우터에 넣으면 된다. 코드가 간단해지는 걸 확인할 수 있다.

서버 켜고 실험.. 제대로 실행되는 걸 확인할 수 있다.

나머지 3개의 라우터들도 컨트롤러에서 다음과 같이 비동기처리 후 contactRoutes.js 에 불러왔다.

출처 : https://www.youtube.com/watch?v=iFN5zKuvTK4&list=PLG7te9eYUi7vxSvo6hvhOaht8oP0PoCwi&index=16  

mongodb.com 사이트에 가입하고 등록을 한다. 그리고 VSCODE에 몽고 db 확장 프로그램을 설치하여 본인의 계정을 연결하면 된다.

npm i mongoose dotenv 로 몽고디비를 설치한다.

폴더와 파일을 다음과 같이 만든다.

먼저 .env 폴더에는 환경변수를 설정한다. 맨 뒤 "/" 끝 부분에 자신이 원하는 스키마 이름을 적는다. 파란색 부분은 처음 몽고 DB를 가입했을 때 비밀번호이다.

db 연결하는 js 파일에서는 다음과 같이 몽고디비를 불러와서 비동기처리 이후 db를 연결시킨다.

애플리케이션 와서 다음과같이 코드를 적고 서버를 실행하면 디비가 연결된걸 볼 수 있다.

스키마와 모델

mongoose 에서는 스키마(schema) 와 모델(model) 이라는 개념이 존재한다. 

스키마는, 해당 컬렉션의 문서에 어떤 종류의 값이 들어가는지를 정의한다.

모델은 스키마를 통해서 만드는 인스턴스이다.

바디파서 미들웨어

요청 본문에 있는 내용을 프로그래밍에 사용하려면 바디파서 미들웨어를 등록해야 한다.

예시

요청한 바디 값을 콘솔에 찍어보려고 한다.

바디 값에 Json 형식으로 내용을 적고 보냈으나 요청한 바디값이 undefined가 떴다. 이는 body parser 미들웨어를 등록하지 않았기 때문이다.

애플리케이션 코드에 가서 body parser 미들웨어를 다음과 같이 등록한다. json()은 json 형식의 본문을 파싱하고,

urlencoded()는 URL로 인코딩된 본문을 파싱한다.

다시 post를 실행해보면 콘솔에 내가 요청한 바디값의 내용이 출력된다.

이를 이용해서 재미있는걸 하나 해봤다. 먼저 바디값을 각각 name, email, phone으로 추출한다.

이들 중 값이 하나라도 없다면 res.send()를 이용해 '필수 값이 입력되지 않았습니다.'로 메세지를 띄울 것이다.

JSON 형식으로 값을 하나도 보내지 않아봤더니 Response 메세지에 '필수 값이 입력되지 않았습니다.' 라고 뜬다.