코딩공부 블로그

유튜브 영상 마지막에 추천영상으로 영상 가리는 것 지우기/없애기

w hys — Sat, 2 Apr 2022 18:12:46 +0900

유튜브 영상 마지막에 구독이나, 다음 영상 추천이 뜨면서 영상을 가려서 마지막 잠깐동안 자막이나 화면을 가리는 경우가 있다.

대형이나 전업 유튜버들은 전용 페이지/틀을 만들어서 영상을 안가리고 다음 추천영상을 띄우는데, 소규모 유튜버나 아직 미숙한 유튜버들은 추천영상을 설정해놓고 그냥 본인의 영상의 중요한 부분을 가리는 경우가 있다.

내용이 궁금하지만 일반적으로는 확인이 불가능하다.

하지만 유튜브 특성상 인터넷 브라우져에서 돌아가는 것이고 대부분 브라우저는 정적인 상태에서 콘솔에 자바스크립트 명령어를 입력하여 화면을 제어할 수 있다.

방법은 간단하다.

크롬기준 Ctrl + Shift + i 혹은 F12 버튼을 눌러서 개발자 도구에 진입한 후 console창을 열어서

for(var i in document.getElementsByClassName('ytp-ce-element')) {$('.ytp-ce-element').remove();}

를 입력하고 엔터를 쳐주면 된다.

코드 해석은 대충 제이쿼리 선택자로 ytp-ce-element라는 클래스 이름을 가진 객체를 선택하여 제거(remove())하는 메소드를 자바스크립트 forEach문으로 ytp-ce-element라는 클래스 이름을 가진 dom객체의 갯수 만큼 반복한다는 뜻이다.

왜 자바스크립트와 제이쿼리를 같이 써줬냐면,

콘솔창에선 제이쿼리 선택자가 2개 이상이 되는 객체를 동시에 선택할 수 없어서 제이쿼리가 아닌 자바스크립트로 httpSelection에 접근했고,

자바스크립트로는 클래스 네임으로 dom객체에 접근할 때 하나씩 안되고 httpSelection에 접근이 되어 index로 접근 해야 되기 때문에 인덱스를 타지 않고 클래스네임에 해당하는 객체 중 첫번째 형제에 접근이 가능한 제이쿼리 선택자를 사용해서 접근했다.

[spring boot] Communications link failure The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server. 에러

w hys — Thu, 27 Jan 2022 11:39:50 +0900

로컬 DB를 사용 중이다가 aws ec2에 구축되있는 데이터베이스(aws rds가 아니라 ec2안에 구축해놓은 db, MySql)에 접근 하도록 application.properties에 datasource 정보를 변경 했는데..

Communications link failure The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.

와 같은 메시지가 뜨면서 접속이 안됬다.. 검색하면 커넥션이 너무 많아서.. 타임 아웃에 대한 내용.. mysql 권한에 대한 내용...jdk 버전에 대한 내용... 많았지만 딱히 해결은 되지 않았다.

워크벤치에서 연결해봤더니 같은 주소 아이디 비밀번호로 잘 연결이 되었다. 아무래도 입력한 값이 틀린 것 같지 않아

되지 않는 이유를 자세히 찾아보고자 sts 내의 data source explorer로 프로젝트 내에 포함되어있는 mysql 커넥터도 넣고 접속해봤는데 역시 안되었다.

근데 mysql 커넥터를 찾는 중 8.0.18버전과 8.0.27버전 2개가 설치 되있는 것을 발견..

커넥터를 8.0.27로 바꾸니 접속이 되었다... 이 프로젝트에선 gradle을 사용하고 있어서 bulid.gradle를 열어 수정을 했다.

전 :
dependencies {
runtimeOnly 'mysql:mysql-connector-java'
}

후 :
dependencies {
runtimeOnly 'mysql:mysql-connector-java:8.0.27'
}

아마 개인별로 설정에 따라 그냥 runtime으로 되있을수도 있는데 앞이 중요한건 아니고 뒤에 프로퍼티 값에 버전을 명시해준 후 프로젝트 우클릭

