본문 바로가기

웹/school(MEAN)

Consuming a REST API [3]:Using an API from inside Express
웹/school(MEAN) 2021. 11. 2. Consuming a REST API [3]:Using an API from inside Express 브라우저에서 api에게 데이터를 전송하는 방법 db에 전송하기 전에 유효성검사하는 방법 에러 트래핑에 대해 공부해봅시다. api를 통해 리뷰를 db에 추가하는 방법을 알아봅시다. 리뷰 폼에서 리뷰할 location을 확인합니다. 폼이 제출이 될 때 location id를 먼저 가져와야 합니다. 리뷰를 추가시킬 location을 먼저 확인하는 단계입니다. location id를 얻어오는 방법은 url에다가 포함시키는 것입니다. addReivew 라우트 를 만듭시다. url 안에다가 locationid 집어넣고 post로 요청들어오면 doAddREview로 보냅시다. 실제 컨트롤러를 만들어 봅시다. 일단 빈 껍대기 함수를 만들었습니다. 다른대서 호출할 수 있게 만들어야 하니깐 doAddReview를 expo..
Consuming a REST API [1]:Using an API from insideExpress
웹/school(MEAN) 2021. 10. 19. Consuming a REST API [1]:Using an API from insideExpress 지난 번에 만들었던 rest api를 사용해 봅시다. 처음으로 프론트엔드를 백엔드에다가 엮습니다. 지금 컨트롤러에 하드 코됭된 데이터를 제거하고 db에서 데이터를 가저와봅시다. review같은 서브 다큐먼트를 api를 통해 db에다가 저장해 봅시다. api를 만들어 놨습니다. 아직 APP에서 접근하는 코드를 안만들었습니다. postman으로 태스트를 해봤습니다. 실제로 에플리케이션에서 api를 접근해 봅시다. 앱에서 api를 호출하는 방법은? 애플리케이션을 api url을 호출하게 끔 만들어야 합니다. reqeust 모듈을 설치해봅시다. app_server에 메인서버 에플리케이션을 모아두었습니다. 전체 url을 알아야 합니다. 개발환경 => localhost:3000 url을 사용했습니다. 제품환경 =>..
Writing a REST API [3]:Exposing the MongoDBdatabase to the application
웹/school(MEAN) 2021. 10. 13. Writing a REST API [3]:Exposing the MongoDBdatabase to the application post 메소드를 만들어 보겠습니다. post 메소드와 관련된 컨트롤러는 db에다가 다큐먼트나, 서브 다큐먼트를 추가시킬 때 사용하는 메소드 입니다. 새로운 로케이션을 생성할 때 /locations라는 url path를 사용하면 됩니다. form에 리뷰를 달게 해야 합니다. form에 있는 것을 가져와 db에 추가해봅시다. req.query로 url에 있는 쿼리 스트링을 가져왔었습니다. req.body로 form에 있는 데이터를 가져올 수 있습니다. db에 저장되는 형태를 봅시다. location이 다큐먼트 형태로 저장이 됩니다. 먼저 모델을 생성하고 create()메소드를 써서 2개의 매개변수를 넣습니다. 첫 번째는 스키마와 매칭되는 데이터입니다. 두 번재는 콜백함수 입니다.( 비동기식으로 만들려고 하..
Writing a REST API [2]:Exposing the MongoDBdatabase to the application
웹/school(MEAN) 2021. 10. 12. Writing a REST API [2]:Exposing the MongoDBdatabase to the application GET 메소드를 재대로 만들어 보겠습니다. url로 요청하면 실제로 요청한 리스트를 가져다 주는 내용을 알아보겠습니다. mongoose를 이용해가지고 몽고DB에서 한게의 다큐먼트를 찾아봅시다. mongoose는 모델인스턴스를 가지고 db와 이야기 합니다. 모델은 먼저만들어야 합니다! 이것을 이용해서 다큐먼트를 찾는 것은 findByid입니다. 모델을 통해서 지원되는 매소드가 있습니다. findeOne - 첫 번째 다큐먼트를 가져옵니다. 모델에다가 findById 메소드 적용하는 법 id 파라미터를 넣습니다. Loc라는 모델 인스턴스가 있습니다. 파라미터에 실제 id를 넣어줍니다. 바로 명령이 실행되는 것은 아닙니다. 쿼리만 지정한 것 입니다. 쿼리를 실행하려면 exec 메소드를 실행해야 합니다. exec..
Building a data model withMongoDB and Mongoose [1]
웹/school(MEAN) 2021. 9. 29. Building a data model withMongoDB and Mongoose [1] 컨트롤러에 데이터를 넣지말고 db에 넣자 mvc패턴 관점에서 model에 데이터가 들어있어야 합니다. mongodb에 데이터를 추가하고 heroku에 올려보자. 스키마를 컴파일한게 모델입니다. db에서 직접 가져오는 것이 아닙니다. 복잡할 수 있습니다. db를 사용하는 에플리케이션이 나올 때마다 연동하는 부분을 계속 만들어야 합니다. 중간에 api를 두어서 모든 app이 api를 통해서 db에 접근해서 데이터를 접근할 수 있게끔 만듭시다. 거의 모든 app은 이러한 방식입니다. express, node.js를 이용해서 만듭니다. 즉, 라이브러리를 만드는 것 입니다. 처음에 만들때 어렵습니다. Mongoose라는 패키지 navitve드라이버에 있는 기능들을 가지고 있습니다. Mongoose를 만들어 봅시다..
Building a static sitewith Node and Express [2]
웹/school(MEAN) 2021. 9. 28. Building a static sitewith Node and Express [2] static사이트를 다시 만들어 봅시다. 데이터를 컨트롤러에서 view로 전달해주는 방식을 알아봅시다. 뷰에 데이터나, content가 들어있으면 안됩니다. 데이터가 어디서 오든 보여주는 역활만 하면 됩니다. 모델은 데이터를 저장하고 , 컨트롤러는 데이터를 처리하고 , 뷰는 처리된 데이터를 보여준다 . 저번에 뷰에 다 넣었는데 이번에는 데이터를 컨트롤러로 옮겨와보겠습니다. 최종적으로 컨트롤러에 있는 데이터가 모델로 넘어갈 것입니다. 모델은 데이터에 들어가 있습니다. 컨트롤러가 처리해서 뷰로 갑니다. 홈페이지부터 시작해봅시다 데이터가 컨트롤러에 정의되어 있습니다. 컨트롤러에 있는 변수에 저장하고 뷰에 전달합니다. 컨트롤러에 옮겨보겠습니다. 현제는 이렇게 되어있을 것입니다. 헤더부분을 바꿔보겠습니다. 가져오..
Building a static sitewith Node and Express [1]
웹/school(MEAN) 2021. 9. 15. Building a static sitewith Node and Express [1] static 사이트를 만들어보자 전체에서 동그라미 친 부분을 작성할 겁니다. 첫 번째 버전 뷰에 모든 데이터를 포함합니다. express에 라우터를 지정합니다. locations에는 3개의 페이지가 있고 about 는 1개의 페이지가 있습니다. 4개의 패이지와 url을 매핑시켜야 합니다. 표준을 지정해야 합니다. / = 홈페이지로 요청이 들어오면(=장소를 쭉나타내는 홈페이지) location = 세부사항을 보여주는 페이지가 되야할 것입니다. reivew = 리뷰를 달려고할 때 리뷰 폼을 나타내는 페이지가 될 것입니다. about = about페이지가 나와야 합니다. 라우터와 컨트롤러를 분리시켜야 합니다. 컨트롤러를 Collection으로 나눕니다. Locations과 Others로 나눕시다. 아키택쳐 관..
Creating and setting upa MEAN project [2]
웹/school(MEAN) 2021. 9. 14. Creating and setting upa MEAN project [2] MVC 환경 만드는것 Bootstrap 레이아웃으로 추가하는것 Git, Heroku 사용하는 방법 MVC로 Node, Express 를 만들어야 합니다. 강한 결합을 느슨하게 만들려고 합니다. 새의 눈으로 MVC를 봐봅시다. MVC아키텍처 루프는 1. 요청을 받습니다. 2. 라우터를 통해 컨트롤러로 보냅니다. 3. 데이터가 필요하면 모델에다가 데이터를 요청합니다. 4. 컨트롤러가 응답합니다. 5. 컨트롤러는 뷰와 데이터를 합쳐서 요청자에게 응답을 보내줍니다. 그림으로 보면 라우터가 요청을 받고 컨트롤러가 받습니다. 모델에게 데이터 요청하고 받습니다. 컨트롤러가 데이터와 뷰를 합쳐서 랜터링 해서 사용자에게 줍니다. 폴더 구조를 보면 왼쪽이 저번에 만들었떤 express 프로젝트 입니다. 이거를 우리가 MV..
Creating and setting upa MEAN project
웹/school(MEAN) 2021. 9. 8. Creating and setting upa MEAN project MEAN 프로젝트 설정하기 이번에는 위에부분만! 이번에 2가지 해봅시다. 개발환경을 구축해봅시다. NPM = 노드 페키지 매니저 노드에서 필요하는 각종 패키지를 관리하는 툴 패키지 매니저는 package.json으로 파일을 관리합니다. 좀더 자세히 살펴봅시다 모듈 하나하나를 개발자가 관리를 하려면 번거롭고 힘드니, package.json이 탄생했습니다. pakage.json 모양 간단한 명령 하나로 파일이 생성됩니다. 필요로하는 모듈들을 설치하면 자동으로 dependencies에 들어갑니다. 모듈들이 버전번호와 함께 들어이는 곳이 'dependencies'에 있습니다. dependencies파일에 있는 것을 모두 한꺼번에 설치한는 방법 npm install 치면 한꺼번에 설치가 됩니다. 루트 밑에 nod..

티스토리툴바