코드 땜장이

이번에 내가 만들어둔 크롬확장프로그램이 내려갔다... 위반사항이 있는 것을 고지해주었지만 메일을 읽는 습관이 안되어있어서 뭐 그럴수 있지 참고로 받은 위반사항은  Purple Potassium 라는 위반사항인데... 과도한 권한?? 문제라고 한다. tabs라는 권한을 요청했는데 사용하지 않았다라는 이유로 내려갔다고 한다. 뭐 리뉴얼 하려고 했던것이라 딱히 내려가도 상관 없는 앱이기는 했지만 말이다. 어쨋든 다시 만들기 전에 잠깐 살펴보는 용도로 샘플앱을 만들어보려고 한다. 일단 menifest version3에 맞춰서 만들려고 하니 참고 바란다. menifest 생성 위처럼 menifest.json 파일을 만들고 위와 같이 타이핑 해보자 { "name" : "hello extension" , "description" : "just say hello" , "version" : "1.0" , "manifest_version" : 3 } chrome://extensions 을 들어가서 "압축해제된 확장 프로그램을 로드합니다."를 선택 후 해당 폴더를 선택하면 크롬확장프로그램 설치가 완료된다. 하지만 아무것도 한것이 없기 때문에 아무것도 없다..... action 추가. menifest.json을 아래와 같이 나는 이때 아이콘도 같이 포함시켜주었으니 참고 하자. 아이콘 쓸만한 것이 없다면 default_icon은 제거해도 된다. { "name" : "hello extension" , "description" : "just say hello" , "version" : "1.0" , "manifest_version" : 3 , "action" : {

 최근에 주변에 보면 주변 개발자들은 VSCode 혹은 JetBrain사의 IDE 두가지의 IDE를 많이 쓰는 것으로 보인다. 두가지 IDE 모두 plugin을 지원을 한다. 꽤나 많은 plugin들이 있지만, 나만 쓰는 혹은 우리회사만 쓰는 규칙에 딱 맞는 플러그인을 찾기에는 힘들 때가 있다.  그렇다면 플러그인을 직접 제작하면 어떨까? 해서 작성해본다. 개인적으로 WebStrom을 주 IDE로 쓰고 있다. 프로젝트 생성  나는 WebStrom 플러그인을 제작하고자 하기 때문에 IntelliJ Community버전을 설치했다. 또한 java11이상이 필요하여 OpenJDK 17.0.3을 설치하여 제작을 하였다.  프로젝트 생성은 매우 간단하다.   그저 새로운 프로젝트를 생성하면서 IDE Plugin을 클릭만 해주면 적절하게 작성을 다 해준다.  프로젝트를 만들게 되면 가장 먼저 살펴보면 좋을만한 내용은 META-INF/plugin.xml 파일이다. <!-- Plugin Configuration File. Read more: https://plugins.jetbrains.com/docs/intellij/plugin-configuration-file.html --> <idea-plugin> <!-- 플러그인의 고유 식별자입니다 . FQN 이어야 합니다 . 플러그인 버전 간에 변경할 수 없습니다 . --> <id> com.example.demo </id> <!-- 공개 플러그인 이름은 Title Case 로 작성해야 합니다 . Guidelines: https://plugins.jetbrains.com/docs/marketplace/plugin-overview-page.html#plugin-name --> <name> Demo </name> <!-- 플러그인 페이지에 표시되는 표시된 공급업체 이름 또는 조직 ID 입니다

 예전에 올린자료 중에 파일 드래그앤 드랍을 구현을 한 적이있다. file drag and drop  작성한 코드중에 보면 html에 파일을 드랍을 하였을 때, 파일이 다운로드 되는 것을 막기 위하여 event.preventDefault를 사용 한 것을 볼 수있다. preventDefault, stopPropagation이 무엇이고 어떨 때 사용하는지 확인 해보자. PreventDefault  예전 예제에서 다루었듯이 preventDefault는 이벤트에 대한 기본 동작을 막을 수 있는 함수이다. 지난 예제에서는 파일을 드랍하였을 때, 파일이 다운로드 되는 것을 막기 위해서 쓴것처럼 말이다.  모든 이벤트의 기본동작은 사용자 에이전트(브라우저 등)에 따라 다르지만 좀 특이한 사례를  언급해보겠다.  다들 readonly 속성을 써본적이 있을 것이라 생각한다. 우리는 input에 들어가 있는 값이 사용자에 의해 변경 되지 않았으면 하는 경우에는 disabled, readonly 속성중에 고민을 할 수 있다. 그 두개가 의미하는 바는 다르지만 말이다. disabled의 경우 input 태그 모두에 적용이 가능 한 속성으로 별 고민 없이 사용 할 수 있지만, disabled로 설정 하는 경우 해당 태그가 모습이 회색빛으로 dim되는 것을 볼 수 있기에 기본 디자인을 유지 하고 싶은경우 readonly를 사용 하게 된다.  하지만 readonly의 경우 text, date, url 등 input type별로 이용이 가능 하다.  checkbox의 경우에는 사용이 불가능한 속성이다. 그래서 disabled를 사용 하지 않고 값의 변경을 막기 위해서는 preventDefault가 필요 하다. <! DOCTYPE html > < html > < head > < script > const eventGuard = function (event) { event . preventDefault

 업데이트 첫 포스팅에  보면 MAC의 경우 전자서명을 하지않으면 진행이 되지 않는다고 언급 한적 있다. 당연하게도 MAC이 필요하니 MAC이 없다면 진행 할 수 없다. Apple Developer Program 구독 하기 Apple Developer Program 구독  기본적인 인적사항 작성 및 개인사업자로 가입을 진행을 하면 된다.  => 기업으로 등록시 DUNS라는 번호를 입력해야 하는등 꽤나 까다롭다. 비용은 년간 계속 발생하며  2022년 4월 기준 129,000원이라는 꽤나 고액의 비용이였다. CSR 만들기 MAC에서 keychain Access.app ( 키체인 접근 ) 이라는 어플리케이션을 실행하자. ( 키체인 접근  => 인증서 지원 => 인증 기관에서 인증서 요청... ) 위처럼 적당히 자신의 정보를 입력 하고 디스크에 저장됨을 클릭하도록 하자. 그리고 계속을 누른다. 적당한 위치에 파일을 다운로드 해두자. 인증서 만들기 인증서 만들러 가기   Certificates "+" <- 파란 버튼을 눌러서 인증서 등록을 시작 할 수 있다. 위처럼  Developer ID Application 을 선택하고 continue로 계속 진행을 하도록 하자.   Previous Sub-CA 를 선택하고 진행을 하며 Choose File을 클릭하여 만들어 두었던 CSR파일을 업로드 하도록 하자. 등록이 완료 되면 다운로드만 진행후 해당 파일을 실행 해주면 된다.  => keychain Access.app ( 키체인 접근 ) 인증서 등록을 진행 할 것인가 라는 질의가 들어올 것이고 등록을 하면 된다. 아래처럼 "인증서가 유효함" 이라고 되어있으면 잘 진행 된 것이다. 이제 다시 MAC에서 우리의 어플리케이션이 빌드 하도록 하자.