반응형 자바스크립트19 SvelteKit에서 환경변수에 접근하기 Svelte와 SvelteKit은 기본적인 환경변수 접근 방법이 다르다. 이 다름을 모르고 SvelteKit 앱에서 Svelte 스타일의 환경변수에 접근하려다 안 돼서 문제를 못 찾고 고생한 경험이 있다. 글 주제도 떨어져 가는 김에 이에 관해 간단히 정리해 본다.우선 SvelteKit에서 자체적으로 제공하는 환경변수 액세스 방법은 정적(static) 및 동적(dynamic) 두 가지 방식과 함께 private 및 public 개념이 있다는 것은 알아둬야 할 것 같다.SvelteKit에서 정적으로 환경변수 읽기정적 환경변수 읽기는 해당 환경변수 심볼을 특정 모듈 시스템을 통해 import 해서 쓰는 독특한 방식이다. 대충 아래와 같은 식이다.import { PRIVATE_ENV_VAR } from '$e.. 2024. 12. 5. Electron + Svelte로 데스크톱 앱 개발 시작해보기 개인 프로젝트를 여러 방식으로 해보다 Electron을 이용해볼까 하는 약간의 욕심이 생겼다. 그래서 공부를 하던 중 웹 UI 프레임워크를 알아두면 좋을 것 같아서 찾아보다 Svlete의 평이 좋을 것을 보고 이것을 이용해 앱 개발을 시작해 보려고 했다. 이 글은 개발 환경을 셋업 하면서 검색했던 자료들과 함께 개인적으로 겪은 약간의 삽질의 결과가 섞여있다.Svelte 프로젝트 생성하기Electron은 웹 페이지를 로컬 크로미움을 통해 보여주는 용도이기 때문에 프로젝트의 시작점에는 맞지 않는다. 여기서는 Svelte 프레임워크를 이용해 웹 페이지를 구현할 것이기 때문에 Svelte 프로젝트로 시작한다.Svelte 프로젝트 템플릿은 npx로 간단하게 가져올 수 있었다.npx degit sveltejs/te.. 2022. 1. 16. HTML, CSS, Javascript 압축하기 구글 검색 결과는 페이지 랭크에 따라 앞쪽에 등장하는데, 이 페이지 랭크에 페이지 로딩 속도가 관여한다는 소식을 접했습니다. 제 다른 사이트는 정적 사이트임에도 그다지 좋은 속도가 안 나오네요. 그래서 속도 늘리기 대책 겸 웹 리소스 압축에 대해 찾아본 결과를 정리해 봤습니다.HTML 압축하기HTML 압축하기는 HTMLMinifier를 사용할 수 있습니다. 아래 커맨드로 쉽게 설치할 수 있습니다.npm i -g html-minifier사용 방법은 옵션이 길어서 좀 귀찮을 수 있습니다.html-minifier --collapse-whitespace \ --remove-comments \ --remove-redundant-attributes \ .. 2020. 6. 15. 흥미로운 링크들 3월 4주차 지난주엔 (개인적으로) 정말 핫한 소식인 Swift 5.2 릴리즈 소식이 가장 눈에 띄었던 것 같습니다. 그래서 5.2 릴리즈 링크와 함께 시작합니다.https://swift.org/blog/swift-5-2-released/ Swift 5.2 Released!Swift 5.2 is now officially released! 🎉swift.orgiOS 13.4와 Xcode 11.4의 등장과 함께 Swift 5.2도 공식적으로 릴리즈 되었습니다. 저도 시간을 내서 관련 업데이트 내역을 정리해 봐야겠습니다. (사실 이미 정리했지만요😏)https://developer.apple.com/news/?id=03232020b Universal Purchase for Mac Apps Now Available - N.. 2020. 3. 30. 흥미로운 링크들 3월 3주차 코로나19의 확산세가 꺾이지 않는 요즘이지만, 이 틈을 틈타 조용하게 등장한 애플의 신제품 소식으로 시작합니다.https://www.apple.com/kr/ipad-pro/ iPad ProiPad Pro는 Liquid Retina 디스플레이, A12Z Bionic 칩, 프로급 카메라, 새로운 LiDAR 스캐너를 탑재하고 있으며, Apple Pencil과 새로운 Magic Keyboard도 지원합니다.www.apple.com애플이 조용히 아이패드 신제품과 키보드 겸 커버를 선보였습니다. 아이패드가 마우스 지원을 강화하고 있다는 소문대로 트랙패드를 장착한 키보드 커버가 나왔네요. 아이패드를 키보드에서 붕 띄우는 참 애플 다운 특이한(?) 설계입니다. 그리고 애플 다운 미친 가격까지...😫글보다는 영상이 더.. 2020. 3. 23. 흥미로운 링크들 3월 2주차 여전히 코로나19의 기세가 대단합니다. 바뀐 게 있다면 전 세계적이라는 점이 차이가 있었겠네요. 어쨌든 코로나19를 언급하는 날이 더 이상 없기를 빌며, 지난주 링크 모음도 코로나19와 관련된 소식으로 시작합니다.https://www.washingtonpost.com/graphics/2020/world/corona-simulator/코로나19 대책에 사회적 거리두기(Social Distancing)가 왜 중요한지 시뮬레이션으로 보여주는 워싱턴포스트의 글입니다. 시뮬레이션 자료가 제법 설득력이 있어서 IT에 관한 글이 아님에도 제법 재미있게 읽었습니다. 글을 읽기가 귀찮으시면 위의 이미지만으로도 내용을 파악 가능합니다만, 시뮬레이션이 애니메이션으로 구성되어 있어서 굳이 영문으로 작성된 글을 읽지 않고 이것.. 2020. 3. 15. 흥미로운 링크들 1월 5주차 한 주 간의 개인적으로 흥미로웠던 소식을 위주로 모아보는 글입니다. 이번 편은 한 유명 안티바이러스 백신 개발사의 개인정보 판매 사건부터 시작합니다.https://www.vice.com/en_us/article/qjdkq7/avast-antivirus-sells-user-browsing-data-investigation Leaked Documents Expose the Secretive Market for Your Web Browsing DataAn Avast antivirus subsidiary sells 'Every search. Every click. Every buy. On every site.' Its clients have included Home Depot, Google, Microsoft,.. 2020. 2. 3. 흥미로운 링크들 1월 3주차 이번엔 개발 관련 소식들이 좀 있네요.https://github.com/swift-embedded/swift-embedded swift-embedded/swift-embeddedSwift for Embedded Systems ✨. Contribute to swift-embedded/swift-embedded development by creating an account on GitHub.github.comSwift는 바이너리 코드로 컴파일하는 언어입니다. 그렇다면 임베디드 분야에서 못 쓸 이유가 없지요. 네~ 임베디드 스위프트입니다.https://sungdoo.dev/programming/start-ios-development-with-offical-docs/ 공식문서 만으로 iOS 개발 배우기 - De.. 2020. 1. 20. 흥미로운 링크들 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-bring.. 2019. 12. 30. 흥미로운 링크들 11월 1주차 지난 주도 뭔가 많았던 한 주 였군요.Highlights from Git 2.24Git 2.24 의 변화점을 정리한 블로그입니다. 사용성에 큰 변화는 없어보이네요.You Cannot Submit an Electron 6 (or 7) App to the Apple Store일렉트론(엘렉트론) 6, 7 버전으로 만들어진 앱들이 앱스토어 심사에서 거부되고 있다는 소식입니다. 사유는 non-public API를 사용했기 때문이라네요. 물론 비공개 API의 사용은 애플 측에서 충분히 거부할 만한 사유가 될 수 있습니다. 보안 등의 사유로 말이지요.다만 해당 버전만 문제인건지 일렉트론 전체를 거부하고 있는 것인지는 명확하진 않네요. 일단 관련 업데이트가 있나 지켜봐야 할 것 같습니다.자바스크립트의 메모리 모델제목대.. 2019. 11. 11. 흥미로운 링크들 10월 5주차 지난주는 아이폰, 에어팟을 비롯하여 정말 다양한 개발 및 비개발 관련 소식을 접할 수 있었습니다.아이폰 11 프로: 카메라가 그렇게 좋나요?아이폰 11 프로의 그 기괴한 모습에 대한 악평이 갈수록 줄어들고 있다는 느낌이 듭니다. 그 모습에 익숙해져 가는 것일까요? 어쨌든 카메라는 정말 좋아진 것 같습니다.각종 센서의 집약체, 에어팟 프로노이즈 캔슬링과 커널형 그리고 높아진 가격으로 화제를 모으고 있는 에어팟 프로의 리뷰입니다. 뭐 대단하긴 하네요. 좀 더 싸졌으면 좋겠지만요.Slack client for emacs어? 네? 슬랙이요? IRC가 아니구요?과연 슬랙의 웹 기반 텍스트에 이맥스의 기능만으로 얼마나 대응할 수 있을지는 모르겠지만 눈길을 끄는 프로젝트네요. 😲7M Adobe Creative Cl.. 2019. 11. 4. 흥미로웠던 링크들 10월 2주차 애플, macOS 카탈리나 배포 시작아기다리고기다리던 macOS 카탈리나가 드디어 공식 릴리즈 되었습니다. 원래는 UIKit for macOS 즉 Catalyst를 기다리고 있었지만 SwiftUI가 소개된 이후 이 녀석을 써보기 위해서 카탈리나를 기다려 왔었지요. 그리고 드디어 이 글을 쓰는 지금 감동적인 설치를... 다운로드가 18시간이... 애플 서버 일해라 🙁기타 iPad를 사이드카를 이용해 서브 모니터로 쓰는 기능과, iTunes가 몇 가지 앱으로 분리가 되는 점, 32비트 지원이 완전히 사라지는 점 등등 다양한 변화가 있습니다. 그래도 메이저 버전 업데이트이니 혹시나 자신이 보수적이라면 다음 마이너 패치 릴리즈를 기다리는 것도 나쁘지는 않은 선택 같습니다.여담이지만, 정식 버전은 GM과 릴리즈.. 2019. 10. 14. 연산자(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 = trueif (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. 이전 1 2 다음 728x90 반응형
