5월, 2018의 게시물 표시

Android CardView의 각 속성 설명

이미지
안녕하세요. 명동콜링입니다.

오늘은 Android에서 사용하는 컴포넌트 중에 하나인 CardView에 대해 알아보려 합니다.

CardView는 Android 5.0 (Lollipop)부터 적용된 Material Design에 맞춰 나온 UI로 단어 그대로 크레딧 카드 하나가 놓여져있는 모습과 닮은 컴포넌트라고 할 수 있습니다.

이 컴포넌트의 특이한 점은 일반 UI로 종속이 되어있는 것이 아닌, 다른 Dependency에 분류되어 Gradle을 통해 compile(implement) 시켜주어야만 사용을 할 수 있습니다.

대략적인 UI와 컨셉이 어떻게 되어있는 지는

https://developer.android.com/guide/topics/ui/layout/cardview
위의 해당 구글 개발자 사이트에 잘 설명되어있습니다.

그러나 해당 컴포넌트를 저 문서로만 보고 XML내에서 UI를 그리기에는 알아보아야 할 몇가지 Attribute들이 있기 때문에 이번 포스팅에서는 그 Attribute들을 알아보는 시간을 가지려 합니다.

그럼 CardView에는 어떤 XML Attribute들이 있는지 보도록 합시다


먼저 Google Android API Documents에 나온 XML Attribute들의 목록입니다. 확연히 들어오는 것은 각 Attribute마다 명시되어야 할 설명들이 하나도 적혀있지 않다는 것입니다. 게다가 기본적으로 제공하는 UI가 아니어서인지 XML에서 Attribute를 사용할 때에도 네임스페이스를 따로 추가해야 합니다.


바로 xmlns:app이 그 해당사항이 됩니다. 그래서 CardView만의 XML Attribute를 사용하기 위해서는 기존의 "android:" 가 아닌 "app:" 으로 사용해야 합니다.

참 친절하지 않은 상황이기 때문에 일일히 어떤 요소가 있는 지 파악해보도록 합시다.

1. app:cardBackgroundColor

 backgroundColor라고 써있는 것을 보면 감이 오실겁니다.  말 그…

[반려동물 이야기] 월화수목금토일

이미지
귀여운 개린이 묘린이들로 보는 월화수목금토일 공감 가시나요..?ㅎㅎ


[반려동물 이야기] 반려동물 동반 가능 카페와 식당

이미지
펫슐랭 가이드
-반려동물 동반 가능 카페와 식당
01. #3239 CAFE

ㅣ서울 용산구 녹사평대로32길 39
ㅣ전화번호: 02-792-3239
ㅣ영업시간: 매일 12:00 - 22:00

- 강아지들이 뛰어 놀 수 있는 외부 테라스 공간이 준비되어있습니다.
- 실내 애견놀이공간이 따로 준비되어있고, 다양한 강아지, 고양이 간식을 판매하고 있습니다.
- 커피와 디저트에 댕댕이 이름 써주는 센스 있는 카페

02. 어른이소공원

ㅣ서울 마포구 희우정로 50
ㅣ전화번호 : 02-3144-3221
ㅣ영업시간 : 11:00 ~ 22:00 (화요일 휴무)

- 케일 착즙 주스 등 다양한 건강음료와 커피를 판매하고 있습니다.
- 디저트와 브런치메뉴도 함께 판매하고 있습니다.

03. 펠앤콜(fellncole)

ㅣ서울 마포구 와우산로 39-21
ㅣ전화번호 : 070-4411-1434
ㅣ영업시간 : 매일 12:00 - 22:00 (명절휴무)
- 천연재료로 매장에서 직접 만든 아이스크림 전문점. 애완견과 함께 즐길 수 있는 아이스크림.

nodejs에서 XML to JSON 파싱하기

안녕하세요. 남산돈가스입니다.

오늘은 node js 에서 xml 데이터 파싱하여 json형태로 변환시켜주는 모듈을 소개해보려고 합니다.

