스프링 시큐리티(1) - 프로젝트 구성 및 의존성 추가
·
Back-End/Spring Security
프로젝트 생성 이번 시큐리티를 학습하기 위해서 프로젝트를 생성 합니다. 자바 버전 - 11 의존성 - 스프링 부트 웹 프로젝트를 생성 한 후, 컨트롤러를 하나 생성해 줍니다. package io.security.basicsecurity; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class SecurityController { @GetMapping("/") public String index(){ return "home"; } } 그 후에 서버를 실행시켜 확인해보면, localhost:808..
JPA 활용 - 주문 도메인 개발
·
Back-End/JPA
이전글 2023.02.23 - [Back-End/JPA] - JPA 활용 - 상품 도메인 개발 주문 도메인 개발 구현 기능 상품 주문 주문 내역 조회 주문 취소 순서 주문 엔티티, 주문상품 엔티티 개발 주문 리포지토리 개발 주문 서비스 개발 주문 검색 기능 개발 주문 기능 테스트 주문, 주문상품 엔티티 개발 주문 엔티티 코드 package jpabook.jpashop.domain; import lombok.Getter; import lombok.Setter; import javax.persistence.*; import java.time.LocalDateTime; import java.util.ArrayList; import java.util.List; @Entity @Table(name = "order..
JPA 활용 - 상품 도메인 개발
·
Back-End/JPA
이전글 2023.02.21 - [Back-End/JPA] - JPA 활용 - 회원 도메인 개발 및 테스트코드 작성 JPA 활용 - 회원 도메인 개발 및 테스트코드 작성 회원 도메인 개발하기 개발 순서 : 엔티티 설계 → 리포지토리, 서비스 개발 → 테스트 케이스 작성 및 검증 → 웹 계층 적용 앞에서는 엔티티 작성을 마쳤고, 이를 통해 애플리케이션 구현을 위 scoring.tistory.com 상품 도메인 개발 구현 기능 상품 등록 상품 목록 조회 상품 수정 순서 상품 엔티티 개발(비즈니스 로직 추가) 상품 리포지토리 개발 상품 서비스 개발 상품 기능 테스트 상품 엔티티 개발 기존의 상품 엔티티 코드에 비즈니스 로직을 추가한다. package jpabook.jpashop.domain.item; impor..
JPA 활용 - 회원 도메인 개발 및 테스트코드 작성
·
Back-End/JPA
회원 도메인 개발하기 개발 순서 : 엔티티 설계 → 리포지토리, 서비스 개발 → 테스트 케이스 작성 및 검증 → 웹 계층 적용 앞에서는 엔티티 작성을 마쳤고, 이를 통해 애플리케이션 구현을 위한 리포지토리와, 서비스를 작성할 것이다. 이번 애플리케이션 구조는 계층형 구조를 사용한다. controller, web : 웹 계층 service : 비즈니스 로직, 트랜잭션 처리 repository : JPA를 직접 사용하는 계층, 엔티티 매니저 사용 domain : 엔티티가 모여 있는 계층, 모든 계층에서 사용 회원 리포지토리 생성 @Repository public class MemberRepository { @PersistenceContext private EntityManager em; public void..
Angular - 데이터 공유(Inject, Service)
·
Front-End/Angular
모듈에서 다양한 기능을 사용할 수 있게 import를 통해서 외부 모듈을 참조하도록 하였습니다. Angular에서는 마치 컴포넌트에 주사기로 넣어주듯이 데이터를 전달 해줄수 있습니다. Inject를 사용하는 방법 데이터 생성 및 공유 /src/app/MyTypes.ts export declare type INFORMATION = { // 전달할 데이터 양식 data1 : string, data2 : number, data3 : any, } export const myData : INFORMATION = { // 내가 전달할 데이터 data1 : 'data', data2 : 1433, data3 : ['data3_1','data3_2'], } 전달할 데이터 양식과 해당하는 데이터를 만들어 줍니다. expo..
Angular - 데이터바인딩 심화
·
Front-End/Angular
ReactiveFormsModule 을 활용한 바인딩 사진처럼 N개를 그릴 데이터를 group으로 묶은뒤에 배열로 처리할 것입니다. 이해를 위해서 single이라는 배열이 아닌 단순한 대상을 1개 추가하였습니다. 기존 소스코드를 변경해 보겠습니다. dashboard.component.ts import {Component, OnInit} from '@angular/core'; import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms"; declare type MyType = { text: any; number: any; }; @Component({ selector: 'app-dashboard', templ..
Angular - 디렉티브, 반응형 모듈
·
Front-End/Angular
디렉티브 속성 디렉티브: html관련된 모양, 동작을 제어합니다. (ngClasss, ngStyle 등) 구조 디렉티브: 구조를 변경 할 떄 사용합니다. (ngif, ngFor, class 등) 속성 : html 속성에 값을 지정합니다(style, value, class 등) 반응형 모듈 사용 app모듈에 ReactiveFormsModule을 사용하게 추가합니다. app.module.ts @NgModule({ declarations: [ AppComponent, LoginComponent, DashboardComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule //반응형 폼 사용 ], providers: [], bootstrap: ..
Angular - 컴포넌트의 연결과 데이터 전달방법
·
Front-End/Angular
컴포넌트와 컴포넌트의 연결 앵귤러에서 index.html 과 main.ts 파일은 앵귤러가 가장 처음 동작하는 파일을 의미합니다. 컴포넌트 ts파일에 존재하는 셀렉터 값이 다른 컴포넌트 html파일 또는 index.html 파일에 사용된다! → 셀렉터를 다른 컴포넌트 html파일이나, index.html 파일에 등록해야만 컴포넌트가 생명(동작)을 부여받습니다. 셀렉터가 어디에도 사용되지 않는다면 해당 컴포넌트는 아무런 행동도 할 수 없습니다. 가장 맨 처음 만들어지는 app컴포넌트는 빈 화면으로 두는 경우가 많습니다. → 이는 app컴포넌트에 따라서 다양한 컴포넌트를 붙여두고 조건에 따라서 나타나게, 보이게 하기 위함입니다. (app컴포넌트는 다른 컴포넌트를 컨트롤하는 역할을 주로 합니다.) 컴포넌트와 ..
앵귤러란?
·
Front-End/Angular
앵귤러란? 앵귤러는 웹 화면을 구성하는 데 사용되는 프레임워크입니다. Javascript, Jquery 처럼 각종 명령어와 규칙을 통해서 웹 화면이 이벤트와 기능을 부여하고, 사용자가 원하는 행동을 하기 위해 만들어 졌습니다. 앵귤러는 타입스크립트 기반으로 앵귤러의 문법대로 개발하는 언어 라고 생각하면 될 것 같습니다. 기본 개발 환경구성 Node.js를 설치해야한다. - https://nodejs.org/ko/ 개발 도구를 설치 해야 한다. - https://code.visualstudio.com/ or 인텔리제이 타입스크립트를 Node.js의 라이브러리 설치명령어의 도움을 받아 설치한다. vs코드를 실행 시키고 Extensions 탭에서 Angular Snippets를 설치한다. → 코드 문법검사, ..
타입스크립트의 인터페이스
·
Front-End/TypeScript
타입스크립트 Interface 자바에서의 인터페이스는 추상 메소드와 를 정의한 클래스를 위주로 다루지만, 타입스크립트에서는 객체를 위주로 다룬다는 점에서 차이가 있습니다. 인터페이스는 두개의 시스템 사이에 상호 간 정의한 약속 혹은 규칙을 포괄하여 의미하는데, 이는 객체의 껍데기 또는 설계도와 비슷합니다. 여거 개의 함수와 여러개의 변수 등이 구조적으로 어떻게 결합되어야 하는지에 대한 약속입니다. interface Person { name: String; age?: number; //optional, 해당 속성은 명시해도 되고 안해도 된다. move(): void; //인터페이스에는 객체에 대한 정의 뿐만 아니라 함수에 대한 정의도 들어갈 수 있습니다. } var person1: Person = { na..