반응형 CSS10 Electron + Svelte로 데스크톱 앱 개발 시작해보기 개인 프로젝트를 여러 방식으로 해보다 Electron을 이용해볼까 하는 약간의 욕심이 생겼다. 그래서 공부를 하던 중 웹 UI 프레임워크를 알아두면 좋을 것 같아서 찾아보다 Svlete의 평이 좋을 것을 보고 이것을 이용해 앱 개발을 시작해 보려고 했다. 이 글은 개발 환경을 셋업 하면서 검색했던 자료들과 함께 개인적으로 겪은 약간의 삽질의 결과가 섞여있다. Svelte 프로젝트 생성하기 Electron은 웹 페이지를 로컬 크로미움을 통해 보여주는 용도이기 때문에 프로젝트의 시작점에는 맞지 않는다. 여기서는 Svelte 프레임워크를 이용해 웹 페이지를 구현할 것이기 때문에 Svelte 프로젝트로 시작한다. Svelte 프로젝트 템플릿은 npx로 간단하게 가져올 수 있었다. npx degit sveltej.. 2022. 1. 16. HTML, CSS, Javascript 압축하기 구글 검색 결과는 페이지 랭크에 따라 앞쪽에 등장하는데, 이 페이지 랭크에 페이지 로딩 속도가 관여한다는 소식을 접했습니다. 제 다른 사이트는 정적 사이트임에도 그다지 좋은 속도가 안 나오네요. 그래서 속도 늘리기 대책 겸 웹 리소스 압축에 대해 찾아본 결과를 정리해 봤습니다. HTML 압축하기 HTML 압축하기는 HTMLMinifier를 사용할 수 있습니다. 아래 커맨드로 쉽게 설치할 수 있습니다. npm i -g html-minifier 사용 방법은 옵션이 길어서 좀 귀찮을 수 있습니다. html-minifier --collapse-whitespace \ --remove-comments \ --remove-redundant-attributes \ --remove-tag-whitespace \ --mi.. 2020. 6. 15. 흥미로운 링크들 4월 3주차 지난주는 아이폰 SE 소식이 약간 핫 했네요. https://www.youtube.com/watch?v=SQIbeAk-bFA 애플이 코로나19로 시끄러운 요즘 아주 조용하게 아이폰 SE를 내놨습니다. 55만 원부터 시작하는 가격대의 저렴이 (이게???) 버전입니다. 근데 저렴이 주제에 AP는 애플 답지 않게 최고급을 달았네요. 사이즈는 당연히 커져버렸기에 작은 사이즈를 원하시는 분들에겐 안타까운 소식이 되겠네요. 어쨌든 한국 애플 스토어에서도 바로 확인 가능합니다. https://poem23.com/3390 드디어 나온, 하지만 예상 그대로 나온 아이폰 SE, 그리고 아이폰12에 대한 루머들.. 소문만 잔뜩 돌았었던 아이폰 SE의 후속 모델이 동일한 이름으로 애플스토어를 통해 또 몰래 발표되었다. 최근 .. 2020. 4. 20. 흥미로운 링크들 4월 1주차 이 블로그엔 약간 뜬금없지만, 이번에는 애플의 로직 프로 소식부터 시작합니다. 제가 이런 거 좋아했었거든요. https://9to5mac.com/2020/03/29/logic-pro-x-live-loops-mac/ Unreleased version of Logic Pro X surfaces on Apple’s website with Live Loops feature - 9to5Mac Apple is seemingly prepping a new version of Logic Pro X for the Mac with support for Live Loops. The feature has proven to be popular in Garageband for iPad, and now Apple is lookin.. 2020. 4. 6. 흥미로운 링크들 3월 1주차 지난 주도 재미있었던 소식이 제법 있었네요. https://rambo.codes/posts/2020-03-01-writing-command-line-interfaces-for-ios-apps Writing command line interfaces for iOS apps | Rambo Codes Gui Rambo writes about his coding and reverse engineering adventures. rambo.codes CLI 즉 셸 명령어를 이용해 iOS 앱을 제어할 수 있도록 구현하는 방법에 대해 설명하는 글입니다. 어떤 원리인지는 확실히는 잘 모르겠지만 해당 기술은 여러 가지 용도로 사용할 수 있을 것 같습니다. https://techit.kr/view/?no=2020030516.. 2020. 3. 9. 흥미로운 링크들 12월 4주차 무의미한 대표 이미지로 시작하는 2019년 링크집(?)의 거의 마지막 글이 되겠네요. 시작합니다. http://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html 프론트엔드 개발환경의 이해: 웹팩(기본) 1. 배경 jeonghwan-kim.github.io 웹팩(Webpack)이 자바스크립트를 하나로 뭉쳐주는 요상한(?) 놈이라는 것은 알고 있었는데, 정작 이런 게 왜 필요했었는지를 몰랐었습니다. 그리고 이 글로 왜 이런 '다른 언어에서 보면 매우 이상한 도구'가 나오게 되었는지 파악하게 되었습니다. 그나저나 기본이라는데 내용이 엄청 많네요. https://hacks.mozilla.org/2019/04/pyodide-.. 2019. 12. 30. 흥미로운 링크들 12월 3주차 이번 주엔 그다지 재미있는 소식이 없었네요. 그래서 땜빵(?)을 몇 개 넣었습니다. https://csslayout.io CSS Layout Starting with the most basic part, you can customize easily for each specific need. By composing them, you can have any possible layout that exists in the real life. csslayout.io 레이아웃 CSS 코드의 66가지 예제를 볼 수 있습니다. 사이트나 페이지의 전반적인 레이아웃을 잡을 때 참고하면 좋을 것 같습니다. https://github.com/docker-slim/docker-slim docker-slim/docker-slim.. 2019. 12. 23. 흥미로운 링크들 12월 1주차 개인적으로 재미없는 것들을 걸러내니 양이 얼마 안 되는군요. 🤪 만화로 보는 DNS over HTTPS ★ Mozilla 웹 기술 블로그 사용자의 프라이버시와 보안에 대한 위협이 커지고 있습니다. Mozilla 는 이런 위협들을 면밀히 관찰하고 있습니다. Mozilla 는 Firefox 사용자와 그들의 데이터를 보호하기 위해 할 수 있는 모든 일을 해야 한다는 책임감을 느낍니다. Mozilla 는 은밀하게 사용자의 데이터를 수집하려 하고 판매하려 하는 회사들과 조직들을 알고 있습니다. 바로 추적 금지 기능과 Facebook Container 확장기능을 만든 이유입니다. 이제 곧 당신은 Mo hacks.mozilla.or.kr HTTPS가 인터넷의 보안성을 높여 주었지만 DNS는 여전히 이런 보안의 혜택을.. 2019. 12. 9. 흥미로운 링크들 11월 4주차 오랜만에 다시 적어보기 시작합니다. You can create these elements without JavaScript We've got used to writing JavaScript for common UI element functionality like accordions, tooltips, text truncation, etc. But as HTML and CSS got new features and older browsers were no longer supported, we've been able to use less and less JavaScript for dev.to 스크립트 없이 CSS만으로도 만들 수 있는 인터페이스 예제 6가지를 볼 수 있습니다. 가뜩이나 요즘 사이트들이 무거워지.. 2019. 12. 2. 흥미로웠던 링크들 10월 2주차 애플, macOS 카탈리나 배포 시작 아기다리고기다리던 macOS 카탈리나가 드디어 공식 릴리즈 되었습니다. 원래는 UIKit for macOS 즉 Catalyst를 기다리고 있었지만 SwiftUI가 소개된 이후 이 녀석을 써보기 위해서 카탈리나를 기다려 왔었지요. 그리고 드디어 이 글을 쓰는 지금 감동적인 설치를... 다운로드가 18시간이... 애플 서버 일해라 🙁 기타 iPad를 사이드카를 이용해 서브 모니터로 쓰는 기능과, iTunes가 몇 가지 앱으로 분리가 되는 점, 32비트 지원이 완전히 사라지는 점 등등 다양한 변화가 있습니다. 그래도 메이저 버전 업데이트이니 혹시나 자신이 보수적이라면 다음 마이너 패치 릴리즈를 기다리는 것도 나쁘지는 않은 선택 같습니다. 여담이지만, 정식 버전은 GM과 릴.. 2019. 10. 14. 이전 1 다음 728x90 반응형
