본문 바로가기

분류 전체보기

 (108)
onlyPublic, onlyPrivate 이미 로그인한 사용자는 Join, Log in 화면으로 접근할 수 없게 만든다. 미들웨어를 실행하기 전에, passport와 session의 기능을 활용해서 req.user 여부를 검사한다. onlyPublic: Join, Login onlyPrivate: editBook, deleteBook, uploadBook, bookDetail, editprofile, changePassword, Logout
MongoStore MongoDB를 이용해 세션을 저장 npm install connect-mongo 돌아가는 과정을 일일이 이해하고 있는건 아니다. 대신 주어진 과제를 완수하는 법을 알고 있다. 그렇게 하는 걸 추천.
Passport Passport는 사용자 인증을 구현하는데 사용하는 미들웨어 Passport는 쿠키를 생성하고, 브라우저에 저장하고, 유저에게 전용 쿠키를 준다. 쿠키에는 백엔드로 전송될 정보들이 담겨있다. 서버에 뭔가 요청할 때마다(로그인, 프로필 편집 등등) 브라우저가 쿠키들을 서버로 전송한다. Passport가 자동으로 쿠키를 가져와서 인증이 완료된 User object를 controller에 넘겨준다. npm i passport passport-local User 모델: 이름, 이메일, 페이스북, 아바타 URL 등 사용자의 정보를 담고 있다. 이름과 이메일을 입력하면 계정을 생성하고, 이를 등록한다. 가입시킨 뒤에 자동으로 로그인시킨다. globalRouter.post(routes.join, postJoin, p..
SCSS _variables.scss에 컬러코드를 담아놓는다. reset.scss는 기본 서식을 초기화해준다. Chrome Extension - ColorZilla, Page Ruler Redux main.pug의 main에는 mini-height를 지정해놓았다. footer가 화면 중간에 오는 버그를 방지하기 위해 _ 표시를 붙인건 exclusively sass 파일에만. css 파일로 변환되는 파일들은(?) 붙이지 않음
Webpack Webpack은 module bundler 우리가 파일을 서버로 넘기면 webpack이 그것들을 완전 호환이 가능한 static 파일로 바꿔준다. 우리는 모던한 JS와 CSS를 사용하는데, webpack이 이들을 노멀한 JS와 CSS로 바꿔준다. npm install webpack webpack-cli webpack은 웹에서 작동하는데, webpack-cli를 함께 설치해야 콘솔에서도 webpack을 실행할 수 있다. 우선 서버가 작동되는 방식을 아래와 같이 바꾸자. dev:server는 서버를 실행시킨다. dev:assets는 webpack을 이용해 client code(모던한 JS와 CSS)를 변환해 서버에 전달한다. -w를 붙이면 파일을 수정했을 때 자동으로 웹을 업데이트 해준다. 이 둘은 서로 다..
ESLint, Regular Expression ESLint는 코드에서 문제가 생길만한 부분을 찾아준다. s를 잘못 붙였다든가... npm install eslint -D eslint --init 해서 대충 설정 .eslintrc.js의 extends부분에 extends: ["eslint:recommended", "plugin:prettier/recommended"] 이렇게 추가 npm install prettier -D prettier랑 eslint랑 겹친다. prettier가 만들어준 코딩스타일은 eslint가 무시해줬으면 좋겠다. npm install eslint-config-prettier npm install eslint-plugin-prettier Regular Expression은 검색을 도와준다. regex101.com 참고
Detail, Edit, Delete, Search detail: 홈에 표시된 DB의 책 중 한권을 고른다. 고르면 그 책의 id를 이용해 book/:id로 이동한다. id를 이용해 DB에서 그 책의 정보를 찾는다. findById와 같이 DB를 건드리는건 mongoose의 documentation(주로 query)을 찾아본다. bookDetail.pug에 comment 개수 표시 추가 bookDetail 페이지에서 Edit Book을 누르면 books/:id/edit으로 이동한다. 제목과 설명을 바꾸면 정보가 업데이트된다. 이때 이미 title과 description는 존재하고 있는 상태. 수정하지 않으면 원래 값을 유지하도록 한다. 아래 코드에서 value = book.title 과 =book.description은 기본 값을 설정해주는 것이다. te..
Upload 웹에 upload 할 때 중요한 개념은, 파일 그 자체를 불러오는 게 아니라, 그 파일의 위치를 가져오는 것. 모든 파일을 웹에 저장한다면 웹이 너무 무거워진다. 파일은 서버의 DB에 저장하고, 그 위치를 웹이 기억한다. 파일을 업로드하면 그 파일의 URL을 추출해서 저장할 수 있는 middleware 필요 npm install multar /upload 화면에서 책을 선택하고, 제목과 설명을 적은 뒤 업로드 버튼을 누르면 책의 정보가 전송된다.(POST) bookRouter에서 이 신호를 포착하고 addBook과 postUploadBook을 차례대로 실행한다. addBook은 /uploads/books 폴더에 책의 url을 저장한다. postUploadBook은 models/Book.js에서 정의한 B..

티스토리툴바