kentakang's blog

안녕하세요, kentakang 입니다.이번 티스토리 업데이트에서 바뀐 점이 상당히 많아, 저도 블로그를 한 번 리뉴얼 해봤습니다.블로그의 변경 사항들과 리뉴얼 하면서 느꼈던 것들을 적어보려 합니다. 디자인 변경가장 큰 변경입니다.블로그의 디자인을 전체적으로 변경했습니다.사실 매번 스킨을 만들려고 다짐해도, 귀찮음 때문에 티스토리에서 제공하는 스킨을 사용했었는데,이번에는 한 번 스킨을 직접 제작해봤습니다.처음에는 기능 수정없이 순수 CSS로만 구현하려고 했는데, 디자인에 맞게 커스텀 하다 보니 사이트의 크기가 상당히 커졌네요.메인 화면에는 무한 스크롤이 적용되어 있고, 카테고리 페이지와 검색 페이지도 자바스크립트를 통해 커스터마이징 했습니다.이 부분은 추후 다른 글로 자세하게 다뤄보려고 합니다. 프로필 페..

Python + Selenium을 통한 페이스북 동영상 다운로드 안녕하세요, kentakang 입니다. 이번에 개인적인 용도로 페이스북 동영상을 다운로드 하는 프로그램을 만들었습니다. 제가 프로그램을 개발하면서 겪은 시행착오나, 여러가지 팁들을 공유하고자 게시글을 작성하게 되었습니다. 저는 Python을 통해 개발했고, 로그인 구현, 영상 다운로드를 위해 Selenium을 이용했습니다. 페이스북 동영상은 어떻게 다운받아요? (공개 동영상) 우선 공개 동영상을 다운로드 할 때 제가 이용한 방법을 적어보도록 하겠습니다. 우선 제가 다운로드 할 영상에 들어왔습니다. 여기서 소스 보기로 들어가시면 영상의 소스를 찾을 수 있습니다. 여기서 영상의 각 화질 별로 가져와야 할 주소가 달라집니다. HD 지원 영상 : ..

React Native에서 블루투스 사용하기 사실 React Native는 디바이스를 제어하는 기능을 하기에 효율적인 솔루션은 아닙니다.기기의 디바이스적인 부분을 건드릴 때는 네이티브 코드로 작성하시는 것이 훨씬 간단하지만,사정상 React Native를 통해 모두 구현하게 되어, React Native에서 블루투스를 사용하는 과정을 정리해 블로그에 올려봅니다.우선 라이브러리가 필요합니다.제가 사용할 라이브러리는 react-native-bluetooth-serial 라는 라이브러리 입니다.NPM 또는 Yarn을 통해 설치 후, React-Native CLI를 통해 링크해주세요.저는 Yarn을 이용해 설치하겠습니다. yarn add react-native-bluetooth-serial react-nativ..

React Native에서 구글 지도 사용하기 1. API 키 발급2. 라이브러리 설치3. 적용 API 키 발급react-native-maps 라이브러리를 사용할 때는 구글 지도 API가 필요합니다.구글 지도 API 사이트에 들어가 키를 발급 받아주세요. 라이브러리 설치 NPM과 Yarn 설치 방법 모두 설명하겠습니다.NPM의 경우: npm install react-native-maps --save Yarn의 경우 : yarn add react-native-maps모듈 설치가 완료되면, 라이브러리를 링크해주셔야 합니다. react-native link react-native-maps 링크가 완료되면, android - app - src - AndroidManifest.xml 파일을 열어 구글 지도 API..

