하이호예호

Elastic Beanstalk과 Jenkins로 CI, CD 구축하기 (Part1. Elastic Beanstalk 구축) Elastic Beanstalk과 Jenkins로 CI, CD 구축하기 (Part2. Jenkins 설치) Elastic Beanstalk과 Jenkins로 CI, CD 구축하기 (Part3. Jenkins Pipeline 구성) 이 글에서는 S3를 추가하고 Jenkins Pipeline을 이용하여 S3에 war 파일을 업로드하고 Elastic Beanstalk에 Deploy 해보도록 하겠습니다. 1. S3 생성 war 파일을 업로드할 S3를 하나 생성해보도록 하겠습니다. 1.1 버킷 만들기 AWS에서 S3 검색 후 버킷 만들기를 선택합니다. 버킷 이름을 입력 후 리전은 서울 리전..

Elastic Beanstalk과 Jenkins로 CI, CD 구축하기 (Part1. Elastic Beanstalk 구축) Elastic Beanstalk과 Jenkins로 CI, CD 구축하기 (Part2. Jenkins 설치) Elastic Beanstalk과 Jenkins로 CI, CD 구축하기 (Part3. Jenkins Pipeline 구성) 이 글에서는 IAM Role을 생성하고 EC2에 Jenkins를 설치한 후 Role과 연결시켜보도록 하겠습니다. 1. IAM Role 생성 AWS CLI를 통해 S3와 Elastic Beanstalk에 접근하기 위해 역할을 하나 생성하도록 하겠습니다. IAM > 역할로 이동 후 역할 만들기를 선택합니다. Jenkins가 설치된 EC2에서 접근하기 때문에 ..

CI, CD 빠른 생산성을 가져가지 위해 통합(Intergration)과 배포(Delivery) 단계를 자동화하고 지속적인 배포 환경을 구성하는 것에 대한 중요성이 커지게 되었습니다. 저 같은 경우 기존에는 배포와 인프라 환경에 대한 운영을 FTP와 SSH를 이용하여 수동으로 하고 있었지만 이번에 Jenkins와 Elastic Beanstalk을 이용해서 통합과 배포를 자동화하게 되었고 이전에 비해 생산성 관점에서 많은 이득을 보았다고 생각합니다. 이 글에서는 이와 관련하여 경험을 공유하고자 합니다. 우선 목표하는 구성은 다음과 같습니다. 1. Github에 소스를 push를 합니다. 2. Github에서 Jenkins로 WebHook을 날리게 됩니다. 3. Jenkins에서는 소스를 war로 빌드 후 ..

1 jQuery를 사용하여 numberOnly라는 attribute로 선언된 텍스트필드에 숫자만 입력할 수 있도록 만들어보겠습니다. 사실 숫자만 입력 가능하도록 하는 예제는 인터넷상에 굉장히 많이 존재합니다. 아마 대부분의 예제를 다음과 같이 되어있을 것입니다. 123$("input:text[numberOnly]").on("keyup", function() { $(this).val($(this).val().replace(/[^0-9]/g,""));}); 결과 (숫자와 문자를 혼합해서 입력해보세요) keyup 이벤트와 정규식을 이용하여 숫자를 제외한 나머지 문자를 공백으로 처리하는 방법이죠. 이 글에서는 제시하는 방법은 위 예제에서 두 가지 문제점을 보완한 방법입니다. 먼저 첫 번째 문제점은 숫자 단위로 ..

