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

이제 파일을 관리하기 위해 aws를 사용해본다. 먼저 aws란 무엇인가 아마존 닷컴에서 개발한 클라우드 컴퓨팅 플랫폼이다. Amazon Web Services 는 아마존에서 제공하는 클라우드 서비스로 네트워킹을 기반으로 가상 컴퓨터와 스토리지, 네트워크 인프라등 다양한 서비스를 제공한다. 비즈니스와 개발자가 웹서비스를 사용하여 확장 가능하고 정교한 애플리케이션을 구축하도록 지원한다. 클라우드 컴퓨팅의 장점을 이용하기 위해 많은 기업들이 활용하고 있다. 클라우드 컴퓨팅이란 인터넷을 통해 it리소스와 앱을 온디맨드로 제공하는 서비스이고 과금제이다. 기존의 물리적인 형태의 실물 컴퓨팅 리소스를 네트워크 기반 서비스 형태로 제공하는것. 사용자로 하여금 네트워크 상에서 클라우드 서비스의 자원을 사용하는 것을 의미..

앞서 깃헙 시크릿과 클라이언트 아이디 환경변수를 해로쿠에 등록했음에도 에러가 뿜어져 나왔다... 뭐가 문제일까. 문제가 저기있다.. redirect를 4000번 포트로 이동했다. 기억난다 callback url을 localhost:4000번으로 시작하도록 이걸 바꿔줘야 한다. mysitename.herokuapp.com 으로 ~ 배포시에는 이렇게 하고 테스팅할때는 다시 변경해줘야하는 번거로움이 있다~ 귀찮으면~ 그냥 oauth앱을 두개 만들어서 하나는 테스팅용으로 등록하고 하나는 heroku에 등록하면 된다~ 굳 까먹으니 지금 바로 해놓자. 자 다 제대로 해줬고 깃헙 로그인을 해보자~!~!~! 제대로 잘된다~!~!~!~! 오케이 그럼 로그인되었으니 유저가 생겼을 것이다~ 실제 데이터 베이스로 이동해보자~..

음.. 오랜만에 챌린지 기록을 해본다 그동안 계속 챌린지는 진행중이긴 한데 ~ 다른거 포스팅하고 공부하느라 이것 까진 못하겠다 싶었는데 오늘부터는 간단하게라도 기록해야겠다. 일단 오늘의 challenge내용은 영화정보가 담긴 fakeDB를 이용해서 간단한 웹을 제작하는 내용이다. 조건이 세가지 있는데 먼저 기본적으로 정의된 세가지 컨트롤러가 있는데 1. home should list all the movies 2. movieDetail should show a movie based on the :id 3. filterMovie should filter for a movies based on the rating or the year.~! 홈 컨트롤러는 모든 영화리스트를 보여줘야하고, 영화디테일 컨트롤러는 ..

이제 할 일은 업로드된 비디오에 작성자를 연결해주고 작성자가 로그인 되었다면 edit을 할수 있게한다 그리고 다른 유저라면 그냥 수정할 수 없게 하겠다 먼저 각 모델에 스키마를 추가한다. 비디오에는 유저의 정보를 그리고 유저에는 비디오와 코멘트 정보, 코멘트에는 유저의 정보를 넣어주자 그리고 비디오 컨트롤러에서 post업로드 컨트롤러를 수정해주자 새로 만들어진 비디오의 스키마 creator를 req.user.id를 추가해주고 (유저가 로그인 되어있다면 항상 req에는 user가 있다) videos에 neVideo.id를 넣어준다. 그리고 저장. 그리고 상세정보 컨트롤러를 살짝 수정해준다. populate함수를 통해 객체를 가져오도록 하는데 이 함수는 Object ID타입에만 쓸수있다 마지막으로 video..

유저 프로필 페이지를 수정을 해줄 건데 약간의 수정사항과 추가사항이 있다. 일단 로그인한 유저의 프로필 페이지로 이동을 하면 기존에는 /:id 를 이용해서 갔는데 userDetail 컨트롤러를 이용해서 id값을 찾아 이동을 했다. 사용자마다 똑같은 user template을 이용하는데 이부분을 바꾼다. 그래서 사용자 프로필 페이지 routes와 컨트롤러를 하나 더만들어준다 헤더 템플릿으로 가서 경로도 다시 설정 해주자 기존 userDetail과 같은 기능을 하지만 다른점은 userDetail은 사용자를 찾는 과정이 필요한데 새로 만든 getMe user를 지금 로그인한 유저인 req.user로 전달한다. 햔재 userDetail은 제 역할을 못하기에 프로필 페이지 접속후 :id부분의 url을 임의로 바꿔..

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