node js를 이용하여 API 서버를 구성한다고 하면 기본적으로 핸들링하는 데이터 형태는 거의 대부분 JSON을 사용하고 있습니다.

하지만, 예를 들어 국내 공공데이터포털에서 OPEN API를 제공받으려고 하면 제공하는 데이터타입이 아직 XML 형식이 남아있는 것을 가끔 보실 수 있을 것입니다. 최근 들어, type으로 구분지어, xml 형식, json 형식을 제공하는 API도 생겼지만, 아직도 xml형식만 지원하는 API들이 남아있습니다.

이런 데이터들을 제공받아 가공하기 위해 xml to json 모듈이 필요하기 마련입니다.

제가 오늘 소개해드리는 모듈은 xml 데이터를 손 쉽게 json 으로 파싱할 수 있는 'xml-js' 모듈입니다.

예제로, 실제 공공데이터포털에서 제공하는 유실동물 검색 OPEN API 서비스를 이용하여 xml데이터를 요청한 뒤, 결과값으로 받은 xml데이터를 json으로 변환해보겠습니다.

가장 먼저 예제를 진행하기 위해서 필요한 모듈인 xml-js와 API를 request하기 위한 request 모듈 두가지를 설치해보겠습니다.

npm install xml-js request
xml-js과 request 모듈을 다운받았으면, 예제 소스를 확인해보면서 설명드리겠습니다.

예제 소스는 다음과 같습니다.

