Tempo Di Valse

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' 모듈을 활용하면 쉽게 구현할 수..

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..

지난 포스팅에서는, [Vue.js] 커스텀 Checkbox 만들어보기 UI 를 만들다 보면, 디자이너가 그려주는 UI 에서는 시스템에서 제공해주는 UI 와는 많이 다른 신기하게 생긴 컴포넌트들이 많이 보이곤 한다. 게다가 기능이 이미 코어에도 존재하는 것들, 계열 tempodivalse.tistory.com 을 해보았다. 이번에는 체크박스와 비슷한 의 radio 타입을 커스터마이즈 하는 작업도 하며, 나아가서는 Android 에서는 RadioGroup 이라고 부르는데 라디오 버튼들의 묶음을 만드는 것을 해보도록 하겠다. 1. Vue 컴포넌트 생성 먼저, RadioGroup 이라고 .vue 파일을 하나 만들었고 기본 프레임도 작성을 했다. // 여긴 텍스트가 들어갈 곳 체크박스 때와 같이 태그를 밖에 둘..

UI 를 만들다 보면, 디자이너가 그려주는 UI 에서는 시스템에서 제공해주는 UI 와는 많이 다른 신기하게 생긴 컴포넌트들이 많이 보이곤 한다. 게다가 기능이 이미 코어에도 존재하는 것들, 계열의 checkbox 나 radio, 의 경우에는 기능은 유지하되, 겉의 모습만 바뀌는 것을 많이 볼 수 있다. 하지만 레이어 같은 아이들이 아니라서 새로 스타일을 정의하기에는 많은 어려움을 가지고 있다. 그래서 이런 것들은 웬만하면 크게 커스터마이즈하여 디자인을 맞추곤 하는데, 이번 포스팅은 그 중에서 커스터마이즈 하기가 쉬운 Checkbox 를 Vue.js 를 통해서 만져보도록 하겠다. 먼저 일반적인 체크박스 의 구조를 보게 되면, HTML 삽입 미리보기할 수 없는 소스 2가지 타입의 체크박스를 볼 수 있다. 해..

우선 출처는 Facebook 에서 개발한 InlineChunkHtmlPlugin 으로, React 와 관련되어 페이스북에서 개발한 Webpack Plugin 인 것 같다. GitHub - facebook/create-react-app: Set up a modern web app by running one command. Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub. github.com 보통 Webpack 을 실행하게 되면, 하나(혹은 여러 개)로 번들링이 된 js 파일을 내보내지게 되는데, 이번 포스팅에서 작성할 ..

원래 기대하고자 했던 동작은, 1. 하이브리드 앱에서 버튼을 눌러 문자열을 앱에 전달 하고자 한다. 이 때, 문자열은 URI 인코딩이 되어야 한다. 2. 그래서 A 태그에서 encodeURIComponent 를 실행 시켜서 인코딩을 하고 앱에 전달한다 Example 였는데, iOS / Android 의 WebView 부분에서 확인해보니 Android 는 정상적으로 데이터를 전송 받을 수 있었는데 iOS 에서는 그렇지 않은 일반 평문으로 받게 되었다. 개발자들의 만능 홈페이지인 StackOverflow 에도 이에 대한 해답이 나오지 않았고, 애초에 앱 자체로 들어가는 데이터가 다르게 들어간 것을 보니 앱 내에서의 문제는 아닌 것 같았다. 여러 시행 착오를 거쳐 해결할 수 있는 방법을 찾았으니... iOS ..