반응형

Programming 164

[웹프로그래밍] HTML 페이지 데이터 로딩 화면 구현하기

들어가며 웹페이지를 구현하다 보면 데이터를 비동기 식으로 호출할때가 있습니다. 데이터를 요청하는 호출 이후에 페이지는 로딩은 됬는데, 데이터가 채워지지 않는 경우가 있습니다. 그렇기 때문에 사용자들에게 데이터를 호출하고 있는 상태입니다. 라는 페이지 로더를 구현을 해야합니다. 아래와 같은 그림 회전을하고, 데이터가 전부 로딩이 완료가 되면 로더는 화면에서 사라지고, 내가 사용자애들에게 보여주고자 하는 페이지를 보여주면 됩니다. 아래 예제는 html파일, css파일, 그리고 javascript파일을 작성했습니다. 참고해서 사용하고 싶은 곳에 로더를 구현해보세요. 로딩 페이지 (loading-page.html) 아래는 로딩 페이지를 구현한 html파일입니다. div 태그로 loader, container를 ..

[Javascript] jQuery를 이용해 검색 화면 및 기능 구현

들어가며 처음에 javascript, jQuery, ejs를 사용을 하다보면 각 역할을 유기적으로 연결하는게 참 어려운 문제라고 생각합니다. ejs에서 선언한 값을 어떻게 가져오는지, jQuery로 가져온뒤에 javascript에서는 어떻게 처리를 해야하는지도 감이 안올때가 있습니다. 간단한 예제중에 입력창에 입력을 받고, 입력한 데이터를 가져오는 버튼을 구현하면서 ejs와 jQuery, javascript를 전체적으로 연결하는 연습을 할 수 있습니다. 아래 예제는 입력창과 버튼을 ejs로 생성을 하고, javascript에서 jQuery를 이용해 input과 button의 reference의 값을 가져온 뒤에 이벤트를 바인딩하고 결과를 가져오는 예제입니다. 소스코드 search_view.ejs 아래 소..

[Python] Singleton Pattern을 이용한 Logger 만들기

들어가며 이번에 설명할 내용은 metaclass를 이용해 SingletonType의 class를 생성하고, 생성한 패턴을 이용해 실제로 사용하는 방법에 대해서 설명을 하려고 합니다. 일단 Singleton이라하면 두개 이상의 객체를 만드는 것을 제한하여, 한 클래스가 하나의 객체를 생성하는 것을 말한다. 다른 클래스에서는 하나의 객체를 이용하기 때문에 어디서든지 사용 가능한 객체를 만드는 경우에 사용한다. 저 같은 경우에는 가장 많이 쓰는 패턴이 아닌가 싶습니다. 안드로이드에서도 예를 들면 ListView를 구현할때 데이터를 관리하기 위해서 Singleton을 사용하기도 했습니다. 하지만 가장 많이 써본 경험은 하나의 역할을 하는데, 그 역할이 어느 곳에서든 사용할 수 있도록 하기 위함입니다. Logge..

Programming/Python 2016.08.11

[Python] 파이썬 CSV파일 입/출력 (FileI/O)

들어가며 파이썬을 코딩하다 보면 파일 입출력은 필수다. 뭐... 어디든지 필수겠지, 하지만 파이썬에서는 데이터 분석을 하는 경우가 많기 때문에 데이터를 읽기/쓰기가 자유로워야 한다. 특히 구분자가 ','로 되어있는 csv파일을 자주 읽게 되는데 csv를 읽는 두가지 방법에 대해서 설명한다. CSV파일 읽기/쓰기 파일 쓰기 with open('./file.csv', 'wb') as csvfile: writer = csv.writer(csvfile, delimiter=',') writer.writerow(['love'] * 3 + ['banana']) writer.writerow(['hong', 'love', 'banana']) writer.writerow(['monkey', 'kkikki', 'min'])..

Programming/Python 2016.08.11

[Python] 데이터 포맷 변환 - Protocol Buffer를 Json으로 변환

들어가며 데이터 포맷은 참... 다양합니다. json부터 시작해서 csv, protocol buffer, text 등등.. 이번에는 protocol buffer를 json의 형태로 변환하는 방법에 대해서 알아보려고 합니다. 왜 필요하느냐.. 저 같은 경우에는 spark에서 데이터를 처리하기 위해서 변환을 했습니다. 사실 스파크에서는 protocol buffer를 지원하기 때문에 그대로 읽으면 되지만, tweeter에서 제공하는 elephant-bird 라이브러리를 함께 사용해야 하는 복잡함이 있다. 그것보다 아직 protocol buffer를 읽어서 spark에서 처리한 내용이 거의 없었다. 내가 찾아봤을때는 elephant-bird와 scala를 이용해서 읽어보려고 했으나 많은 dependency 등과..

