끄적끄적

[Spring] Service 순환참조를 @EventListener로 풀어보자

알 수 없는 사용자 — Sat, 8 Jan 2022 22:54:55 +0900

Spring Framework로 개발하다 보면 Service를 도메인 기준으로 나누는 경우가 많다.

그러다 보면 Aservice에서 BService로 참조를 하게 될 경우도 있고, 반대로 BService에서 AService로 참조할 수도 있게 된다.

이런 경우에 각 서비스 클래스를 빈으로 만들면서 서로를 참조하기 때문에 다음과 같은 오류를 만나게 된다.

서비스간 순환참조

실무에서는 매우 복잡한 비지니스 구조를 가지고 있기 때문에, 추후에 해당 문제를 해결하기 위한 방법이 애매하게 된다.

물론 서비스의 빈생성을 @Lazy 등.. 과 같은 방법으로 지연 로딩하여 생성 순서를 정해줄 수 있지만, 여러가 서비스가 얽혀 있는 상황이라면 깔끔한 방법이 되지 못한다.

이러한 구조에서 가장 간단하게 개발할 수 있는 방법으로 @EventListener을 선택했다.

@EventListner를 사용하면 두 서비스간의 의존성을 끊고, 이벤트 방식으로 필요한 처리를 각 서비스에 적절하게 위임할 수 있다.

@EventListner를 사용하는 방법은 다른 블로그에 자세하게 많이 나와있으니 참고하고, 간단하게만 말하자면

크게 Event 발생을 위한 Event객체와 Event발생 시 일어날 행위에 대한 EventHandler가 있고 이러한 이벤트를 publish 해줄 ApplicationEventPublisher로 이루어져 있다.

1. Event로 사용한 단순 Event클래스

@Data
public class AEvent {

    private Long id;

    public AEvent(Long id) {
        this.id = id;
    }
}

2. Event발생 시 일어날 행위에 대한 EventHandler

@Component
@RequiredArgsConstructor
public class AEventHandler {

    private final AService aService;

    @EventListener
    public void test(AEvent aEvent) {
        aService.eventTest(aEvent.getId());
    }

}

3. Event를 puslish 하는 ApplicationEventPublisher

@Service
@RequiredArgsConstructor
public class BService {

    private final ApplicationEventPublisher publisher;

    public void eventTest() {
        publisher.publishEvent(new AEvent(100L));
    }

}

ApplicationEventPublisher에서 event에 따라서 handler를 실행해주고 Handler에 등록된 이벤트 파라미터 객체에 따라 리스너로 동작하여 실행되게 된다.

서비스와 서비스 사이에서 ApplicationEventPublisher가 이벤트에 따라 연결해주기 때문에 두 서비스 간의 순환 참조가 해결된다.

* pulish한 결과의 리턴 값이 필요한 경우

만약 publish 후에 리턴값이 필요하다면 AEvent에 리턴 값을 받아 참조할 수 있다.

@Data
public class AEvent {

    private Long id;

    private String returnValue;

    public AEvent(Long id) {
        this.id = id;
    }

    public AEvent(Long id, String returnValue) {
        this.id = id;
        this.returnValue = returnValue;
    }
}

@Component
@RequiredArgsConstructor
public class AEventHandler {

    private final AService aService;

    @EventListener
    public void test(AEvent aEvent) {
        String returnValue = aService.eventTest(aEvent.getReturnValue());
        aEvent.setReturnValue(returnValue);
    }

}

@Service
@RequiredArgsConstructor
public class BService {

    private final ApplicationEventPublisher publisher;

    public void eventTest() {
        AEvent aEvent = new AEvent(100L, "Hi");
        publisher.publishEvent(aEvent);
        System.out.println("Request AEvent after returnValue : " + aEvent.getReturnValue());
    }

}

흐름을 요약해보면 BService -> publish -> AService -> AEvent returnValue 변경 -> BService에서 AEvent의 값 참조

@EventListener는 아래와 같이 부가적인 기능도 제공한다.

1. 기본적으로 동기 호출이지만 @EnableAsync, @Async로 비동기 호출도 가능

2. handler안에 같은 이벤트 객체를 받는 여러 파라미터가 있다면, @Order로 호출 순서를 지정

* ApplicationEventPublisher에서 어떻게 EventHandler의 @EventListener 함수를 호출할 수 있을까?

ApplicationEventPublisher의 publishEvent를 찾아가다 보면 아래 메서드를 만난다.

AbstractApplicationContext

this.getApplicationEventMulticaster().multicastEvent((ApplicationEvent)applicationEvent, eventType);

일반적으로 발생하는 ApplicationEvent인지(어플리케이션 생명주기에 따라 실행되는 이벤트)에 따라 구분되고, 위 함수로 실행되게 된다.

multicastEvent 메소드를 따라가 보면, 아래가 나온다.

SimpleApplicationEventMulticaster

결국 getApplicationListeners에서 이미 애플리케이션에 등록된 리스너를 찾아서 실행해 주고 있다.

getApplicationListeners는 SimpleApplicationEventMulticaster의 추상클래스인 AbstractApplicationEventMulticaster의 defaultRetriever에 정의된 리스너에 의해서 호출되고 있다.

public abstract class AbstractApplicationEventMulticaster implements ApplicationEventMulticaster, BeanClassLoaderAware, BeanFactoryAware {
    private final AbstractApplicationEventMulticaster.DefaultListenerRetriever defaultRetriever = new AbstractApplicationEventMulticaster.DefaultListenerRetriever();
    final Map<AbstractApplicationEventMulticaster.ListenerCacheKey, AbstractApplicationEventMulticaster.CachedListenerRetriever> retrieverCache = new ConcurrentHashMap(64);
    ...
}

그럼 여기서 한가지 의문이 드는 건 언제 AbstractApplicationEventMulticaster에 리스너가 등록되냐는 것이다.

이건 에플리케이션이 실행하는 시점에 찾아볼 수 있다.

main메서드에서 실행되는 SpringApplication.run() 메서드를 찾아보면 아래와 같이 따라갈 수 있다.

@SpringBootApplication
public class BlogApplication {

    public static void main(String[] args) {
        SpringApplication.run(BlogApplication.class, args);
    }

}

public ConfigurableApplicationContext run(String... args) {
    ...
        context.setApplicationStartup(this.applicationStartup);
        this.prepareContext(bootstrapContext, context, environment, listeners, applicationArguments, printedBanner);
        this.refreshContext(context);
        this.afterRefresh(context, applicationArguments);
        stopWatch.stop();
        if (this.logStartupInfo) {
            (new StartupInfoLogger(this.mainApplicationClass)).logStarted(this.getApplicationLog(), stopWatch);
        }
    ...
}

