Projects/유튜브 클론코딩(73)
-
[유튜브 클론코딩] 2.8 Express Core : Routing
2.8 Express Core : Routing 새로운 파일을 만든다.(init.js) index.js → app.js로 파일 이름을 바꾼다. app.js에서 일부분 삭제한다. (왜냐면 저 부분을 init.js에서 작성할거기 때문에) (↑주석처리된 부분을 지우는 것이다) init.js에서 application을 시작하도록 한다 자바스크립트 ES6에는 흥미로운 부분이 있는데, 모듈이라는게 있어서 우리 코드를 공유할 수 있다.다른 파일에서의 코드를 가져다가 사용할 수 있다. 예를 들어, app.js에서 express, morgan, helmet 등등을 불러 썼었는데 이것들도 어딘가에서 불러온 것이다.(import) express,morgan,helmet 같은 것들은 node_modules 안에서 찾아온 것 ..
2021.02.16 -
[유튜브 클론코딩] 2.7 Express Core: Middlewares part. 2
2.7 Express Core: Middlewares part. 2 Morgan logging에 도움을 주는 미들웨어 로깅(logging): 무슨 일이 어디서 일어났는지를 기록하는 것 설치방법 : 콘솔창에 npm install morgan import 하기: index.js 상단에 import 해준다. import morgan from "morgan"; 아까 만들었던 middleware는 지워준다. app.use(morgan("tiny")); 이렇게 실행했을 때 profile로 접속하면 로깅 기능을 갖게 된 것을 볼 수가 있다. 이제 어떤 접속(GET)인지 정보를 알 수 있고 어디에 접속하는지 알 수 있다. morgan의 인자로 쓸 수 있는 것들 "tiny" "combined" "common" "dev"..
2021.02.15 -
[유튜브 클론코딩] 2.6 Express Core: Middlewares
2.6 Express Core: Middlewares 코드를 수정하고 저장하면 서버가 두 번 재시작하는 오류를 고쳐야함 우리가 코드를 수정하고 저장하면 서버가 재시작되는데, 이때 restarting 문구를 보면 restarting이 2번이나 나오고 있다. 즉, 저장하면 두 번 재시작한다. nodemon이 이러는 이유는, 내가 저장하면 일단 재시작하고 그 다음 Babel이 코드의 변화를 감지하고 서버를 다시 한 번 재시작하기 때문이다. "scripts": { "start": "nodemon --exec babel-node index.js --delay 2" }, package.json 파일에서 다음과 같은 부분을 수정한다. 서버에 delay를 추가하는 건데 저장할 때마다 2초를 기다렸다가 서버를 시작하는데..
2021.02.15 -
[유튜브 클론코딩] 2.5 ES6 on NodeJS using Babel
2.5 ES6 on NodeJS using Babel Babel이란? - 최신의 Javascript 코드를 무난한 예전의 Javascript 코드로 변환해주는 것 - 우리는 Babel을 node에서 쓸 것이기 때문에 많은 방법 중 Babel Node를 사용할 것이다. - 설치 방법 VS Code의 콘솔에서 npm install @babel/node 로 설치한다. - babel의 stage 또 babel이 갖고 있는게 있는데 많은 stage가 있다. 만약 stage3의 Babel을 이용한다면 브라우저한테 절반 정도 받아들여질 것이다. 만약 stage0을 이용한다면 완전 실험적인 걸 얻게 될 것이다.(리스크가 크다는 말인 것 같음) 우리가 사용할 것은 env이다. (가장 최신이긴 한데 실험적인 수준까지는 아..
2021.02.15 -
[유튜브 클론코딩] 2.4 Handling Routes with Express
2.4 Handling Routes with Express GET / POST 브라우저에서 localhost:4000에 접속했을 때 보이는 Cannot GET / 을 보면 GET이 대문자로 표시되어 있다. GET 어떠한 정보를 가져와서 조회하기 위해서 사용되는 방식 예) 웹사이트에 접속하려고 하면 youtube.com과 같은 URL을 적는다. 이때 브라우저가 GET Method를 통해 페이지를 읽어온다. POST 데이터를 서버로 제출하여 추가 또는 수정하기 위해서 사용하는 방식 예) 웹 사이트에 로그인 할 때에는 POST method를 통해서 데이터를 서버로 전송한다. GET request로는 정보를 전달할 수가 없고 POST request로는 정보를 전달할 수 있다. 예를 들어, 영상에 코멘트를 단다고..
2021.02.15 -
[유튜브 클론코딩] 2.3 Your First Express Server
2.3 Your First Express Server 깃허브관리 - .gitignore 만들기 우선 우리의 프로젝트를 깃허브에서 관리하기 위해서 깃허브 홈페이지에서 repositiory를 만들어준다. 그 다음 node_modules 파일 들이 깃허브에서 전부 관리 대상이 되려고 하니까 이것을 ignore 해주어야 한다. (내가 만든 코드만 업로드하고 싶기 때문) 그래서 비쥬얼 스튜디오 코드에서 .gitignore를 만들고 그 안에 node_modules 라고 치고 저장하면 깃허브에서 관리 대상이 300몇개에서 4개로 예쁘게 사라진다. gitignore의 표준 같은게 있는데 https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore n..
2021.02.15