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

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

이번엔 데이터 베이스 관련 코드를 짜고 유저에게 영상을 보고 검색, 수정 삭제할 수 있게 해보자. 자 mongoose가 설치되었고 dotenv를 설치하자. dotenv란 node.js로 개발을 하면 port, DB관련 정보등 전역으로 필요한 여러 정보들이 존재한다. node.js에서는 dotenv패키지를 통해 환경변수 파일을 외부에 만들고 관리할 수 있다. 특히 , 깃허브등에 오픈소스로 프로젝트를 공개할때 DB계정 정보를 소스코드내에 하드코딩 하지 않고, 외부환경변수 파일에 작성하고 gitignore를 통해 제외하면 노출되지 않고 안전하다. 참고 - 환경변수란 OS입장에서 해당 프로세스를 실행시키기 위하여 참조하는 변수 - 컴퓨터로 하는 모든 작업들은 OS를 통해 실행되는 자식 프로세스인데 이프로세스들을..

이번에도 이어서 컨트롤러를 더 만져보자 우선 비디오를 클릭하면 비디오 상세페이지로 넘어가도록 해주자 mixins로 이동해서 videoBlock mixin에 링크를 걸어준다. 라우트를 걸어주고 video.id를 인자로 넣어준다. 이 id는 각 비디오에 부여된 id를 인자로 받게 된다. 이제 videoBlock을 사용하는 곳에서 입력할때 id:item.id를 추가로 보내주는 작업을하자. home 템플릿에서 videoBlock에 id 객체를 추가한다. 추가후 비디오를 클릭하면 url상에 비디오 id가 뜨게 된다. 이제 할일은 로그아웃을 클릭하면 로그아웃 페이지가 아닌 로그아웃후home화면을 접속하게 하겠다. 로그아웃 처리는 차후에 하고 일단 랜더링시 홈화면으로 redirect해줬다. 이제 logout 템플릿은..

이번엔 login과 user profile페이지를 다뤄보자. 역시 userController에 가서 get과 post방식의 두가지 컨트롤러를 만들어준다. 하나는 get 방식으로 로그인 페이지를 띄워줄 getLogin컨트롤러와 post방식으로 로그인이 이루어지면 홈화면으로 redirect해주는 컨트롤러 이렇게 만들어주고 로그인이 이루어지면 화면에 뿌려질 헤더 템플릿을 수정해주자. ul태그 하나 만들어주고 사진과 같이 작성했다. isAuthenticated는 요청이 인증 되었는지 확인하는 속성이다. user변수는 아직 데이터가 없기에 설정이 되진않았다. 이제 middleware에 가서 user정보를 객채로 만들어 주자 전역으로 설정할 user정보를 true로 설정하고 id: 1이라는 객체를 넣어줬다. 우선 ..

이번엔 join화면을 바꾸자 . 회원가입을 하면 자동으로 로그인을 하고 홈화면으로 이동하게 한다. 먼저 userController.js로 가보자 현재는 회원가입 페이지만 뿌려줄 컨트롤러만 있다. 회원가입을 하고 이메일, 비밀번호 등등을 보내줄 post할 컨트롤러가 필요하다. 기존 join을 getJoin으로 바꿔주고 postJoin컨트롤러를 하나더 만들어주자. 서밋이 이루어지면 바디파서를 통해 이름 이메일 비밀번호 정보등을 받아오고 비밀번호와 비밀번호 확인이 제대로 체크가 안되었다면 badrequest code를 뿌려주고 다시 조인 페이지로 돌아가고 만약 제대로 정보가 입력되었다면 홈화면으로 redirect해준다. 여기서 더 구현해야 할 일은 user정보를 database에 등록하고 유저를 로그인 시키는..

자주 사용되는 코드를 반복해서 작업하는 것을 피하기 위해 views폴더에 mixins 폴더를 생성하고 템플릿을 만들어준다. mixin() 함수 pug의 함수로서 반복되는 html 또는 어떤 코드덩어리를 함수 형태로 만들 수 있도로 기능을 제공한다 사용법은 mixin 함수명()이렇게 쓰고 아래 코드를 쓰고서 사용할때는 + 함수명을 써주면 된다. pugjs.org/language/mixins.html Mixins – Pug Mixins Mixins allow you to create reusable blocks of Pug. //- Declaration mixin list ul li foo li bar li baz //- Use +list +list foo bar baz foo bar baz Mixins a..