public void refresh() throws BeansException, IllegalStateException {
   ...
            this.initApplicationEventMulticaster();
            this.onRefresh();
            this.registerListeners();
            this.finishBeanFactoryInitialization(beanFactory);
            this.finishRefresh();
   ...
}

protected void finishBeanFactoryInitialization(ConfigurableListableBeanFactory beanFactory) {
    ...

    beanFactory.setTempClassLoader((ClassLoader)null);
    beanFactory.freezeConfiguration();
    beanFactory.preInstantiateSingletons();
}

SpringApplication.run() -> this.refresh(context) -> this.refreshContext(context) -> this.finishBeanFactoryInitialization(beanFactory) -> beanFactory.preInstantiateSingletons()

위 경로를 따라오다보면 아래 메서드가 나온다.

DefaultListableBeanFactory.preInstantiateSingletons

org.springframework.context.event.internalEventListenerProcessor bean 이름을 가진 EventListenerMethodProcessor 클래스를 만나면서 싱글톤 인스턴트로 만들어지고 난 후의 작업이 실행된다.

(SmartInitializingSingleton을 상속하고 있는 클래스가 몇개 있는데, 해당 클래스를 상속하면 싱글톤 초기화 시 작업이 이루어지는 클래스가 몇 개 있는 것 같다.)

결국 해당 메소드를 따라가다 보면 AbstractApplicationContext 추상 클래스 변수 ApplicationEventMulticaster에 추가되고 있다.

정리하자면

SimpleApplicationEventMulticaster -> AbstractApplicationEventMulticaster -> ApplicationEventMulticaster에서

애플리케이션 시작 시점에서 DefaultListableBeanFactory가 AbstractApplicationContext의 AbstractApplicationEventMulticaster로 리스너 핸들러를 등록해주고, AbstractApplicationContext 상위 인터페이스의 ApplicationContext가 상속한 ApplicationEventPublisher를 통해서 publish 할 수 있게 된다.

(내용이 맞는지 모르겠지만, 남이 짠 코드 해석도 힘든데 저걸 짠 사람은 얼마나 대단할까..-_-)

[JPA] 각각 다른 패키지에 클래스 이름이 같은 엔티티가 있을 경우 인식 문제

알 수 없는 사용자 — Sun, 2 Jan 2022 22:10:25 +0900

실무를 하다 보면 종종 다른 데이터베이스에 같은 이름의 테이블이 존재하게 된다.

예를 들어, A와 B 데이터베이스에 Category라는 테이블이 있고, 하나의 프로젝트에서 두 개의 엔티티를 만들어 사용할 수 있다.

# 스키마가 다른 같은 이름의 테이블

create table schema_a.category
(
    category_seq int auto_increment primary key
);

create table schema_b.category
(
    category_seq int auto_increment primary key
);

보통 이런 경우 테이블 명칭을 그대로 사용하여 엔티티 클래스 이름으로 사용하여 다음과 같이 사용할 수 있다.

schema_a에 있는 category 엔티티

schema_b에 있는 category 엔티티

나는 막연하게 @Table에 스키마와 테이블 명칭을 지정해두었으니 해당 엔티티를 사용할 때 문제없을 줄 알았다.

queryDSL 사용예시

왜냐하면 위 사진과 같이 QClass를 통해 패키지 경로가 지정된 채로 사용되어 query가 generated될 줄 알았기 때문이다.

하지만, 위 코드를 실행시켜보면 보기좋게 에러가 발생한다.

select category
from com.example.blog.entity.schema_b.Category category
where category.categoryASeq = ?1

분명 schema_a 패지키 경로에 있는 category엔티티를 사용하였지만, 실제 쿼리는 schema_b로 나가면서 필드를 찾을 수 없는 에러가 발생한다.

처음에는 QueryDSL이나 기타 다른 라이브러리 오류인 줄 알았지만...

태생부터 entity명칭은 다른 패키지라 하더라도 같으면 안 된다는 규칙(?)이 있었다.

https://stackoverflow.com/questions/30590324/select-a-default-entity-when-two-or-more-entities-with-same-name-exist-spring

Select a default Entity when two or more Entities with same name exist - Spring Boot, Spring Data JPA,

I'm using spring data jpa for persistence. Is there a way where one entity can be marked as default if more than one entity exists with the same name. Something like @Primary annotation used to res...

stackoverflow.com

https://www.objectdb.com/java/jpa/entity/types#Entity_Classes_

JPA Persistable Types

JPA Persistable Types The term persistable types refers to data types that can be used in storing data in the database. ObjectDB supports all the JPA persistable types, which are: User defined classes - Entity classes, Mapped superclasses, Embeddable class

www.objectdb.com

Entity classes are represented in queries by entity names. By default, the entity name is the unqualified name of the entity class (i.e. the short class name excluding the package name). A different entity name can be set explicitly by using the name attribute of the Entity annotation:

Entity names must be unique. When two entity classes in different packages share the same class name, explicit entity name setting is required to avoid collision.

기술적으로 어떤 이유인진 모르겠지만, 유니크해야 한다고 한다..

컴파일 시에는 패키지 경로로 체크하기 때문에 오류 표시가 안 나지만, 실제 런타임 시 쿼리가 만들어질 때 오류가 발생하는 케이스이므로 주의해야겠다.

테스트하다가 발견한 내용으로,

hibernate 5.3.9 버전에서 해당 코드를 돌리면 단순히 위와 같이 쿼리를 만들 때 오류가 나지만

hibernate 5.4.x 버전부터는 아래와 같이 오류의 이유가 정확히 출력된다.

Caused by: org.hibernate.DuplicateMappingException: The [com.example.blog.entity.schema_a.Category] and [com.example.blog.entity.schema_b.Category] entities share the same JPA entity name: [Category] which is not allowed!

그냥 궁금해서 찾아보니 org.hibernate.boot.internal.InFlightMetadataCollectorImpl 클래스에 addEntityBinding이 실행되면서 엔티티가 바인딩될 때 엔티티 클래스 이름이 같은 놈이 있는지 체크하는 로직이 추가된 것으로 보인다.

5.3.9 버전에도 entityName을 체크하는 로직은 있었지만, jpaEntityName을 비교하는 로직도 추가된 것이다.

참고로, entityName은 패키지 경로를 포함한 엔티티 클래스의 이름 같고, jpaEntityName은 @Entity의 name속성에 정의된 이름 같다.

@Entity 속성 name까지 각각 다 지정하여 분기를 피한다 하더라도 결국 exception을 만나 동작하지 않게 된다.

