코드 땜장이

 스마트폰이 나오고 나서 모바일에서 사용하는 유저의 액션은 엄청 늘어나기 시작했다. 간단하게 마우스 클릭과 유사한 탭 부터 마우스 휠에 대응 되는 핀치, 스프레드, 터치가능한 디바이스에서만 가능한 투탭(두손가락으로 터치) 이상의 행위들...  우리는 사용자의 경험에 맞게 개발을 하여야 한다. 무슨말이냐 하면, 모바일기기에 휠이 없다고 해서 확대해 가면서 보아야 하는 컨텐츠를 마우스를 무조건 연결하여 보아야 하는 것은 말이 안된다는 뜻이다.  Hammerjs  여기서 우리의 개발을 편하게 만들어 줄 수 있는 라이브러리가 있다. Hammerjs가 지원하는 제스처는 아래와 같습니다. Tap : 클릭과 같습니다. Press : 일정시간 이상 같은곳을 누르고 있습니다. Pan :  포인터가 특정위치를  클릭후 한 방향으로 이동시 발생 합니다. Swipe : 포인터가 특정위치를  클릭후 한 방향으로 특정시간 정도 특정거리 이상 이동시 발생합니다. Pinch : 두개 이상의 포인터가 특정방향에서 멀어지거나 가까워질때 발생 합니다. Rotate : 두개 이상의 포인터가 원을 그리게 되면 발생합니다.  위에서 보면 pinch와 rotate의 경우에는 두개이상의 포인터가 필요하여 마우스 만으로는 불가능한 액션이지만, 나머지는 하나의 포인터만으로 가능한 제스처이기에 충분히 마우스만으로 구현이 가능한다.  사용해보기  모바일과 PC에서 같이 사용해볼수 있는 Swipe 제스처를 사용해 보도록하자.  위 처럼 간단하게 스와이프 제스처를 추가해볼 수 있다. 이것저것 사용해보면 트렌디한 웹사이트를 만드는데에 꽤나 도움이 될 것 이다.

  폰트의 크기는 사용자에게 꽤나 중요한 정보이다. 읽는 순서에도 영향을 끼칠정도이니까 말이다.  이런 이미지를 본적 있나? 솔직히 나는 폰트 크기순으로 읽혔다. 그래서 이 포스팅을 쓰는거기도 하다.  작은 폰트로 글써보기. <div style =" font-size : 14 px" > font-size: 14px </div> <div style =" font-size : 13 px" > font-size: 13px </div> <div style =" font-size : 12 px" > font-size: 12px </div> <div style =" font-size : 11 px" > font-size: 11px </div> <div style =" font-size : 10 px" > font-size: 10px </div> <div style =" font-size : 9 px" > font-size: 9px </div> <div style =" font-size : 8 px" > font-size: 8px </div> <div style =" font-size : 7 px" > font-size: 7px </div> <div style =" font-size : 6 px" > font-size: 6px </div> <div style =" font-size : 5 px" > font-size: 5px </div> <div style =" font-size : 4 px" > font-size: 4px </div>  간단하게 ...

 일단 이걸 css 트릭이라고 부르긴 하지만, 뭐 거창할 거 없이 팁정도의 내용이다. 일반적으로 기본서에는 잘 나오지 않는 내용을 다룰 예정이다.  정사각형 만들기  정사각형 만들기가 뭐 그리어렵다고, 글을 작성하는가? 라고 말할 수 있다. 당연하게도 맞는 말이다. <div style =" width : 200 px ; height : 200 px ; background : green" > 200*200 </div>  당연하게도 위처럼 하면 200*200의 정사각형이 된다.  만들어야 할 정사각형의 크기를 안다면 위처럼 지정 해줄 수 있다. 하지만, 부모 너비에 비례하는 정사각형을 만들려고 해보자. 예를 들어 부모의 너비의 10%하는 정사각형 말이다. <div style =" width : 10 % ; height : 10 % ; background : green" > 200*200 </div> 간단하게 작성해보았다. 하지만, 우리가 원했던 정사각형의 모양은 아니다. 아쉽게도 위의 코드는 부모(컨테이닝 블록)의 너비 10%, 높이 길이 10%이기 때문에 너비에 해당하는 정사각형을 이루기에는 어렵다.  비율지정  우리는 길이를 넣을 수 있는 속성의 값에 백분률도 넣기도 한다. 그런데 그 백분률이 무엇에 대한 백분률인지는 문서를 확인해보지 않으면 알 수 없다. 그래도 추정 할 수 있는 것은 width은 부모의 width를 height는 부모의 height를 따라가겠지 정도이다.  아래는 어떤 속성이 부모의 width, height따라 가는지에 대한 표이다.  부모의 width : width, left, right, padding, margin   부모의 heigh : height, top, bottom  자 위의 설명 대로면, padding이나 margin의 경우 padding-top, m...

 최근에 GoogleIO의 섹션중에 state of css 2022가 있었는데, 꽤나 재미있는 속성의 추가가 있어서 소개하고자 한다. 전부 새로운 내용은 아니고 몇몇 브라우저들이 지원하고 있던 내용도 있기는 하니 참고 바란다. Colorv1 Fonts  해당 폰트는 새로운 형태의 폰트이다. 특징으로는 당연히 폰트이니 벡터일테고, 색상 변화에 초점을 맞춘 폰트인 듯 한다. 제공되는 내용은 색상 혼합 및 그라디언트이다.  이 내용이 반겨지는 것은 이제 아이콘폰트에서 투톤을 지원하기 위하여 이미지 파일을 사용하지 않아도 된다는 것이다. 한때 투톤 아이콘이 유행처럼 퍼졌던것을 기억하는가? < https://fonts.google.com/icons?selected=Material+Icons&icon.style=Two+tone >  위와 같이 색상을 두개를 표현하는 아이콘인데, 위처럼 이용하기위해서는 저 아이콘이 폰트가아닌 이미지로 불러와야 했다. svg도 이미지로 본다. 하지만 사이즈 변경이나 색상변경이 일반적인 폰트와 같은 형태가 아니기 때문에 다른 폰트들과 달라 꽤나 불편함이 있었다. 하지만 이번에 colorv1 fonts를 지원하게 되면 아이콘 폰트에 투톤을 적용하기가 더 수월하지 않을까 생각한다. 샘플은 아래에 있다. https://developer.chrome.com/blog/colrv1-fonts/ inert  일반적으로 우리는 alert함수 처럼 모달(해당 화면의 동작을 완료 하기 전에는 다른 화면으로 갈수 없는 팝업 형태)을 지원하기 위하여, 어떤 팝업을 열게 되면 뒤에 배경을 깔아서 해당 팝업 이외의 컨텐츠에 클릭을 할 수 없도록 지원하였다. < https://www.w3schools.com/howto/howto_css_delete_modal.asp >  위와 같이 말이다. 위의 방식은 백그라운드의 크기를 지정 하는 것부터 문제가 된다. 언제나 항상 html을 꽉...

