PRDEN

1. 웹뷰(WebView)란? 웹뷰란 쉽게 말해서 앱 안에 HTML iframe을 넣어놓은 것이다. 다시 말해, 웹뷰는 앱 내에 웹 브라우저를 넣는 것이다. 웹뷰는 HTML 기반인 만큼 앱보다 반응성이 약하고, 애니메이션 등의 다양한 UI 효과를 넣기 어렵다. 2. 안드로이드 -> 자바스크립트 호출 case1) React.js Vue.js같은 컴포넌트 기반의 SPA 방식으로 개발 된 웹 프론트에서 컴포넌트 라이프 사이클에 맞춰 이벤트 리스너를 추가, 삭제 하는 방식 1. Front side( 자바스크립트 영역 ) 네이티브에서 호출하기 위한 함수를 CustomEvent로 만들고 window.함수명으로 할당 useEffect(() => { window.sayHello = new CustomEvent("Nat..

이벤트나 함수가 실행되는 빈도를 줄여 서버에서 과부하 걸리지 않게 하기 위함 1. Debounce : 여러 번 발생하는 이벤트에서 가장 마지막 이벤트 만을 실행 되도록 만드는 것 예시) 프론트쪽에서 검색할 때 ex) 0.5초 0.5초 안에 이벤트가 일어났으면 초기화 계속하다가 0.5초가 지나도 아무 이벤트 일어나지 않으면 서버에 콜(submit) 날리는 것 2. Throttle: 개념 : 여러 번 발생하는 이벤트를 일정시간 동안 한 번만 실행 되도록 만드는 것. 일정 시간 동안 만 기다리고,이벤트를 실행시킨 후 재차 기다림. ex) 스크롤사용할 때 EventListener 폭주 - 브라우저 죽을 수 있다. 0.5초 동안 EventListener 한 번만 실행하겠다고 하는 것 -> Debounce 는 입력..

1. preventDefault : a 태그나 submit 태그는 고유의 동작이 있다. 예를 들어 페이지 이동 or form안에 있는 input전송 등. preventDefault는 이 기본 동작을 막아준다. a 태그에 preventDefault걸면 href기능 막아준다. 2.stopPrapagation: a 태그가 li, ul 태그에 순차적으로 감싸져 있을 때 a 태그 onclick -> li 태그 onclick -> ul태그 onclick으로 이벤트가 확산되어 감. 이를 막아주는 것이 stopPropagation(이벤트가 상위 엘리먼트에게 전달되지 않도록 막아주는 것) https://ismydream.tistory.com/98 event.stopPropagation(), event.preventDef..

1. Vue LifeCycle Vue 인스턴스는 생성(create) -> DOM에 부착(mount) -> 업데이트(update) -> 사라짐(destroy) 과정을 거친다. 1) beforeCreate : Vue 인스턴스가 초기화된 직후 발생으로 DOM에 추가되기 전이라 this.$el에 접근할 수 없다. 또한, data, event, watcher에도 접근하기 전이라 data, methods에도 접근 불가능하다. 2) created : data를 반응형으로 추적할 수 있게 되고, computed, methods, watch 등이 활성화 되어 접근이 가능하게 된다. 그러나 아직 DOM에는 추가되지 않은 상태이다. - >data에 직접 접근이 가능해 data를 세팅해야하거나 이벤트 리스너를 선언해야 한다면..

1. 의미 객체를 컴퓨터에 저장했다가 다음에 다시 꺼내 쓸 때 혹은 네트워크를 통해 컴퓨터 간에 서로 객체를 주고받을 때 직렬화를 통해 가능하다.(직렬화 한 후에 저장하거나 전송하고 필요할 때 역직렬화해서 꺼내 쓴다.) 직렬화란 객체를 데이터 스트림(Byte형태로 변환)으로 만드는 것을 의미한다. 다시 말해 객체에 저장된 데이터를 스트림에 쓰기(write) 위해 연속적인(serial) 데이터로 변환하는 것을 말한다. 반대로 스트림으로부터 데이터를 읽어서 객체를 만드는 것을 역직렬화(deserialization)라고 한다. ◇객체란? 클래스에 정의된 인스턴스 변수의 집합(클래스 변수나 클래스 메서드가 포함되지 않음)을 의미한다. 따라서 객체를 저장한다고 하는 것은 객체의 모든 인스턴스 변수의 값을 저장한다..

1. 스프링 데이터의 Page, Pageable을 활용 // List search(MemberSerarchCondition condition); 커스텀하게 이런 쿼리 만들 때 public interface MemberRepositoryCustom { List search(MemberSerarchCondition condition); Page searchPageSimple(MemberSerarchCondition condition, Pageable, pageable); Page searchPageComplex(MemberSerarchCondition condition, Pageable, pageable); } 2. 전체 카운트를 한번에 조회하는 단순한 방법 fetchReult를 통해서 컨텐츠용, 페이징용 ..

1. Spring Data JPA 리포지토리 ex) interface를 만든다. //User entity와 userId 들어가서Long public interface UserRepository extends JpaRepository { @EntityGraph(attributePaths = "authorities") Optional findOneWithAuthoritiesByUsername(String username); } 2. Spring Data JPA 사용자 정의 Repository 순서 : 가. 사용자 정의 인터페이스 작성 -> 나. 사용자 정의 인터페이스 구현 -> 다. 스프링 데이터 리포지토리에 사용자 정의 인터페이스 상속 1) 기존 MemberRepository(JpaRepository상속)..

1. SpringSecurity- Swagger2 설정 연결 https://it-recording.tistory.com/64 [Spring] Spring Security + Swagger2 연결 Spring을 사용한 프로젝트를 할 때 API를 하나하나 적는 것은 많은 시간과 노력을 요구한다. 이에 자동화 된 API 툴을 제공하는데 그 중 Swagger를 연결하는 방법을 알아보겠다. (+마주했던 오류와 함 it-recording.tistory.com 2. SpringBoot - Swagger 설정 https://velog.io/@borab/Spring-boot-Swagger-%EC%84%A4%EC%A0%95-gradle Spring boot Swagger 설정 (gradle) 🐏 ❗ 스프링 부트 swagg..

1.SOP(Same Origin Policy) 1)동일 출처 정책(same-origin policy)은 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식이다. 동일 출처 정책은 동일 출처에서 오지 않은(다른 출처에서 온) 잠재적으로 해로울 수 있는 요청을 분리함으로써 공격받을 수 있는 경로를 차단한다. (예를 들어 특정 사이트에 내가 로그인하면서 토큰을 발급 받을 때 해커가 그 토큰을 가로채서 다른 요청을 서버에 보낸다면 서버 측에서 다른 출처로 인식 되기 때문에 요청을 거부하게 되는 것이다.) ex) nginx(웹서버)로 Vue(프론트) 와 내장 tomcat(WAS) Springboot(Api Server) 간 통신의 경우 생각 출처란? ..

1.설정 방법 https://velog.io/@pjh612/Deprecated%EB%90%9C-WebSecurityConfigurerAdapter-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8C%80%EC%B2%98%ED%95%98%EC%A7%80 Deprecated된 WebSecurityConfigurerAdapter, 어떻게 대처하지? 스프링 버전이 업데이트 됨에 따라 WebSecurityConfigurerAdapter와 그 외 몇 가지들이 Deprecated 됐습니다.스프링에서는 다른 방식으로 시큐리티 설정을 권장하고 있는 듯 해보였는데요. 방식이 바뀐 탓 velog.io 2. 공식 문서 https://spring.io/blog/2022/02/21/spring-security-with..