[QueryDSL] IN 절에 여러개의 Parameter 사용하기

알 수 없는 사용자 — Mon, 25 Oct 2021 02:17:25 +0900

실무를 하다 보면 일괄로 데이터를 업데이트하거나 인서트하는 작업을 자주 하게 된다.

이런 작업을 기능으로 만들 경우에 입력된 값이 수정이나 입력될 수 있는 값인지 검증하는 작업이 들어간다.

간단하게 생각해보면 클라이언트에서 입력된 값이 a, b라면 아래와 같은 쿼리로 풀 수 있을 것이다.

select *
from Account
where Login_Id in ('a', 'b');

하지만, 복잡한 실무에서는 단일 값으로만 검증을 취할 수 없다.

예를 들어, 회원의 아이디 이메일, 아이디, 이름으로 검증을 취해야 할 경우 위와 같은 쿼리로는 불가능하게 된다.

물론 회원의 고유 일련번호(account_seq)로 판단은 가능하겠지만, 클라이언트에서 회원의 고유 일련번호는 모르는 경우가 많을 것이다.

이럴 경우, 여러 방법이 있겠지만 IN 절에 칼럼을 여러 개 지정하여 여러 파라미터를 넘길 수 있다.

select *
from Account
where (Email, Login_Id, Name) in
(('aaa@naver.com', 'aaa', '홍길동'),('bbb@naver.com', 'bbb', '테스트'));

해당 문법은 대표적인 대부분의 RDMS에서 지원하지만 MSSQL에서는 지원하지 않는 것으로 보인다.

여기서 한 단계 더 나아가, JPA를 사용할 경우 QueryDSL에서 어떻게 사용할 수 있는지 알아보자.

일단 IN 키워드를 기준으로 왼쪽 칼럼 부분은 QueryDSL의 Expressions.list로 표현할 수 있다.

Expressions.list(account.Email, account.loginId, account.name).in(...)

=> (Email, Login_Id, Name) in (...)

IN 키워드의 우측 부분은 검색하고자 하는 파라미터 값이다.

이 값은 동적으로 몇 개의 값이 들어오는지 알 수 없기 때문에, 왼쪽 칼럼 부분과 달리 가공해주어야 한다.

여기서부터 삽질이 시작되었다.

QueryDSL SimpleExpression in메소드

in 메서드에 들어갈 수 있는 파리미터를 살펴보니 Expression을 가변 인자로 받고 있는 것을 볼 수 있다.

따라서 나는 처음에 검색할 List를 Expression 배열로 변환하여 사용하면 될 것이라 생각했다.

1. 첫 번째 삽질

@Override
public List<Account> findAllCustom(List<SearchAccount> searchAccounts) {

	return
    	query
            .selectFrom(account)
            .where(
            	Expressions.list(account.Email, account.loginId, account.name).in((Expression<? extends Tuple>[])searchAccounts.stream()
                	.map(entry -> Expressions.list(Expressions.constant(entry.getEmail()), Expressions.constant(entry.getLoginId()), Expressions.constant(entry.getName())))
                    .toArray(Expression[]::new))
            )
            .fetch();
}

각각의 칼럼에 검색 값으로 적용될 파라미터를 Expressions.list로 만들어주고, 이를 배열로 넘겼다.

이때, IN절에서 stream으로 구한 값을 배열로 바꾸고, (Expression<? extends Tuple>[]) 로 명시적으로 변환해주지 않는다면, 아래와 같이 타입을 명확히 할 수 없는 빌드 오류가 발생하기 때문에, 주의하자.

결과적으로는, 아쉽게 실패다.

쿼리 실행 결과

select account0_.Account_Seq as account_1_0_,
       account0_.Email       as email2_0_,
       account0_.Login_Id
                             as login_id3_0_,
       account0_.Name        as name4_0_,
       account0_.Use_Yn      as use_yn5_0_
from Account account0_
where (account0_.Email, account0_.Login_Id, account0_.Name) in
      ('aaa@test.co.kr', 'aaa', '홍길동', ('bbb@test.co.kr', 'bbb', '테스트'))

얼핏 성공한 것처럼 보이지만, IN 키워드 우측에 들어가는 검색 파라미터가 첫 번째 묶음 쪽에 괄호가 정상적으로 들어가지 않는 것이다.

여기서 여러 가지 시도를 해보았지만, 이 방법으로는 해결하지 못할 것 같아 다른 방법을 찾아 헤맸다.

어떻게 할 수 있을까 생각하다가 결국 QueryDSL gitbhub issue를 뒤지기 시작했다.

https://github.com/querydsl/querydsl/issues/2910

Multiple Column In clause Parameter · Issue #2910 · querydsl/querydsl

@Entity @Data class Image { private long id; private long imgId; private int index; } //In service, select all that its index and imgId in a map HashMap<integer, long=""> usedImageMap = ... List...</integer,>

github.com

위 글은 분명 나와 같은 질문에 답을 얻은 것으로 보이지만, 동작하지는 않는다.

2. 두 번째 삽질

github issue에서 다음과 같은 글을 찾았다.

https://github.com/querydsl/querydsl/issues/2920

Queryng With In Clause And Static Values · Issue #2920 · querydsl/querydsl