Programming/Python 2016.08.03

[JavaScript] 자바스크립트 Ajax 사용하는 방법 (POST/GET)

들어가며 JavaScript에서 웹 개발을 할때 Front의 코드를 구현할때 Ajax를 이용하면 쉽게 서버로부터 데이터를 받아오고, 전송을 할 수 있다. 아래 소스코드는 nodeJs와 같이 웹 서버 프레임워크가 설치가 되어있고, 서버가 실행이 되어 있어, 해당 요청 URL을 처리를 할 수 있는 상태가 필요하다. 전송하는 방법은 앞서 설명했던 HTTP Request를 사용하고, 보통은 HTTP GET을 통해 서버로부터 데이터를 받아오고, HTTP POST를 통해서 데이터를 전송하는 방법을 사용하지만. POST로도 데이터 전송이 가능하다는 점~ 서버에서 Web Front로 데이터 전송 서버로 부터 초기의 데이터를 Web Application으로 불러오는 소스코드입니다. ajax로 설정한 url을 요청을 하면..

[JavaScript] 자바스크립트 Dictionary 사용하는 방법

들어가며 JavaScript를 하면서 가장 많이 사용하는게 Collection이 리스트라고 생각한다. 그 다음에는 Dictionary가 아닐까 싶다. 사실 Python을 할 때도 Dictionary는 매우 유용하게 자주 사용한다. Dictionary는 key, value의 pair로 저장하게 되는데 리스트에서 인덱스로 접근하는거와 다르게 key의 값으로 접근하기 때문에 원하는 값을 찾을때 빠르게 찾을 수 있는게 장점이다. 아래 예제 정도만 알면 Dictionary 구현은 쉽게 할 수 있지 않을까 싶다. 추가적으로 필요한 내용이 생각나면 바로바로 추가를 해야겠다. 소스코드

[알고리즘] 알고리즘 면접 문제 - 도화선으로 시간 맞추는 방법

들어가며 요즘 1차 면접을 보게 되면, 기술면접인데 기술면접에서 많은 알고리즘문제를 요구하기도 합니다. 이 문제는 MS에서 면접으로 냈던 문제라고 하는 도화선으로 시간을 맞추는 방법 입니다. 제목만 보고 어떤 문제일까? 라는 생각이 쉽게 와닿지 않는데요. 일단 문제 확인을 하고 해결 방법에 대해서 설명하겠습니다. 1분동안 타들어가는 도화선이 있습니다. 이때 도화선의 두께는 고르지 않기때문에 일정한 속도로 타지 않습니다. 즉, 늦게타는 부분과 빨리타는 부분이 있습니다. 절반이 탔다고 해서, 30초가 되는 것은 아닙니다. 예를 들어서 도화선에 불을 붙인 이후에 1/4가 불에타 없어진다고 해도, 60초에 1/4인 15초가 아닙니다. 문제를 풀기 앞서 간단한 예제를 통해서 이해를 하면 더 쉽게 해결이 가능합니다..

[Git] Pull Requests하는 방법

Pull Requests 외부 프로젝트를 fork를 했을때, 내가 변경한 내용을 반영하고 싶을 때가 있습니다. 어떤 코드 변경을 했는지 기존 프로젝트의 maintainer에게 요청을 전송합니다. 요청을 전송하면 maintainer는 요청을 보고, 리뷰를 한 뒤에 accept을 하면 내가 요청한 변경 사항을 pull을 합니다. 그렇게 되면 기존에 내가 fork한 프로젝트에 반영이 됩니다. 이처럼 나의 변경사항을 기존 프로젝트의 maintainer에게 요청하는 작업을 pull requests를 만든다 라고 표현합니다. Pull Request 생성하기 Pull Request를 생성하기 위해서는 기존 github에서 내가 fork한 프로젝트의 저장소를 방문합니다. github에서는 'Compare & pull ..

Programming/기타 2016.06.23

[Git] 외부에 있는 저장소에서 Pull하기

외부 저장소에서 Pulling 함께 개발하는 개발자가 있다면, 항상 최신의 상태를 받아와야 합니다. 예를 들어 A라는 작업을 하고 있지만, B에 의존성이 있다면, B작업의 최신 상태를 나의 저장소에서 최근 상태로 업데이트할 필요가 있습니다. 이때 외부 저장소에서의 변화를 나의 저장소로 반영하기 위해 하는 작업을 pull이라고 합니다. 외부에 있는 저장소를 pull하기 위해서는 $ git pull 명령어를 하면 됩니다. 만약에 아무런 변화가 없으면 'Already up-to-date'라는 결과를 반환합니다. 변화가 있다면 나의 로컬 버전에 merge가 되어 변경이 됩니다.

Programming/기타 2016.06.23
반응형