Enjoy Programming

https://signup.heroku.com/ Heroku | Sign up Free account Create apps, connect databases and add-on services, and collaborate on your apps, for free. Your app platform A platform for apps, with app management & instant scaling, for development and production. Deploy now Go from code to running app in signup.heroku.com heroku 사이트에 가서 계정을 먼저 생성하자. 계정생성후 create app을 통해 app을 하나 만들어준다. 이렇게 만들어졌다. hero..

이제 프론트엔드쪽을 빌드 할텐데. webpack에는 development, production, none모드등이 있다. 프론트엔드 클라이언트를 빌드할텐데 현재 webpack conifg은 mode가 development로 되어있다~ dev와 build 스크립트할때 두가지를 다르게 주고싶은데 webpack config의 mode를 지워주고 script에서 실행시 명령어로 전달해주도록 하자. 요롷게~~~ 명령어를 작성해 전달할 수 있다. 두가지다 실행시 매우 잘 실행된다~~` 차이점은 위는 dev모드 이고 이건 production모드 이다. 압축되어있다~~~ 한가지 수정해야하는데 현재 build에서도 watch가 실행되고 있다~ 역시 webpack config에서 watch:true를 삭제하고 command..

일단 유튜브 클론과정은 거의 끝났다 ~ 내가 직접 몇개의 라우터를 더 만들 예정이고~ 홈페이지 디자인도 손보고~ 몇가지 자바스크립트도 추가할예정이고~ 로직도 손보고 있다. 마지막 챌린지였던 댓글 삭제기능은 구현되었고~ 그런데 포스팅을 못했다.. 포스팅할게 너무 밀려있다.. ㅠㅠ 차분히 하자.. 현재는 개발자 모드로 개발을 하고 있었고 이제 실제 배포를 해볼차례이다. Heroku를 통해 배포를 한다. Heroku란 무엇인가~ Heroku는 java, node.js, python등 여러 언어를 지원하는 웹 어플리케이션 배치 모델로 사용되는 클라우드 paas이다. paas? Platform as a Service- 서비스형 플랫폼 : 클라우드 컴퓨팅 서비스 분류 중 하나. 일반적으로 앱을 개발하거나 구현할 때..

프론트에서 비동기로 조회수를 올리기 코드를 짜는데 가물가물한 ajax를 리마인드 해본다. 우선 fetch를 이용해 내가 원하는 url을 가져오고 백엔드에서는 url의 video id를 보내주기위해 잠시 포스팅했던 data-attribute를 사용한다. data-attr를 이용해서 html에 데이터를 저장하고 프론트에서 그 정보를 가져오게 한다. 니코 왈 data-attr는 백엔드와 프론트간에 정보교환을 하는데 있어 가장 쉬운 방법이라고 한다. https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes 데이터 속성 사용하기 - Web 개발 학습하기 | MDN HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 ..

기존 클론코딩을 하며 mongoose의 populate메서드를 가져다 쓴적이 있는데.. 음 object id를 가져온다는건가? 뭔지 이해가 잘 안갔는데 차근차근 다시 포스팅해본다. mongoose 공식 doc을 보면 mongo-db의 lookup과 같은 연산자를 갖고 있다. 그리고 mongoose는 더 강력한 대체항목으로 populate()메서드를 가지고 있다고 한다. 그럼 간단히 말해 populate()가 하는 역할이 무엇인가~ 다른 스키마의 정보를 참조해서 쓰는것이다. 우선 두개의 스키마 user와 video 가 있다고 하자 그리고 video 스키마에는 owner라는 key가 있다. 그리고 이 owner는 ObjectId 타입이고 User model을 참조하고 있다 이때 owner를 통해 User ..

간단하게 Cookie의 property에서 중요한 정보를 좀 짚고 넘어가자 그보다 먼저 express-session에 secret prop에 대해 알아본다. secret은 쿠키에 sign할때 사용하는 string이다. 쿠키에 sign? 이 말은 backend가 쿠키를 발행했다는 것을 보여주는 것이다. 나의 쿠키를 누군가 해킹해 나인척 하는 session hijack에서 보호하기 위해 secret string이 필요하다 이 string은 매우 길고 무작위이며 강력해야 한다. 이 강력한 string으로 쿠키를 sign하고 나의 backend가 만든 것임을 증명한다. . Domain . Domain은 해당 쿠키를 만든 backend가 누구인지 나타낸다. 그리고 쿠키는 해당 Domain에 있는 backend로만..