Observed vs. expected behavior Do the right query Steps to reproduce private List findRealizacaoAvaliacoes(final ResetAvaliacaoCommand cmd) { return baseRepository.findAll(qRealizacaoAv...

github.com

요약하면 다음과 같다.

QueryDSL에서 쿼리를 제너레이트 할 때, 우선순위에 따라 괄호가 매겨지는데 첫 번째 삽질과 같이 했을 경우에는 우선순위에 따라 첫 파라미터 묶음에 괄호가 생략되는 것이다.

이를 해결하기 위해서는 아래와 같이 template을 이용하라는 것이다.

    @Override
    public List<Account> findAllCustom(List<SearchAccount> searchAccounts) {

        return query
                .selectFrom(account)
                .where(
                        Expressions.list(account.Email, account.loginId, account.name).in(searchAccountIn(searchAccounts))
                )
                .fetch();
    }

    private Expression[] searchAccountIn(List<SearchAccount> searchAccounts) {

        List<Expression> tuples = new ArrayList<>();

        for(SearchAccount searchAccount : searchAccounts) {
            tuples.add(Expressions.template(Object.class, "({0}, {1}, {2})", searchAccount.getEmail(), searchAccount.getLoginId(), searchAccount.getName()));
        }

        return tuples.toArray(new Expression[0]);
    }

template을 이용하여 위와 같이 문자열로 지정해주면 정상적으로 쿼리가 나간다는 것이다.

위 쿼리의 테스트 결과로 정상적으로 원하는 쿼리가 나가는 것을 확인할 수 있었다.

3. 세 번째 삽질

하지만, 뭔가 찝찝하다.

첫 번째 삽질의 경우 단건 검색 결과의 경우 정상적으로 나가지만, 멀티 검색 결과의 경우 괄호가 잘못 들어가는 경우였다.

그렇다면 두 번째 삽질에서의 코드를 단건으로 파라미터를 넘겨보면 어떻게 될까?

select account0_.Account_Seq as account_1_0_,
       account0_.Email       as email2_0_,
       account0_.Login_Id
                             as login_id3_0_,
       account0_.Name        as name4_0_,
       account0_.Use_Yn      as use_yn5_0_
from Account account0_
where (account0_.Email, account0_.Login_Id, account0_.Name) in ('aaa@test.co.kr', 'aaa', '홍길동')

분명 예상한 쿼리는 맞지만 쿼리 문법 오류가 나면서 실패한다. 왜일까?

지원하는 모든 RDMS를 살펴본 건 아니지만, 테스트한 MariaDB의 경우

단 건의 경우에도 무조건 부모 괄호가 하나 존재해야 한다.

select account0_.Account_Seq as account_1_0_,
       account0_.Email       as email2_0_,
       account0_.Login_Id
                             as login_id3_0_,
       account0_.Name        as name4_0_,
       account0_.Use_Yn      as use_yn5_0_
from Account account0_
where (account0_.Email, account0_.Login_Id, account0_.Name) in
      (('aaa@test.co.kr', 'aaa', '홍길동'))

결국 또 여기서 삽질을 하다가 어쨌든 쿼리를 template 문자열에 의해서 생성되는 것이니 템플릿에 괄호를 추가하면 되지 않을까 싶었다.

private Expression[] searchAccountIn(List<SearchAccount> searchAccounts) {

        List<Expression> tuples = new ArrayList<>();

        for(SearchAccount searchAccount : searchAccounts) {
            tuples.add(Expressions.template(Object.class, "(({0}, {1}, {2}))", searchAccount.getEmail(), searchAccount.getLoginId(), searchAccount.getName()));
        }

        return tuples.toArray(new Expression[0]);
    }

별다른 것 없이, "({0}, {1}, {2})" => "(({0}, {1}, {2}))"로 겉에 괄호를 하나 추가한 것으로 해결할 수 있었다.

더 효율적인 부분이 있을진 모르겠지만, 공식적으로 나와있는 사용법이나 글이 없는 것 같아 정리해보았다.

[QueryDSL & JPQL] Converter가 작동하지 않는 경우

알 수 없는 사용자 — Mon, 20 Sep 2021 20:53:05 +0900

보통 JPA를 활용하여 개발할 때 데이터베이스에 Y, N 여부 값을 넣을 경우에는 boolean converter를 따로 만들어서 사용하곤 한다.

하지만, 경우에 따라 버그(?)가 발생하는 경우가 있어 남긴다.

CONFIG 테이블에 BooleanToYNConverter를 사용하는 칼럼이 있어, DB값이 Y라면 엔티티에는 true, 반대의 경우에는 false로 가져올 때, 해당 칼럼을 where 절로 쿼리를 select 할 때, case when 구문으로 true, false를 임의로 주면 파라미터 바인딩이 제대로 되지 않는 현상이다.

샘플 코드는 아래를 보자.

@Entity
@Table(name = "CONFIG")
@Setter
public class Config {

    @Id
    @GeneratedValue
    @Column(name = "Config_Seq")
    private Long configSeq;

    @Column(name = "User_Seq")
    private Long userSeq;

    @Column(name = "Apply_Date")
    private LocalDate applyDate;

    @Convert(converter = BooleanToYNConverter.class)
    @Column(name = "Use_Yn")
    private Boolean useYn;

}

Config엔티티는 위와 같이 구성되어있고, useYn 필드가 BooleanToYNConverter 컨버트를 사용하게 된다.

@Converter
public class BooleanToYNConverter implements AttributeConverter<Boolean, String> {

    @Override
    public String convertToDatabaseColumn(Boolean attribute) {
        return attribute != null && attribute ? "Y" : "N";
    }

    @Override
    public Boolean convertToEntityAttribute(String s) {
        return "Y".equalsIgnoreCase(s);
    }
}

컨버트는 무난하게 많이 사용하는 형태로 이상 없이 작성되어 있다.

query
	.selectFrom(config)
	.where(config.useYn.eq(true))
	.fetch();

이때, 위와 같은 쿼리를 querydsl로 날리면, 아래와 같이 Use_Yn = 'Y'로 컨버트 되어 쿼리가 실행되게 된다.

지금까지는 정상적인 동작이다.

그럼 이제 select절에 case when을 써보자.

조건문에 파라미터가 true로 들어가는 현상이 나타난다.

혹시라도 로깅에만 그렇게 찍히는 건지 useYn을 false로 바꿔보자.

조건문을 바꿔 실행해보면 컨버터가 잘 실행된 상태로 N 값으로 쿼리가 나간다.

내가 처음 이 문제를 보았을 때, 완전 갈피를 못 잡았었다.

true일 때만 발생하는 현상으로, querydsl부터 실제 쿼리가 나갈 때 까지 디버깅을 태워본 결과 컨버터가 적용 안된다 라고만 알 수 있었고, 정확히 어떤 원인인지는 파악하지 못했다.(아직 부족한 게 많다.)

암튼.. 어떻게든 이 문제를 해결하기 위해 별에 별짓을 다해본 결과, case builder에서 true로 결과를 가져올 때, 발생하는 현상이었다.

아무 설정 바꾸지 않은 채로, case builder에서 true만 false로 바꾸었더니 정상적으로 파라미터가 컨버터가 적용되어 Y값으로 바인딩되어 쿼리가 실행되는 것을 확인할 수 있다.

이와 관련하여 querydsl에 이슈를 남겨보았으나 기존에도 있던 이슈로 답변이 왔다. JPQL의 문제다 라고 말하는 것처럼 보이는데, 확인하라고 알려준 이슈내용이 어떤 건지 모르겠어서 정확히 파악이 안 되었다 ㅠㅠ

* 이슈 : https://github.com/querydsl/querydsl/issues/3017

Querydsl parameter binding problem with @Convert Field · Issue #3017 · querydsl/querydsl

Observed vs. expected behavior When the field to which @convert is applied is used as a search condition, if true is returned to the casebuilder statement in select, the @convert is not applied to ...

github.com

querydsl도 결국 JPQL을 기반으로 동작한다고 알고 있지만.. 이런 경우에도 JPQL의 영향인건지는 잘 이해가지 않는다..

내가 테스트한 환경은 4.2.1버전이였다.

특이한 건 4.3.0~ 4.4.0 버전까지는 같은 코드로 아예 쿼리 자체가 실행되지 않는 오류가 뜨고, 가장 최신 버전은 5.0.0 버전에서는 컨버터가 정상적으로 적용되고 있는 것으로 확인된다.

[QueryDSL] from, join 절에 서브쿼리 사용하기

알 수 없는 사용자 — Sat, 11 Sep 2021 17:22:24 +0900

이전 포스팅에서 한 테이블 내에서 특정 값을 그룹핑하여 최댓값을 가진 row를 가진 방법을 보았었다.

이때 Row_Number를 사용하여 추출한 데이터가 가장 빠른 방법으로 보였는데, 이는 서브 쿼리로 해야 한다는 점이 있다.

하지만..

JPQL?hibernate?에 의해 where절과 select절에서만 서브 쿼리가 사용 가능하다고 한다..(내부적인 원리는 나중에 따로 공부해봐야겠다.)

참고 글 : https://stackoverflow.com/questions/60258377/querydsl-4-x-subqueries-in-the-from-clause

QueryDSL 4.x subqueries in the FROM clause

Are subqueries in the from clause supported in the latest QueryDSL version? I tried my best but could not find a solution for now.

stackoverflow.com

ㅇㅏ무튼... 어떻게든 querydsl에서 서브 쿼리를 사용해서 위 케이스를 풀어낼 수 없을까 생각하다가.. 엔티티 레벨(?)에서 설정할 수 있는 법이 없을까 고민하다가 우연히 봤었던 @SubSelect 옵션이 생각났다.

참고 글 : https://stackoverflow.com/questions/25226244/what-is-the-use-of-synchronize-in-hibernate

What is the use of @Synchronize in Hibernate

As per Hibernate documentaion, There is no difference between a view and a base table for a Hibernate mapping. This is transparent at the database level, although some DBMS do not support vi...

stackoverflow.com

마치 view처럼 사용할 수 있는 entity를 만드는 걸로 entity에 맵핑할 쿼리를 직접 작성하는 것이다.

/**
 * Map an immutable and read-only entity to a given SQL select expression.
 *
 * @see Synchronize
 *
 * @author Sharath Reddy
 */
@Target(TYPE)
@Retention(RUNTIME)
public @interface Subselect {
	/**
	 * The query.
	 */
	String value();
}

주석의 내용과 같이 update될 수 없는 select용 엔티티이다.

@Entity
@Subselect(
    "select " +
    "       ROW_NUMBER() over (PARTITION BY c.User_Seq ORDER BY Apply_Date desc, Config_Seq desc) as Row_Num, " +
    "       c.Config_Seq, " +
    "       c.User_Seq, " +
    "       c.Apply_Date " +
    "from CONFIG c "
)
@Immutable
@Synchronize("CONFIG")
public class ConfigSubSelect {

    @Column(name = "Row_Num")
    private Long rowNum;

    @Id
    @GeneratedValue
    @Column(name = "Config_Seq")
    private Long configSeq;

    @Column(name = "User_Seq")
    private Long userSeq;

    @Column(name = "Apply_Date")
    private LocalDate applyDate;

}

이렇게 되면 테이블 단위가 아닌 subselect에 작성된 query로 결과가 엔티티에 맵핑되게 된다.

그리고 이 엔티티를 똑같이 querydsl에서 사용해보자.

query
	.selectFrom(configSubSelect)
	.where(configSubSelect.rowNum.eq(1L))
	.fetch();

select configsubs0_.Config_Seq as config_s1_0_,
       configsubs0_.Apply_Date as apply_da2_0_,
       configsubs0_.Row_Num    as row_num3_0_,
       configsubs0_.User_Seq   as user_seq4_0_
from (select ROW_NUMBER() over (PARTITION BY c.User_Seq ORDER BY Apply_Date desc, Config_Seq desc) as Row_Num,
             c.Config_Seq,
             c.User_Seq,
             c.Apply_Date
      from CONFIG c) configsubs0_
where configsubs0_.Row_Num = ?

실행결과의 query를 보면 서브 쿼리로 원하는 서브 쿼리가 나간 것을 확인할 수 있다.

querydsl은 jpql기반이기 때문에, JPQL 마찬가지로 동작될 것으로 예상되고, spring data jpa에서 제공하는 find~ 메서드 또한 동일하게 사용 가능하다.

물론, update나 insert는 불가능하고, 엔티티 파일을 하나 더 만들어야 하지만,

비즈니스적으로 서브 쿼리를 써야만 하는 테이블이라면 다른 곳에서도 똑같이 쓸 확률이 있기 때문에 만들어놓고 공통으로 사용해도 괜찮을 것 같다

테이블 내에서 group by의 최대값을 가진 row 검색하는 방법 + 속도체크

알 수 없는 사용자 — Sun, 5 Sep 2021 20:18:40 +0900

최근에 동일 테이블에서 그룹핑하여 최대값을 가진 row 데이터를 리스트에 출력하는 업무를 맡았다.

가장 효율적인 쿼리가 무엇일까 고민하다가 생각해낸 두가지 방법과 실제로 성능이 어떤지 테스트해보았다.

요구사항은 다음과 같다.(실제 업무와 비슷하게 예시로 들었다.)

특정 회원에게 가장 최근에 적용된 권한이 어떤 권한인지 검색한다. 그 권한은 시스템 관리자가 설정한 적용날짜에 따라 적용되고, 적용날짜는 하나의 테이블에 회원 일련번호와 적용날짜, 권한정보 하나의 로우로 로그데이터와 같이 insert만 해놓은 테이블(update 없음)에서 회원에게 설정된 가장 최근 적용날짜, 적용날짜가 같은 정보가 있다면 가장 최근에 등록된 데이터에서 권한정보를 가져와야한다.

비유를 들려하니 내가 봐도 뭔소리인지 모르겠고... 애초에 이렇게 설계되지 않았으면 좋았겠지만, 이미 있는 구조에서 개발들어가야하는 상황으로 극단적 상황으로 보자. 여기서 비지니스는 중요한 것이 아니기에 예시 테이블을 봐보자.

create table CONFIG (
    Config_Seq INT AUTO_INCREMENT PRIMARY KEY, -- pk
    User_Seq INT, -- 회원 일련정보
    Apply_Date DATE -- 적용날짜
    -- 권한정보 칼럼 등..
);

CONFIG 테이블에서 User_Seq를 그룹핑하여 Apply_Date가 가장 최근이고, 그 중에서 Config_Seq가 가장 최근에 등록된 ROW를 출력해야한다.

단건 쿼리로는 다음과 같이 될 것이다.

select *
from CONFIG
where User_Seq = 10
order by Apply_Date desc, Config_Seq desc
limit 1

하지만.. 얘를 리스트로 뽑아내려니 머리가 아파지기 시작한다.

방법이 안떠오르는 것은 아니였지만, 어떤게 효율이 좋을지 궁금해지기 시작했다.

첫번째로는 무지성으로 테이블을 여러번 조인 시키는 것이다.

select c1.*
from CONFIG c1
left join CONFIG c2
on c1.User_Seq = c2.User_Seq and c1.Apply_Date < c2.Apply_Date
left join CONFIG c3
on c1.User_Seq = c3.User_Seq and c1.Apply_Date = c3.Apply_Date and c1.Config_Seq < c3.Config_Seq
where c2.Config_Seq is null
and c3.Config_Seq is null;

조건에 따라 검색할 테이블(c1), 날짜조건 테이블(c2), 최근 등록된 데이터 조건 테이블(c3)를 두어 c2,c3에 없는 테이블을 검색한다.

두번째 방법은 ROW_NUMBER를 이용한다.

select *
from
(
    select
        ROW_NUMBER() over (PARTITION BY c.User_Seq ORDER BY Apply_Date desc, Config_Seq desc) as Row_Num,
        c.*
    from CONFIG c
) as config
where config.Row_Num = 1

서브쿼리로 한번 감싸줘야하지만, 테이블을 한번만 보고 뽑아낼 수 있다.

사실 그냥 대충만 봐도 두번째 방법이 가독성도 좋고 쿼리 속도에서도 훨씬 빠를 것으로 예상되지만, 얼마나 차이날지 테스트해보았다.

CREATE PROCEDURE dorepeat(p1 INT, apply_date DATE)
BEGIN
    SET @x =0;

    REPEAT
    SET @x = @x+1;

    INSERT INTO CONFIG (User_Seq, Apply_Date)
    VALUES (@x, apply_date);
    UNTIL @x > p1

    END REPEAT;
END;

call dorepeat(999, '2021-08-01');
call dorepeat(999, '2021-09-01');
call dorepeat(999, '2021-09-01');
call dorepeat(999, '2021-07-01');

프로시저로 간단하게 4000건의 데이터만 만들어서 테스트해보았다.

> select c1.*
      from CONFIG c1
      left join CONFIG c2
      on c1.User_Seq = c2.User_Seq and c1.Apply_Date < c2.Apply_Date
      left join CONFIG c3
      on c1.User_Seq = c3.User_Seq and c1.Apply_Date = c3.Apply_Date and c1.Config_Seq < c3.Config_Seq
      where c2.Config_Seq is null
      and c3.Config_Seq is null
[2021-09-05 20:08:17] 1,000 rows retrieved starting from 1 in 2 s 492 ms (execution: 2 s 334 ms, fetching: 158 ms)

> select *
      from
      (
          select
              ROW_NUMBER() over (PARTITION BY c.User_Seq ORDER BY Apply_Date desc, Config_Seq desc) as Row_Num,
              c.*
          from CONFIG c
      ) as config
      where config.Row_Num = 1
[2021-09-05 20:08:17] 1,000 rows retrieved starting from 1 in 28 ms (execution: 10 ms, fetching: 18 ms)

물론.. 인덱스도 없는 완전 기본형 테이블이지만, 4천건의 데이터밖에 없는데 생각보다 더 차이가 많이 난다.

무지성 테이블 조인의 경우 요구사항 조건이 늘어날 수록 조건의 개수에 따라 테이블 조인이 더 많아지고, 테이블의 데이터 개수에 따라 속도가 훨씬 영향을 많이 받는다.

반면에 ROW_NUMBER의 경우 조건이 늘어나도 ORDER BY에 조건만 추가하면 되기에 무지성 테이블 조인은 방법이 있다는 것만 알아두는게 좋을 것 같다.

마지막으로 뻔한 결과를 테스트까지 한 이유는.. ORM에서 서브쿼리를 사용하는게 거부감이 들어(특히 QueryDSL) 어떻게든 서브쿼리를 사용하지 않고 해보려고 무지성 테이블과 비교까지 했는데 성능이슈가 무조건 날 것으로 보인다 ㅎ..

그럼 다음에는 QueryDSL에서 어떻게 join절에 해당 쿼리를 녹여 적용했는지 포스팅하겠다.(https://programmingnote.tistory.com/85)

클라이언트에서 html 태그 속성 조작

알 수 없는 사용자 — Sun, 22 Aug 2021 20:48:28 +0900

0. 시작

앞에서 살펴본 jwplayer 이슈 중에 video태그에 controls를 클라이언트가 적접 조작하여 커스텀된 컨트롤바가 아닌 기본 컨트롤바를 띄울 수 있다. 이럴 때 어떤 사이드 이슈가 발생할지 예상할 수 없기 떄문에, 어떻게 대처할지 생각해보았다.

1. 분석

아래 사진은 넷플릭스 인터렉티브 비디오 "블랙미러 : 밴더너내치"에서 조작한 사진이다.
video태그를 찾아 controls 속성을 강제로 넣으면 빨간색 부분처럼 기본으로 제공되는 컨트롤바가 별개로 뜨면서 영상의 길이와 같은 정보가 노출된다. 평상시에는 중요하지 않은 이슈이기만 저렇게 인터렉티브 비디오일 경우 클라이언트에서 조작하여 원하는 영상 위치로 이동시킬 수 있지 않나싶다.

저런 기본 컨트롤바를 꼭 막아야하는 경우 어떻게 해야할까의 나의 답은 controls 속성이 추가될 경우 특정 이벤트를 발생시켜 비디오를 팅기는게 어떨까 생각했다.

2. 해결

특정 DOM 변경을 감시하고, 변경될 떄 이벤트처럼 callback 함수로 동작되는 javascript api이다.

사용법자체는 간단하기 떄문에 아래 샘플 코드를 보면 이해하기 쉽다.
아래 예제는 위에서 예로 들었던 video 태그에 controls속성이 추가되었을 때, alert을 띄우고 비디오 영상 주소를 지워 영상을 재생시킬 수 없게 하는 방식이다.

if(window.MutationObserver || window.WebKitMutationObserver) {
  videoMutationObserver();
}



function videoMutationObserver() {

  var nodeToObserve = document.querySelector('video');
  var callback = function(mutations, observer) {
    for (var index = 0; index < mutations.length; index) {
      var mutation = mutations[index];
      if (mutation.type === 'attributes' && mutation.attributeName == 'controls' ) {
        alert('비정상적인 동작입니다.');
        mutation.target.setAttribute('src', '');
        break;                          
      }
    }
    observer.disconnect();
  }
  const observer = new MutationObserver(callback);

  observer.observe(nodeToObserve, {
    attributes : true,
    attributeFilter : ['controls'],
    childList: false, // target node's children
    subtree: false // target node's descendants
  });
}

위 샘플 예제를 실행했을 때 모습이다.

ie브라우저 낮은 버전에서만 잘 체크되면 관련된 이슈를 손쉽게 처리할 수 있을 것 같다.

HTMLMediaElement.playbackRate 조작이슈

알 수 없는 사용자 — Mon, 16 Aug 2021 17:06:06 +0900

0. 시작

이전까지는 jwplayer 버전에 따른 원인 분석과 해결방법을 알아보았다면,
이제는 jwplayer 버전은 유지하고, 추가 소스코드로만 해결할 수 있는 방법에 대한 생각을 정리할 것이다.

배속 이벤트 이슈

크롬 확장프로그램으로 비디오 조절기능을 사용시 배속 임의 조작

HTMLMediaElement.playbackRate 클라이언트(브라우저 관리자 도구) 조작

1. 원인

구글링을 하던 도중 관리자도구에서 비디오의 속성값을 임의로 변경하여 클라이언트가 배속을 임의로 설정하는 경우를 발견하였다.

document.getElementById("video").querySelector("video").playbackRate = 10

이 외에도 크롬 확장프로그램에서 배속을 바꿀시 소스에 걸린 이벤트가 정상적으로 동작하지 않고 있었다.
이 부분은 jwplayer의 버전 문제인지는 모르겠지만, 위처럼 로우레벨(?)에서 클라이언트가 속성값 자체를 변경할 시 어떻게 대처해야할까에 대해 고민했다.

2. 해결

video태그에서 배속을 정하는 값은 아래 링크의 공식문서와 같다.
(https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate)
아마 jwplayer이벤트에서도 결국엔 해당 값을 변경하는 것으로 배속을 제어할 것이라 생각했고, 이 값이 의도치않게 변경되는 것을 감지 및 방지하는 것에 대해 생각했다.

내가 생각한 방법은 자바스크립트의 프로퍼티 타입 정의 함수이다.
(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty).

본 글은 함수에 대한 내용을 다루기 위한 내용은 아니기 떄문에, 간력히 설명하면 속성에 값을 대입하거나 읽을 때, 특정 로직이 실행되게 하는 get,set를 정의할 수 있고, 프로퍼티 값을 변경유무 등을 설정할 수 있는 함수이다.

프로퍼티 설정 중 set에 로직을 별도로 정의하여, 몇 배속까지 사용할 수 있는지를 설정하였다.

// 배속조절 막기

// 변경 불가능하게 const 처리
const maxPlayBackRate = 5;
document.addEventListener("DOMContentLoaded", function(){
  var originalDescriptor = Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'playbackRate');

  Object.defineProperty(HTMLVideoElement.prototype,'playbackRate',{
    set:function(value){
      if(value > maxPlayBackRate) {
        console.log( maxPlayBackRate + "보다 커서 적용안함")
        return;
      } 
      originalDescriptor.set.call(this,value);
    },
    get:originalDescriptor.get
  });

})

샘플 코드로 maxPlayBackRate이상의 배속설정 값이 들어오면 설정되지 않도록 하는 코드이다.
테스트를 위해 클라이언트에서 값을 임의로 조정하면 아래와 같이 출력되는 것을 확인할 수 있다.

보통 이렇게 처리를 하면, 클라이언트에서 임의로 바꿔도 시스템에서 허용가능한 범위까지만 배속을 설정할 수 있게 하는 것이기 때문에 상관없다.
하지만, 특수한 경우에 클라이언트 관리자모드에서는 동작하지 않고, 실제 소스동작에서만 작동해야하는 경우가 있다면 caller를 통해서 가능할 것 같다.

const maxPlayBackRate = 5;
document.addEventListener("DOMContentLoaded", function(){
  var originalDescriptor = Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'playbackRate');

  Object.defineProperty(HTMLVideoElement.prototype,'playbackRate',{
    set:function(value){
      console.log("caller name : " + arguments.callee.caller.name); // 호출 함수 체크
      if(value > maxPlayBackRate) {
        console.log( maxPlayBackRate + "보다 커서 적용안함")
        return;
      } 
      originalDescriptor.set.call(this,value);
    },
    get:originalDescriptor.get
  });

})

function changePlayBackRate(speed) {
  document.querySelector('video').playbackRate = speed;
}

위 코드를 보면 알겠지만, 배속을 바꿀 수 있는 함수를 별도로 정의하고, playbackRate를 변경할 때 어디서 호출했는지 체크할 수 있다.

console.log("caller name : " + arguments.callee.caller.name); // 호출 함수 체크

changePlayBackRate 함수 호출 시
관리자도구에서 속성 값 변경 시
jwplayer onReady 이벤트 시

jwplayer('video').onReady(function() { document.querySelector('video').playbackRate = 3; })

물론 관리자도구에서 변경했다는 함수 이름이 없다는 것이기 때문에, 함수가 아닌 곳에서 진짜 호출했을 수도 있다.
이 부분만 잘 체크하여 사용한다면 혹시 모를 케이스에 대해서도 보장되는 안정적인 시스템이 구축될 것 같다.

+) Object.defineProperty에 대해 찾아보면 알겠지만, 이 함수자체를 관리자도구에서 재정의하더라도 configurable 옵션떄문에 클라이언트가 재정의할 수 없다.

