반응형 기술적인 이야기/웹 개발13 Electron에서 타이틀 바 숨기기 및 창 이동 문제 최근의 macOS 앱들은 전통적인 타이틀 바 대신 타이틀 바 영역까지 툴바나 콘텐츠로 꽉꽉 채우는 것이 유행인 것 같다. 개인적으로도 이런 디자인이 유려하고 쓸모가 많은 것 같아 선호하기도 한다. 물론 이런 형태를 Electron에서도 구현할 수 있다. macOS에 어울리는 타이틀바 숨기기 아주 간단하다. 아래와 같이 BrowserWindow 생성 시 titleBarStyle을 hiddenInset으로 설정하면 타이틀 컨트롤만 남고 타이틀바 자체는 사라진다. window = new BrowserWindow({ ... titleBarStyle: 'hiddenInset', ... }); 타이틀 바에 있던 닫기나 풀스크린 버튼 등의 컨트롤과 기능은 그대로 남기 때문에 타이틀바 영역을 원하는 대로 꾸밀 수 있다.. 2022. 2. 6. Electron의 app 정보를 얻기 위한 삽질기 개인적으로 Electron으로 공부 겸 사이드 프로젝트를 시작하고 있었다. 그 과정에서 앱의 데이터를 데이터베이스에 저장하기 위해 몇 가지 정보를 찾아보다 데이터베이스 파일을 저장할 위치에 대해서 정해야 할 시기가 왔다. 즉 앱 데이터 저장 디렉터리를 알아내기 위함이 이번 여정(?) 목적이다. 참고로 사용한 Electron은 현시점에서 가장 최신 버전인 16.x 버전이다. 목표는 userData 방법은 구글링 과정으로 쉽게 알아내었다. Electron에서 제공하는 app 인스턴스의 getPath 메서드를 통해 여러 디렉터리 정보를 얻을 수 있고 이 중에 userData가 내 목적에 딱 맞는다는 것이었다. 참고로 appData도 있지만 이건 앱 전용 디렉터리가 아니라 이 앱 정보 디렉터리를 모아두는 디렉터.. 2022. 1. 30. Electron에서 iframe 사용하기(?) Electron에서 iframe 태그를 사용할...수 없다. 이 무슨 시작부터 글 제목이랑 반대되는 이야기를 하는 건가 싶을 텐데, 사실 Electron이 보안상의 문제로 iframe을 이용한 외부 사이트 접근을 기본적으로 차단하고 있다고 보면 된다. 외부 사이트에서 내 로컬에서 돌아가는 Electron 앱의 node.js 환경을 그대로 사용할 수 있게 되기 때문이다. 물론 대안은 있다 iframe 대신 사용할 수 있는 대안으로 Electron은 webview 태그를 지원한다. 별도의 크로미움 프로세스로 동작하는 웹 뷰를 앱 내부에 넣을 수 있게 해주는 마법이다. 그런데 이 webview는 기본적으론 비활성화 상태이기 때문에 우선 설정에서 열어줘야 한다. Electron 앱의 시작 스크립트에서 Brows.. 2022. 1. 23. 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. 비동기 웹 서버 C 구현체 httpserver.h 어쩌다 접하게 된 httpserver.h라는 이름이 왠지 정겹게 느껴졌습니다. 와 이거 C 헤더 파일 아닌가 하는 느낌으로 말이죠. https://github.com/jeremycw/httpserver.h jeremycw/httpserver.h Single header library for writing non-blocking HTTP servers in C - jeremycw/httpserver.h github.com 네 정말 헤더였습니다. ㅎㄷㄷ htpserver.h는 비동기 웹서버 구현을 C 헤더 파일 하나에 몰아서 해 놓은 변태 같은 프로젝트입니다. 왜 굳이 헤더냐고 할 수도 있는데 이 말은 "엔트리 포인트는 당신네가 구현해라" 이런 소리와 일맥상통하겠지요. 자 그럼 예제를 돌려볼까요? 일단 저장.. 2019. 12. 17. 연산자(Operators) | JS & ES6 공부 노트 #6 연산자의 정의를 어디까지 볼 것인가에 대한 객관적인 기준은 없는 것 같습니다. 이 노트에서는 연산자의 범위를 대체로 '영단어가 아닌 문자' 중에서만 발췌합니다. 그리고 연산자 하나하나의 기능을 살펴보기보다는 그저 훑고 지나가는 수준으로만 정리합니다. 불성실한(?) 글 미리 죄송하다는 말씀드립니다. 😏 유명한 연산자들 굳이 설명이 필요 없을 것 같은 연산자들도 많은 것 같습니다. 왜냐하면 대부분의 언어에서 거의 동일하게 사용되기 때문이지요. 대표적으로 다음과 같은 산술 연산자들이 있습니다. + - * / 곱하기(*)와 나누기(/)는 교과과정의 산수나 수학에서 쓰이는 기호와는 좀 다른데, 오히려 프로그래밍 언어에서는 이 두 연산자가 더 유명하므로 굳이 설득(?) 하지 않아도 될 것 같습니다. 그리고 + 연산.. 2019. 8. 21. electron-vue에서 process를 못 찾는 문제 Javascript랑 ES6 공부 겸 일렉트론(elecron)으로 앱을 한번 만들어보고자 했습니다. 거기다 기왕 하는 김에 회사에서 사용하는 vue도 같이 사용해보면 좋을 것 같았습니다. 그래서 찾아보니 electron-vue라는 프로젝트 보일러 플레이트 생성해 주는 프로젝트를 발견했습니다. 목적에 맞는 게 있으니 당장 써보면 좋겠지요. 우선 아래처럼 프로젝트를 만들어 봤습니다. $ npm i vue-cli -g $ npm i yarn $ vue init simulatedgreg/electron-vue my-project 이것저것 귀찮게 물어오네요. vue-cli 쓸 때랑 묻는 게 비슷한 걸로 봐서 vue를 쓰면 어쩔 수 없는 숙명 같은 것일까요? yarn은 이 단계에서 꼭 필요한 건 아니지만 미리 설채.. 2019. 8. 3. 타입(Types) | Javascript & ES6 공부 노트 #5 자바스크립트의 기본 타입과 ES6에서 추가된 타입에 대해 간단히 정리하는 글입니다. Boolean 논리식에서 가장 직접적으로 사용되는 데이터를 표현하는 단위인 Boolean 즉 이진 타입은 거의 모든 언어에서도 지원되는 유명한 타입입니다. 자바스크립트에서도 동일한 이름의 타입으로 지원됩니다. var trueCondition = true if (trueCondition) { console.log('This is true!') } 가질 수 있는 값은 true(참), false(거짓) 뿐입니다. 그리고 이 값은 if 등의 논리 구문에 그대로 활용됩니다. Number 숫자를 표현하는 타입입니다. 숫자를 보관하고 이 숫자들을 이용해 사칙연산, 즉 더하기(+), 빼기(-), 곱하기(*), 나누기(/)를 사용해 연산.. 2019. 7. 11. 변수와 상수 | Javascript & ES6 공부 노트 #4 언어를 공부할 때 가장 먼저 익혀야 할 개념은 변수(variable)라고 생각합니다. 데이터를 담을 수 있는 메모리 공간을 할당하고, 여기에 데이터를 넣고, 데이터를 바꾸어서 넣을 수 있다는 점은 논리적인 사고에서 가장 필수적으로 알아야 할 내용이니깐요. 그런 의미로 정말 기초적이지만 중요한 이 변수, 그리고 변수가 나오면 같이 등장하는 상수, 그리고 변수와 상수를 다루는데 필요한 연산자에 대해 간략히 알아보겠습니다. 동적 타이핑(Dynamic Typing) 우선 동적타이핑 개념을 알아야 할 것 같습니다. 자바스크립트는 동적 타이핑 변수 시스템(?)을 가지고 있는 언어입니다. 동적 타이핑은 타입이 유동적이다라는 의미이며, 쉽게 말해서 변수에 아무 타입의 데이터를 넣거나 비교해도 된다는 의미입니다. 예를 .. 2019. 4. 11. 주석과 세미콜론 | Javascript & ES6 공부 노트 #3 참 뜬금없는 주제이긴 합니다만, 이번 글에서는 주석(Comment)과 세미콜론(Semicolon)에 대해 이야기하고자 합니다. 다른 언어들에서도 상당히 공통적인 이슈이니 아마도 알고 있을 법한 내용일 가능성이 큽니다. 주석문 주석은 실행되지 않는 글자로 코드 자체에 아무런 영향을 끼치지 않는 기능입니다. 왜 이런 게 있는지 이해가 안 되시나요? 보통은 코드의 용도나 사용 방법 등을 주석으로 적습니다. 만약 혼자서 작업하는 게 아니거나 혹은 다른 사람도 이 코드를 쓸 수 있게 한다면 설명 없이는 여러분의 코드의 의도를 제대로 이해하기 어려울 수도 있습니다. 이럴 때 주석은 정말 큰 힘을 발휘합니다. 이 외에도 주석으로는 누가 만들었니, 간혹 잘 돌아가지만 뭔진 모르겠다거나(?) 농담을 적거나 혹은 개발자들.. 2019. 4. 11. 콘솔에 뭔가를 찍어보자 | Javascript & ES6 공부 노트 #2 프로그래밍 언어를 하나 이상 공부해 봤다면 샘플 코드가 항상 무엇으로 시작하는지 다들 알고 있을 것입니다. "Hello World"를 찍는 예제 코드 말이죠. 이 코드가 중요한 이유는 출력에 해당하는 가장 원초적이면서도 핵심적인 기능을 사용하기 때문입니다. ES6에서는 Javascript와 같이 console.log를 이용해 콘솔에 내용을 인쇄할 수 있습니다. console.log('Hello World!') Javascript와는 다르게 끝에 세미콜론이 없는데 이는 ES6의 특징입니다. ES6에서는 줄 끝의 세미콜론을 생략할 수 있습니다. 개인적으로 Swift를 좋아하기 때문에 이와 비슷하게 세미콜론을 안 써도 되는 점을 굉장히 좋아합니다. 하지만 생략해도 된다는 것뿐인지라 만약 팀에서 세미콜론을 사용.. 2019. 3. 31. 시작하기 위해 개발환경을 만들다 | Javascript & ES6 공부 노트 #1 ES6는 어떤 한 언어 이름의 약자와 버전이 합쳐진 이름입니다. 그리고 ES2015라 불리는 언어 스펙의 다른 이름이기도 합니다. 그리고 ES는 ECMAScript를 줄여서 부르는 이름이지요. 그냥 쉽게 말해서 ECMAScript 2015년 버전이 ES6입니다. 이 언어는 Javascript(자바스크립트)를 보완 혹은 대체하기 위해 나온 언어라고 볼 수 있습니다. ES는 Javascript와 비슷합니다. 하지만 같지는 않습니다. 하지만 아무리 ECMAScript와 Javascript가 다르다고 이야기해도, ES가 Javascript 토대에서 만들어진 것 같다는 느낌이 너무 강하게 들기 때문에 완전히 다르다고 하기에도 어렵다고 생각됩니다. 다만 이 글 타래는 Javascript와 ES6 모두를 공부하기 위.. 2019. 3. 28. 이전 1 다음 728x90 반응형
