남산 아래 개발자들

안녕하세요 남산돈가스입니다. 오늘은 크로스도메인 문제에 관련 된 CORS 에 대해서 다루어볼까합니다. 먼저 CORS에 대해서 알아보겠습니다. CORS란  Cross Origin Resource Sharing의 약자로, 현재 Application의 도메인(웹페이지)에서 다른 웹페이지 도메인으로 리소스가 요청되는 경우를 얘기합니다. 예를 들면, 웹페이지인 http://web.com 에서 API서버 URL인 http://api.com이란 도메인으로 API를 요청하면 http 형태로 요청이 되므로 브라우저 자체에서 보안 상 이유로 CORS를 제한하게 되는 현상을 말합니다. 저희 팀에서 SPA(Single Page Application) 기반 앱을 RESTful API연동 방식으로 개발을 하다보니 API 서버와 웹페이지서버가 각각 따로 운영이 되므로 CORS 문제에 항상 부딪히는 경우가 다반사였습니다. 이 문제를 해결하기 위해서는 API 요청을 받는 쪽. 즉, API서버의 응답 헤더를 변경해주는 것으로 해결 해 줄 수 있습니다. 서버 헤더 중 Access-Control-Allow-Origin이라는 헤더 프로퍼티가 있는데, 이 헤더는 CORS를 허용해 주는 도메인을 설정해 주는 역할을 합니다. 이렇게 node.js Express기반의 API 서버에서 Access-Control-Allow-Origin 헤더를 설정해줄 수 있는 cors npm 모듈이 있습니다. 지금부터 간단히 CORS 설정을 진행해보겠습니다. 적용 방법은 굉장히 간단합니다. 우선 cors npm 모듈을 install 해줍니다. npm install --save cors cors 모듈이 설치가 되었다면, app.js로 이동합니다. cors 모듈을 불러옵니다. var cors =  require('cors'); ...

xcode 소스의 형상관리는 SVN으로 관리를 했었습니다. 점차 Git으로 형상관리를 변경하는 추세입니다. Git의 강력한 관리 기능을 사용하기 위해서, SVN에 저장된 소스를 Git허브로 저장하는 하고 사용하는 방법에 대해서 알아보겠습니다. 1. Git 허브에서 레파지토리 생성 New repogitory를 선택하고, 생성합니다. 2. SVN 주소를 import 하기 -  레파지토리를 생성하고 나서는 기존에 사용하던 SVN 주소를 복사해옵니다. - Preparing 작업이 완료되면, Git에 Svn의 데이터가 복사가 완료됩니다. 3. Xcode에서 Git 허브 로그인 하기 - Xcode를 열고 preference > Account 를 선택하고 Git 계정을 입력합니다. - Xcode를  다시 열고 Clone an existing project를 선택합니다 4. Clone 받기 - 연동된 git 허브목록에서 생성한 레파지토리를 선택하면, Clone이 가능합니다. 5. Clone이 완료되면 프로젝트가 자동으로 열리며, Souce Control에서 Git의 기능을 사용하실 수 있습니다. - 작업 내용을 git허브 서버에 Push하시려면 먼저  Commit 후 사용해주세요 다음 시간에는 여러사람이 작업하는 방법에 대해서 알아보겠습니다.

이번에 플랫폼사업팀에서는 애자일 방법론에서 쓰이는 플래닝 포커 앱을 만들기로 했는데요 플래닝 포커란? 이 링크 설명을 참고해보세요 :)  기왕 앱을 만드는 김에 새로운 기술에도 도전해볼 겸 AR 하이브리드 앱으로 만들어보는게 어떻냐는 제안을 하게 되었습니다.  일주일간의 기술검토 후, 한 달 정도의 기간으로 앱을 만들기로 했는데요 (하루에 한시간씩. 다른 업무를 하면서 만들어야 하기 때문입니다.) 아직 성공하지는 못했지만 지금까지의 기술 검토 과정을 공유합니다. 플래닝 포커 앱을 AR로 만들면 어떨까 하는 생각은 조지아텍 학생들이 연구과제로 만든 듯한 이 앱,  argon.js  를 보고 떠올렸습니다. (앱스토어에서 argon 으로 검색하시면 나옵니다) argon 앱의 샘플 중 한 장면 argon.js 는 간단히 말해 증강현실 브라우저로 이 브라우저 앱에서 argon.js 를 쓴 웹페이지를 띄우면 증강현실 같은 효과를 내는 웹페이지들을 만들 수 있습니다. 샘플 예제 중에 three.js 로 만들어진 원소기호 카드들이 둥둥 떠다니는 걸 보고 우리 플래닝 포커에도 도입하면 좋겠다고 생각해서 이번 기술검토를 시작하게 되었습니다. 일정과 공수에 무리가 올 수 있는, 네이티브로 구현하는 기법보다는, 간단하고 빠르게 만들 수 있는 웹앱 또는 하이브리드 기반으로 알아보았습니다.  최근에 플랫폼 사업팀에서 많은 프로젝트를 Angular 기반으로 하고 있고, Angular 로 만들면 팀원 모두가 협업해서 빠르게 앱을 만들 수 있기에 Angular 와 Angular 기반 가장 유명한 프레임워크인 Ionic3 를 가지고 만들 수 있는가를 중점적으로 알아보았습니다. 그리고 물론 증강현실에는 마커 기반 이미지 인식 등 더 다양한 기능이 많지만 이번에는 단순히, 처음 시도하는 기술이기도 해서 다른 기능 없이 UI 효과만 구현할 생각이라서 무리가 없을 거라...

