Enjoy Programming

아직 데이터베이스를 이용하지 않았다. 이번엔 전체 application의 흐름을 가짜로 설정하는데 fake info를 이용해 템플릿을 완성시켜보자. 홈화면에 비디오를 보여줄텐데 가짜 데이터를 뿌리기위해 db.js를 만들어주고 안에 videos라는 배열을 만든다. (가짜 데이터를 통해 테스트하는 방식을 연습하자 데이터베이스에 무엇을 추가할지 설정하기 전에 빠르게 수정이 가능하다) 비디오 아이디, 타이틀, 설명, 조회수, 파일주소, 작성자(id, name,email)등을 배열로 적어주고 이제 홈화면에서 이것을 뿌려야 되니 videoControllers에 home컨트롤러에서 video목록을 받아 render함수에 전달한다. 이렇게~ 그리고 home.pug에서 임의로 작성한 데이터들을 뿌려주는데 each in을..

이번엔 header.pug 템플릿에 검색창을 넣어보자 header.pyg에 칼럼을 하나 더만들어주고 form!태그를 써주자 ~~~ url은 routes.search페이지 이고 method는 get방식이다. 그리고 생성된 검색창(input)에 food를 검색하면 url이 이렇게 바뀐다. 이제 search페이지에 표시할 정보들이 주어졌다. search페이지를 수정하자. 검색한 검색어를 표시해주도록 해보자 검색을 하게되면 아래 searching by 검색어 가 뜨게 해주겠다. #{searchingBy}라는 변수를 설정해주고 (위사진은 오타다) videoController로 가서 설정해주자 search페이지로 랜더링하는 곳에 새로운 리턴값을 넣어주자 이제 암시적 리턴을 사용할 수 없으니 {}블럭을 이용하자. 먼..

자 pug에 대해서 알아봤고 각 템플릿들은 미리 만들어줬다. 이제 페이지의 일부분인 partitial부분을 만들어주자 ~ 음 보니까 지금은 헤더와~ 푸터정도인듯 하다 organization한 purpose라고 한다. partitial 폴더를 생성해주고 footer.pug와 header pug를 만들어 주자. 푸터에는 유튭 아이콘을 넣어주고~ copyright도 작성해주자 그리고 메인pug에 인클루드 해주자~ 역시 진자템플릿처럼 include기능이 있다. 원래 footer자리에 footer태그를 지우고 include ../partials/footer로 설정하면 include 된다 import 느낌? pug에서 자바스크립트 코드를 추가하는 방법은 #{}를 이용하자 javacript에서 날짜를 받는 코드를 작..

음 잘 알지는 못하지만 ECMAScript6에는 브라우저상에서 자바스크립트를 모듈을 export, import할 수 있게 되었다. 일단 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 세부 사항을 캡슐화 하고 공개가 필요한 API만을 외부에 노출한다. 모듈은 파일 단위로 분리 ~ 필요에 따라 명시적으로 모듈을 로드하여 재사용한다. c, java, python은 #include, import등의 모듈 기능을 가지고 있다. 그러나 클라이언트 사이드 자바스크립트는 script태그를 사용하여 외부의 스크립트 파일을 가져 올 수 는 있지만, 파일마다 독립적인 파일 스코프를 갖지 않고 하나의 Global Object를 공유한다. ES6에서는 이를 해결? 하기 위해 expo..

필요한 미들웨어들을 설치하기 전에 express에 대한것을 다시 짚고 넘어가자 express 의 주요기능에는 1. 미들웨어 - 함수를 효과적으로 배열하는 미들웨어 스텍 2. 라우팅 - HTTP method로 특정 URL을 방문할 때만 함수가 호출 됨 3. request/ response 에 대한 확장 - response.redirect() or response.sendFile() 처럼 확장 가능 4. 뷰 - 뷰를 사용해서 HTML을 동적으로 랜더링 할 수 있음(pug, ejs등) 먼저 로그를 관리하기 위한 Nodejs의 미들 웨어인 morgan을 설치해보자 npm install morgan 그리고 import morgan from "morgan";으로 임포트 해주고 app.use(morgan("dev")..

middleware에 대해서 알아보자 미들웨어란 간단하게 말하면 클라이언트(유저)에게 요청이 오고 그 요청을 보내기 위해 응답하려는 중간에 목적에 맞게 처리를 하는 말하자면 거쳐가는 함수들이라고 보면된다. 미들웨어 함수에 대한 엑세스는 next함수를 이용해 다음 미들웨어로 현재 요청을 넘길 수 있다. 순차적으로 처리하는 것이다. 순서가 매우 중요하다!! 어디에 두고 쓰느냐! 이다. 미들웨어 함수 betweenHome을 만들어 줬다. 매개변수에는 req객체와 res객체 next(다음으로 엑세스할 함수) 그런 다음 라우트에 두개의 함수를 집어 넣어준다. root에 접속하게 되면 handelHome함수를 실행하기전에 betweenHome 미들웨어 함수를 실행 하게 된다. 그럼 콘솔창에 between이 찍히고 ..