본문 바로가기

웹/school(MEAN)

Using an authentication API in Angular applications [2]
웹/school(MEAN) 2021. 12. 7. Using an authentication API in Angular applications [2] 앵귤러에서 인증 api를 사용하는 방법을 알아봅시다. 우리가 사용자를 인증하는 법을 알아냈습니다. 이제 사용하는 법을 알아봅시다. 방문자의 로그인 여부에 따라 내비게이션을 변경한다 리뷰를 작성할 때 사용자 정보를 사용한다 내비게이션 링크를 오른쪽 상단에 추가합니다. 로그인하면 -> 사용자 이름 표시 로그아웃 버튼도 만들어야 합니다. framwork 컴포넌트에 설정하면 됩니다. 라우터의 윤곽을 정의하는 루트 컴포넌트 입니다. 로그아웃을 클릭했을때 작동되는 링크를 만들어야 합니다. 인증서비스와 3가지 메소드를 추가해봅시다. 로그 아웃을 트리거하는 클릭 이벤트 (doLogout) 현재 사용자 로그인 상태를 확인하는 메소드(isLoggedIn()) 현재 사용자 이름을 얻는 메소드(getUsername()) 프레..
Using an authentication API in Angular applications [1]
웹/school(MEAN) 2021. 12. 1. Using an authentication API in Angular applications [1] 백엔드에서 돌아가는 인증기능을 angular에서 구현해보기 특히 Angular HTTP 클라이언트 라이브러리와 localStorage 를 사용하는 방법을 살펴본다 localStorage를 이용해서 인증을 하는 방법을 알아봅니다. 사용자가 방금 로그인 했고 api가 JWT를 반환했다고 가정하자 토큰으로 뭘할까요? 지금까지 브라우저 메모리에 토큰을 저장했었습니다. 그런대 사용자가 새로고침하면 모든 정보가 날아갑니다. 좀더 지속적으로 저장할 수 있는 공간에 저장을 해봅시다. 1.Cookie를 이용하는 방법 2. localStorage를 이용하는 방법 SPA는 전체 내용이 이미 브라우저에 다운받아져 있습니다. Cookie를 이용해서 서버에 뭔가 보낼 필요가 없습니다. HTML5 api중 하나인 localStor..
Authenticating users,managing sessions, and securing APIs [2]
웹/school(MEAN) 2021. 11. 30. Authenticating users,managing sessions, and securing APIs [2] PASSport라는 것을 이용해서 인증을 쉽게 만듭시다. strategy라는 것을 통해서 여러 인증방법을 가져다가 쓸 수 있습니다. 우리는 local strategy를 사용해서 인증하는 방법을 알아봅시다. 일단 설치합시다. passport는 api가 사용합니다. 그래서 api 폴더에 config를 생성합시다. Passport use를 사용하면 strategy를 생성할 수 있습니다. 첫 번째 파라미터는 options 입니다. 두 번째 파라미터에서 대부분의 일들이 일어납니다. 첫 번째 파라미터는 options입니다. 유저네임 필드는 email로 옵션을 줍니다. 두 번째 파라미터(함수)에서 대부분의 일들이 일어납니다. db에서 user와 password를 찾아옵시다. 만약 db와 일치하면 사용자 객체를 반환합..
Authenticating users,managing sessions, and securing APIs [1]
웹/school(MEAN) 2021. 11. 24. Authenticating users,managing sessions, and securing APIs [1] 앵귤러에서 인증을 관리해 봅시다. 전통적인 서버 기반에 애플리케이션 인증을 넣기 옛날에는 서버에 정보를 넘기고 서버는 데이터를 보고 로그인을 시켜줍니다. 서버는 세션 정보를 사용하여 사용자의 브라우저에 쿠키를 설정하거나 설정하지 않을 수 있다 세션이 연결된 상태에서 서버는 세션의 유효성을 검사합니다. 브라우저가 새로운 페이지에 접근하려면 쿠키를 보냅니다. 서버는 이 브라우저가 누구인지 압니다 "지난번에 접근했던 사람" 인증이 유효하면 서버는 페이지를 브라우저에게 보냅니다. 세션은 브라우저를 빠져나갈 때 까지를 의미 합니다. 사용자가 db에 접근해서 저장하고 싶은 때 유효한 세션을 통해서 저장할 수 있습니다. MEAN 스택에서의 전통적인 방법 접근 MEAN 스택에서는 어울리지 않습니다. node.js는 사..
Building an SPA with Angular - The next level[2]
웹/school(MEAN) 2021. 11. 23. Building an SPA with Angular - The next level[2] add review 페이지를 만들고 데이터를 제출하는 방법부터 배웁니다. 폼 이동 대신 페이지에 폼을 인라인으로 표시합니다. 입력 필드에 "데이터 바인딩" Express에서 만든 html을 가져와 씁시다. 앵귤러에서는 페이지를 변경하지 않고 데이터를 바인딩시켜줘야 합니다. [()] ="bingdingName" 데이터를 넣을 수 있습니다. HTML에서 ngModel을 사용하려면 FormsModule 및 REactiveFormsModuel을 app.module.ts로 추가해야 합니다. newReview로 묶어서 api에 보냅시다. 각 속성은 아직 받아오기 전이니 디폴드 값으로 지정해 줍시다. 컴포넌트에 정의되어 있으니 html에서도 사용할 수 있습니다. ngModel로 데이터 바인딩을 시킵니다. select..
Building an SPA with Angular - The next level[1]
웹/school(MEAN) 2021. 11. 17. Building an SPA with Angular - The next level[1] express로 짠 외부 기능을 앵귤러로 바꿔볼 것입니다. 디테일 페이지를 만들어야 합니다. 디테일 페이지의 레이아웃을 보면 컴포넌트를 어떻게 사용돼야 하는지 알 수 있습니다. 스케치한 내용입니다. 각각 컴포넌트들은 프레임워크 컴포넌트 안에 들어가 있습니다. 남은 컴포넌트는 디테일 페이지 컴포넌트, 로케이션 디테일 컴포넌트입니다. 3개의 컴포넌트를 포함하고 있는 details-page 컴포넌트를 만들어 봅시다. location details 컴포넌트 만들기 details-page 컴포넌트 만들기 3개를 포함하는 컴포넌트입니다. 레이아웃을 만들었습니다. 이 페이지를 볼 수 있게 라우터 설정을 해야 합니다. url을 설정한다는 뜻입니다. 라우팅 정의는 app.module.ts에서 합니다. :locationI..
Building a single page application with Angular Foundations [2]
웹/school(MEAN) 2021. 11. 16. Building a single page application with Angular Foundations [2] 지금까지 가짜 데이터를 써왔습니다. 실제 사용자의 경위도 좌표 값을 얻어와서 사용해봅시다. 사용자의 위치를 찾는 컴포턴트는 재사용할 가능성이 높습니다. 최신 브라우저에는 사용자 위치 좌표를 줍니다. HTML5 geolcoatoin API는 3개의 메서드가 있습니다. 2개의 파라미터를 사용합니다. geCurrentPostion(성공 콜백, 에러 콜백)을 사용해서 수행을 합니다. getCurrenPosition()으로 현재 위치를 가져옵니다. cbSuccess안에는 position이 있습니다. homlist 컴포넌트에 정보를 가져와야 합니다. 컴포넌트에 import 하고 데코레이터에 서비스를 추가시키고 서비스를 생성자에 넣으면 됩니다. 이 작업을 마치면 home list 컴포넌트 내에서 geolocation..
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 ..

티스토리툴바