저는 검.알.못입니다. 검색에 대해서는 잘 알지 못하죠.하지만 Lucene을 이용한 검색엔진 개발에 있어 Spring Boot와 Hibernate Search를 이용하면 매우 간단하게 구현이 가능하다라는걸 알게되었고 (물론 결과물도 매우 간단했음..) 좋은 경험이라고 생각되어 공유하고자 합니다. 이 글은 Spring Boot와 Spring Data JPA or Hibernate에 대한 기본지식이 있다는 전제하에 작성한 글입니다. 해당 기술들에 대해서는 인터넷에 많은 예제와 이론들이 있기 때문에 시작에 앞서 충분히 습득 후 보는것을 권장드립니다. Lucene 로고 (출저 : https://lucene.apache.org) Lucene 이란? Lucene은 자바로 개발된 확장 가능한 고성능 오픈 소스 정보 ..

HTTP Request 중 message-body로 넘어온 parameter 확인을 위해서는 getInputStream() 이나 getReader()를 사용합니다. 이번 프로젝트에서 사용자가 서비스에 접근하여 어떤 기능들을 수행했는지 로그를 남기는 기능을 구현하던 중 getInputStream() 사용 후 parameter가 손실되는 현상이 있어 공유하고자 합니다. 서비스의 구조는 Spring MVC로 되어있습니다. 여기에서 Controller로 요청이 들어가기 전 URL 및 Parameter 취득을 위해 Interceptor를 구현하였습니다. Interceptor에서 body에 있는 parameter 취득을 위해 구현한 소스는 다음과 같습니다.123456789101112131415161718192021..

요즘 다음메일이나 네이버메일을 보면 checkbox 선택 시 하나씩 클릭하여 선택하는 것이 아닌 drag만으로 선택이 가능합니다. 보통 목록 노출수가 20~30개이기 때문에 특정 10개만 선택하고자 할 경우 전체선택이나 하나씩 선택만으로는 불편함이 존재합니다.이럴 때 유용하게 사용 가능한 jQuery plugin을 소개해 드리려고 합니다. jquery-drag-check Site : https://github.com/scarlac/jquery-drag-checkDemo : http://www.seph.dk/jquery-dragcheck/demo.html 사용법은 간단합니다.아래 한줄을 추가해 주시면 됩니다. 1$('input[type=checkbox]').dragCheck();cs 결과 응용을 해보도록 ..

WebGLPC에서 3D 기술은 표현하기 위해서는 OpenGL을 사용합니다.이 OpenGL을 웹에서 작업할 수 있게 하는 기술이 바로 WebGL입니다.WebGL을 사용하면 JavaScript 코드만으로 웹에서 3D를 표현하는 게 가능해지게 되죠. WebGL을 사용해서 3D를 표현할 때 가장 많이 사용하는 라이브러리가 Three.js입니다. Tweet Search기존에 트위터 검색 사이트들은 검색결과 목록들을 전부 리스트 형식으로 보여주고 있었습니다.Tweet Search는 이 트윗 결과 목록에 Three.js를 도입하면 전체적인 결과에 대해 한눈에 파악할 수 있지 않을까 하는 생각에 시작된 사이트입니다. 검색 결과 예 여기에 리트윗 횟수에 따라 배경색의 변화를 주어서 어떤 트윗들이 인기가 있는지 바로 확인..

오픈 API에 대해 많은 관심이 있습니다. 정확히 말씀드리자면 API의 융합을 통한 매시업 서비스 개발에 관심이 있다고 보는 게 맞겠죠. 개인적으로 오픈 API를 사용함으로써 원하고자 하는 서비스 구현에 많은 시간을 절약할 수 있었고, 이에 저 또한 하나 만들어서 제공하고 싶은 마음에 메타데이터가 필요 없이 간단히 구현 가능한 단축 URL 오픈 API를 만들어 보았습니다. Function주요 기능은 다음과 같습니다. - URL 단축API의 핵심이죠. 단축을 원하는 URL에 대해 XML 또는 JSON으로 결과를 반환합니다. - 소셜 로그인자신이 만든 API의 통계를 확인하기 위해 소셜 로그인을 도입하였습니다. - 통계로그인 후 발급되는 키를 가지고 생성 된 URL에 대해서는 통계 기능을 제공합니다. URL..

5년 전(2010년)에 한참 일러스트레이션에 관심을 가지고 있었습니다. 당시 MBC에서 토요일에 하는 예능프로그램 무한도전을 관심있게 보고 있었고, 당시 방송에 나오는 인물들을 위주로 Adobe Illustrator 툴을 사용해서 만들어본 작업본들이 있어서 올려봅니다. 참고로 굉장히 허접합니다. :) - 김태호 PD (지금은 굉장히 미남이시죠?) - 유느님 - 박명수 - 정준하 - 정형돈 (개인적으로 제일 이상한듯.. ㅜㅡ) - 하동훈 - 노홍철 (이것도 좀 이상한듯..) - 길성준 - 전진 (먼가 사이보그 인간처럼 나옴) - 헤이하치 (신동훈)