메바동 서식지

이전에 기능 추가 게시글을 올릴 때의 유데미 한글 자막의 사용자 수는 243명이었는데 이제는 361명이 되었다! 사실 한 동안 리뷰도 없고 잠잠해서 이제는 그냥 쓰는 사람들만 쓰나 보다~ 생각했는데 host permission 수정 요청도 있었고, (나는 기업체에서 사용하는 유데미가 따로 있는지 이 분 덕분에 알 수 있었다.) 또 하나의 리뷰가 달렸는데 영상을 재생할 때마다 한글 자막 옵션을 선택하는 것이 불편하다는 리뷰가 달렸다. 사실 처음 만들 때 선택한 옵션을 유지하는 기능을 만들까 말까 고민을 했었다. 고민을 했음에도 넣지 않았던 이유는 누군가 이 확장을 사용해 줄지는 생각도 못했다. 나 혼자 사용할 확장으로 생각했었고, 때문에 귀찮은 기능들은 빼버리자!라고 생각을 했던 것 같다. 아무튼 이제는 ..

application.properties에 server.port={원하는 포트 번호}를 적어 준다. 지금까지는 Spring 5도 아닌 Spring 4 버전을 다루다가 이제는 Spring Boot를 배워야겠다는 생각이 들어 Spring 공식 페이지를 보고 Spring Boot를 배우려고 했다. 근데 이미 8080포트는 사용 중이기 때문에 포트를 바꾸려고 환경 설정을 찾아보아도 포트 번호를 바꾸는 부분이 보이지 않았다. 찾아보니 Spring Boot Starter Web을 사용하는 경우에는 내장 tomcat이 존재하기 때문에 application.properties에 server.port를 적어 설정해 주어야 했다. src > main > resources에 있는 application.properties에 ..

5월에 제작한 '유데미 한글 자막' 크롬 확장 프로그램의 사용자가 243명이 되었고 리뷰도 14개나 달렸다! 첫 리뷰를 받았을 때도 기분이 매우 좋았는데 그 이후에도 리뷰가 하나씩 달릴 때마다 기쁨과 뿌듯함이 날 만족시켜줬다. 그러다가 이번에 리뷰가 하나 달렸는데 만들 때는 한영 자막을 보는 것이 편해 한영 자막만 표시되도록 했었는데 창모드로 보기에 영상이 너무 작아진다는 의견을 달아주셨다. 라고 다짐을 했지만 너무 오랜만에 보는 코드라서 눈에 들어오지 않았고, 눈에 들어오지 않으니 의욕이 생기지 않았다. 그래도 어찌어찌 어제 완성을 시켜 검토 요청을 하였고 오늘 업데이트가 되었다! 기존에는 이렇게 못생긴 번역 버튼을 만들어 해당 버튼을 눌렀을 때 한영 자막이 나타나도록 했었다. 저 부분이 너무 신경 쓰..

오늘 저번에 제작한 크롬 확장인 '유데미 한글 자막'에 리뷰가 달렸다! 처음 달려보는 리뷰라서 하루 종일 기분이 너무 좋았다. 내용을 보니 2줄 자막부터 영문과 한글이 겹쳐 보이는 현상이 있다는 내용과, 자막을 '동영상 아래 표시' 말고 영상에 겹쳐서 나오는 기능을 추가해 줬으면 좋겠다는 내용이었다. 테스트할 당시에 자막이 한 줄짜리로 되어 있는 영상으로만 테스트해서 두 줄 이상 표시될 시 저렇게 난장판이 되는지 몰랐었다. 그래서 한 줄짜리 자막에는 영문과 한글이 같이 붙어 있는 게 보기 좋다고 margin-top을 음수 값을 줘서 서로 붙게 만들어 놨는데 그 부분이 이런 문제를 일으켰다. margin-top 값이 문제가 되기 때문에 영문 자막의 높이를 가져와 한글 자막의 높이보다 높을 경우 margin..

개발자가 되고 싶은 메바동은 5월 6일 기초를 다지겠다고 Udemy에서 강의를 구매하였고, 20일 정도가 지난 지금 강의를 단 1개도 시청하지 않았다. 물론 공부를 하기 싫은 마음도 있었지만 정말 큰 문제는 그게 아니었다. 정말 정말 공부를 해서 기초를 다지고 싶었고 어서 빨리 심화 과정으로 넘어가 프로젝트도 진행하고 싶었고 개발자다운 모습을 갖추고 싶었다. 정말 큰 문제는... 영어를 모르겠다. 어린 시절 시골에서 자랐던 메바동은 초등학생 시절 영어의 중요성을 느끼지 못하였다. 영어 시간은 단지 외계인이 나오는 프로그램을 보면서 노래를 따라 부르는 시간이었을 뿐. 그렇게 시간이 흘러 중학교에 올라가고 기초가 없던 나는 영어의 중요성을 알지만 아무것도 모르는 상태가 되었고, 아무것도 모르니 흥미가 생기지..