jwplayer 버전 이슈(3) - onSeek, on('seek')

알 수 없는 사용자 — Sun, 8 Aug 2021 17:37:25 +0900

0. 시작

이슈리스트 1. pip 예시에서 본 것과 같이 여러 브라우저에서 jwplayer의 onSeek가 작동하지 않는 몇몇 케이스가 존재한다. 내가 발견한 케이스는 모두 5개로 아래 리스트와 같다.

seek 이벤트 이슈

firefox에서 기본으로 제공하는 pip기능에서 onSeek이벤트 미작동

ios 모바일 safari web에서 video가 사파리 전용 플레이어로 실행됨과 동시에 onSeek이벤트 미작동

클라이언트 브라우저 관리자모드에서 controls속성 추가시 onSeek이벤트 미작동

맥북, safari에서 맥북에서 지원하는 터치바에서 동영상 이동시 onSeek이벤트 미작동

크롬 확장프로그램으로 비디오 조절기능을 사용시 동영상 컨트롤바 제어 불가능

1. 원인파악

위 이슈들의 공통점으로 브라우저 상에서 발생하는 문제가 아닌 브라우저 이외의 프로세스나 하드웨어 자체에서 발생하는 이슈란 걸 알 수 있다.
그렇기 떄문에, 나는 처음에 웹 밖에서 일어나는 문제에서 발생하니깐 개발자가 어떻게 할 수 없는 영역의(?) 문제이지 않을까 생각했다.
이를 확인하기 위한 방법으로 jwplayer에서 제공하는 onSeek 이벤트가 아닌 자바스크립트 자체 API - seeking, 자바스크립트 자체 API - seeked에서 제공하는 이벤트를 통해 테스트하였고, 이 떄는 정상적으로 동작함을 확인했다.

