Youtube Clone/ExpressJS (17) 썸네일형 리스트형 GET/POST and ID Join, Login, Upload를 get과 post로 나눴다. 로그인 상태를 추가했다. id는 일단 1으로 했다. 기본 상태일 때는 Join, Log In이 보이지만, 회원에게는 Uplod, Profile, Log Out 버튼이 보인다. id를 받아 /users/:id를 반환하도록 userDetail을 함수로 만들었다. 같은 방법으로 bookDetail도 수정했다. bookDetail은 이제 함수이므로 bookDetail을 쓸 때는 뒤에 괄호를 붙인다. bookBlock에 링크를 걸었다. 정보를 누르면 bookDetail 페이지(books/:id)로 이동한다. 마찬가지로 bookDetail도 함수이므로 id 인자를 필요로 한다. 마지막으로, logout을 누르면 홈으로 돌아가도록 했다. https:/.. Fake DB and Mixin Home에 책의 정보를 표현해본다. 그러나 아직 책 데이터가 없기 때문에 가상의 DB를 만들어서 테스트한다. db.js를 만들어 책의 정보를 가상으로 만든다. globalControllers.js에서 db.js를 불러오고, home.pug를 불러올 때 fake db인 books를 함께 넣어준다. home.pug에서 books db에서 책을 하나씩 불러낸다. 아래와 같은 방법으로 books db의 책을 한 권씩 불러올 때마다 block을 추가한다. 책의 정보를 표현하는 것은 책마다 동일하므로, 불필요한 반복을 줄이기 위해 mixin을 사용한다. mixin은 partial처럼 코드를 분리하는 방법인데, partial과는 다르게 인자가 있다. mixins/bookBlock.pug를 만들어 반복되는 내용을 담는.. Books 지금까지 공부한 내용을 바탕으로 대규모로 수정했다. 추가로 book과 관련된 페이지들을 만들고 bookController, bookRouter를 추가했다. 아래와 같은 트리구조인데, 충분히 이해되었다면 아래 파일들 각각이 어떤 역할을 하는지 설명할 수 있다. NINEOCLOCK │ init.js │ app.js │ middlewares.js │ routes.js │ package.json │ README.md │ .gitignore │ node_modules(폴더) │ ├─controllers │ bookController.js │ globalController.js │ userController.js │ ├─routers │ bookRouters.js │ globalRouters.js │ userRou.. Pages - Join, Login, Edit profile, Search 페이지에 원하는 기능을 추가하기 위해 form을 사용한다. action은 form의 내용을 처리할 URL, method는 get/post /join의 경로로 접속하면 아래 내용이 실행된다. form 안에 5가지 input이 있고, 각각은 type, name 등을 포함한다. placeholder는 input box에 표시되는 내용이다. 카카오톡, 페이스북 등으로 로그인하는 socialLogin은 partial로 따로 처리해준다. Search의 경우, abc를 검색했을 때 나타나는 화면에는 [serching for: abc]를 표시하려고 한다. 이때 검색한 그 단어를 포함한 정보를 가져와야 한다. reqest object 안에는 query object가 있고, 그 안에 term이 검색한 단어이다. term을.. Checklist 이제 페이지를 하나씩 만들어야 한다. 이때 페이지의 목적에 따라 버튼, 입력창 등을 추가한다. 본격적으로 페이지를 만들기 전에 README.md 파일에 체크리스트를 추가하자 Local2Global route, siteName 같은 로컬 변수들을 view에서도 사용할 수 있게 만들자. app.js에 app.use(localsMiddleware)를 추가하고, middleware.js 파일 생성 로컬 변수들을 아래처럼 res.local에 포함시키면 전역변수로써 사용 가능 이제 routes.join이나 routes.login 같은 로컬 변수를 어느 파일에서든 사용할 수 있게 됨 아래처럼 #{}을 사용하면 변수로 적용 가능. siteName 위치에 "Nine O Clock"이 표시됨. pageTitle은 페이지마다 달라야 하기 때문에 controller에서 직접 지정한다. 실수해서 github의 commit이랑 사진이랑 좀 다름 commit이 잘못된 거임ㅠ Partials 프로그래밍은 Devide and Conqeust main에서 header와 footer를 분리해보자. header에는 책 아이콘과 Join, Log in 버튼 footer에는 책 아이콘과 카피 로고, 연도, 프로젝트 이름 Font Awesome 사이트에서 무료로 아이콘을 가져올 수 있다. 위와 같이 홈페이지에서 제공하는 코드 한 줄을 head 부분에 넣는다. Pug Pug는 view engine으로, HTML 파일들을 쉽게 만들 수 있게 도와준다. .html 파일에서는 [Hello]라고 써야하는 것을 .pug 파일에서는 [p Hello] 라고 쓰면 됨 .pug파일은 자동으로 .html으로 변환되어 서버에 반영된다. npm install pug express의 view engine을 pug로 바꾼다. - app.js에 app.set("view engine", "pug"); 추가 앞으로 pug 파일들을 /views에 저장한다. Pug를 이용하면 반복 작업을 줄일 수 있다. 모든 페이지는 header, footer, HTML head 태그, css link를 필요로 한다. /views/layout 안에 main.pug를 만들고, 공통적인 양식을 여기에 저장 다른 pug .. 이전 1 2 3 다음