Java Spring과 web socket, JSch를 이용하여 웹에서 SSH를 접속하는 Terminal을 구현해 보았다. 프론트는 React를 잘 모르지만 React스럽지 않은 React를 사용하고, Xterm.js를 이용해 Terminal 화면을 띄어주고 sockjs-client를 이용해 소켓 통신을 사용하였다. 제대로 만들지 못했지만 그래도 정상적으로 작동하기 때문에 뿌듯해서 블로그에 글을 올려본다. 사용한 라이브러리들의 라이선스는 spring-websocket은 Apache 2.0 JSch는 BSD Xterm.js와 sockjs-client는 MIT 라이선스를 사용하고 있다. 우선 Spring에서는 pom.xml에 maven repository에서 spring-websocket과 JSch를 가져와..

Javascript의 window.open()을 이용하여 팝업창을 열었을 때, 해당 창이 닫힐 때 특정 행동을 수행하고 싶었다. 찾아보니 beforeunload 이벤트를 설정해주면 됐었는데 열린 팝업창의 스크립트에서 설정하는 방법이 있고, 팝업창을 여는 곳에서 직접 설정해주는 방법이 있었다. 열린 팝업창의 스크립트에서 설정하는 경우는 그냥 window.addEventListener('beforeunload', function(event) { // 특정 작업 }); addEventListener를 통해 beforeunload 이벤트를 정의해주면 된다. 하지만 내가 원한 작업은 부모 페이지의 요소를 변경하는 것이기 때문에 팝업창에 이벤트를 정의해주고 opener. ~ 하면서 작업하는 것보다 부모 페이지에서 ..

오늘 이것저것을 하던 중 Ajax의 결괏값을 변수에 대입하려고 하였는데 아무리 변수에 대입을 해도 원하는 결과가 나오지 않았다. var useYn; $.ajax({ url: 'http://localhost:8080/example', dataType: "json", type: "POST", data: { userSeq: $('#userSeq').val() }, success: function (result) { useYn = result; }, }); 이런 식으로 사용자의 시퀀스로 DB에 사용 여부를 조회한 다음 true, false를 useYn에 대입해주려고 하였다. 그런데 계속 원하는 결과가 나오지 않았고 디버그를 해보니 useYn의 값이 계속해서 undefined 였다. 그래서 jQuery.ajax(..

유튜브를 보다 보면 한국인이 올린 영상에 아무리 스크롤을 해도 한글로 작성된 댓글이 나오지 않는 경우가 많았다. 그래서 올해 초부터 '기회가 된다면 한글로 작성된 댓글만 필터링해서 보여주는 크롬 확장을 만들어보자.'라고 생각만 하고 만드는 방법도 제대로 모르겠고 귀찮기도 해서 만들지 않았었다. 이제 회사를 9개월 정도 다니다 보니 대충 어떤 식으로 뭘 찾아서 응용하면 되는지 알 수 있는 능력이 생긴 것 같았고 계속 생각만 했던 한글 댓글만 보여주는 확장 프로그램을 만들기로 하였다. 우선 생각한 게 댓글을 불러오는 ajax가 있을 거라 생각하였고 무작정 유튜브에 들어가 관리자 도구를 열었다. 그런 다음 댓글을 불러온 뒤 네트워크 탭에서 확인을 해보니 알기 쉽게 comment라고 붙어있는 ajax가 바로 보..

table을 이용하여 가입 경로를 표시해 주는 화면이 있었는데 기타 항목은 그 밑으로 세부 사항을 표시해 주고 있었다. 위와 같은 느낌이었는데 당연한 거지만 디자인은 훨씬 깔끔하고 제대로 된 내용이 담겨 있었다. 나는 이 화면에서 기타는 접혀 있다 사용자가 더 보기를 원할 때 클릭해서 하위 항목이 열리는 화면으로 바꾸고 싶었고 아무 생각 없이 ::after를 이용해 삼각형을 표시해주었다. .toggle::after { content: ''; position: absolute; top: 140px; left: 195px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top..