const video = document.querySelector('video');

video.addEventListener('seeked', (event) => {
  console.log('Video found the playback position it was looking for.');
});

이는 곧, jwplayer에서 제공하는 onSeek의 문제임을 확인할 수 있었고, 그럼 이 문제를 어떻게 해결할 수 있을지 찾기 시작했다.

2. 해결

jwplayer 공식문서를 뒤지기 시작했고, 여기서 관련된 내용을 볼 수 있었다.
(https://support.jwplayer.com/articles/jw7-to-jw8-migration-reference)

위 글에서 볼 수 있듯이 jwplayer 7부터는 onSeek 이벤트가 deprecated 되었고, on('seek') 형태의 이벤트로 바뀌었다는 것이다.
deprecated된 이유는 정확히 나와있지 않지만 onSeek 이벤트에 문제가 있고, 그렇기 떄문에 on('seek') 이벤트로 대체된 것이구나 생각했다.

하여튼, 내가 사용했던 jwplayer는 6버전으로 7버전과 비교하여 테스트를 시작했다.

<html>
    <script type="text/javascript" src="jwplayer.js"></script>
    <body>
        <div id="video"></div>
    </body>
    <script>
        jwplayer('video').setup({
            file: "16_04.mp4"
        });

        // (1) jwplayer 6
        jwplayer('video').onSeek(function(){
            console.log('onSeek');
        })
        // (2) jwplayer 7 이상
        jwplayer('video').on('seek', function() {
            console.log('onSeek')
        })
    </script>
</html>

정말 간단하게 로컬에 영상을 넣어서 이벤트가 정상적으로 동작하는지 테스트하였고, jwplayer는 총 3가지 버전으로 테스트하였다.

6.12.4956 version
-> onSeek 이벤트만 존재하는 버전으로 위 이슈들이 나타난다.
7.12.0 version
-> onSeek, on('seek') 이벤트가 둘 다 존재하나 두개의 이벤트에서 모두 같은 증상이 나타난다.
7.12.13 version
-> onSeek, on('seek') 이벤트가 둘 다 존재하고, 두개 이벤트 모두 위 이슈사항들이 나타나지 않는다.

예측이 절반만 맞은 테스트 결과이다. 7버전 이후부터는 on('seek') 이벤트가 별도로 존재했지만, 3번 버전에서만 이슈들이 해결되었다.
jwplayer의 릴리즈 노트를 살펴보았지만, 내용도 너무 많고 대충 살펴보아도 관련한 내용이 보이지 않아 뚜렷한 원인은 찾지 못했다.

아무튼 해결법은 찾았고, jwplayer 6 버전을 사용하는 시스템에서 위 문제를 해결하기 위에서는 jwplayer 7으로 변경하면 문제는 해결될 것으로 보인다.
다만, onSeek의 이벤트만 살펴보았기 떄문에, 소스의 수정없이 버전만 올려서 정상적으로 시스템이 동작하는지 전체적인 검수는 꼭 필요해 보인다.

3. 참고사항

앞서 해결에서 살펴본 테스트에서의 jwplayer 파일은 공식홈페이지에서는 이미 예전 버전은 제공하지 않기 떄문에, 인터넷에서 떠도는 파일로 테스트한 것이다. 그렇기 떄문애, 버전별 테스트가 부정확 할 수도 있다는 점을 참고해야 한다.
firefox pip 동작원리

jwplayer 버전 이슈(2) - playsinline

알 수 없는 사용자 — Sun, 1 Aug 2021 12:37:40 +0900

ios 모바일 웹 사파리에서 비디오 재생시 사파리 전용 플레이어로 재생됨.

0. 시작

ios 모바일 웹 사파리에서 비디오를 재생시키면 사파리 전용플레이어로 재생되는 현상이 발생하였다.
사파리 전용 플레이어로 재생되면서 onSeek 이벤트가 작동하지 않는 문제도 있지만, 이 글에서는 모바일 웹에서 브라우저 전용 플레이어로 뜨는 조건에 대해서 적어보려한다.

1. 원인파악

video 태그의 attribute를 찾아보면 ios 사파리의 플레이어의 사용여부(?) 설정은 playsinline으로 된다는 것을 알 수 있다.

그럼 jwplayer를 사용했을 때, playsinline 속성이 어떻게 들어가는지 확인해보자.

jwplayer 6버전으로 테스트한 결과이다. playsinline속성이 들어가긴 하는데, webkit- 접두사가 붙는 것이 보인다.

확인해보니 video 태그에서 동작하는 playsinline의 정책이 ios버전에 따라 바뀐 것을 알 수 있다.

https://webkit.org/blog/6784/new-video-policies-for-ios/

2. 해결

결국 ios 특정버전 이상부터는 webkit- 접두사가 들어가지 않은 playsinline 속성을 사용해야 하는 것이고, jwplayer 6버전에서는 이를 지원하지 않는 것이다. 고로 2가지 해결방안을 생각해볼 수 있다.

playsinline 속성을 video 로드시 추가하기.

jwplayer 버전올리기.

1) playsinline 속성을 video 로드시 추가하기.

jwplayer가 영상을 재생할 준비가 되었을 떄 속성을 추가하여 동작하도록 처리한다.

    jwplayer('video').onReady(function() {
        document.querySelector('video').setAttribute('playsinline', '');
    })

2) jwplayer 버전올리기.

jwplayer 7.12.13 버전으로 올려 테스트해보니 자동으로 playsinline 속성이 붙는 것이 확인되었다.
하지만, 몇버전부터 적용된건지 문서를 찾아봐도 모르겠다 -_-

https://releases.jwplayer.com/jw-player/