일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- react
- NextJs
- MongoDB
- javscript
- ECMAScript
- frontend
- Mongoose
- nodejs
- 자바스크립트
- TypeScript
- clonecoding
- 리액트
- backend
- ES6
- GRID
- heroku
- Session
- CLONE
- CSS
- DART
- node.js
- pug
- HTML
- JavaScript
- Flutter
- form
- API
- graphQL
- Component
- express
- Today
- Total
목록nodejs (27)
Enjoy Programming

저번에 db를 홈컨트롤러에 연결했다. 근데 upload를 해야 db에 쌓든 불러오든 할 수 있으니 upload controller도 손보자 저번에도 포스팅 했듯이 파일 자체를 데이터베이스에 저장하지 않는다. 파일의 url을 텍스트로 넣는 일을 한다. 먼저 우선 유저가 videoController에서 upload할때 무슨 일이 일어나는지 알아보자. 우선 시험 삼아 파일 하나를 업로드 하고 콘솔을 찍어보면 file name, title, descritption이 찍힌다 하지만 파일 네임을 원하는게 아닌 파일의 주소가 필요하다. 자 우선 upload.pug에 가서 이미지파일이나 다른 파일이 아닌 video파일만 허용해주자 accept 속성을 이용해서 video만 allow해줬다. 이제 파일을 업로드하면 url..

이번엔 header.pug 템플릿에 검색창을 넣어보자 header.pyg에 칼럼을 하나 더만들어주고 form!태그를 써주자 ~~~ url은 routes.search페이지 이고 method는 get방식이다. 그리고 생성된 검색창(input)에 food를 검색하면 url이 이렇게 바뀐다. 이제 search페이지에 표시할 정보들이 주어졌다. search페이지를 수정하자. 검색한 검색어를 표시해주도록 해보자 검색을 하게되면 아래 searching by 검색어 가 뜨게 해주겠다. #{searchingBy}라는 변수를 설정해주고 (위사진은 오타다) videoController로 가서 설정해주자 search페이지로 랜더링하는 곳에 새로운 리턴값을 넣어주자 이제 암시적 리턴을 사용할 수 없으니 {}블럭을 이용하자. 먼..

자 pug에 대해서 알아봤고 각 템플릿들은 미리 만들어줬다. 이제 페이지의 일부분인 partitial부분을 만들어주자 ~ 음 보니까 지금은 헤더와~ 푸터정도인듯 하다 organization한 purpose라고 한다. partitial 폴더를 생성해주고 footer.pug와 header pug를 만들어 주자. 푸터에는 유튭 아이콘을 넣어주고~ copyright도 작성해주자 그리고 메인pug에 인클루드 해주자~ 역시 진자템플릿처럼 include기능이 있다. 원래 footer자리에 footer태그를 지우고 include ../partials/footer로 설정하면 include 된다 import 느낌? pug에서 자바스크립트 코드를 추가하는 방법은 #{}를 이용하자 javacript에서 날짜를 받는 코드를 작..