반응형 개발34 Electron 으로 데스크탑 어플리케이션 만들기 기초 VS Code, Discord, Slack, Skype와 같은 데스크탑 툴들을 보면 뭔가 느낌이 비슷하다는 것을 느낄 것이다. 그리고 보통 윈도우, Mac, 리눅스와 같이 멀티플랫폼을 지원하고 있다. 이러한 데스크탑 어플리케이션은 어떻게 만들었을까? 정답은 바로 Electron으로 만들었다. Electron은 HTML, JavaScript, CSS를 이용하여 웹기반으로 데스크탑 어플리케이션을 만들 수 있게 해준다. 이 과정을 실습해보면서 간단한 데스크탑 어플리케이션을 만들어보도록 하자. Electron 이란 Framework Electron은 JavaScript, HTML, CSS를 이용하여 데스크탑 어플리케이션을 만들기 위한 프레임워크이다. 독립적인 실행환경 Electrond은 Node.js와 Chro.. 2023. 6. 1. Vue.js 강좌 2. 템플릿 문법 Vue 템플릿이란 화면에 어떻게 렌더링될 것인지를 정의한 코드이다. Vue 템플릿은 HTML과 문법적으로 똑같다. 따라서 HTML 파서가 Vue 템플릿을 파싱할 수 있다. 하지만 Vue에서만 인식할 수 있는 몇가지 템플릿 문법이 있다. 이것을 간단히 알기쉽게 정리해본다. 문자열 보간 (Text Interpolation) Name: {{ name }} HTML 문자열에 vue 인스턴스의 데이터를 바인딩하는 방법이다. {{ 와 }} 사이에는 인스턴스의 name 이라는 속성의 값으로 대체된다. 가장 기본적인 데이터 바인딩 방식이다. 예제코드 Name: {{ name }} Raw HTML {{ 와 }} 를 사용한 텍스트 보간법은 데이터를 일반 텍스트로 취급하여 실제 HTML 문자열은 넣을수가 없다. 이를 위해서.. 2023. 5. 6. Nuxt SSR 상황에서 axios 요청에 쿠키 넘기기 Nuxt를 사용하다보면 서버사이드에서 axio를 요청하면 쿠키를 전달 할 수 없다는 걸 알게 된다. 브라우저에서 받은 쿠키를 프론트서버에서 API서버로도 전달해야 하는데, 이것을 어떻게 쉽게 해결하는지와 서버사이드와 클라이언트사이드의 코드가 같아질 수 있는 방법을 설명한다.Nuxt universal modeNuxt를 universal 모드로 사용하면 SSR(서버사이드렌더링)을 사용하게 된다. SSR페이지 최초 접근시에 다음과 같은 단계들은 서버사이드에서 실행된다.nuxtServerInitasyncDatafetchmiddleware그리고 최초 로딩이 끝나고 이후에 페이지 전환을 할때는 클라이언트 사이드에서 실행된다. 그래서 여기에서 axios를 이용하여 서버로부터 데이터를 받아오는 코드가 있다면, 서버사이.. 2023. 4. 27. Javascript 터치 이벤트 Offset 구하기 Javascript로 모바일 브라우저에서 터치 이벤트를 처리하기 위해 좌표를 구하려고 하면 다양한 기준의 좌표값이 있다. 정해진 영역내에서의 터치이벤트의 상대좌표를 알기 위해서는 별도로 Offset을 계산하는 처리가 필요하다. 터치이벤트에 대해 먼저 간략히 알아보자. 일반적인 웹사이트를 개발하다보면 터치이벤트를 처리해야될 상황이 사실 거의 없다. 하지만 HTML Canvas를 이용하여 무언가를 그리는 사이트를 만들게 되면 모바일 디바이스에서의 원활한 동작을 위해 터치이벤트를 처리해줘야 한다. PC에서라면 마우스 스크롤 이벤트를 이용하여 확대/축소 기능을 구현할 수 있지만, 모바일 디바이스에서는 두손가락 터치를 이용하여 확대/축소를 해야한다. 두손가락 터치로 확대/축소 기능을 개발하기 위해서는 터치 좌표를.. 2023. 4. 23. 이전 1 2 3 4 5 6 7 ··· 9 다음 반응형