해준 후 빌드가 완료된 후 프로젝트를 다시 실행하니 정상적으로 작동하였다.

[react-native/android] Attempt to invoke interface method 'boolean com.swmansion.reanimated.layoutReanimation.NativeMethodsHolder.isLayoutAnimationEnabled()' 에러

w hys — Thu, 30 Dec 2021 15:16:32 +0900

깃에서 프로젝트를 풀하고 모듈을 재설치하고, 안드로이드를 재빌딩한 후 로컬에서 앱을 실행했더니,

Attempt to invoke interface method 'boolean com.swmansion.reanimated.layoutReanimation.NativeMethodsHolder.isLayoutAnimationEnabled()'

에러가 발생했다.

검색해보니 한국사이트에는 정보가 별로 없고, 나와 같은 문제를 겪은 외국인들은 꽤 많았던..

문제는 react-native-reanimated의 버전이 리액트의 버전과 호환되지 않아서 라는 것 같다. 검색해서 나온건데 자국어가 아니다보니 해석의 오류가 있을 순 있는데..

버전 히스토리를 보니 퍼플리싱 된지 한달도 안된 버전이 설치된 거였다.

그래서 프로젝트의 노드모듈폴더에서 react-native-reanimated 삭제하고

터미널에서

yarn add react-native-reanimated@2.2.4

를 입력하고 프로젝트를 실행했더니 문제없이 실행되었다..

[react-native]리액트 네이티브 포커스 이동

w hys — Wed, 22 Dec 2021 17:56:48 +0900

리액트 네이티브 포커스 이동 인터넷에 있는 글들은 대부분 작동하지 않았다.

예를 들면, 이런 코드가 들어있는 글이다.

 this.secondTextInput.focus();

ref={(input) => { this.secondTextInput = input; }}

구버전의 리액트 네이티브에서 작동하던 코드가 버전업으로 인해 작동하지 않는 것으로 보인다.

대부분, this가 사용되지 않는다는 waring이 뜨는데, 실제로 프로그램은 돌아가도 코드는 작동하지 않는다.

그래서 스택 오버 플로우를 뒤지던 중에 한 글을 발견했는데, 그 방법대로 쓰니 제대로 작동하였다.

https://stackoverflow.com/questions/32748718/react-native-how-to-select-the-next-textinput-after-pressing-the-next-keyboar

React Native: How to select the next TextInput after pressing the "next" keyboard button?

