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

이제 정식적으로 검색으로 비디오를 찾도록 해보자 지금 작성해놓은 search는 검색이 되지 않는다. 정규표현식을 사용해서 검색기능을 구현해보자 먼저 검색이 될 videos를 수정가능한 배열로 선언 해주고 Video 모델에서 찾아서 videos에 담아준다. title을 기준으로 찾고 조건은 쿼리스트링 값 serchingBy를 대조해서 검색한다 이때 options을 주는데 i로 플래그를 설정한다. i는 대소문자에 관계없이 매칭해주는 것이다. 바로 앞선 포스팅에서 정규표현식을 다루었다. developer-lte.tistory.com/entry/Regular-Expression-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D Regular Expression - 정규표현식 정규..
자바스크립트, JSX의 정적 분석 도구로 오픈소스 프로젝트인 ESlint를 설치해보자 먼저 ESlint는 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 해준다. JSlint, JSHint같이 다른 자바스크립트 정적 분석 도구도 있지만 , ESlint가 커스터마이징이 쉽고 확장성이 뛰어나 많이 쓰는 추세이다. ESLint는 스타일 가이드를 좀더 편리하게 적용하기 위해 사용한다. 이제 설치 과정을 쓸텐데 음.. 설치과정을 잘 정리해서 공유해주신 것으로 대체하겠다. 1. 아래 순서대로 eslint와 prettier플러그인 및 설정, prettier를 설치해주세요. npm install eslint -D npm install eslint-plugin-prettier -D n..

이번엔 비디오 삭제를 기능을 구현해보자. 역시 라우트에서 라우트를 id인자를 받는 함수로 바꿔준다. 그리고 id를 받으면 delete로 넘어가도록 라우트 설정을 해줌 그리고 컨트롤러 수정도 해주자 파라미터로 id를 받아준다. async await으로 역시 waiting을 해주고 mongoose methoddls findOneAndDelete로 해당 비디오를 삭제해주자 그리고 결과가 어떻든 홈페이지로 다시 redirect를 해주기 때문에 해당 코드는 try catch 스코프 바깥에 작성했다 그리고 edit.pug에서 delete링크에 라우트설정을 함수로 바꾸고 video.id 매개변수를 넣어주자. 마지막으로 비디오 라우터도 수정~ 이제 삭제가 된다. but@!!! 파일 uploads/videos 에는 업로..

이번엔 비디오 수정페이지를 다루자. 먼저 routes.js로 가서 editVideo 라우트를 함수로 만들어주자 아이디를 인자로 받기로 하고 id값이 들어오면 /vidoes/id/edit으로 접속하고 id가 없다면 edit_video url으로 라우트 한다. 이제 함수로 만들어줬으니 videoDetail 템플릿에서 링크에 routes.editVideo()함수로 바꿔주고 video controller에서 받은 video에 id를 받아온다. 그리고 videoRouter상에 editVideo도 함수로 바꿔준다 그리고 할 일은 get을 통해 url은 routing했으니 post를 통해 업데이트 하는 컨트롤러를 하나더 만들어주자 기존 editVideo는 getEditVideo로 수정했고 이제 postEditVide..

비디오 재생까지 이루어졌다. 이제 비디오링크를 클릭하면 비디오 상세정보 페이지로 이동하게 되고 url에 video의 id를 받고 있는 것을 확인 할 수 있다 이제 할 일은 video의 자세한 정보를 생성하는 일이다. 컨트롤러상에 videoDetail 컨트롤러는 만들어져있고 이제 파라미터로 id를 받으면 된다. 저번에 짚고 넘어갔어야 할 쿼리스트링을 좀더 알아보자. 기본적으로 url에 접근하면 path를 통해 결과를 페이지에 로딩 해준다. 예를 들어 http://google.com/taeeon으로 접속하면 taeeon이라는 path에 결과를 뿌려준다. 언제나 같은 결과를 보여주는 것이다. 유저프로필 페이지라면 접속자가 다른 경우에는 다른 결과를 보여줘야 하는데 그렇다면 같은 url에서 어떻게 여러 결과를 ..

비디오 업로드는 되지만 비디오가 재생이 되지는 않는다 현재 링크가 제대로 이루어지지 않았기 때문이다. 일단 생성된 videos폴더를 지우고 다시 upload/videos로 변경해주자 주의할 점은 /upload/vidoes로 하면 컴퓨터상의 root로 설정이 되기때문에 프로젝트상의 폴더로 꼭 지장해주자. 그리고 몽고db에서 업로드한 파일을 지워주는데 터미널에서 mongo를치고 mongodb에 접속 후 use를 이용해 생성한 we-tube db에 접속하자 use we-tube>> mongodb 명령어는 mongo로 접속후 help를 치면 자세히 나온다 접속했으면 데이터들을 삭제 ( db.videos.remove({}) ) 그리고 exit 그리고 업로드를하면 .. 역시 파일이 재생되지 않는다. 아직 한가지 빼..