본문 바로가기

웹

Building a single page application with Angular Foundations
웹/school(MEAN) 2021. 11. 10. Building a single page application with Angular Foundations 완전하게 싱글 페이지 앱으로 바꿔봅시다. 지난시간에 express로 서버에서 전체 실행하였는데 angular를 사용하여 브라우저에서 모두 실행해도록 바꿉시다. express 전체내용을 angular로 바꿉니다. 페이지 사이를 순회학 위한 angular 라우터를 추가합니다. homepage와 about 페이지도 angular에다가 추가합니다. geolocation 기능도 추가합니디. 앵귤러에서 네비게이션을 만드는 법 앵귤러에 설정은 앵귤러 라우터를 사용해야지고 라우팅을 해줘야 합니다. 차이점이 있는데요 앵귤러 SPA는 전체 애플리케이션이 브라우저에 다운이 되고 브라우저에서 실행되기 때문에 페이지 옮겨다닐 때 마다 서버에 요청할 필요가 없습니다. 라우터를 정의하려면 app.module.ts에 importin..
Creating an Angularapplication with TypeScript [2]
웹/school(MEAN) 2021. 11. 9. Creating an Angularapplication with TypeScript [2] service라는 빌딩 블록을 써봅시다. 이걸 이용해 api를 호출하는 과정을 배웁시다. Service를 봅시다. ng generate service loc8r-data 라고 쓰면 기본적인 컴포넌트가 생성됩니다. Service에서 HTTP 요청을 처리하는 법 Service에서 HTTP 요청을 처리하는 법 은 비동기적으로 실행됩니다. Observalbe이라는 형태로 데이터를 반환시켜 줍니다. 전체 데이터 내용을 반환 받고 싶다면 Pormise로 변환을 시켜주면 됩니다. Observable과 promise 알아봅시다. 둘다 비동기 요청을 처리하는 것 입니다. HTTP 요청을 하고 Promise 를 반환받도록 서비스를 설정하려면 HTTP 서비스를 현재 서비스에 주입해야 합니다. HTTP 서비스를 import ..
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..
크롬 공룡게임 만들기
웹/간단한 프로젝트 2021. 10. 21. 크롬 공룡게임 만들기 이 글은 https://www.youtube.com/watch?v=qkTtmgCjHhM 보고 공부한 글 입니다. 게임 개발 하려면 3가지를 알아야 합니다. 1. 화면에 네모, 원 드릴 수 있어야 합니다. 2. 프레임마다 코드실행 가능하게 해야 합니다.(애니메이션 처럼 보이게 하려고) 3. collision check 할 수 있어야 합니다.(충돌을 관리할 수 있어야 합니다.) 등장 캐릭터의 속성부터 object자료에 정리해두면 편리합니다. 어떤 좌표에서 공룡이 등장할 껀지 같은거요 사이즈도 마찬가지죠 fillRect()속성은 하드코딩 했습니다. (10,10) 위치에다가 (100,100) 크기 네모 그려주세요 하는 것입니다. x와 y 값을 넣으면 더 편리 하겠죠? 장애물을 그려봅시다 장애물들은 각각 다른 특..
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가 들어있으면 안됩니다. 데이터가 어디서 오든 보여주는 역활만 하면 됩니다. 모델은 데이터를 저장하고 , 컨트롤러는 데이터를 처리하고 , 뷰는 처리된 데이터를 보여준다 . 저번에 뷰에 다 넣었는데 이번에는 데이터를 컨트롤러로 옮겨와보겠습니다. 최종적으로 컨트롤러에 있는 데이터가 모델로 넘어갈 것입니다. 모델은 데이터에 들어가 있습니다. 컨트롤러가 처리해서 뷰로 갑니다. 홈페이지부터 시작해봅시다 데이터가 컨트롤러에 정의되어 있습니다. 컨트롤러에 있는 변수에 저장하고 뷰에 전달합니다. 컨트롤러에 옮겨보겠습니다. 현제는 이렇게 되어있을 것입니다. 헤더부분을 바꿔보겠습니다. 가져오..

티스토리툴바