Vuetify + Electron 사용하기요즘 프론트엔드 라이브러리의 인기가 상당합니다. 페이스북에서 이끄는 React, 타입스크립트 기반의 Angular2, 항상 떠오르는 신예 취급을 받는 Vue.js 등의 라이브러리가 많은데요.저는 Pure Javascript + Electron을 통해 데스크탑 어플리케이션 작업을 하고 있었는데, Single-Page Application (SPA)로 구성하지 않았던 앱을 SPA로 변경하려니 상당히 어려움이 많았습니다.자바스크립트에서 SPA를 구현하려면 직접적으로 DOM을 건드려주기도 해야하구요.그래서 SPA 관련해서 정보를 찾아보니 React, Vue.js 등의 프론트엔드 라이브러리에 관한 정보가 많이 나와 프론트엔드 라이브러리를 사용해보고,라이브러리를 사용하는 게..

Node.js Electron 프레임 없는 윈도우 만들기 Discord는 Electron으로 개발 된 대표적인 앱이다.개인적으로는 Electron을 사용할 때 좋은 본보기가 될 수 있는 앱이라고 생각한다. 근데 처음 Electron을 사용할 때는 Windows의 기본 프레임이 거슬린다.해당 프레임을 제거하고, 드래그가 가능한 부분을 만들고 앱을 종료할 수 있는 버튼을 만드는 법을 적어보려고 한다.우선 Electron에서 프레임을 제거할때는 BrowserWindow 객체를 생성할 때 frame 속성에 false를 주면 된다.const {app, BrowserWindow} = require('electron')const path = require('path') function createWindow () {..

Node.js 에서 PostgreSQL 연동 저는 데이터베이스를 사용할 때 주로 PostgreSQL을 사용하고 있습니다.이번에는 Node.js 를 통해 프로젝트를 진행 중이라, PostgreSQL과 Node.js를 연동하는 방법을 정리하여 작성해봤습니다.Node.js의 가장 큰 장점은 npm이라 생각합니다.대부분의 모듈들을 npm으로 받을 수 있다보니 정말 편리했습니다.PostgreSQL 서버는 이미 설정되어 있다는 전제하에, 연동을 시작하겠습니다.우선 연동을 위해 'pg' 라는 모듈을 받겠습니다. npm i pg --save 기초적인 연결을 하는 코드를 작성해보겠습니다. const { Client } = require('pg'); const client = new Client({ user : 'DB 사..

오마이걸의 컴백을 맞아 BananaAllergy 사이트의 영상들을 불꽃놀이로 업데이트 했습니다. 오마이걸 화이팅!

안드로이드 FCM 푸시 알림 사용하기 FCM (Firebase Cloud Messaging)은 이름답게 알림 메시지를 주고 받을 수 있게 해주는 서비스다.대표적인 푸시 알림 서비스로는 iOS의 APNS, 안드로이드의 FCM이 있는데.FCM은 APNS와 연동해서 iOS에서도 사용하거나, Unity, C++, 웹에서 사용이 가능하다.우선 안드로이드 스튜디오에서 코드를 작성하기 전 파이어베이스 콘솔 (https://console.firebase.google.com/) 에서 프로젝트를 생성해야한다. 프로젝트를 생성했다면, 안드로이드 스튜디오 Tools 메뉴의 Firebase를 클릭하면,위 사진과 같이 Firebase 설정 창이 나온다.Firebase 설정 창에서 Cloud Messaging -> Set up F..

Python으로 웹 서버 제작 - HTTP 헤더 안녕하세요, kentakang 입니다.지금 학교에서 소켓 통신에 대해 배우고 있는데, 저번에는 프로토콜을 제작했었습니다.이번에는 다른 프로토콜을 이해하고, 공부하기 위해 HTTP 프로토콜을 지원하는 웹 서버를 만들어 보려 합니다.이번 게시글에서는 상황에 맞는 HTTP 헤더를 반환하는 것을 해보려고 합니다. 우선 기본적인 소켓 통신의 예제입니다. Github 파이썬의 socket을 통해 localhost:12345를 통해 요청을 받고,받은 데이터를 그대로 다시 클라이언트에게 송신하는 예제입니다.이걸 응용해서 요청을 받고, HTTP 프로토콜 규격에 맞게 다시 전송해주는 서버를 만들어보겠습니다. import socket server_socket = socket...