🌱 이번 장의 스터디 범위 스프링 시큐리티를 이용한 구글 로그인 연동 방법 🌱 구글 로그인 연동하기 사용자 정보를 담당한 도메인인 User 클래스 생성 // domain/user/User.java @Getter @NoArgsConstructor @Entity public class User extends BaseTimeEntity { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(nullable = false) private String name; @Column(nullable = false) private String email; @Column private String picture; /* @Enumer..
🌱 구글 서비스에 신규 서비스를 생성해 인증 정보 발급받기 여기서 발급된 인증 정보 (clientId, clientSecret)를 통해서 로그인 기능과 소셜 서비스 기능을 사용 1. 구글 클라우드 플랫폼 주소로 이동 (https://console.cloud.google.com) 2. 프로젝트 선택 3. 새 프로젝트 4. 등록될 서비스의 이름 입력 예) freelec-springboot2-webservice 5. 왼쪽 메뉴 탭의 API 및 서비스 카테고리로 이동 6. 사용자 인증 정보 7. 사용자 인증 정보 만들기 8. 로그인은 OAuth 클라이언트 ID로 구현 9. 동의 화면 구성 애플리케이션 이름 : 구글 로그인 시 사용자에게 노출될 애플리케이션 이름 → freelec-springboot2-webser..
🌱 이번 장의 스터디 범위 스프링 부트 1.5와 스프링 부트 2.0에서 시큐리티 설정의 차이점 🌱 스프링 시큐리티란? 막강한 인증과 인가 기능을 가진 프레임워크 스프링 기반의 애플리케이션에서의 보안을 위한 표준 확장성을 고려한 프레임워크이기 때문에 손쉽게 추가, 변경 가능하며 1.5에서 2.0으로 넘어오면서 더욱 강력 🌱 로그인 기능을 id/password 방식보다 소셜 로그인 기능을 사용하는 이유는? 로그인 시 보안, 비밀번호 찾기, 회원가입 시 이메일 혹은 전화번호 인증, 비밀번호 변경, 회원정보 변경 직접 구현 시 앞선 목록을 모두 개발해야 하지만, OAuth 사용 시 이를 소셜에게 맡겨 서비스 개발에 집중 가능 🌱 스프링 부트 1.5 vs 스프링 부트 2.0 스프링 부트 1.5에서의 OAuth2 ..
🌱 이번 장의 스터디 범위 스프링 부트에서의 화면 처리 방법 js/css 선언 위치를 다르게 하여 웹사이트의 로딩 속도를 향상하는 방법 js 객체를 이용하여 브라우저의 전역 변수 충돌 문제를 회피하는 방법 🌱 게시글 삭제 화면 만들기 posts-update.mustache 코드 추가 : 삭제 버튼을 본문에 추가 // posts-update.mustache {{>layout/header}} 게시글 수정 ... 수정 완료 // btn-danger : 삭제 버튼을 수정 완료 버튼 옆에 추가한 후 해당 버튼 클릭 시 JS에서 이벤트를 수신 삭제 {{>layout/footer}} index.js 코드 추가 : 삭제 이벤트를 진행할 JS 코드 추가 // index.js var main = { init : funct..
🌱 이번 장의 스터디 범위 스프링 부트에서의 화면 처리 방법 js/css 선언 위치를 다르게 하여 웹사이트의 로딩 속도를 향상하는 방법 js 객체를 이용하여 브라우저의 전역 변수 충돌 문제를 회피하는 방법 🌱 게시글 수정 화면 만들기 PostsApiController로 수정 API는 이미 구현하였으니 바로 화면을 개발 posts-update.mustache 생성 : id와 author은 수정할 수 없으며 제목, 내용만 수정 가능 // posts-update.mustache {{>layout/header}} 게시글 수정 글 번호 /* {{post.id}} : 머스테치는 객체의 필드 접근 시 점으로 구분 즉, Post 클래스의 id에 대한 접근은 post.id로 사용 readly : Input 태그에 읽기 ..
🌱 이번 장의 스터디 범위 스프링 부트에서의 화면 처리 방법 js/css 선언 위치를 다르게 하여 웹사이트의 로딩 속도를 향상하는 방법 js 객체를 이용하여 브라우저의 전역 변수 충돌 문제를 회피하는 방법 🌱 전체 조회 화면 만들기 전체 조회를 위해 index.mustache의 UI 변경 // index.mustache {{>layout/header}} 스프링 부트로 시작하는 웹 서비스 Ver.2 글 등록 게시글번호 제목 작성자 최종수정일 // posts라는 List를 순회 == Java의 for문 {{#posts}} // {{변수명}} : List에서 뽑아낸 객체의 필드를 사용 {{id}} {{title}} {{author}} {{modifiedDate}} {{/posts}} {{>layout/foot..
🌱 이번 장의 스터디 범위 스프링 부트에서의 화면 처리 방법 js/css 선언 위치를 다르게 하여 웹사이트의 로딩 속도를 향상하는 방법 js 객체를 이용하여 브라우저의 전역 변수 충돌 문제를 회피하는 방법 🌱 게시글 등록 화면 만들기 PostsApiController로 API를 구현하였으니 바로 화면을 개발 외부 CDN을 사용해 프론트엔드 라이브러리 오픈소스인 부트스트랩과 제이쿼리를 이용해 화면을 만들어 볼 것 부트스트랩과 제이쿼리는 머스테치 화면 어디서나 필요하므로 레이아웃 방식으로 추가를 할 것 레이아웃 방식 : 공통 영역을 별도의 파일로 분리하여 필요한 곳에서 가져다 쓰는 방식 template 디렉토리에 layout 디렉토리를 생성 후, footer.mustache, header.mustache 파..
🌱 이번 장의 스터디 범위 스프링 부트에서의 화면 처리 방법 js/css 선언 위치를 다르게 하여 웹사이트의 로딩 속도를 향상하는 방법 js 객체를 이용하여 브라우저의 전역 변수 충돌 문제를 회피하는 방법 🌱 기본 페이지 만들기 build.gradle에 머스테치 스타터 의존성 등록 스프링 부트에서 공식 지원하는 템플릿 엔진이므로 추가 설정 없이 설치 후 의존성 하나만 추가 하면 완료 // build.gradle compile('org.springframework.boot:spring-boot-starter-mustache') 머스테치의 파일 위치는 src/main/resources/templates 첫 페이지를 담당할 index.mustache를 생성 // index.mustache 스프링 부트로 시작하..
