angular (3) 썸네일형 리스트형 spring + JWT + Angular 프로젝트 (0) - 프로젝트 시작 Spring Boot와 Angular4를 활용하여 RestFul한 서비스를 만드는 스터디 프로젝트를 진행한다. 백엔드는 Spring boot와 security 그리고 JWT(JSON Web Token)을 이용하여 HTTP Stateless한 토큰 기반의 인증을 구현하고 프론트엔드는 Angular4, Bootstrap등을 연동하여 대시보드 형태의 애플리케이션을 개발해보겠다. 개발 스택을 요약하면 아래와 같다. Component Tech Frontend Angular 4+ Backend Spring Boot, Java 8+ Security Spring Security, JWT Database H2 Database Persistence JPA API Documentation Swagger-UI Client B.. [Angular] Router 라우터 정리 Angular2 버전 이후를 기준으로 정리한 글입니다. 라우터는 URL을 사용하여 특정 영역에 어떤 뷰를 보여 줄지 결정하는 기능을 제공한다. 전통적인 서버사이드 렌더링을 하는 웹 사이트는 주소가 바뀔 때마다 서버에 전체 페이지를 요청하고 전체 페이지를 화면에 렌더링한다. 매 요청시 전체 페이지를 새로 랜더링하는 것은 비효율적이기 때문에 라우터를 이용하여 필요한 부분만 랜더링을 한다면 효율적일 것이다. 라우터는 URL에 해당하는 컴포넌트를 화면에 노출하고 네비게이션을 할 수 있는 기능을 가지고 있다. Router 구성 요소 Router – 라우터를 구현하는 객체이다. Navigate() 함수와 navigateByUrl() 함수를 사용하여 경로를 이동할 수 있다. RouterOulet – 라우터가 컴포넌트.. [Angular] 앵귤러 데이터 바인딩 정리 Angular2 버전 이후를 기준으로 정리한 글입니다. 앵귤러의 데이터 바인딩은 컴포넌트와 뷰 사이에 연결 고리를 맺는 것이다. 앵귤러에는 데이터 흐름에 따라 크게 단방향 바인딩과 양방향 바인딩이 있고 단방향 바인딩의 경우 세부적으로 삽입식, 프로퍼티 바인딩, 이벤트 바인딩 존재 한다. 아래 그림은 DOM과 Componnent 사이에 앵귤러 데이터 바인딩을 설명한 것이다. 1. 삽입식(interpolation) {{userName}} {{getTitle()}} 삽입식은 이중 중괄호 사이에 컴포넌트의 변수 혹은 함수를 넣으면 연산의 결과 문자열이 뷰에 반영된다. 삽입식에서는 오래 걸리는 연산이 존재하는 함수를 이용할 경우 심각한 성능 저하가 발생할 수 있기 때문에 주의해야 한다. 2. 프로퍼티 바인딩 프로.. 이전 1 다음
