메바동 서식지

"JavaScript Design Pattern" 포스팅은 ChatGPT에게 "Essential design patterns for JavaScript developers to learn"로 질문한 뒤 나온 내용에 대해 정리하는 포스팅입니다. 1. 싱글톤 패턴(Singleton Pattern) 싱글톤 패턴은 객체 지향 프로그래밍(OOP, Object-Oriented Programming)에서 클래스가 하나의 인스턴스만 가질 수 있도록 하고, 이에 대한 전역 접근 지점을 제공하기 위해 사용되는 디자인 패턴이다. 동일한 객체의 인스턴스를 여러 개 생성할 필요 없이 데이터베이스 연결이나 configuration 설정과 같은 특정 리소스에 대한 중앙 집중식 접근 지점을 제공하는 데 자주 사용된다. 즉, 한 번에..

"JavaScript Design Pattern" 포스팅은 ChatGPT에게 "Essential design patterns for JavaScript developers to learn"로 질문한 뒤 나온 내용에 대해 정리하는 포스팅입니다. 1. 공개 모듈 패턴(Revealing Module Pattern) 공개 모듈 패턴은 모듈 패턴과 유사한 JavaScript의 디자인 패턴이다. 공개 모듈 패턴에서는 모듈 패턴과 마찬가지로 모듈의 비공개 멤버와 함수가 즉시 호출 함수 표현식(IIFE, Immediately Invoked Function Expression)을 사용하여 정의된다. 공개 모듈 패턴은 비공개 변수와 함수가 있는 모듈로 시작한다. 이러한 변수와 함수는 모듈 외부에서 접근할 수 없다. 모듈은..

앞으로 작성될 "JavaScript Design Pattern" 포스팅은 ChatGPT에게 "Essential design patterns for JavaScript developers to learn"로 질문한 뒤 나온 내용에 대해 정리하는 포스팅입니다. 전에 디자인 패턴을 공부하고자, 재난 지원금으로 Head First Design Patterns 책을 구입했었다. 알 수 없는 외국 감성과 아직 디자인 패턴이 필요하지 않다고 생각했던(참으로 어리석은 생각) 나는 구입만 하고 책을 책장에 고이고이 모셔 두었다. 이제는 개발(이라고는 하지만 내가 제대로 하고 있는 건지 모르겠다.) 일을 한 지 만 3년이 다 되어가 진짜로 디자인 패턴에 대해 알아야 할 때라는 생각이 들었다. 하지만 개정판은 절대 나올 것..

크롬 확장 프로그램인 '유데미 한글 자막'. 유데미 강의를 보려면 구글 크롬을 항상 실행시켜줘야 했다. 하지만 맥북에서 크롬을 사용하게 되면 배터리 소모량도 더 많고, 뭔가 발열도 더 심한 것 같아 늘 Safari 확장을 만들어 사용하고 싶었다. 찾아보니 쉽게 크롬 확장 프로그램을 Safari용 Web Extension으로 변환하는 방법이 있었다. xcrun safari-web-extension-converter ${확장/경로} 위 명령어를 날리면 크롬 확장이 사파리용 확장 프로젝트로 변환이 된다. 당연한 소리겠지만 Mac OS 환경이어야 하고, Xcode가 깔려있어야 한다. 이렇게 크롬 확장을 만들었던 폴더를 두고 터미널을 이용해 해당 경로로 이동한다. 그 후 위의 명령어를 날리면 Safari용 확장 ..

유데미 한글 자막을 만들고 사용자가 늘어가는 것에 즐거움을 느낀 것도 잠시, 2022년이 시작함과 동시에 너무 나태해져 버린 나는 요청사항이 있어도 수정할 의욕이 생기지 않았었다. 더군다나 핑계로 들릴 수도 있었겠지만 2022년이 된 후 종종 출장을 가게 되어 더욱 의욕이 생기지 않았다. 4월 같은 경우는 회사에서 보낸 평일과 출장지에서 보낸 평일이 거의 비슷비슷했던 것 같다. 아무튼 나태해진 나를 다시 열심히 움직일 수 있도록 하기 위해 지난 2월에 사용자들이 꽤나 많이 (2명 정도?) 요청한 자막 위치 변경 기능을 넣어 업데이트하였다. 그 외에도 대본을 보이지 않게 한 뒤 자막 출력이나 유데미 코리아에서 공식적으로 만든 한글 자막 동시 표시 요청 등이 있었는데, 전자의 경우 대본에서 번역된 내용을 가..

html 안에 html을 넣고 싶었다. html로 문서를 작성 중이었는데 하나의 파일이 너무 지저분해지는 것 같아서 각 세부내용들은 다른 파일에 작성하고 불러오는 것이 목적이었다. 위처럼 contents라는 id를 가진 div 안에 contents.html에 작성된 내용을 넣고 싶었다. Javascript의 fetch를 이용해서 html text를 가져와 innerHtml을 이용하면 손쉽게 해결할 수 있었다. 물론 이 방법은 index.html을 그냥 브라우저에서 여는 형식으로는 동작하지 않는다. fetch를 이용하는 방법이기에 이 글을 읽는 사람이라면 알고 있을 것이다. async function fetchHtmlAsText(url) { return await (await fetch(url)).text..

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

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

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

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