아이프렌즈펫의 귀여운 고양이 토르~ 토르의 영상을 가지고 요즘 핫한 콰이(kwai) 앱으로 몇 가지 재미있는 밈을 만들어 보았어요^^ 귀여운 토르를 감상하면서 쉬어가는 시간 되시기를^^ 1. 츄르 주세요~ 2. PPAP (Pin Pineapple Apple Pen)에 맞춰(?) 열심히 꾹꾹이 중인 토르 3. 한입만~ 며칠 굶은 것처럼 사료를 마시는(?) 토르

1. 머리를 문지른다 ‘예뻐해 달라’, ‘놀아달라’는 뜻이다. 좋아하는 상대에게 하는 행동이다. 고양이의 턱과 관자놀이엔 특유의 분비물이 나오는데, 고양이는 머리를 문질러 영역 표시를 하기도 한다. 2. 골골송을 부른다 고양이는 매우 평온하고 기온이 좋을 때 이러한 소리를 낸다. 소리가 매우 작아 가까이 가야 들을 수 있는데 코 고는 소리처럼 들리기도 한다. 3. 발라당 드러눕는다. 고양이가 배를 보여주는 것은 신뢰와 애정의 표시다. 자신에게 관심을 보여달라는 뜻이기도 하다. 4. 당신 옆에서 잔다. 고양이가 가장 약할 때는 잠 잘 때이다. 이런 고양이가 당신 팔을 베고 잠이 든다면 당신을 100% 신뢰하고 있다는 뜻이다. 5. 꾹꾹이를 한다. 고양이가 꾹꾹이를 하는 것은 젖이 잘 나오도록 어미 고양이의 배를 누르던 습성에서 비롯됐다. 만약 고양이가 당신의 몸에 대고 꾹꾹이를 한다면 당신을 어미라고 생각하고 있는 것이다. 6. 그루밍해준다. 고양이가 까끌까끌한 혀로 당신의 몸을 핥는 것은 당신을 가족으로 여기고 있다는 뜻이다. 어미가 새끼에게 그루밍을 해주듯 당신을 그루밍 해주는 것이다. 7. 선물을 갖다준다. 고양이는 자신에게 애정을 베풀어준 사람에게 벌레나 쥐 같은 것을 선물하기도 한다. 이때는 고양이가 눈치채지 못하게 선물을 버린 후 고맙다고 얘기해주는 것이 좋다. 8. 꼬리를 바르르 떤다. 고양이가 꼬리를 위로 치켜올린 채 꼬리를 바르르 떠는 것은 행복감의 표시다. 하지만 고양이를 안았을 때 빠르게 꼬리를 흔들면서 당신을 치는 것은 내려달라는 신호다. 9. 눈을 느리게 깜박인다. “우리 친하게 지내자”는 뜻이다. 고양이가 이런 눈키스를 하면 함께 눈을 깜박여 애정을 표시해주는 것이 좋다. 무심한 듯 바라보면서 천천히 눈을 감으면 된다. 10. ‘야옹’한다 보통 배가 고프거나 함께 놀고 싶을 때 ‘야옹’한다. 이 울음소리는 새끼 고양이가 어미를 찾는 소리와 비슷해 동물학자들은 ...

아이프렌즈펫에 올라온 귀여운 고양이 영상이에요 ^^ ‘왠지 고여있는 물은 위험해 보인다냥’ 고양이에겐 야생에서 살 때 습성이 남아있는데요 본능적으로 위험할 수 있는 고여 있는 물 보다는 흐르는 물을 선호한다고 해요 ‘무슨 소리 안들리냥’ 고양이는 어둠속에서도 잘 볼 수 있는 시력이 있긴 하지만, 그들의 뛰어난 청력을 의지해 흐르는 물소리를 찾아 물을 찾는 것을 선호해 왔답니다. ‘적에게 등을 보이지 않겠다옹’ 만약 물그릇을 벽에 놓으면 고양이는 후방 공격에 취약하다고 느껴 물그릇에서 먹는 걸 꺼린다고 합니다. 코너에 몰리는 것을 싫어한다고 하네요. ‘수염 건들지 말라냥’ 민감한 수염이 물그릇 같은 데에 닿는 것을 싫어하는 고양이도 있습니다. ‘나는 물이 좋다냥’ 물론 물을 좋아하는 고양이도 있습니다. ㅎㅎ

자바를 활용하여 SVG를 image 파일로 전환하는 방법 SVG 란 (특징 및 장점) ? 1) SVG는 확장가능한 벡터 그래픽을 의미합니다. 2) SVG는 XML형식의 그래픽을 정의합니다. 3) SVG는 XML의 2D 그래픽을 기술하는 언어입니다. 4) SVG이미지 생성한 후 텍스트 편집기로 편집이 가능합니다. 5) SVG이미지는 해상도에 관계없이 고품질로 인쇄가 가능합니다. 6) SVG이미지는 확대해도 품질에 손실이 없습니다. Canvas 와의 차이점 ? 1) javascript 로 2d 그래픽을 그려냅니다. 2) 브라우저에 전달되어 그려진후 정보가 없어집니다. (향후 수정 불가) 3) 수정이 필요한경우 다시 그려야 합니다. (브라우저에 선 전달된게 지워진후 다시 그려짐) XML형태의 SVG를 image 파일로 전환하기 위해 여기에서는 아래 링크에 Batik Project를 이용합니다. The Apache™ Batik Project  (소스) package test; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import org.apache.batik.transcoder.TranscoderException; import org.apache.batik.transcoder.TranscoderInput; import org.apache.batik.transcoder.TranscoderOutput; import org.apache.batik.transcoder.image.JPEGTranscoder; import org.apache.batik.transcoder.image.PNGTranscoder; public class SvgToJava {     public static void main(String[] args) {     ...