일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Mongoose
- backend
- nodejs
- JavaScript
- form
- heroku
- ECMAScript
- pug
- CLONE
- graphQL
- GRID
- HTML
- node.js
- express
- MongoDB
- javscript
- ES6
- API
- NextJs
- 리액트
- Session
- react
- Flutter
- TypeScript
- Component
- frontend
- DART
- 자바스크립트
- clonecoding
- CSS
- Today
- Total
목록query (2)
Enjoy Programming

자 api를 이용해 데이터를 가져올텐데~~ fetch대신 axios를 사용한다. 앞서 movie-app을 만들때도 사용해봤고~ express로 youtub클론할때도 써본 axios 먼저 fetch를 remind해보자. fetch란 무엇인가 ?~ ajax 방식중의 하나인 fetch fetch는 api를 불러오고, 정보를 내보내 주기도 하는 함수이다. fetch함수에 쓰여지는 method는 get&&post가 있고 설정을 따로 안하면 언제나 그랬듯이 get이 default이다. 또한 fetch는 promise방식이기 때문에 then을 사용해 함수 실행이 끝나고 다음 할일을 정해준다. fetch는 비동기이기 때문에 api를 호출하는 과정이 끝나지 않더라도 다음이 진행이 된다. 그리고 쉽게 생각해 업그레이드된 ..

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