Tempo Di Valse

먼저 Vue.js 의 동적 컴포넌트란 무엇인가. 해당 내용은 Vue.js 문서에 잘 나와있다. 동적 & 비동기 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 간단하게 실무쪽으로 사용하는 방법에 대해서 예시로 설명하자면, - 여러 컴포넌트가 있다. 이 때 컴포넌트 들은 거의 같은 구조를 가지고 있다. (다른 구조를 가지고 있어도 상관없긴 함) - 컴포넌트는 한 곳에서 번갈하가면서 뿌려줘야 한다. - 컴포넌트는 비슷한 상호작용을 할 수 있어야 한다. 할 때에 코드로 작성하게되면, 일반적으로 기초만 배웠을 때에는 다음처럼 코딩을 작성할 것이다. 그리고 각 콘텐트 태그들은 다음의 내용을 가지고 있다고 한다. Content {{ n }} 겉보기에는 괜찮을 수 ..

웹 페이지에서 이미지를 보여주는 것을 만든다고 하면 를 통하여 이미지를 보여준다. 그래서, 형식처럼 URL 을 넘겨주면 알아서 URL 의 이미지를 불러오곤 한다. 여기서 URL 은 일반 웹상에서 돌아댕기는 http 나 https Scheme 이 붙은 URL 일 수도 있고, data URI 값일 수도 있고 다양한 값으로 가져올 수 있다. 이 방식으로 Electron 환경에서 로컬에 있는 이미지를 부른다면, 로컬 이미지의 경로를 가지고 있기 때문에 URL 넣는 것 처럼 넣어주면 된다고 생각했을 것이다. 그러나 작동하지 않는다. Electron 은 보안상의 이유인 지는 몰라도 Electron 환경에 올라가진 웹 페이지 상에서는 로컬에 있는 데이터를 접근하는 것을 방지하고 있는 것 같았다. 웹 페이지에서 로컬 ..

Laravel 에는 Vue 를 올려서 사용할 수 있도록 composer 를 통해서 지원해주고 있다. Webpack 은 물론, Vue 환경에서 개발에 필요한 라이브러리들을 import 시켜주고있어 Laravel 환경에서 참 편하게 개발하고 있다. 여기서 소개할 내용은 Laravel 의 가상 로컬 호스트 패키지인 Valet 환경에 BrowserSync 를 적용하여 Vue 작업과 관련된 소스에서 변경이 일어나면 브라우저에 바로 반영을 시키는 그런 방법을 소개 하도록 하겠다. 일단, laravel/ui 를 통해 Vue 가 적용된 Laravel 환경이 프로젝트에 설치가 되어있어야 한다. 가장 먼저 할 일은 webpack.mix.js 파일을 찾아 browserSync 항목을 추가한다. 아무 것도 설정하지 않은 빈 ..

HTML5 에서 WebSocket 이라는 개념이 나온 이후로 브라우저와 서버 사이에 소켓통신이 쉽게 이루어지게 되었는데, 이 부분은 꽤나 오래된 이야기라 패스하도록 한다. 서버환경이 일반 http 가 지원되는 환경에서 사용하게 되면 클라이언트와 소켓서버 연결을 아주 쉽게 구축할 수 있지만 SSL 이 적용된 서버라면 추가적인 옵션이 필요하다. 왜냐하면 SSL 을 적용한 것이 웹 서버에 브라우저에 접근하는 것을 적용을 한 것이지 소켓에 적용한 것은 아니기 때문이다. 그래서 에러를 발생시키는데, https 환경에서 http 데이터(예를 들어, 이미지 같은거) 를 불러오는 경우에 콘솔에는 Mixed Content 라고 써있는 에러를 밷는 것과 같은 느낌의 에러를 볼 수 있다. 그렇다면 https 환경에서 소켓서..

A 와 B 컴포넌트가 있고 B 컴포넌트는 A 컴포넌트에 속해있을 때, A 에서 B 의 기본값을 정의해 줄 때가 있다. 그럴 때에는 보통 다음의 프로세스를 따라 정의를 하게 된다. 1. B 컴포넌트에 props 를 정의한다. 2. A 컴포넌트에서 B 컴포넌트에 정의한 props 의 name 값으로 데이터를 전달한다. 이 프로세스를 소스로 옮기게 된다면, 인 경우에 B 컴포넌트에 // B.vue props 에 value 라는 이름으로 property 를 추가했으며 A 에서는, value 이름을 가지고 데이터를 넣어주게 된다. 만약, 일반 값이 아닌 변수를 넘겨주게 된다면 그냥 value 가 아니라 :value 를 사용하게 될 것이다. 여기까지는 기본적인 Vue 의 props 에 대한 정의 였다. 하지만, 이..

A 파일과 B 파일이 같은 파일인 지 다른 파일인 지 비교하고 싶었다. 맨 처음 접근하고자 했을 때에는 (파일명, 파일 사이즈) 를 통해 접근하면 괜찮지 않을까 싶었지만, 파일을 다른 이름으로 변경을 하거나 내용이 다른데 같은 사이즈의 데이터가 된다면 무용지물이기 때문에 어떻게 처리할 수 있는 방법이 없을까 찾아보다가 "파일 해쉬" 에 대한 내용을 구글링하다가 발견하게 되었다. 이 방식은 파일 자체를 해쉬 값으로 변경하여 비교를 하게되면, 파일 내용 자체를 변환하여 비교한 것이기 떄문에 파일이 다른 이름으로 변경이 되거나 해도 같은 지 다른 지 확인할 수 있다는 것이다. 꽤나 괜찮은 방법이라 생각하여 Node.js 환경에서는 어떻게 하면 가능한 지 찾아보니 'crypto' 모듈을 활용하면 쉽게 구현할 수..

원래는 Window 프로그램을 만들어보려 Flutter 에 대해 공부하던 중에 Slack 이 Electron 으로 만들어진 프로그램이라는 이야기를 듣고 급선회하여 Electron 을 알아가는 시간을 가져보았다. Electron 에 서버에 있는 홈페이지를 띄우는 것 만으로도 엄청난 반응을 보여주었고 Web 에서 시스템 UI 로 사용하던 alert(), confirm() 함수라던가 파일 다운로드라던가 하는 기능들을 Window 에 맞게 재구성하여 만들어주기도 해서 이 정도면 원하는 프로그램을 만들 수 있다는 충분한 가능성을 확인하여 작업을 착수했고, 기존에 사용하던 Vue 를 Electron 위에 얹어 개발 환경을 꾸리려고 한다. 해당 환경은 'Electron-Vue' 를 사용하지 않은 방식이기 때문에 쉬운..

Node.js 도 보통이면 yum 으로 처리할텐데... 일단 환경을 OS 에 따른 환경이 아닌, gcc 가 깔려있는 환경에 따라 설치를 하게 되었다. 최신 LTS 버전의 Node.js 를 설치하려고 하니 GLIBC_3_14 버전이 없다느니 하는 에러가 주르륵 나와서 어떻게 할까 하다가 gcc 버전을 확인해보니 4.4.7 버전이길래 그럼 Node 10 버전이면 괜찮겠지 하며 다운받아 설치를 진행하게 되었다. Node.js 도 소스 컴파일 하는 방법도 있지만, 이 방식은 거의 무설치 방식에 가깝다고 생각된다. 1. 다운로드 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 먼저, g..