Dean83

다양하게 사용할 수 있겠지만, 기본적인 구조만 생각해 보면 MVC 패턴에 대입을 해볼 수 있을듯 하다.  구조를 정하지 않거나 모르면, 구성요소를 다 알고 있어도 어디에 어떤 항목을 사용해야 할지 몰라, 프로젝트 시작 단계 부터 난감 할 수 있다. View 대응각 화면 혹은 각 화면에 속한 모듈별로 소스코드를 나눠 구성한다. 두 군데 이상에서 사용되는 UI 요소는 모듈로 나누어 재사용 하는게 좋다.View에 해당하므로 css 파일과 연계가 필요하다. css 도 View 소스파일과 1:1 매칭이 되면 어떨까?  Model 대응커스텀 hook 을 생성하여 마치 클래스를 정의하듯 각 항목별로 클래스 정의간단한 처리 함수들을 포함 할 수 있음. Control 대응컨트롤 클래스를 두고, 비즈니스 로직에 따라, ..

장치의 특징을 파악하여 알맞은 css를 적용하기 위해 사용됨. 예를들어 스크린 사이즈, 스크린 orientation 등을 통해 조건에 맞는 css를 반영함. 연산자를 통해 if 문처럼 처리 가능.  연산자and : and와 동일, : or 역할not : ! 역할only : 모든 조건문이 참일 경우만 동작 유형screen : 화면print : 프린트 미리보기all : 모두speech : 마이크 등연산자에 사용되는 속성값width, heightmax-width, min-width 처럼 조합하여 가능orientationlandscapeportraithover 사용 예@media screen and (min-width : 1000px) { html{ display: grid; place..

함수 혹은 변수를 메모리에 상주 시키고 싶을때 사용하는 훅 으로, 시간이 오래 걸리는 항목을 메모리에 올려 속도 향상 이유로 쓰기도 한다.(빈번하게 호출되거나 할 경우) 혹은 const 처럼 한번만 계산되나, 결과값을 계속하여 사용할 경우 사용되기도 한다. 둘다 같은 소스코드 내에서 활용하기 위해 주로 사용된다.  인자값1번째 인자값은 콜백함수2번째 인자값은 useState 와 마찬가지로 배열을 받음. 빈배열 : 처음 1번만 호출되어 콜백함수를 호출하고 그 후론 계산된 값을 메모리에서 가져와 사용배열에 변수가 있을경우 : 해당 변수값이 변경될 때 마다 콜백함수 호출useMemo값 만 메모리에 담아둔다. 1번째 인자값으로 함수를 두더라도, 함수 결과값을 메모리에 담아 둔다import { useMemo } ..

@mixin 어노테이션은 @include 어노테이션과 한 세트 이다. css 정의를 할때, 다른곳에서 가져다 쓸 수 있게(함수 호출처럼) 해주는 어노테이션 이다. 함수 호출 처럼 사용 할 수 있기 때문에, 키워드, 동적 인자값 전달이 가능하며, @content 로 확장 할 수도 있다.  기본 예 ) @mixin test-style{ color : red; width : 10px;}...test1-style{ @include test-style;} 이런식으로 1개의 스타일을 설정한 후, 여러 스타일에서 호출하여 사용할때 사용한다.   함수 호출과 동일한 방식으로, 인자값을 넘겨 줄 수도 있다. @mixin test-style ($colorValue, $sizeValue){ color = $color..

DTO와 Entity 간 상호 변환을 위해 사용되는 어노테이션이다.  @Mapper 는 인터페이스에 붙이는 어노테이션이고, @Mapping 은 실제 상호 변환을 하는 함수명에 붙이는 어노테이션 이다.  @Mapping (source = "변수명", target = "변수명")소스 변수명을 타겟 변수명으로 치환하는 설정을 한다. 변수명이 여러개 일 경우 @Mapping 어노테이션을 해당 개수에 맞춰 여러개 붙여준다.  다음은 예제이다. /////Entity가 다음과 같다고 가정/////...@Entity@Getter@Setterpublic class EntityData{ ... private String val1; private String val2; private String val3; ..

서버 실행시 DB 테이블에 미리 데이터를 넣을 필요가 있을경우 사용(기본 or 필수 데이터) 3가지 방법이 있다.  데이터 넣기 (data.sql)resources -> data.sql 생성 -> 쿼리문 작성yml 파일 수정defer-datasource-initialization : 'true' 설정sql init mode always 설정...spring: jpa: ... defer-datasource-initialization: 'true' sql: init: continue-on-error: 'true' mode: always...데이터 넣기 (@Transactional, @EventListener 어노테이션 이용)@Component 를 이용해 클래..

S3 에 웹 호스팅을 하는방법을 설명한다. 순차적으로 진행해야 함. S3 -> CloudFront -> Route 53 순으로 설정 S3 버킷 생성만일 CORS Header 오류 발생시, 버킷명 -> 권한 -> CORS 에 다음을 추가[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "PUT", "POST", "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] }] CloudFront 배포 생성Origin domain 에 ..