본문 바로가기

분류 전체보기158

Vue.js 3 - Proxy 설정 Proxy 클라이언트와 서버가 별도의 포트를 사용할때 클라이언트가 서버로 HTTP요청을 하게 되면 CORS 문제가 발생한다 해당 문제를 해결하기 위해 Proxy 서버 사용한다 . Proxy 서버 프록시 서버 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수있게 해주는 응용 프로그램 서버 클라이언트 사이의 중계기로써 대리로 통신을 수행하는 것을 프록시라 한다 CORS Cross-Origin Resource Sharing의 줄임말로, 한국어로 직역하면 교차 출처 리소스 공유라고 해석할 수 있다. 여기서 “교차 출처”라고 하는 것은 “다른 출처”를 의미 웹 어플리케이션에서 도메인,포트 프로토콜이 다른곳으로 HTTP 요청을 보낼 수 없도록 브라우저가 요청을 막는 보안 정책 vue.config.. 2023. 2. 21.
Springboot - 생성자 주입 , 필드 주입 방식, 수정자 주입 방식의 차이점 & 생성자 주입 방식을 권하는 이유? @Autowired InquiryService inquirService; 위에 코드를 보면 나는 컨트롤러를 구성할 때 필드 주입 방식을 사용하였다. 이렇게 컨트롤러를 구성했을 때 선배들한테 피드백을 받았다. 필드 주입 방식이 아닌 생성자 주입 방식으로 처리를 하라는 피드백 이었다. 나는 궁금해서 생성자 주입 방식 필드 주입 방식 수정자 주입 방식의 차이점을 공부를 해보았다. 우선 위에 설명 했듯이 스프링 프레임워크에 의존성을 주입하는 방식은 3가지가 있다. 1. 생성자 주입 public class AdminController { private final MemberService memberservice; private final AdminService adminService; @Autowired // (.. 2023. 2. 20.
MariaDB error 1005 : Foreign key constraint is incorrectly formed 해결하는 법 MariaDB에 외래키를 적용하다가 errno: 150 "Foreign key constraint is incorrectly formed" 이러한 오류 났습니다.. ㅎ.. 1. 데이터 타입이 일치여부를 확인했습니다. 메인키가 VARCHAR(20)면 외래키도 VARCHAR(20)여야 합니다. 2. 기본키와 참조하려는 외래키가 모두 NOT NULL 체크여부 3. 참조하는 키(Reference Key)가 기본키 혹은 유니크 여부? 모두 이상 없었습니다.. 그래도 계속 에러해결이 안되서 컬럼명에 오타가 있나 몇번이나 확인해봤는데 안되더라구요.. 구글의 힘을 빌려 서치를 하다가 결국에 문제를 찾았습니다. !! 바로.. ! 기본키에는 Charset 과 Collation 이 utf8mb4 로 되어있었고 외래키에는 u.. 2023. 2. 17.
Springboot - ResponseEntity란? ResponseEntity란? Spring Framework에서 제공하는 클래스 중 HttpEntity라는 클래스가 존재한다. 이것은 응답자체의 독립된 값이나 표현형태로, 사용자의 HttpRequest에 대한 응답 데이터를 포함하는 클래스이다. 따라서 HttpStatus, HttpHeaders, HttpBody를 포함한다. H HttpEnityt를 상속받으며, RestTemplate(서버와 서버간 통신을 쉽게해줌) 및 @Controller메서드에 사용하고 있다. Response header : 웹서버가 웹브라우저에 응답하는 메시지 Reponse body : 데이터 값 ResponseEntity 사용법 String 내부에서 친절하게 ResponseEntity 객체가 구현이 되어있다. 생성자에 status .. 2023. 2. 15.
Springboot - Lombok 라이브러리에서 자주 사용하는 애노테이션 Lombok 라이브러리 Lombok 라이브러리는 반복적인 Getter/Setter, ToString과 같은 반복적인 자바 코드를 컴파일할 때 자동으로 생성해주는 라이브러리 입니다. Lombok 라이브러리를 사용하면 반복적인 소스코드를 제거할 수 있으므로 코드를 좀 더 깔끔하게 작성할 수 있습니다. Lombok을 사용하기 위해서 mvnrepository 에서 lombok을 검색하여 pom.xml에 의존성을 다음과 같이 추가합니다. Lombok 라이브러리에서 자주 사용하는 애노테이션 애노테이션 설명 @Getter/Setter 코드를 컴파일할 때 속성들에 대한 Getter/Setter 메서드 생성 @ToString toString() 메서드 생성 @ToString(exclude={"변수명"}) 원하지 않은 속.. 2023. 2. 14.
Java - 배열을 문자열로 합치기 배열을 문자열로 합치는 방법 기본 String[] color = {"red", "bule", "green", "orange", "yellow"}; String joinString = String.join(", ", color); List 타입 List color = List.of("red", "bule", "green", "orange", "yellow") String joinString = String.join(", ", color); 실행결과 : red, bule, green, orange, yellow Arrays.toString String[] color = {"red", "bule", "green", "orange", "yellow"}; String str = Arrays.toString(com.. 2023. 2. 3.
Springboot @Scheduled 애노테이션 쓰레드 문제 쓰레드 풀 설정 기본적으로 @EnableScheduling 어노테이션을 사용 시 작업을 실행할 스케줄링을 위해서 스레드가 하나만 있는 스레드 풀을 만듭니다. @Scheduled 작업은 대기열에 쌓이게 되며 단일 스레드에 의해서만 실행됩니다. 여러 작업을 제시간에 맞추어서 실행하기 위해서는 스레드를 늘릴 필요가 있을 것입니다. SchedulingConfigurer 인터페이스를 구현하여 설정을 변경할 수 있습니다. setThreadNamePrefix를 이용하여 로그로 남길시 현재 실행하는 쓰레드 명 Prefix를 붙일 수 있습니다. @Configuration public class SchedulerConfig implements SchedulingConfigurer { @Value("${thread.pool.. 2023. 1. 19.
Vue - 네비게이션 가드 네비게이션 가드란? 네비게이션 가드(navigation guard)란 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술입니다. 설치 npm install vuex --save main.js 에 추가 import store from './store' createApp(App) .use(store) .use(router) .use(ElementPlus) .use(VueMoment) .mount('#app') 위 코드 추가하기 router / index.js 에 아래코드 추가 { path: '/send/sendListBoard', name: 'sendListBoard', component: () => impor.. 2023. 1. 13.
Vue3.js - 로컬스토리지 사용(localStorage) 개요 Stringboot Vue3.js 로 문자발송프로젝트 진행 중 백엔드 회원가입 dto 에 유저아이디(memId) 가 있다. 이거 유저아이디를 foreign 키로 참조 하고 있는 아이가 발송테이블에 memId 가 있다. 문제는 발송 등록 할 때 로그인한 회원 아이디로 문자내용 시간 등 DB에 insert 하는건데 memid 를 어떻게 가져올까 하다가 Vue3.js 에 로컬스토리지를 사용해 보기로 했다. localStorage란? localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다. 저장한 데이터는 세션간에 공유됩니다. 즉, 세션이 바뀌어도 저장한 데이터가 유지됩니다. localStorage 메서드 setItem() - key, value 추가하기 .. 2023. 1. 13.
Vue3.js - 회원가입 유효성 검사 templat MJCrossShot 회원가입 아이디는 영문, 숫자를 포함한 4자이상 20자 이내이여야 합니다. 중복체크 비밀번호는 영문 + 숫자를 포함한 4자이상 20자 이내이여야 합니다. 이름이 올바르지 않습니다. 이메일 형식이 올바르지 않습니다. 다시 한번 확인 해주세요 휴대전화번호 형식이 올바르지 않습니다. 가입하기 v-show boolean데이터로 제어한다. 기본값 false watch `v-model`로 걸어둔 변수랑 input창이 변하는것을 `watch`로 감시하고 변경이되면 `methods`가 실행된다. 따라서 실시간으로 이메일 형식이 맞는지 판단할 수 있다. 'userDatas.memId': function () { this.checkId() }, 'userDatas.pwd': functi.. 2023. 1. 13.

티스토리툴바