const convert = require('xml-js'); const request = require('request'); const HOST ='http://openapi.animal.go.kr/openapi/service/rest'const SERVICE_KEY ='mySecretKey'var requestUrl = `${HOST}/abandonmentPublicSrvc/sigungu?upr_cd=6500000&Ser…

[레드마인] 레드마인 테마 변경 하기

이미지
지난번에 레드마인 플러그인 설치하기에 이어서 레드마인 테마 변경 방법에 대해 알아 보겠습니다.

사용자들이 많이 추천하고 있는 Circle Theme 를 적용할 예정입니다.

테마 다운로드를 위하여 아래 링크로 이동합니다.
https://www.redmineup.com/pages/themes/circle



1. 테마 다운로드

Download NOW 버튼을 클릭하고 다운로드 링크를 수신할 메일주소를 입력합니다.



이메일 수신함을 확인해 보면 아래와 같이 테마 다운로드 링크가 포함된 이메일을 확인할 수 있습니다





2. FTP 를 통한 파일 전송

파일 다운로드가 완료 되었으면 압축을 해제 한후 서버에  접속하여 아래 경로에 파일을 복사합니다.

/usr/share/redmine/public/themes/






3. 서버 확인 및  서비스 재시작

서버에 SSH 접속 후 아래 경로와 같이 파일이 정상적으로 존재하는지 확인 합니다.

/usr/share/redmine/public/themes/circle/stylesheets/application.css






4. 아파치 서비스 재시작

테마 적용을 위해 레드마인 서비스를 재시작 합니다.

# service apache2 restart





5. 테마 적용

레드마인에 로그인 후 테마 설정을 변경 합니다.
설정 – 표시방식-테마 항목에서 Circle 테마를 선택합니다.



테마 적용 화면 입니다.




기존 테마에 비해 글자 크기가 증가 되어 가독성이 많이 좋아진 느낌 입니다.


이상으로 테마 설정이 마무리 되었습니다.


AWS Beanstalk 구성파일(.ebextensions)을 사용하여 환경 구성하기

이미지
AWS Elastic BeanstalkBeanstalk를 사용하여 어플리케이션을 인프라에 상관없이 AWS클라우드에 배포하고 어플리케이션을 관리할 수 있습니다. 어플리케이션(ex. .war .zip)을  업로드하여 Elastic Beanstalk에서 인스턴스 갯수의 프로비저닝, 로드 밸런싱, 어플리케이션의 상태 모니터링을 손쉽게 설정할 수 있습니다.
지원 언어JavaPHP.NETNode.jsPythonRuby
<AWS Elastic Beanstalk 워크플로우>
구성파일(.ebextensions)Elastic Beanstalk(이하 EB)는 어플리케이션의 제어 및 관리에 큰 장점이 있지만, 시스템 라이브러리 추가 및  설정 변경 및  Scouter 와 같은 써드파티 프로그램 설치가 어렵다는 단점도 있습니다. 이러한 단점을 보완하기 위해 EB 구성파일(실제로는 디렉토리임)인 .ebextensions을 추가하여 별도의 환경을 구성할 수 있습니다. 구성 파일은 .config 파일 확장명을 사용하는 YAML 형식 문서로, .ebextensions 폴더에 놓고 애플리케이션 원본 번들로 배포합니다.
설저파일 추가하기배포할 어플리케이션 .ebextensions 설정을 추가하고 싶으면 배포될 어플리케이션의 root 디렉토리에 .ebextensions 폴덜르 추가하고 폴더하래에 설정파일을 추가하면 됩니다.
< EB 디텍토리 구조 > 구성파일(.ebextensions)을 어프리케이션(.war) 파일과 하나로 묶어서 배포하면 적용할 수 있습니다.

zip -r application.zip application.war .ebextensions
소프트웨어 커스터마이징어플리케이션이 실행되는 서버에 패키지를 설치하거나, 사용자 혹은 그룹을 생성하거나, 파일을 다운로드하는 등   어플리케이션에서 사용하는 소프트웨어를 설정하기 위해 다음의 키를 사용하여 커스터마이징 할수 있습니다.

구성파일(.ebextensions) 다음의 항목의 키를 사용하여 커스터마이징 할수 있습니다.
패키지그…

[Android] Parcelable 에 대한 쉬운 이해

이미지
안녕하세요 명동 콜링입니다.

오늘은 Android에서 Model Class를 다룰 때 사용하는 Serializable 의 한 분류인 Parcelable에 대해 써보려고 합니다.

일단 Serializable이란 무엇인가, 영어의 뜻을 풀이하자면 '직렬화' 라고 얘기할 수 있는데 막연히 '직렬화' 라고 얘기하기엔 무슨 뜻인지 이해 하기 어렵습니다. 그래서 Android 시스템에서 동작하는 방식으로 이야기 하자면,

A Activity에서 B Activity로 데이터를 전달할 때, 데이터를 묶어서 전달한다
 라고 쉽게 풀이할 수 있습니다. 이해를 하는데 도움이 되도록 많이 함축된 문장이지만 이 안에는 "하나의 Class화 된 여러 데이터들이 순서대로 Byte형식으로 변환되어 A -> B로 전달된다." 는 식의 어려운 말 들이 포함되어 있기 때문에 패스를 하도록 하겠습니다.
 여기까지 Serializable의 정의에 대해 간단히 알아봤고 이제는 본격적으로 이 글의 주제인 Parcelable에 대해 알아보도록 합시다.
 일단 Parcel, '소포', '꾸러미' 라는 뜻을 가지고 있습니다. 이 단어의 뜻처럼 Android에서의 Parcel이라는 것도 "여러 데이터가 하나의 꾸러미(Class) 안에 담겨 있다." 라는 의미를 가지게 됩니다. 그래서 이 데이터 꾸러미가 A Activity에서 B Activity로 한꺼번에 전달되고 받아 볼 수 있도록 해 주는 것이 Parcelable의 의미가 되겠습니다.
 그럼 이 Parcelable을 어떻게 사용하는 지 보도록 하겠습니다.
1. 클래스 정의
 먼저 Data(Model) Class를 하나 만들어 보도록 합니다.
public class ProfileCls { String name;int age;String gender;}
간단하게 이름, 나이, 성을 입력 할 수 있는 Class를 만들었습니다. 이 상태에서는 A Activity…

[Objective-C] 카테고리 클래스 추가하기

카테고리는 기존에 정의된 어떤 클래스에 쉽게 확장을 할수 있도록 해줍니다.

직접 만든 클래스나, Objective-c에서 제공되는 UILabel, UIButton, UIView 등 UI 클래스들에 대해서 모두 확장이 가능합니다.

Objective-c 일반적인 클래스는 정의부(.h)와 구현부(.m)로 이루어 집니다.
구현부에 사용된 함수들이 범용적으로 사용 되거나, 내용이 많아 질경우, 유지보수가 어렵게 됩니다.

Objective-C에서는 이번부분을 카테고리 클래스를 생성할수 있게 해줌으로써 개발자들에게 유지보수를 용의하게 해줍니다.

사용법은 간단합니다.

AClass.h
AClass.m

클래스 생성 후 네트워크 관련 함수, 문자열 관련 함수를 AClass.m 구현부에 작성합니다.

그다음에 AClass+Network , AClass+String 를 정의부와 구현부를 만들어줍니다.

AClass.m에 작성된 함수 중 네트워크 관련함수는 AClass+Network, 문자열 관련 함수는 AClass+String으로 옴깁니다.

+ 클래스 메스드로 정의함으로써, AClass+Network를 바로 사용할수 도 있습니다.

또한, Fouundation이나 UIKit 등에 있는 클래스도 확장이 가능합니다.

예를 들어, UIImage 의 사이즈 조절하는 함수를 만들었다면, 정의부와 구현부와 아래와 같이 만들고 사용할수 있습니다.


@interface UIImage (ResizeAdditions)

+(UIImage *)resizeImage:(UIImage *)image width:(float)resizeWidth height:(float)resizeHeight;


@implementation UIImage (ResizeAdditions)

+(UIImage *)resizeImage:(UIImage *)image width:(float)resizeWidth height:(float)resizeHeight { UIGraphicsBeginImageContext(CGSizeMake(resizeWidt…

[AWS] CodeStar를 이용하여 손쉽게 프로젝트 구성하기

이미지
안녕하세요. 남산돈가스입니다.

새로운 프로젝트를 구성하기 위해선, 서버 그리고 이 프로젝트를 어떤 언어 및 프레임워크를 사용할 건 지 고려해야합니다.

일단 서버를 손 쉽게 생성할 수 있는 AWS에서 생각해보자면, 직접 EC2 인스턴스를 생성해서 서버를 구성하는 방법이 있을 것이고, 또 Lambda-API Gateway를 이용하여 서버리스 환경을 구성할 수도 있습니다. 그리고 Beanstalk를 이용하여 자동 배포를 하는 방법도 있습니다.

다음으로 언어를 살펴보면, nodejs, java, python, spring, php 등 다양한 언어와 프레임워크들이 존재합니다. ec2의 경우 직접 서버에 접속하여 해당 런타임들을 구성해줘야하는 번거로움도 생길 수 있습니다.

추가적으로, 프로젝트를 진행하며 형상관리 및 빌드, 배포까지 고려한다면 귀찮은 것들이 한 두가지가 아닙니다.

AWS에서 이런 번거로움들을 하나의 서비스로 해결해주고 있습니다.

바로 CodeStar라는 서비스입니다. 프로젝트를 생성하면, 서버, 언어 , 형상관리, 배포, 빌드까지 여러 서비스들을 한 곳에 묶어 관리해주고 있습니다.

오늘은 이 CodeStar라는 서비스를 이용해 클릭 몇 번으로 프로젝트를 생성해서 서버를 실행까지 해보려고합니다.


먼저 CodeStar의 콘솔화면으로 이동합니다. 새 프로젝트 생성버튼을 클릭합니다.


가장 먼저 보이는 것이 프로젝트 템플릿 선택화면입니다.
처음에 이 화면을 보고 정말 놀라웠던 점이 정말 다양한 언어를 제공하고, 그에 따른 템플릿도 목적에 맞게 제공하고있었기에, 사용자는 입맛에 맞는 템플릿을 선택하면 기본 셋팅이 완료 된 프로젝트를 바로 접할 수 있다는 것이었습니다.
이번 포스팅에선 간단하게 nodejs의 express 프로젝트를 Beanstalk를 이용하여 관리형 어플리케이션에 올리는 템플릿을 선택했습니다.

다음 화면에서, 프로젝트의 이름을 입력한 뒤, 형상관리에 대한 툴을 AWS에서 제공하는 AWS CodeCommit과 Github를 제공하고 있었는데 Git…

[반려동물 이야기] 유실.유기동물 만났을 때 대처방법

이미지
어느날 길을 가는데 웬 뽀시래기가 길에..

1. 인식표 확인
3개월령 이상의 반려견은 기르는 곳에서 벗어날 경우 반드시 주인의 이름과 연락처가 기재된 인식표를 부착하게 되어 있습니다.
연락처가 발견되면, 주인에게 연락해서 찾아주면 끝!

만약에 인식표가 없는데, 근처에 동물 병원이 보인다면 데려가서 내장형 칩이 있는지 살펴보는 것도 하나의 방법이죠! 아이프렌즈펫 구조대 출동! 주인 찾으러 가자! 2. 유기 동물 신고 인식표도, 연락처도, 내장형 칩도 확인할 수 없다면 동물을 발견한 지역의 시청이나 구청 동물보호 담당자에게 전화를 걸어 신고하면 됩니다. 만약 연휴나 휴가 등의 이유로 담당자 혹은 상황 근무자가 없어 연락이 닿지 않는다면 직접 관할 유기동물 보호시설에 연락할 수 있습니다. 그러면 담당자가 출동해 동물을 구조합니다. 유기 동물을 마음대로 잡아서 팔거나 죽이면 1년 이하의 징역 또는 1,000만원 이하의 벌금에 처합니다 3. 유기동물 보호시설 찾기 http://www.animal.go.kr/ 동물보호관리시스템 홈페이지에서 유기동물 보호센터의 위치와 연락처를 확인하실 수 있습니다. 신고가 접수되면 동물보호관리시스템의 유기동물.동물보호센터 > 공고에서 확인이 가능합니다. 소중을 가족을 찾는데 도움이 되었으면 좋겠네요. 포인핸드 라는 아주 유용한 앱도 있어요~

포토샵 - 클리핑 마스크 만들기

이미지
<포토샵 사용시 알아두면 유용하게 활용할 수 있는 클리핑마스크 >



포토샵 실행 후 원하는 이미지를 볼러 옵니다. [file] – [open] <단축키 : Ctrl + O 또는 workspace(작업내역) 더블클릭



불러온 이미지를 레이어 복사 합니다. (단축키 : Ctrl +J)
새레이어를 만들어를 만들어 배경색을 칠해주세요. [단축키 배경색 칠하기 : Ctrl+Delete] [단축키 전경색 칠하기 : Alt + Delete ]


도형툴을 사용하여 도형을 그려봅니다. 정원을 그릴 때는  Shift + 드레그를 해줍니다.
레이어의 순서를 다음과 같이 변경해줍니다. 이미지 밑으로 도형을 이동시켜줍니다. 레이어 순서 변경하는 단축키 [ 가장 아래  :  Ctrl + Shift + [ ] [ 가장 위  :  Ctrl + Shift + ] ] [ 레이어 한칸 아래  :  Ctrl + Shift + [ ] [ 레이어 한칸 위 :  Ctrl + Shift + ] ]

이미지를 선택한 후 마우스 오른쪽 클릭 [Create Clipping Mask]를 선택해줍니다. [ 클리핑 마스크 단축키 : Ctrl + Alt + G ]

도형안에 선택한 이미지가를 넣을 수 있다.
완성된 이미지