전체 글 (49) 썸네일형 리스트형 Spring boot, react 이용한 블로그 개발 (1) - 프로젝트 구조 설정 블로그 애플리케이션을 개발하기에 앞서 먼저 기본 프로젝트 구조 틀을 잡고 진행을 하겠다. 일반적으로 스프링과 리액트를 이용하여 싱글 페이지 웹 애플리케이션을 개발할 때 크게 2가지 방법이 있다. 첫 번째는 하나의 스프링 프로젝트로 구성하고 해당 프로젝트 안에 프론트엔드 영역을 설정하는 것이다. 이렇게 하나의 레파지토리, IDE를 이용해서 개발을 진행하고 maven 등의 플러그인을 통해 빌드를 하기 때문에 한명의 개발자가 풀스택으로 빠르게 개발할 때 편리하다. 두 번째는 프론트와 백엔드의 프로젝트를 분리하고 각각 별도로 개발을 진행하는 방법이다. 이 경우에는 백엔드와 프론트를 프록시를 이용하여 연동하고 빌드는 개별적으로 한다. 프로젝트 규모가 커지고 개발자의 롤이 명확하다면 이와 같이 프로젝트를 분리하는 .. Spring boot, react 이용한 블로그 개발 (0) - 프로젝트 시작 최근에 프론트엔드의 관심이 생기면서 react를 공부하기 시작했다. 국내에 리액트 관련된 국내외 블로그와 국내에 출판된 책도 구매하여 많은 내용을 배울 수 있었다. 그러나 새로운 기술을 공부하는데는 이론도 중요하지만 역시 실제 프로젝트를 진행해 보는 것이다. 지금까지 학습한 내용을 바탕으로 프론트엔드는 리액트로 백엔드는 스프링 부트를 이용한 RestFul한 SPA(Single Page application) 형태의 블로그 애플리케이션을 개발할 것이다. 과거에 앵귤러를 기반으로 미니 프로젝트를 진행한적이 있는데 여러가지 일로 바빠지면서 소홀히하게 돼었고 결국 프로젝트 완성을 하지 못하였다. 이번 프로젝트에서는 프론트엔드, 백엔드를 모두 구현하고 실제 클라우드에 올려 서비스하는 것을 목표로 한다. 개발 내용.. spring + JWT + Angular 프로젝트 (3) - 회원가입을 위한 백엔드 개발 이번 포스팅에서는 회원가입을 위한 백엔드 DB 설계 및 유저등록 로직을 추가하겠다. Spring 서버와 DB 연동을 하기 위하여 ORM인 Hibernate 기반의 Spring JPA를 이용할 것이다. 회원가입의 가장 기본이 되는 유저 엔티티와 권한 엔티티를 설계하고 프론트에서 REST로 유저의 정보를 받아 패스워드를 암호화하고 권한을 설정하여 DB에 적재하는 로직을 정리할 것이다. 이 프로젝트에는 H2 DB를 사용하고 hibernate.ddl-auto 설정을 create-drop으로 설정하였기 때문에 코드에 엔테티를 정의해놓으면 애플리케이션 구동시 h2에 자동으로 스키마가 생성된다. 기본적으로 user, authority, user_authority 테이블이 필요하다. 1. Authority 엔티티 생성.. spring + JWT + Angular 프로젝트 (2) - Security 설정 이번 포스팅에서는 스프링 시큐리티 기본적인 설정과 JWT를 연동하는 과정에 대해 정리한다. 1. pom.xml 설정하기 Spring Security와 Jwt를 이용하기 위한 라이브러리 추가를 위해 pom.xml에 아래와 같이 추가한다. jjwt 라이브러리는 jwt 토큰을 생성하고 검증하는 기능등을 제공한다. org.springframework.boot spring-boot-starter-security org.springframework.security spring-security-test test org.springframework.security spring-security-data io.jsonwebtoken jjwt ${jjwt.version} 2. 자바 config 설정하기 스프링 시큐리티 설정.. bootstrap 4에서 navbar-toggleable 클래스가 작동하지 않는 경우 부트스트랩 4 Beta부터 navbar-toggleable 클래스가 정상적으로 작동하지 않는다. 확인 결과 부트스트랩 4 Beta부터 navbar-toggleable 클래스가 navbar-expand 클래스로 변경되었다. 아래는 부트스트랩 4 Beta navbar 관련 문서 페이지로 관련 예제를 확인할 수 있다.-> https://getbootstrap.com/docs/4.0/components/navbar spring + JWT + Angular 프로젝트 (1) - JWT란? 이번 프로젝트에서는 서버사이드의 Spring boot와 클라이언트 사이드의 Angular와의 연동시 로그인 및 API 인증을 위하여 전통적인 세션을 통한 관리를 하지 않고 Stateless한 RESTful API를 구현하기 위하여 JWT 기반의 인증을 이용할 것이다. 그에 먼저 JWT에 대해 간단히 정리하면 아래와 같다. JWT (JSON Web Token) 란? JWT는 JSON 객체로서 안전하게 정보를 전송할 수 있는 작고 self-contained 방법을 정의하는 표준이다. 이 정보는 디지털로 서명되어 있기 때문에 신뢰할 수 있으며 HMAC 알고리즘 또는 RSA를 사용하는 공개 / 개인키 쌍을 사용하여 서명할 수 있다. 주로 회원 인증이나 작은 데이터 전달에 사용된다. JWT 구조 JWT는 “.”을.. 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 – 라우터가 컴포넌트.. 이전 1 2 3 4 5 ··· 7 다음