I defined two TextInput fields as follows: <TextInput style = {styles.titleInput} returnKeyType = {"next"} autoFocus = {true} placeholder = "Title" /> <TextInput style = {...

stackoverflow.com

import React, { useRef } from 'react'
...


const MyFormComponent = () => {

  const ref_input2 = useRef();
  const ref_input3 = useRef();

  return (
    <>
      <TextInput
        placeholder="Input1"
        autoFocus={true}
        returnKeyType="next"
        onSubmitEditing={() => ref_input2.current.focus()}
      />
      <TextInput
        placeholder="Input2"
        returnKeyType="next"
        onSubmitEditing={() => ref_input3.current.focus()}
        ref={ref_input2}
      />
      <TextInput
        placeholder="Input3"
        ref={ref_input3}
      />
    </>
  )
}

[Spring/mybatis] HTTP Status 500 - Internal Server Error 발생시 해결

w hys — Mon, 5 Jul 2021 07:41:33 +0900

HTTP Status 500 - Internal Server Error

CommunicationsException: the last packet successfully received from the server was 134,135,982 milliseconds ago.

해당 문제는 mysql이 (일반적으로) 8시간 이상 접근이 없으면, 해당 커넥션풀을 끊어버려서 생기는 에러일 확률이 높다.

해결하기 위해선 접근시간을 늘리거나(대부분 추천하지 않는다고 한다.) 오토리커넥트 후 재접속시 1줄 이상의 결과값을 내는 쿼리를 보내는 것이라고 한다.

db.properteis 파일의 url 경로 혹은 데이터소스에 직접 데이터베이스 url을 입력했을 경우 해당 주소 뒤에

?autoReconnect=true

를 붙이고

datasource 프로퍼티에

의 밑에

validationQuery : 1의 결과가 나오는 한줄의 쿼리를 던진다.

testWhileldle : 커넥션이 놀고 있을 때, validationQuery를 통한 유효성 검사 여부

timeBetweenEvictionRunsMillis : 해당 시간마다 유효성 검사 진행

이 세줄을 추가하라는 글이 대부분이다.

근데 나는 이 세줄을 추가하면 무조건 온갖 매핑 에러가 발생했다. 그래서 해당 클래스파일의 @Autowired 어노테이션을 지워보기도 했는데 그러면 또 다른 오류가 발생하고.. 정작 어노테이션을 지우고 위 세줄을 지우면 매핑이 안되서 오류가 발생... (init 메소드 호출시부터 발생 하는 것은 아니라 일단 실행은 되는데 해당 클래스 파일이 작동하는 페이지에서 에러가 발생한다..)

제일 눈에 띄게 발생했던 오류가 UnsatisfiedDependencyException 인데, 검색해보면 엄한 클래스 파일 건들지 말고 db관련 프로퍼티 파일이나 xml에 문제가 있는 것이니 db주소에 오타있는지 이런 것들을 확인하라는 글 뿐, 정작 validationQuery와의 관계에 대한 글은 한국어웹이든 영어웹이든 찾을 수가 없었다. 분명 저 세줄을 추가 해서 생긴게 분명한데 왜 validationQuery와 UnsatisfiedDependencyException를 같이 검색해도 해당하는 내용이 나오지 않는 걸까?

해결하고 난 지금도 이 부분은 정말 의문점이다. 분명 나랑 같은 방식으로 해결한 사람이 있을텐데 관련 글은 찾아볼 수가 없었다. UnsatisfiedDependencyException이 발생하는 경우가 다른 경우에도 많아서 해당 자료들이 묻힌건지..

그럼 이게 왜 발생하느냐..? 이건, dataSource의 타입을 봐야 알 수 있는 건데, 무작정 뭐든간에 데이터소스에 저 세줄을 추가하라고 하니 문제가 발생할 수 밖에 없는 거 였다.

위의 내용은 DBCP타입의 dataSource일 경우 (<dataSource type="DBCP">) 올바른 해결법이 맞다. 그리고 더 먼저부터 있던 거고 이 내용으로 해결방법에 대한 글이 많은 것은 당연한 것 이긴 하다.

근데 만약 내 dataSource의 타입이 POOLED라면?(<dataSource type="POOLED">) 위의 해결책은 적절하지 않고 맞지 않는 내용의 프로퍼티가 있으니 당연히 매핑이 실패할 수 밖에 없는 것 이었다.

스프링책에 있는 20page 남짓한 mybatis 사용법만 보고 사용하고 있으니 바른 해결책이 나올리가 없는 것이기도 하고.. 해당 내용은 ibatis에서 사용되던 validationQuery가 mybatis로 넘어오면서 사라졌기 때문이다. 뭐 java 배울 때도 구버전에선 쓰이던 메소드가 안정성이나 여러가지 이유로 사용을 권장하지 않거나 사용되지 않는 경우가 많았으니 이를 당연히 생각해야하는 건가 싶다가도 이게 메소드가 사라진건지 아니면 다른 설정이 잘못된건지 내가 어떻게 알겠는가.. 배우고 있는 입장인데 ㅠㅠ

여튼 결론을 말하자면 같은 역할을 하는 프로퍼티가 POOLED타입의 dataSource에도 있다는 것.

dataSource의 프로퍼티 밑에 validationQuery와 친구들 대신 아래의 세줄을 입력해주면 되는 것이었다.

poolPingEnabled : poolpingquery를 사용해 유효성 검사를 할것인지 여부

poolPingQuery : 1의 결과가 나오는 한줄의 쿼리를 던진다.

poolPingConnectionsNotUsedFor : 해당 시간마다 유효성 검사를 진행

여기에 써놓은 역할을 보고.. 다시 위로 올라가 validationQuery쪽 역할을 보면 이름은 다르지만 하는 일은 완전히 똑같다는 것을 알 수 있다. 이 세줄을 추가한 결과 내 웹프로그램은 아주 팽팽 잘 돌아간다.. 이제 서버에 올려놓은 것이 8시간 후에도 500에러 없이 돌아가는지만 확인 하면 될 것 같다.

InternalResourceViewResolver 사용시 여러 폴더를 참조하기

w hys — Mon, 5 Jul 2021 07:04:43 +0900

이 것도 인터넷을 참 많이 뒤져보고, 다른 스프링 배우는 사람들이나 알려주시는 분들에게 물어봤는데 인터널리소스뷰리졸버 같은 경우는 그냥 모든 컨트롤러에 한번에 작용하시는 방식이라고 하더라...

멀티리졸버 구현을 위해선 인터널리소스뷰리졸버를 사용하지않고 개인이 커스텀 리졸버를 만든 후, 여러개의 리졸버의 빈객체를 생성한 후, 리졸버간에 순위를 둬서 하나의 리졸버가 파일을 찾지못해서 null값을 반환하면 다른 리졸버가 작동하는 방식으로 구현하면 된다고 하는데, 급하게 배우기에는 이해할 시간도 부족해서 그냥 편법이라고 불리는 방식을 사용했다.

init 메소드가 호출되는 컨텍스트xml파일

<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<beans:property name="prefix" value="/WEB-INF/" />
</beans:bean>

원래 예제에선 serfix도 적혀있었는데(.jsp) 이전에 썼던 글에도 있는데 .do 매핑 참조할 때 이런방법 저런방법 찾다가 이게 될까 하면서도 리졸버에 .jsp를 지우고 컨트롤러에 반환값에 전부 .jsp를 붙였었는데, 해결하고 나서 되돌릴려니까 안되는 것도 아니고 또 전부 다 고치기 귀찮아서 안돌려놨다.

return "/board/"+"changeBoard.jsp";

return "/shop/"+"index.jsp";

방법은 그냥 해당 경로안에 분리할 파일들의 경로를 하위폴더로 만들고 컨트롤러의 스트링 리턴값의 앞에 /경로명/를 추가해주는 것.. 이 방법 찾은 글에서는 편법이라고 이렇게 써도 되는건가 싶다고 써두셨던데.. 인터넷 뒤져보기도 하고 다른 사람들한테 물어보기도 하고 그러니까 인터널리소스뷰리졸버를 사용하는 이상 어쩔 수 없다고 하는 내용밖에 보질 못했다.

어차피 서버단에서 작동하는 내용이라, 클라이언트단에선 매핑된 주소만 보이지, 저런식의 경로로 보이지 않으니까 딱히 상관없지 않을까 싶기도..

resources 매핑

w hys — Mon, 5 Jul 2021 06:49:18 +0900

spring/appServlet/servelet-Context.xml

웹은 글씨와 css꾸미기만으로 이루어지는 게 아니니까 동영상이나 사진등은 필수요소 중에 하나고.. 이런 파일들을 모아놓은 곳이 src/main/webapp/resources 폴더인데, jsp 파일 작성시 이 폴더 경로에 있는 파일을 컴퓨터가 찾기 쉽게 해주기 위해 xml파일에 리소스 매핑을 해두는 것이었다.

근데 내가 사용하는 데이터 베이스는 기존에 자바 스윙 어플리케이션을 만든 것에 쓰이던 데이터 베이스인데, 당시에 img 폴더에 파일을 넣어놨었고, 데이터베이스 과부화를 줄이고자 blob데이터형식이 아니라 varchar방식에 이미지의 주소를 넣어두고 참조하는 방식으로 사용했었는데, 그 경로가 img/~이런 식으로 되어있었고, 자바 파일의 경로라 /img/ 이런식으로 되있진 않았었다.

이 형식대로 바로 참조 할 수는 없을까? 해서 찾아봤는데 web.xml 파일에 서버 시작시 호출되는 DispatcherServlet의 init메소드 호출시 사용되는 설정파일에 리소스 매핑을 해당하는 형식으로 한줄 추가하면 됬던거라, 바로 한줄을 추가해줬다.

책 예제를 참조해서 프로젝트를 수행하고 있는데, 왠지 책 따라하다보니 정작 root-context.xml에는 한줄도 작성된게 없더라... 그래서 인터넷 예제 참조할 때 참 헷깔린다. 어디에 작성해야 돌아갈지.. 스프링 배우면서 xml 다루는게 제일 힘들다..

mybatis 여러개의 mapping 파일을 동시에 사용

w hys — Mon, 5 Jul 2021 06:33:07 +0900

현재 나는 마이바티스를 사용 중이고 해당하는 매핑파일을 3개 사용중이다. 독학을 하는 사람들 다 비슷하게 겪는 문제겠지만, 보통 책에서 나오는 예제들은 대부분 하나씩만 사용하는 예제들.. 이것도 마찬가지였고..

mapper resource가 한줄 밖에 없었는데.. 이게 하나의 매핑 파일에 모든 sql문을 몰아 넣어야하는지, 아니면 여러개의 매핑파일이 사용 가능한지 여러개가 사용 가능하다면 <mappers></mappers>안에 한줄씩 넣어서 여러번의 <mappers></mappers>가 필요한건지.. 아니면 하나 안에 여러줄의 리소스를 넣을 수 있는건지..

단순하게 생각하면 결과인 위의 내용이 맞지만, 배우는 과정에서 그렇게 단순하게 생각할 수가 없다.. 조금씩이지만 여러 언어를 접하면서 겪은게 어떤 언어는 이 방식이 가능한데 어떤 언어는 불가능하고.. 문법이 틀리면 아예 작동을 안하는데 이게 어디서 잘못된건지 찾기 힘든 경우가 많아서..

스프링은 더더욱 대규모 프레임 워크라 하나 문제가 생기면 어디서 생긴건지 알 수가 없는 경우가 많았다 ㅠㅠ(대부분 매핑문제.. 근데 문제는 의존성 주입이 어디서 안된건지를 찾기가 매우매우 힘들다는거 ..)

그리고 이 걸 해결하다가 또 문제가 생겼던게 맨위의 Alias로 VO객체의 위치를 지정해주지 않아서 문제가 생겼었다.. 이것도 왜 문제인지 한참을 찾았는데, 이게 java파일에서 오류가 난것은 찾기가 쉬운데 jsp파일보다 xml에서 문제가 생기면 대체 왜 안되는지 어떤 xml에서 문제가 생긴건지 찾기가 참 힘들다.. xml이 경로 위치도 여기저기 아무데나 퍼져있고..(비지니스 레이어에도, 프레젠테이션 레이어에도, 프로젝트 단에도, 톰캣 서버에도 다 있어서.. 무슨 사혼의 구슬조각도 아니고 여기저기 다 퍼져있고ㅠㅠ) 이클립스가 오류 교정을 안해주기 때문에 ㅠㅠ

이게 알아서 이것저것 만들어놓으면 컴퓨터가 조립해주는건 당연히 편한데, 처음 시작할 때 이거랑 이거가 짝이야, 이거를 결합해줘 하고 프로그래머가 선언해줘야 하는 부분을 제대로 해놓지 못하면 컴퓨터가 해매는데 어디서 해매는지 자기도 모르니 나한테 알려주지도 못한다. 편하지만 골머리가 ㅠㅠ

다른 컨트롤러에 있는 do 경로로 이동

w hys — Mon, 5 Jul 2021 06:16:41 +0900

BoardController

@RequestMapping("/getBoardList.do")
public String getBoardList(BoardVO vo, Model model) {
vo.setRegDate(new Date(System.currentTimeMillis()));
if(vo.getSearchCondition() == null) vo.setSearchCondition("TITLE");
if(vo.getSearchKeyword() == null) vo.setSearchKeyword("");
if(vo.getSearchCondition().equals("TITLE")) {
model.addAttribute("boardList", boardService.getBoardListT(vo));
} else if(vo.getSearchCondition().equals("CONTENT")) {
model.addAttribute("boardList", boardService.getBoardListC(vo));
}

model.addAttribute("page", vo.getPage());

return "/board/"+"getBoardList.jsp"; // View �̸� ��
}

LoginContoller

@RequestMapping(value = "/login.do", method = RequestMethod.POST)
public String login(UserVO vo, UserDAO userDAO, HttpSession session, Model model) {
if(vo.getId().equals("")) {
vo.setId("없는아이디");
}
UserVO user = userDAO.getUser(vo);
if (user != null) {
session.setAttribute("userName", user.getName());
return "redirect:getBoardList.do";
} else
model.addAttribute("incolect","아이디 혹은 비밀번호가 틀렸습니다.");
return "/board/"+"login.jsp";
}

아마도 그냥 ***.do로 이동시 현재 컨트롤러내에서 매핑 주소를 찾게되는 것으로 생각된다..

따라서 스트링 반환값에 redirect:를 해주면 해당 경로로 리다이렉트 처리를 해줘서 해당 주소를 직접 입력해서 가는 것과 같은 효과를 얻게되어 다른 컨트롤러라도 찾게되는 것으로 이해하는 중..

또 리다이렉트 처리시 장점이 매핑 주소가 직접 입력한 주소로 가는 것이 아니라 해당 주소로 바로 표기되기 때문에 주소를 가리는 데도 도움이 되는 듯 해서 같은 컨트롤러 내라도 do로 제어를 이동할 경우엔 전부 리다이렉트 처리를 해주었다.

jsp배울땐 jsp 태그로 sendRedirect 처리시 제어를 두번하게 되서 서버에 과부하를 줄 수도 있다고 하는데 이것도 같은 것인지는 모르겠다... 브라우저에서 뒤로가기 목록을 봤을 때 기존 주소가 없는걸 봐선 아닌 것 같기도 하고 애초에 do로 가는 매핑 같은 경우는 jsp파일을 거치는게 아니라 서버단에서 처리 후 최종적으로 jsp파일을 띄우는 것이라 요청이 2번 들어올 것 같지는 않다고 이해 하는 중..

JTable TableRowSorter를 이용한 검색기능 구현

w hys — Sun, 30 May 2021 20:20:39 +0900

DefaultTableModel model = new DefaultTableModel(data,header) {
public boolean isCellEditable(int rowindex, int mCollndex) {
return false;
}
}; //테이블 모델 선언
JTable table=new JTable(model);

final TableRowSorter<TableModel> sorter = new TableRowSorter<TableModel>(model);//TableRowSorter 선언, 나중에 리스너 사용을 위한 상수선언.

table.setRowSorter(sorter); // JTable에 RowSorter 설정

final JTextField filterText=new JTextField(); // 리스너 사용을 위한 상수 선언
filterText.setPreferredSize(new Dimension(300,30));
filterP.add(filterText);
JButton filterB=new JButton("검색");
filterB.setPreferredSize(new Dimension(300,30));
filterP.add(filterB);

filterB.addActionListener(new ActionListener() { //버튼에 익명 액션리스너 구현

public void actionPerformed(ActionEvent e) {
// TODO Auto-generated method stub
String text = filterText.getText(); // 텍스트 필드의 데이터를 가져옴
        if (text.length() == 0) {
          sorter.setRowFilter(null); // 데이터가 없으면 초기화
        } else {
          sorter.setRowFilter(RowFilter.regexFilter(text)); // 데이터가 있으면 해당 내용으로 필터 설정, 즉 해당하는 열만 검색됨.
        }
}
});

실행결과