이번에 내가 만들어둔 크롬확장프로그램이 내려갔다... 위반사항이 있는 것을 고지해주었지만 메일을 읽는 습관이 안되어있어서 뭐 그럴수 있지 참고로 받은 위반사항은  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> <!-- 플...

 예전에 올린자료 중에 파일 드래그앤 드랍을 구현을 한 적이있다. 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 (ev...

 업데이트 첫 포스팅에  보면 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에서 우리의 어플리케이션이 빌드 하도록 하자.

  지난 시간에 깃헙을 통하여 내가 만든 어플리케이션을 업데이트 하는 방법을 보았습니다. 하지만 해당 레파지토리가 public이여야 한다는 한계가 있었습니다.  private 레파지토리인 경우에 사용 할 수 있는 함수가  setFeedURL  이 함수 입니다. 어떤 url에서 버전 확인및 업데이트용 파일을 가져 올 것인지에 대해 설정이 가능 합니다. GitHub 사용하기!  우리는 배포용 서버로 아직 gitHub을 사용 할 수 있습니다. 하지만 private 레파지토리를 그대로 이용 하기에는, github access token을 발급하여야 합니다. 하지만 특정 레파지토리를 제한 할 수 없으면 release만을 위한 옵션을 설정 하기가 애매합니다.  또한 해당 토큰을 유실 또는 노출에 대해서 대처하기에는 꽤나 리스크가 큽니다. 따라서 이 예제 에서는 배포 전용의 public 레파지토리를 만들것을 추천 드립니다.  위 처럼 release 전용이며 public에 전혀 의미없는 커밋을 만들어서 지난 시간에 하였듯이 release들을 만들어 주면 됩니다.  그리고 나면 일렉트론 프로젝트의 index.js를 수정해줍니다. 생략 .... const menu = Menu. buildFromTemplate (templates) Menu. setApplicationMenu (menu) autoUpdater . autoDownload = false autoUpdater .setFeedURL({ provider: 'github', repo: 'my-electron-app-release-only', owner: 'sejinjja' }) 생략 .... autoUpdater.setFeedURL({     provider: 'github',     repo: ${repository},     owner: ${owner}, })  위처럼 변경 해주...

 지난 시간까지 만든 프로그램을 업데이트를 하기 위하여 사용자가 매번 패치 파일을 다운로드 받게 할 수는 없습니다.  electron-updater를 사용하여 사용자가 딱히 신경 쓰지 않아도 업데이트가 되도록 해보겠습니다. 기본적으로 이 포스팅 시리즈는 맛보기 정도로 상세한 옵션은 다루지 않습니다. 업데이트를 위한 모듈 추가 npm i electron-updater --save npm i electron-log --save electron-updater는 업데이트를 위하여 사용되는 모듈입니다. electron-log는 로그를 파일로 관리 하기 위함 입니다. 업데이트중에는 콘솔을 사용 할 수 없기에 파일에 남겨서 확인하는 것을 추천합니다. 빌드를 위한 일렉트론 설정! 일렉트론 프로젝트의 index.js를 수정하자 변경점의 색상을 변경 하였습니다. const {app , BrowserWindow , Menu } = require( 'electron' ) const path = require( 'path' ) const {autoUpdater} = require('electron-updater') const log = require('electron-log') const createWindow = ( devMode ) => { const win = new BrowserWindow({ width : 800 , height : 600 , webPreferences : { preload : path. join (__dirname , 'preload.js' ) } }) if ( devMode ) { win.loadURL( 'http://localhost:8080' ) } else { win.loadFile( 'dist_web/index.html' ) } win.webContents.openDev...

 지난 시간까지 만든 프로그램을 매번 node를 통하여 실행하게 만들 수는 없다. 다른 유저들에게 배포용도라면 더욱더! 그래서 이번 시간에는 electron-builder를 사용하여 설치를 할 수 있는 파일을 만들 수 있게 할 것이다. 기본적으로 이 포스팅 시리즈는 맛보기 정도로 상세한 옵션은 다루지 않습니다. 빌드를 위한 일렉트론 설정! npm i electron-builder --save-dev npm i cross-env --save-dev 일단 위의 명령어를 사용하여 필요한 노드 패키지들을 설치하자! 위의 패키지들을 간단하게 설명하면 electron-builder는 말그대로 electron 프레임워크로 만들어진 프로그램을 빌드해주는 역할을 해주는 패키지이다. cross-env는 환경 변수를 수정해주는 역할을 해준다. 이게 왜 필요한 이유는 아래에 코드를 보면서 설명 하겠다. package.json을 아래와 같이 빨간색으로 표현 된 부분을 추가해주자. { "name" : "my-electron-app" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "start" : " cross-env NODE_ENV=dev electron ." , "dist": "electron-builder" } , "keywords" : [] , "author" : "" , "license" : "ISC" , "devDependencies" : { "cross-env": ...