남산 아래 개발자들

*이 문서는 지속적으로 업데이트 될 예정입니다 *가로스크롤 UI 모바일에서 터치 + 스크롤 되는 기본적인 CSS 문법이 가장 잘 설명된 예 입니다. 자세한 설명은 여기서 보실 수 있습니다. See the Pen Flickity horizontal scrolling navigation by Steve ( @stevemckinney ) on CodePen . Angular2+ 에서 Bootstrap 과 함께 horizontal scroll 을 구현할 때 한가지 팁이라면 가로 width 를 고정값을 주면 화면 리사이징 할 때 Bootstrap Layout 이 깨집니다. height 만 주거나, 이게 불편하면 Slider 플러그인 같은 다른 대책을 구해보심이 좋을듯합니다. + Sly 라는 꽤 괜찮은 가로 스크롤 플러그인이 있는데 angular2 용으로는 아직 없어서 대단히 아쉽네요 http://darsa.in/sly/ * 이미지의 가로 세로 비율 유지하면서 잘라 보여주기 (CSS) 중앙 정렬 맞추면서 Responsive UI 에서 이미지 비율대로 Crop 해 보여주기 링크 소스 설명은  여기서  보실 수 있습니다. See the Pen 이미지의 가로세로비를 유지하면서 틀 안에 맞추기 by feeva ( @feeva ) on CodePen . * 함께 보면 좋은 문서 당신은 모를 수도 있는 CSS의 7가지 단위 vh, vw 같은 것들은 PC Web 에서는 아직 쓸 수 없겠지만 모바일만을 대상으로 한다면 꽤 매력적인 신기능입니다

이번 강좌에서는 ios 의 푸시 알림 3부의 APN 테스트를 해보겠습니다, ios 푸시 알림 1부 - 개발자 계정 세팅 ios 푸시 알림 2부 - 클라이언트 개발 ios 푸시 알림 3부 - APN 테스트 ======================================================================================== 클라이언트는 세팅이 완료됐으므로, 이제 서버에서 푸시를 보내보겠습니다. 1. 아래의 페이지로 APNS-Tool를 다운받습니다, https://itunes.apple.com/kr/app/apns-tool/id963558865?mt=12 ======================================================================================== 2. 푸시 인증서를 선택합니다. ======================================================================================== 3. Device Token에는 클라이언트에서 발급받은 토큰을 입력합니다. Payload의 내용은 아래의 일반적인 형식으로 보내야합니다. { "aps":{ "alert":"Test APNS Notification", // 알럿 메시지 "sound":"default", // 사운드 "badge":10 // 뱃지 카운트 } } 파라미터를 추가하고 싶다면, 아래와 같이 key&value로 넣을 수 있습니다. 예) 내가 작성한 스냅에, 댓글이 달린다면, 푸시알림을 보내고, 푸시알림을 확인 시 해당 스냅으로 이동하고자 할때. { "aps":{ "...

이번 강좌에서는 ios 의 푸시 알림 2부의 클라이언트 개발을 알아보도록 하겠습니다. ios 푸시 알림 1부 - 개발자 계정 세팅 ios 푸시 알림 2부 - 클라이언트 개발 ios 푸시 알림 3부 - APN 테스트 ======================================================================================== 1. Xcode를 열고 푸시 세팅을 해줍니다. ======================================================================================== 2. AppDelegate.m 파일을 열고, 푸시 코드를 등록합니다. - ( BOOL )application:( UIApplication  *)application didFinishLaunchingWithOptions:( NSDictionary  *)launchOptions -> 앱이 시작될때 - ( void )application:( UIApplication  *)application didRegisterForRemoteNotificationsWithDeviceToken:( NSData  *)deviceToken -> 푸시 서버에 토큰을 등록했을 때 - ( void )application:( UIApplication  *)application didFailToRegisterForRemoteNotificationsWithError:( NSError  *)error  -> 푸시 서버에 등록을 못했을 때 - ( void )application:( UIApplication  *)application didReceiveRemoteNotification:( NSDictionary  *)userInfo fetchCompletionHandler:( voi...

이번 강좌에서는 ios 의 푸시 알림을 알아보도록 하겠습니다. 총 3부로 구성해보았습니다. ios 푸시 알림 1부 - 개발자 계정 세팅 ios 푸시 알림 2부 - 클라이언트 개발 ios 푸시 알림 3부 - APN 테스트 ----------------------------------------------------------------------------------------------------------- 우선 ios에서 푸시를 하려면, 개발자 계정을 먼저 세팅 해야합니다. 1. 인증서 요청 생성 키체인을 이용해  CertificateSigningRequest라는 인증서를 만들어야 합니다. 2. 파일을 만들고 나서, https://developer.apple.com 접속합니다. 진행중인 프로젝트의 APP ID를 누르면, 앱에 대한 설정을 확인하실수 있습니다. edit를 누르고 Push Notifications를 확인합니다. 이미 저는 등록은 한 상태이며, 여러분들은 Create Certificate.. 선택하시면 됩니다. 다음페이지에서는 키체인에서 만든  CertificateSigningRequest 파일을 넣을 수 있습니다. 만들고 나서, 다운로드를 하고, 선택을 하면, 키체인이 포함된것을 확인하실 수 있습니다. ================================================================================================ 3. 키체인에 해당 인증서들이 보인다면, 인증서가 정상적으로 등록 다운된것입니다.

남도패스 대시보드를 만들면서 구글 애널리틱스에서 데이터를 API 로 받아오는 부분을 알아보았는데 팀내 인수인계 문서 겸 블로그로 올립니다. * 전제조건 구글 애널리틱스 계정이 있어야 합니다. 가입하기 > https://www.google.co.kr/intl/ko/analytics/ 목적은 남도패스에 접속하는 회원이 무슨 키워드 로 어느 소스/매체 를 통해 접속하는지 일일 세션 수 를 구글 통계 API 를 통해 호출해서 화면에 뿌려주는 부분입니다. 자세한 항목/사용법은  https://developers.google.com/analytics/devguides/reporting/core/v3/reference#metrics  여기서 알 수 있습니다. 1. 먼저  https://ga-dev-tools.appspot.com/query-explorer/ 에 접속합니다. 로그인한 상태가 아니라면 아래 화면은 block 되어 있습니다. 주황색 부분을 누르고 구글 통계를 쓰고있는 계정으로 로그인하시면 됩니다. 2. 로그인 후에, Account 메뉴를 열어보면 해당 구글 계정에서 쓰고있는 구글 통계 웹사이트/앱 목록이 뜹니다. 그 중 API 로 데이터를 얻어오려는 계정을 선택합니다. 3. start-date, end-date: 계정을 선택한 후 해당 데이터의 기간 범위를 선택합니다. 남도패스는 일일 통계를 얻어야 하기 때문에 start-date, end-date 를 같은 날로 설정합니다. 4. metrics: 구글통계에서 최종적으로 어떤 데이터를 얻어올지 항목을 선택합니다. 남도패스에서는 세션, 페이지뷰를 선택했습니다. 5. dimensions: 데이터를 뽑아올 조건 항목들을 선택합니다. 남도패스 대시보드의 경우에는유입 검색 키워드 와 소스 를 선택합니다. 6. 마지막으로 Run Query 버튼을 누르면 해당 데이터를 뽑아올 쿼리문이 완성됩니다. 여기서 Include...

Alerts 일반적인 사용자에 대한 메시지 표시를 위한 Alert 에 대한 사용법을 예제를 통하여 설명합니다. Examples Alerts 는 일정길이를 가진 텍스트와 버튼을 사용합니다. 올바른 스타일 지정을 위해 Alerts 상황에 맞게 클래스를 지정하면 됩니다. This is a primary alert—check it out! This is a secondary alert—check it out! This is a success alert—check it out! This is a danger alert—check it out! This is a warning alert—check it out! This is a info alert—check it out! This is a light alert—check it out! This is a dark alert—check it out! <div class= "alert alert-primary" role= "alert" > This is a primary alert—check it out! </div> <div class= "alert alert-secondary" role= "alert" > This is a secondary alert—check it out! </div> <div class= "alert alert-success" role= "alert" > This is a success alert—check it out! </div> <div class= "alert alert-danger" role= "alert" > This is a danger alert—check it out...

Socket에서 Server에 이어 Client를 진행 하겠습니다. android에서 개발을 진행 하면 Server를 만들일은 특수한 경우 아니면 없다고 생가 할수 있습니다. Client의 경우 필요에 따라 만들어 써야 하는 경우가 있습니다. 그렇기 때문에 직접 구현 하지 않더라도 Socket.io처럼 잘되어 있는 라이브러리도 존재 하기는 합니다. 하지만 여기서는 Server와 Client에 대한 구현 부분을 알아보는데 의미를 두어 Client도 직접 구현 하겠습니다. android 네트워크 통신에서 가장 기본이면서 중요한 부분은 무엇일까요? 당연히 비동기 통신을 통한 UI쓰레드에서 UI 갱신 일 것입니다. Socket 통신도 당연히 이부분은 해당 되며 통신 모든 부분에서 비동기 처리 및 UI  갱신은 UI쓰레드에서 진행 되어야 합니다. 저는 개인적으로 runOnUiThread보다 AsyncTask를 활용하는 것을 선호하기 때문에 Client 부분도 AsyncTask를 이용 하겠습니다. public interface OnSocketConnectCallback{ public void onConnect ( ) ; public void onFail ( String msg ) ; } public interface OnSocketListenCallback{ public void onListen ( String data ) ; public void onError ( String msg ) ; } public interface OnSocketSendCallback{ public void onSendComplete ( ) ; public void onFail ( String msg ) ; } private Socket client = null ; private...

android에서 socket을 활용하여 Server, Client를 구현하여 통신하는 법을 알아보도록 하겠습니다. 우선 Server를 만드는 일인데요. android 디바이스에서 Server를 만들기 위해서는 Wifi환경이어야 가능 합니다. public static String getLocalIpAddress(Context appContext) { WifiManager wifiMgr = ( WifiManager ) appContext . getSystemService ( WIFI_SERVICE ) ; WifiInfo wifiInfo = wifiMgr . getConnectionInfo ( ) ; int ip = wifiInfo . getIpAddress ( ) ; String ipAddress = String . format ( "%d.%d.%d.%d" , ( ip & 0xff ) , ( ip > > 8 & 0xff ) , ( ip > > 16 & 0xff ) , ( ip > > 24 & 0xff ) ) ; return ipAddress ; } Wifi환경에서 디바이스의 IP주소를 가져오는 소스입니다. Server가 직접 쓰는 것은 아니지만 Client가 Server에 접근하기 위해서는 필요 합니다. private ServerSocket serverSocket ; private void createServer() { try { isRunning = true ; serverSocket = new ServerSocket ( SERVER...

안녕하세요 남산돈가스입니다. 지난 포스팅에 이어 마지막시간으로 Git 브랜치에 대해서 포스팅해보겠습니다. 지난 시간 저희는 Git 저장소를 생성하고 커밋까지 해보았습니다. 이제 조금 더 완전한 버전 관리를 위하여 브랜치에 대해서 알아보도록 하겠습니다. 프로젝트 단위로 개발을 하다 보면 반영되어있는 코드와는 상관없이 독립적으로 개발을 진행할 경우가 생기는데, 이렇게 독립적으로 개발하는 것이 브랜치입니다. Git에서의 브랜치는 커밋 사이를 가볍게 이동할 수 있는 어떤 포인터 같은 것이다. 기본적으로 Git은 최초 생성 시 master 브랜치를 만들고. 커밋을 만들 때 마다 브랜치가 자동으로 가장 마지막 커밋을 가리키게 됩니다. 위에 보이는 그림처럼 master라는 브랜치가 생성이 되고 그 마스터는 항상 최종 커밋의 위치를 가리키고 있습니다. 그리고 위에 HEAD는 원격 저장소에 최신 버전을 가리키고 있다는 의미인데요. 최초에 master로 브랜치 설정이 되어있으니 HEAD가 바라보는 건 master가 되겠죠. 설명을 길게 하기 보다는 실제로 만들면서 확인해봅시다. 현재 자신의 브랜치가 어떤 것인지 확인해보기 위해서 명령어를 입력해봅시다. $ git branch * master git branch 명령어를 입력하면 현재 바라보고있는 브랜치를 보여줍니다. 현재 저는 master를 보고있습니다. 여기서 새로운 브랜치 testing을 하나 만들어보겠습니다. $ git branch testing $ git branch * master testing git branch testing 명령을 통해 브랜치를 생성했습니다. 이 브랜치도 역시 현재 작업중이었던 마지막 커밋을 가리키는 브랜치입니다. 그럼 여기까지 testing이라는 새로운 브랜치를 생성해보았습니다. 현재까지 작업 된 master 브랜치는 그대로 두고 다른 개발 사항이 생겨 testing 브랜치에 개발을 진행해보겠습니다. 현재 master로 되...