공지

(2021)프로그래밍 무료 컨설팅/상담 합니다.

category: 컨설팅/과외/상담
tags: [공지]

무료로 프로그래밍 교육/컨설팅 상담을 시작합니다.

과외/교육 대상, 내용

  1. 소형 프로젝트 진행해보기(웹사이트/pc 프로그램/안드로이드 앱 만들기 ex 채팅프로그램 만들기(pc), 홈페이지 만들기(개인 블로그, sns, 매크로 만들기 등등)
  2. 프로그래밍 기초
  3. 알고리즘(문제 해결 방법 찾기)
  4. 특정언어 교육(SQL, JAVA, C#, VB(.net), JavaScript(node, express, react), html, css)
  5. AWS 인프라 구축 세팅 등

컨설팅/상담 대상, 내용

  1. 이제 막 입사했는데 사수는 없고 일거리가 주어진 웹/앱 프로그래머
  2. 프로그래밍 1도 모르는데 뭐하면 될까요 싶은 사람
    ** ‘~ 구현하는데 xx원이면 되나요?’ 등과 같은 견적문의는 받지 않습니다.

대상

인터넷에서 찾으면 다 나오지만 사람한테 좀 듣고 질문도 하고 느낌적인 느낌으로 배우고 싶은 사람

수준

0~ 소양정도(코딩코딩하는데 그게 뭐여? 부터 대학 교양으로 계산기는 만들어봤다정도 인 사람) 좀 더 전문적인 프로젝트나 교육은 무리는 아닌데 범위가 더 좁음.(C# SQL 등)

강의방식

거리와 시간에 따라 오픈도 가능하지만 기본적으로 원격. 구름IDE를 사용하려고 생각중입니다. [https://goo.gl/Tkuoo8]

인원

1:1이 기본인데 여러명이면 처음에 하다가 나눠서 하게 될거 같음.

비용

무료. 나중에 겁나 소문나면 돈받을지도 모름(…) 단기 이상인 경우는 별도 상담후(아예 유료 과외를 원하시면 뭐..)

기간

요청하는 내용에 따라 단회성~ 단기 정도 생각중입니다. 단기 이상인 경우는 별도 상담후.

강사는?

전국 시외/고속 터미널 통합전산시스템 개발. 현재는 리액트 기반 풀스택 프로그래머 (6년차) 가능언어는 C#, VB.net, vb6, 오라클, ms-access / 웹 프론트(React), 백엔드(Node.js) 클라우드 인프라 전반(AWS) android, spring은 너무 예전에 해봐서 남 가르쳐줄 실력이 안됨. (쓸줄 아는 정도수준.) 스크레치, 엔트리 (코딩지도사 1급)

왜 하냐?

개인 역량 향상이 주 목표(주 업무 외 스킬 파악하거나 하는 목표 설정) 일상 속 프로그래밍 스킬 배포 목적도 있음(생활코딩) 선비충이라

왜 공짜냐

일단 목적이 남 도와준다 보다는 나 공부한다가 더 크기 때문 기술 스택이 넓지만 얇기 떄문. 기본적으로 모르는 사람의 의문을 아는 사람이 ‘찾아주는게’ 목표이기 떄문.

연락처

  1. 아래 댓글
  2. 이메일 : keispace.kyj@gmail.com

  • 17.11.28 추가내용 글 올리고 그래도 꾸준히 문의를 주시고 계셔서 감사합니다만 업무 스케쥴상 한동안 (지속적인 시간할예가 필요한)과외는 어려울 것 같습니다. 방향성 제시등의 단회성 컨설팅이나 개인적인 멘토링은 상관없으니 연락주셔도 괜찬습니다.

  • 21.08.10 추가 꽤 한동안 운영자체는 안했지만 다시 시작하기 위해 일단 상담 스탑부터 풀고 갑니다.

Read More

인케이스 카메라용 슬링백 2종 비교(?) 리뷰

category: Review
tags: [Review, Incase, DSLR, SlingBag, SlingPack, Sling, 인케이스, 가방, 리뷰,Capture Camera Sling Pack,DSLR Sling Pack]

인케이스 카메라용 슬링백 2종 비교(?) 리뷰

상품 상세 링크

캡쳐슬링팩: Capture Camera Sling Pack
슬링팩: DSLR Sling Pack

제목엔 슬링백이라고 적었지만 영문명을 보면 알겠지만 bag이 아니라 pack이다. 백팩처럼….
그러니 본문엔 슬링팩과 캡쳐슬링팩으로 줄여 쓰겠다.

서론

멀리나가는 DSLR용 백팩은 있고 좀 더 사진을 데일리로 하기 위해 슬링팩을 1년전부터 쓰고 있던 터였다.
내 조건은 1바디(D750), 렌즈 1~2개, 노트북(13인치가량)+ 자잘한 물품 수납, 그리고 바로 꺼내고 넣기 위해서는 슬링 형태가 좋겠다 싶었다.
당시에 아는 분이 슬링팩을 메고 다니는걸 보고 꽤 괜찮다고 생각해서 그걸 기준으로 검색했지만 마땅히 맘에 드는 것도 없었고, 11인치까지만 수납되는 모델이지만 구매해서 정말 잘(카메라 없이 그냥 데일리 가방으로) 사용 했었다.

그리곤 요새 다시 사진관련으로 시작하려니 역시나 노트북이 아쉬운 상황.(근데 막상 노트북은 아직 미구매라는 게 함정)

그러다 역시 다른 지인이 인케이스 ari 에디션(이것도 노트북은 무리)을 멘걸보고 혹 다른 모델이 있을까 싶어 찾아봤더니 역시나 있다.(캡쳐슬링팩. 각 정보는 위에 링크 참조)

살까말까 고민하다 중고로 미개봉신품을 싸게 파는 분이 있어서 찾은지 하루도 안되어 직거래 완료 ㅋ

슬링팩을 팔기위해 중고매장에 올려놨는데 일단 둘다 있는 김에 비교리뷰를 써보기로 한다.

본론

일단 슬링팩, 캡쳐슬링팩, 그리고 두개 비교삿 순으로 가보자.
슬링팩은 아무래도 1년정도 데일리로 쓴거라 사용감때문에 빳빳한 느낌은 없다(느낌만 없지 단단함)

슬링팩

슬링팩앞
앞모습. 딱 네모진것도 아니고 미묘한 각도가 있지만 이쁘장하다.
앞쪽은 전체주머니라 넓고 얇음.

슬링팩뒤

뒷 부분은 패드와 어깨끈 패드가 두툼한 편이다.(덥다…)
어깨끈은 버클이 있어 분리도 되는데 소소한 특징으론 줄 길이가 고정이 단단하지 않다.
즉, 뒤로 메다 앞으로 당기면 줄도 죽 늘어나는데 이게 카메라를 바로 꺼내기 좋은 특징으로 캡쳐슬링도 비슷한 형태로 되어있음.
카메라 넣고 빼고 하는거 해보면 이게 단점이 아닌 이유를 알게 됨.

슬링팩밑
세워놓으면 옆면, 가로로 놓을땐 밑면부분. 삼각대 결합끈이 있고 여행용이 아닌 내 삼각대도 무리없이 잘 결합되더라.(2번 써봤나…)

슬링팩안1
탈착되는 격벽은 총 3개(뚜껑있음2, 매쉬주머니1)이고 소지 장비에 따라 커스텀 하면 된다.
다만 길이가 짧은 편이라 카메라를 넣고도 안에 좀 더 여유가 있다.

슬링팩안2
3개 넣으면 dslr 렌즈결합해서는 깊숙히 넣을 수 없어서 통상 격벽은 2개만 사용하는편이다.
위쪽에는 보조베터리라던가 미니선풍기라던가를 넣고 다닌다. 그 외에도 문짝에 매쉬 주머니가 2분리 되서 들어있고 등쪽에 11인치 맥북까지 들어가는 파티션이 추가로 있다.

캡쳐슬링팩

자 이제 새로 구매한 캡쳐 슬링팩을 araboja

캡쳐슬링팩앞

인케이스 로고가 백과 같은 블랙컬러라 눈에 잘 안띄는 단점(?)이 있다.
상단은 보관 실수였는데 대각선으로 접혀있는데 지금은 안에 신문지를 넣어 각잡고 있는 중.

캡쳐슬링팩안
이 모델의 특징은 숨겨진 가방이 엄청 많다는점. 하단부에 별도 가방이 하나 있고 뚜껑에는 소형 포켓으로 보이는 큰 구획이 있고 사진 아래 우측에는 튀어나온 메쉬필통같은 곳도 있고 전면부에도 보관함이 있다.
위에 슬링팩에 있던 짐을 그대로 다 넣은 상태인데도 저정도 공간이 남기도 하고, 일단 13인치 노트북(ASUS ZenBook UX331UN 확인. 13.3인데 크게 무리없다. 15 맥북은 안된다함. 수치상 1cm정도 더 큰 14인치 젠북(UX433FN)도 될 것도 같기도 하고…)이 수납 가능하고, 가방 모양이 각이 딱 떨어져서(슬링팩은 입구쪽이 미묘한 사선이라 각도 안잡히고 사용감이 생기니 구분도 미묘해졌다.) 이쁘게 나온다.

비교샷

전체적으로 캡쳐슬링쪽이 조금씩 큰 편. 비교앞
우측이 열리는 부분인데 슬링팩은 로고 옆부분이 사선으로 내려져서 닫힌다. 캡쳐슬링은 직각.

비교뒤
뒷판 매쉬와 패드는 캡쳐슬링팩이 더 두껍다. 그리고 노트북 보관 섹션이 외부로 나와있어서 노트북만 따로 바로 꺼낼 수 있다.
슬링팩은 좌측에 손잡이가 있지만 캡쳐슬링은 없음. 단 중앙에 세로로 있는 안전벨트(?!)가 비슷한 용도로 쓸수 있게 해준다.

비교밑
슬링팩은 삼각대 결합부, 캡쳐슬링팩은 히든포켓이다.(상단 링크 참조)
사용성에 차이가 있긴한데 히든포켓 생각보다 넓어서 장/단점이 아니라 특징으로 받아들여짐.

결론

사실 저걸 비교한 경우가 적어서 올려놓은 거지 딱히 결론은 없다.
굳이 따지자면 현재 슬링팩을 중고 매물로 올려놓은 상태인데 안팔려도 소장용으로 가지고 있을 생각이라….
이제 가방도 바꿨겠다 새로운 맘으로 열심히 사진이나 찍어야 겠다.
사진은 포트용 인스타그램에 올리기 시작하였고 상단의 인스타 링크를 달아 놓을 예정이다.

Read More

AWS CodeCommit, CodeBuild, CodeDeploy까지 삽질기..(feat. pipeline)

category: Dev tags: [AWS, CodeSuite, CodePipeline, CodeBuild, CodeCommit, CodeDeploy]

서론

현재 업무상 AWS에서 돌아가는 jsp앱과 node앱들이 존재한다. 기본적으로 Node계열은 스크립트로 전부 배포까지 자동화 되있는 상태고 딱히 협업구조는 아니라 제외하고 jsp계 메인 사이트의 경우 기존에 ec2에 svn과 jenkins 를 띄워서 직접 관리하고 있는 구조.

문제는 이 jenkins가 취약점 공격을 받아 마이닝 프로그램을 실행하는 프로세스가 계속 돌도록 공격받았다. 일단은 ec2나 그 외 보안조치로 인해 실질적인 피해는 없지만 신뢰를 모두 잃은 상황에서 AWS에서 CodeBuild, CodeDeploy를 이용해 jenkins를 대체, 나아가 자체 구축된 svn도 git 기반은 codeCommit으로 변경하기로 했다. 물론 제안부터 작업까지 내가…

각각 서비스에 대해서야 많은 곳에서 설명은 해두었으니 실 구축했던 내용이나 기록해본다.

github에서의 사용이나 좀 전문적인 사용보단 AWS CodeSuite만을 사용하는 기본적인 방법만 언급.

CodeSuite

기록하기 앞서 간단하게 말하자면 일단 저 자잘한 각각의 서비스는 모두 동일한 업무에서 순서대로 사용되는 흐름을 가지고 있고 이를 AWS에서는 CodeSuite라고 명명하여 한번에 관리한다.(관리 콘솔 내에 나머지 4개가 서브메뉴로 구성됨)

CS메뉴

CodeCommit

CodeCommit은 git 기반 비공개 저장소이다. 물론 지금은 github도 프라이빗을 무료제공하기 시작하긴 했다만 일단 AWS에서 직접 관리하는 서비스다보니 CS 내 다른 서비스에 모두 호환하는데 아무런 고려를 하지 않아도 자연스럽게 되는 장점이 있으나….
단점은 CodeSuite는 리전구분이 있어 타 리전에는 접근이 되지 않는다. 쉽게 말해 서울리전에 CodeBuild나 CodeDeploy는 서울리전 외의 CodeCommit에 접근할 수 없다…
내 경우가 이 경우인데 deploy 설정할때 깨달아서 망ㅋ함ㅋ
단, CodePipeline에서 빌드 스테이지를 선택할때 타 리전이 선택 가능한데 이걸 쓰면 접근 가능할 지도 모르겠다(해보지 않음)

아무튼 업무상 가장 먼저 한 작업은 기존 svn관리중인 프로젝트들을 CodeCommit으로 이전하는 작업. 사실 어렵진 않다 프로젝트 내 .svn을 제거하고(svn 링크 끊김) CodeCommit의 리포지토리를 생성해서 주소로 연결해주면 끝. Git 사용 자체에 대한건 패스하자.

CC메뉴0

  • 생성을 눌러서

CC메뉴1

  • 밑에 에러는 알파벳 안써서 난건데 이름은 영숫자+(._-)만 된다

CC메뉴2

  • https(url)과 ssh 방식 모두 지원한다.
  • 주의할 점은 Git 자격 증명부분. commit, push를 위한 인증을 aws답게 별도로 자격을 만들어야만 사용할 수 있게 해놨다.(aws 계정 아님)
    • 내 보안 자격 증명 - 사용자 - 보안자격 증명 에 가면 액세스키라던가 CodeCommit에 대한 ssh, https 키를 생성할 수 있으며 해당 정보를 다운 받을 수 있다.
    • 일단 잊어버리면 다시 만드는 건 되지만 귀찮고, 다시 조회할 방법은 없으니 까먹지 말자. CC메뉴2

기본적으로 git을 써봤다면 문제 없음. pull request나 브랜치나 태그, 커밋 히스토리도 콘솔에서 볼 수 있고 일반적인 git client에서 사용도 전혀 문제 없다.

CodeBuild

CodeBuild는 각 플랫폼(Node.js, Java 등)별로 output을 만들어 주는, 말 그대로 build 작업을 해주는 서비스이다. 대략 별도의 vpc를 만들고 소스를 빌드해서 아웃풋(artifact라고 부름)을 만들고(전송하고) 닫는 형태로 보인다.
즉, 라이브러리나 별도 세팅들에 대해서 사전에 정의 해주어야 하며 사실 실무상 이걸 구성하는게 가장 어려운(귀찮은) 일이었다.(아래 CodeDeploy도 동일.) 콘솔로 생성이나 수정할때도 할게 좀 많다 일단 사진보면서 가보자

환경 설정1

  • 생성을 누르면 맨 위 설정. 이름과 설명을 적자

소스 위치

  • 빌드할 소스 위치를 설정하는 곳.
  • S3나 깃허브도 가능하며 자기네 서비스니 CC가 먼저 세팅되있긴 하다.
  • CC기준 리포지토리가 자동완성으로 제공하긴 하는데 다른 리전 CC는 가져올 수 없게 되어있다. 멀티 리전 서비스라면 걍 GitHub 쓰면 될듯.
  • Github인 경우 인증정보(OAuth나 Token)을 입력해서 연결하게 되어있음.
  • 선택사항은 git depth나 뭐 submodule 설정(선택)

환경 설정.

  • 환경 설정. 중요하지만 간단하다.
  • 도커를 쓸지 자체 이미지(ec2의 이미지를 생각하면 맞는듯) 선택 후 OS나 도커 환경을 선택(리눅스나 윈도우)
  • 서비스 롤은 그냥 New로 자동생성 시키자. 다만 단일 롤로 여러개를 만들면 Existing을 선택하고 사용할 롤을 선택하면 됨. New라면 롤 네임은 무시하자.
  • 추가구성에는 사용할 VPC 컴퓨팅 세팅이나 타임아웃, 인증정보나 뭐 잘 모르면 냅두면 되는 것들이고, 간혹 필요한 환경변수를 설정할 수 있다. Node 서비스 같은 경우 환경변수 쓸 일이 많은데 저기다 많이 할당해 놓기 보단 dotenv로 퉁쳤다(서비스 내역 날아가는걸 염두에 두면 파일로 보존하는게 좋다 봄)

빌드 스펙

  • 빌드 스펙. CodeBuild의 핵심으로 매우 중요하다
  • 일단 묻지도 따지지도 말고 저렇게 두자. (기본값)
  • 스펙을 파일로 주냐 저기다 설정으로 넣냐 인데 서비스 해킹 등으로 인해 해당 서비스가 날아갔을떄 파일로 보존된 스펙이 복구에 얼마나 도움되는지 조금만 생각해보면 알듯.
  • 스펙 파일은 프로젝트 루트에 buildspec.yml 파일이나 경로나 이름을 변경할 경우 name을 바꿔주면 된다.
  • 스펙 파일은아래 다시 설명.

아티펙트 설정

  • 아티펙트 설정 CodeBuild의 목적으로 역시나 중요하다.
  • 빌드한 결과를 어떻게 할 것인가인데 S3저장, 없음(작업 안함)으로 나뉜다.
    • S3인 경우 버킷, 저장 경로, 저장 파일 이름, 압축여부 등을 설정하면 된다.
    • 없음은 자체 스크립트로 직접 저장/전달 하거나 테스트이거나 등등.. 상황에 맞게 설정하자.
  • 추가구성은 암호화와 cache인데 암호화는 뭐 기본이 아니니 패스하고 cache는 살짝 설명이 필요하다.
    • 매번 VPC를 생성해서 빌드환경을 만들고 빌드하고 아웃풋을 저장하는 작업은 초기 라이브러리 설치 등에 생각보다 많은 시간을 할예한다. 이는 빌드 시간별로 과금되는 체계상 좀 비효율적이라서 사용되는 라이브러리등 초기 설치 파일들을 캐쉬로 저장하는 기능.
    • S3에 버킷, 경로만 저장해주면 첫 빌드 후에는 해당 경로에 캐쉬파일을 저장해서 초기화-라이브러리 다운- 라이브러리 설치-진행 이던 순서를 캐쉬로드-진행 압축해준다. 시간도 확연히 줄어드니 maven이라던가 node_modules 같은 단어와 관련되 있다면 해주는게 정신 건강에 좋다.(5분이 50초가 되는 매직을 볼 수 있음)

로그 설정

  • 로그 설정. S3에 별도로 저장하겠다면 별도로 설정해주는데 그냥 CloudWatch만으로 크게 문제 없는 듯 하다. (다 돈이다…)

콘솔

  • 만들어진 프로젝트를 들어가보면 대충 저런 화면이다.
  • 편집은 위에 했던 ‘그 것’들을 다시 설정하는거고, start build는 빌드 실행(설마 따라하는 사람이 있을까 싶지만 따라하면 fail뜸)
  • 아래는 실행 이력(실행로그까지)이나 설정 확인, 트리거 설정 등을 확인 가능하다.

이력

  • 실행을 하면 뭐 자잘한(이미 설정한) 소스위치나 환경변수를 다시 설정하는 창이 나오는데 그냥 다시 확인 누르면 요런 화면이 나온다.(위에 history에서 이력을 클릭해도 동일한 창)
  • 스텝에 따라 상태는 변하고 최종적으로 succeeded나 fail로 뜨고 기본 정보들 그리고 아래 VPC에서 실행되는 로그가 tail되서 실시간으로 출력된다.(이력은 풀로그 제공)
    • 처음 맨 땅에 헤딩할 때 가장 맘에 들었던 부분. 내가 뭔가 빼먹으면 에러 메세지가 바로 나오니 조치할 수 있었다.

Build Spec.yml

파일 위치

  • 작업이 모두 끝난 프로젝트의 루트. 일단 한 소스에서 dev와 prd로 구분해서 빌드, 배포하기 때문에 name을 따로 설정해 준 상태이다.
    빌드스펙에 대한 AWS 가이드

일단 가이드도 있지만 잘 모르겠으니 자잘한 세팅은 제거한 실제 동작하는 파일은 아래와 같다. buildspec.yml

  • 간단히 말해서 소스수정 다 끝내고 war나 빌드파일 만들때 cli로 작업하는 순서대로 쭉 적어놓으면 되고, 스탭이나 옵션은 위 가이드를 참조하자.
  • 가장 많이 쓰는게 install, pre_build, build, post_build 스텝(순서대로임) 이다. 각 스탭별로 해야되는거나 할수 있는게 약간씩 다르니 가이드는 한번 읽어보고 작업해야 된다.(삽질 할 일이 많은 구간임)

세세하게 할게 좀 많긴 한데 일단 이정도만 하면 빌드 상태 succeeded는 볼 수 있을 것이고 설정한 버킷에 아티팩트를 볼 수 있을 것이다.

CodeDeploy

CodeDeploy는 말 그대로 빌드된 파일을 운영 서버 등으로 배포(deploy)해주는 서비스이다. 구조 자체는 좀 불편한데 어플리케이션-배포그룹 안에서 배포를 관리하는 depth가 하나 더 있는 구조인데 개인적으로는 아직 왜 이런지 모르겠어서 약간 불편하다. 앱 안에 dev와 prd로 관리하곤 있다.

CodeDeploy

  • 생성 누르면 생성(운영중인 곳이라 생성된 애플리케이션이 하나 있다.)

CodeDeploy

  • 애플리케이션은 그냥 이름과 플랫폼만 설정하면 된다.
  • 플랫폼은 EC2, 람다, ECS로 구분되는데 EC2와 람다인 경우 사용료는 공짜다(갓갓)

CodeDeploy

  • 생성된 애플리케이션을 선택하면 나오는 화면.
  • 배포된 이력들, 생성한 배포그룹, 개정 정보를 볼 수 있다.
    • 이력은 배포그룹 통합이다.
    • 배포그룹은 생성하여 거기서 세부 배포를 실행한다.
    • 개정은 단어가 좀 이상한데 쉽게말해 운영서버에 배포된 소스(빌드 결과물)이라고 생각하자. codeDeploy는 롤백 등 버전 관리를 위해 이력을 쌓아두고 있다.

CodeDeploy

  • 배포그룹 생성을 누르면 주루룩 나오는 창1. 할게 많다.
  • 일단 이름부터 입력하고, 서비스 역할은 service role이다.
    • iam에서 역할에서 AWSCodeDeployRole 정책을 부여하여 하나 만들어두고 돌려써도 될듯.
    • S3등 접근이 필요한 경우 해당 역할에 함께 부여하자

CodeDeploy

  • 배포그룹 생성을 누르면 주루룩 나오는 창2.
  • 배포유형과 환경구성부분. 환경구성은 해당하는 것을 선택하고 관련 설정을 해두면 된다.
    • 내 경우 EC2였는데 주의점은 deploy를 위해서는 아래 작업이 필요하다(여긴 가이드 보면서 따라하자) AWS 전체 가이드
      • ec2에 iam 역할 생성하여 연결.
      • 해당 iam 역할에 엑세스 권한 부여(s3라던가…)
      • ec2 태그 지정. 에초에 태그로 접근하는 구조라서 ec2가 여러개라도 동일 태그면 한번에 배포 가능하다
      • 별도의 agent를 해당 ec2에 설치. 가이드 따라가는게 제일 안전함. AWS 설치 가이드
        • agent 경로가 리전마다 다른데 타 리전껄 설치 했더니 오류났었음.
    • 이부분이 사실 처음 하는 입장에서는 제일 복잡했다. 심지어 보안상 EC2 터미널 접근을 막아놨던 터라 다시 풀고 들어가서 설치하고 테스트하고…
  • 배포 유형은 기본과 b/g배포. 배포전략부분인데 이쯤 오니 슬슬 배포 전략이라던가 관련 지식이 필요하긴 하다. 그래도 일단 구축이 먼저니깐 하고 공부중(…)
    • 기본(현재위치)는 인스터스 연결을 끊고 배포하고 연결한다. very simple 문제는 중간에 접속이 끊긴다는 점.
    • b/g의 경우 ci/cd 측면에서 여러개의 서버에 순서대로 배포하는 전략과는 달리 라우팅 바꿔치기를 이용하는 방식으로 대략적인 순서는 아래와 같다. 중단없고, 문제 있으면 원본 인스턴스(블루)는 그대로 두면 되니깐 복구도 간단한 편.
      • 인스턴스를 복제 - 임시 도메인으로 복제본(그린) 연결/배포 - 원 도메인에도 그린 연결 - 원 도메인에서 원본(블루) 제거 - 임시 도메인 제거
    • 자세한건 나중에 글을 쓰든 구글신께 문의하자 일단 구축이 먼저다ㅠㅠ

CodeDeploy

  • 배포 설정. 인스턴스가 1개 이상인 경우 해당 인스턴스 들에 어떻게 배포할 건지에 대한 서정이다.
    • 한번에 다(AllAtOnce), 한번에 (최소)하나씩(OneAtTime), 한번에 절반씩(HalfAtATime).
    • 단일 인스턴스면 AllAtOnce로 하면 됨.
  • 로드 밸런서 설정. ec2에서 지원하는 CLB로 지정하거나 비활성화 하거나 이건 각자 상황에 맞게…

그 외 고급- 선택사항의 경우 트리거, 경보, 롤백 설정인데 몰라도 상관없고 이걸 알정도면 굳이 이거 안보고도 할수 있을테니…

여기까지 하면 환경에 대한 설정은 끝이나 배포는 아직 안된다. CodeBuild에서 잠깐 언급했는데 CodeDeploy 역시 설정파일을 요구하는데 여긴 파일명이나 경로를 수정할 수 없고 무조건 루트에 appspec.yml과 관련 커맨드 파일들을 위치 시켜야 하고, 개정 파일은 단일이므로 당연히 압축되어 있어야 한다. 정리하면 zip 단일 파일로 개정이 준비되야 하고 압축파일 안에는 아래와 같이 되어 있어야 한다.(본인은 리눅스이므로 .sh파일이 들어있다.)
CodeDeploy

appsec.yml 은 일단 AWS 가이드 한번 읽고 시작하자

CodeDeploy

  • 개발서버 배포용 appspec.yml. 가장 중요한 두 항목(files, hooks)이다.
  • 보면 알겠지만 역시 배포도 스텝별로 진행되며 각 스텝별로 실행할 리눅스 커맨드를 sh로 작성하여 실행해주므로 리눅스에서 cli로 하는 행동은 ‘거의 다’ 할 수 있다고 보면 된다.
  • 일단 Install이 개정을 인스턴스로 옮기는 행동이며 이건 사용자가 제어할 수 없으므로 이 전후로 뭔가 작업해주면 될 듯. (복사전에 해당 경로 파일들을 삭제하거나 서버를 멈추고 끝날때 서버를 재실행 등)

아무튼 이정도까지 하면 배포 실행해서 성공 메세지를 볼수는 있을꺼다 (아마…)
다만 CodeBuild에비해 CodeDeploy는 어느스텝에서 무슨문제가 있는지 잘 안알려준다.(할려면 로그 세팅 따로 해야됨.)

CodePipeline

사실 위 단계들이 전부 성공했으면 구축, 실행에 아무런 문제는 없다. 요금에 대해서는 일단 파이프라인당 1달러인데 생성 후 첫 한달은 무료이다. 그리고 파이프라인자체가 30일 이상 동작하지 않으면 요금이 나오지 않는다고 한다. 다만 필요에 따라 끄고 키는 기능이 없는데 이건 아래에 다시 언급하겠지만 변경감지 자체를 일시정지하여 동작을 방지하는 방식으로 우회할 수 있다.(미세먼지 팁임)

CodePipeline

  • step1. 파이프라인 설정
  • 비슷한걸 계속 반복해서 설정하는데 이름쓰고 서비스롤 만들지/지정할지 선택. name은 new면 자동으로 세팅된다.
  • CodePipeline 전용 버킷을 만들지 기존 S3를 지정할지인데… 다시 이야기 하겠지만 그냥 기본 위치 쓰자.. 사소한 문제들이 있다.

CodePipeline

  • step2. 소스 스테이지
  • CodeBuild에서와 유사하게 공급자나 저장소, 브랜치를 설정한다.
  • 변경감지 옵션은 이벤트 방식과 풀링 방식이라고 보면 된다. 둘다 일시중단도 가능하다(요금을 위해)

CodePipeline

  • step3. 빌드 스테이지
  • 참고로 빌드와 배포 스테이지는 스킵이 가능하다. 이벤트가 소스커밋이벤트에 반응하여 감지하므로 소스는 필수인듯. 에초에 목적이 소스 올리고 파이프라인 따라 자동화 하는거니 당연한듯. 다만 최소 2 스테이지는 필수로 포함되어야한다(Pipeline 존재의미니..)
  • CodeBuild와 Jenkins중에 선택해도 되고 넘어가도 된다. CodeBuild면 딱히 할 설정이 없고 jenkins는 안해봤으니 패스(무책임)

CodePipeline

  • step4. 배포 스테이지
  • 공급자가 상당히 많다. AWS에 유사한 많은 배포서비스들을 다 끌어올 수 있는 건 장점.
  • CodeDeploy 기준으로 리전, 애플리케이션, 배포그룹만 설정하면 끝난다.

결론

주 업무도 아니고 처음 해보는 입장에서 좋다는 소리만 듣고서 & AWS로 회사 시스템을 이전하기 위해 시작하기엔 워낙 범위가 넓은(개발 소스 버전관리~~ 운영 배포.) 서비스라 다소 부담되긴 했다. 개별 막상 구축해놓고 정리해보면 정말 별거 없다. 다 편하게 쓰라고 만들어놓은거니 쫄지 말고 들이받아보자. (약간씩 요금부담되는건 별수 없지만)

Read More

d750용 콜럼버스 GPS 리뷰

category: Review tags: [Review, 리뷰, 니콘 D750, 콜럼버스GPS]

*이미지 로딩이 좀 심하게 걸려 모든 이미지는 640사이즈로 리사이징 됬습니다.

저는 니콘 DSLR D750 유저입니다.

딱히 필수는 아니지만 요새 스마트폰 사진이 많이 보편화 됬고 기능적으로 gps를 자동으로 잡아주는 기능이 있지만 DSLR은 별도 악세사리를 달아야지 GPS 기록이 가능합니다.

사실 필요하다기 보단 업무스트레스떄문인지 지름신이 오신 바람에 좀 알아봤는데 니콘 정품은 가격이 심각하기 떄문에(…) 서드파티로 추천하는 몇몇 gps도 꽤 가격도 나가고 일단 의외로 d750가 지원된다고 써있는 gps가 없더군요(왜죠)

그러나 갓리익스프레스에 좀 서핑을 해보니 그 어디에도 리뷰가 없는, 그러나 d750된다고 써있는, 다른 제품의 반값에 가까운 가격의 이 제품을 발견해서 ‘좋아 돈 버려보자’라는 마음으로 구매했습니다. 알리익스프레스

구매한 곳 링크

19일 구매후 딱 10일만에 도착했습니다. 퇴근 후 집에 오자마자 뜯어서 테스트를 위해 살짝 나갔다 왔기 떄문에 개봉기따윈 없습니다. 구매 직후 테스트 후기 정도로 봐주시면 될거 같습니다.

박스

뭐 이런 박스에 들어져 있었구요.

설명서

나름 영어, 중국어, 독일어, 일본어로 된 사용 설명서 입니다.

구성품은 아래와 같이 있습니다.(사진은 그 아래에 설명과 함께 첨부)

  1. 본체,
  2. 케이블 2종(아마 카메라 모델에 따라 다른 듯),
  3. 핸드스트랩으로 보이는 스트랩,
  4. 유선릴리즈(카메라 릴리즈 소켓에 연결하므로 자체 유선 릴리즈가 포함되 있었습니다.),
  5. 스트랩 결합 모듈(카메라 스트랩쪽에 결합하는 부품.)

이하 본문은 구성품(사진) 설명, 사용법, 1시간 사용 후 확인한 기능들(장단점?) 순으로 적겠습니다.

구성품

  1. 본체

    본체1

    본체2

    본체3

    이렇게 생겼습니다. 플라스틱 제질인데 그다지 고급스러워보이는 재질은 아닙니다.

    상단에 로고와 led 좌우로 카메라 연결잭,릴리즈연결잭, 후변에 전원이 존재 합니다. 하단이야 슈연결부니 생략.

  2. 케이블

    케이블

    옆에 네모잭이 D750에 맞는 잭입니다. 옆의 원형잭은 다른 카메라겠죠 설명서 상 구분은 되어있습니다.

  3. 스트랩

    스트랩

    어디에 연결하는지 모르겠습니다(…)

    하단 슈 연결부분 뒤에 살짝 구멍이 있는데 여기에 연결해야하나…. 슈 아니면 넥스트랩에 결합하는데 이게 왜 필요하지…

  4. 유선릴리즈

    유선릴리즈

    역시 싸구려처럼 + 약해보이는 플라스틱 재질인데 기능은 정상적으로 하네요.

    버튼을 누르고 앞으로 살짝 밀면(사진의 hold) 고정이 됩니다.

    초점 락기능인줄 알았는데 고정되는 정도로 누르면 사진이 찍혀서 bulb용으로 보입니다.(메뉴얼에도 그렇게 되있음)

  5. 결합모듈

    모듈

    이렇게 넥스트랩에 결합해서

    결합

    이렇게 GPS모듈을 넥스트랩에 결합할 수 있습니다.

    스피드라이트 등 슈를 써야하는 상황이나 취향껏 사용하면 될 듯 합니다.

    결합 전 사진이 없는 이유는 저게 한번 닫으면 생각보다 심하게 꽉 물려버리는데 처음에 반대로 껴버렸습니다(…)

    뺴려고 힘줘서 뜯으니 그대로 결합힌지가 부러져버려서(이것도 엄청 약해보이는 재질인데 역시나) 그냥 순간접착제로 붙여버렸습니다.

    그래도 넥스트랩에서 위아래로는 자유롭게 움직입니다(….)

사용법

  1. 연결

    측면

    위 와같이 슈연결하시고

    케이블 연결

    케이블 꼽으시면 됩니다. d750용 릴리즈잭은 홈으로 방향이 고정되있으므로 주의!

  2. 켜기

    녹색점등

    그 후에 전원을 on 하시면 상단 led가 녹색으로 깜박이기 시작합니다.

    led 상태는

    꺼짐(off), 깜박임(GPS찾는중. 인식 안됨), 켜짐(GPS 잡음)

    d750인포창

    d750의 경우 상단 액정에는 GPS 표시가 없고 lcd info를 누르시면 좌상단에 위성이 표시됩니다.

    GPS모듈 led가 깜박이는 상황에서는 위성도 똑같이 깜박입니다.

  3. 사용하기

    GPS정보

    실외에서 녹색 불이 들어온 상태에서 그냥 촬영하시면 사진에 자동으로 기록됩니다.

1시간 사용 후 확인한 기능들

집 근처 개천을 돌면서 사진을 찍어보았습니다.

  • 찾을 수 있는 정보(d750 GPS로 검색하는 모델들)에 비해서 저렴함.
  • 위 정보로 검색한 애들 중 아직도 판매중임…(일부 사이트 조차 없는 경우가 있었습니다)
  • 일단 잘 동작하는 걸로 보입니다. 찍은 사진을 구글포토등에 올려서 지도에 찍어보면 촬영위치대로 지도 마커가 잘 움직이네요
  • 위/경도와 고도, UTC 타임을 상세정보로 제공합니다.(d750의 heading 정보는 없다고 나옵니다. 메뉴얼에도 미제공이라 되있고요.)
  • 카메라와 연결만 되있으면 카메라 전원과 독립적으로 켜집니다. 즉 카메라를 꺼도 GPS가 작동중이란건데 사진 찍을떄만 전원을 키는 저로선 괜찮은 기능입니다.
  • 다른 GPS 모듈은 GPS가 잡히지 않는 경우 직전에 잡았던 정보가 기록된다 하였는데 이 녀석은 안됩니다. 불 깜박거릴땐 GPS정보가 없습니다… 별거 아닌데 의외로 불편할 것 같습니다. 실외에서 끄지 않고 실내로 막 들어갔을때야 신호가 연결중이니 기록이 되지만 곧 깜박이기 시작하고 사진에 GPS기록이 되지 않습니다. 약간의 캐싱도 되지 않는게 많이 아쉽네요
  • 소소한 건데 메뉴얼에 d750이 가능 모델로 안써있습니다.(엥????) 판매자 사이트에 기록된걸 기준으로 샀는데 사기가 아니라 다행(…)
  • 사고나서 생각컨데 케이블만 맞으면 d750 가능이라고 안써있는 다른 더 저렴한 물건도 되지 않을까 싶은데 d750이 사용가능 모델로 적힌게 왜 이렇게 없는지…. 못찾은 걸지도 모르겠습니다만….

테스트 사진(사진정보 조회도 가능합니다만… 굳이?)

구글포토 정보

구글 포토 등으로 조회한 결과입니다. 심지어 구글지도 타임라인에도 사진이 잡혀 들어갑니다.

1

2

3

4

5

Read More

신규

category: Notice tags: [공지]

1년 넘게 방치 하던 기존 블로그들을 정리하고 다시 시작해 보려고 합니다.

성격이 다른 몇몇 블로그가 좀 있지만 일단 이쪽으로 정리.

굳이 현재 형태로 유지하는게 아니라 블로그부터 다시 작성할 예정입니다.

일단 가장 잘하는게 react니 토이 프로젝트 겸 해서 시작 해 볼 예정.

언제쯤 될진 모르겠지만….

…

Read More

스프링 트랜젝션 어노테이션 설정

category: Dev
tags: [spring, transaction]

외주 맡긴 프로젝트인데 컨트롤러에서 여러 개의 쿼리를 사용하고 있어
당연히 트랜젝션이 걸린 줄 알았는데 최근 발생한 장애 분석결과
한 컨트롤메서드에서 쿼리 1- 2-3 으로 순차 insert하는 중 2번 테이블 insert eror가
발생했으나 1번에는 insert 되는 현상으로 쉽게 말해 트랜젝션 설정이 안되있는 상태….

스프링이 이럴리 없어 하고 찾아보니 역시나 아무런 세팅도 안되있다….

이참에 스프링 트렌젝션 처리 방법을 정리하자.

편리한 프레임워크라곤 하는데 스프링 특성상 한가지 방식에 대한
여러 구현 방법이 존재하는 식이고(어노테이션, 별도 빈 설정 등등등)
내가 익숙하진 않으니 제일 간단한 어노테이션방식.

일단 선 요약
1. (프로젝트마다 조금씩 위치는 다를 수 있겠지만
Spring-ibatis 기준으로 Db데이터 소스 연결하는 )스프링 컨피그에
transactionManager bean과 tx:annotation 추가.
2. 필요한 부분(메서드나 클래스나)에 @Transactional 어노테이션 추가.

본인경우에는 context-datasource.xml 이고 설정상 context-*가 설정 xml로 등록되어
있기도 하고(web.xml 에 다음과 같이 등록한 상태임)

<context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath*:config/spring/context-*.xml</param-value>
    </context-param>

운영/개발/테스트별로 datasource파일이 개별이라 별도로 context-datasource.xml을
생성해서 아래와 같이 저장했다.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
        xmlns:tx="http://www.springframework.org/schema/tx"
        xsi:schemaLocation="
    http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
    http://www.springframework.org/schema/tx
    http://www.springframework.org/schema/tx/spring-tx-3.0.xsd">

        <bean id="transactionManager"
                class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
                <property name="dataSource" ref="dataSource" />
        </bean>
        <tx:annotation-driven transaction-manager="transactionManager"
                proxy-target-class="true" />
</beans>

그리고나서 리퀘스트 매핑이 있는 컨트롤러 중 원하는 부분(클래스나 메서드)에
@Transational 어노테이션 추가.

본인은 클래스 전체에 걸어주었다.
클래스

테스트해보니 에러나면 입력이 전체 롤백 됨 확인.

Read More

톰캣 + React + node(express) 프록시 연결

category: Dev-Web
tags: [tomcat, React, create-react-app, express, Nodejs, proxy, Apache, ReverseProxy]

올해부터 무인 키오스크에서 웹개발로 팀 이동을 했지만 둘다 작업해야하는 몰지각한 상황입니다만..
사이트 관리? 서버관리? 쪽 이슈라서 간만에 블로깅.

대충 상황을 설명하자면
기존의 관리자 사이트는 톰캣으로 구동되며
서버는 Aws 에서 DEV, WAS, WEB 3가지 ec2인스턴스를 사용중인데
이번에 토이 프로젝트로 만든 브랜드 홍보페이지(react)를 시험삼아 운영에 올려보기로 했다.

심지어 기존 www sub domain 을 이번 브랜드 페이지로 변경하고 기존 관리자 사이트는 별도의 sub domain으로 변경…

기존의 구조는
개발: DEV(apache-tomcat) - DB(oracle)
운영: WEB(apache)-WAS(tomcat)-DB(oracle)
인 상태로 apache는 기본적으로 80으로 접속시 8080으로 리버스프록시가 설정되 있는 상태이다(개발,운영 둘다)

토이 프로젝트 구조는 아래와 같이 node기반 2개의 서버가 돌아간다.
React - api(express) - DB(oracle)
개발은 기존의 리버스 프록시에 노드 포트 3000번만 뚫어서 연결했다. 이건 뭐 간단하니까 패스..
구조는 아래와 같다.
Dev ip :8080 OR 80 -> 톰캣
Dev ip :3000 -> create-react-app. webpack dev server
Dev ip\api*:3000 -> localhost\api:3001 (express. restfulAPI)

즉 노드와 톰캣을 분리해서 포트별로 접속한다.

문제는 운영서버.
이미 프록시로 되어있어서 기존방식대로 연결하면 프론트 사이트는 접속되나 api에 접속하지 못하는 현상이 발생하였다.
3001 내부 프록시 설정으로 던지는 url을 web서버에서 먼저 잡아버려서 정상적인 호출이 안되는 상황.
그냥 하위도메인 연결하면 더 간단하긴 한데 이미 각각 루트 도메인으로 개발한 상태이기 때문에(토이를 운영에 붙일거라곤 예상 못함)
래저래 삽질을 좀 했지만 결론적으로는 아래와 같이 구성.
(8080 포트로 가는 부분은 이미 운영 중인 부분이라 수정 불가…)

운영 구조(web was 서버는 개별 인스턴스)
Web 서버 Apache httpd 리버스 프록시
WAS 8080 톰캣, 5000 브랜드 사이트, 3001 api서버
-> sub1.domain -> web -> was:8080(톰캣)
-> www.domain -> web -> was:5000(react-react-app build. Serve로 실행)
-> www.domain/api/ -> web -> was:3001(express)

리버스 프록시 설정은 구글링 하면 충분히 나오지만 실질적인 작업부분만 보면 Httpd.conf 파일의 리버스 프록시 설정

#구글링하면 virtualhost쪽에 주소를 입력하게 되어있는데 내 경우는 퍼미션 오류같은게 난다.  
# www와 sub로 세팅하므로 이렇게 세팅.  
#톰캣 연결   
<VirtualHost *:80>  
\##sub 도메인  
    ServerName sub.domain  
    ProxyRequests Off  
    ProxyPreserveHost On  
    <Proxy *>  
        Require all granted  
    </Proxy>  
    \## /  
    ProxyPass / ip:8080/ retry=1 acquire=3000 timeout=600 Keepalive=Off  
    ProxyPassReverse / ip:8080/  
    <Location />  
        Require all granted  
    </Location>  
</VirtualHost>  
<VirtualHost *:80>  
    ## www도메인   
    ServerName www.domain  
    ProxyRequests Off  
    ProxyPreserveHost On  
    <Proxy *>  
        Require all granted  
    </Proxy>  
    ## api 가는 하위도메인 지정  
    ProxyPass /api/ ip:3001/api/  
    ProxyPassReverse/api/ ip:3001/api/  
    ## react 페이지 연결  
    ProxyPass / ip:5000/  
    ProxyPassReverse / ip:5000/  
    <Location />   
        Require all granted  
    </Location>  
</VirtualHost>

노드쪽 구성은 직접 하고 보니 아래 사이트에 완전히 같은 방식을 설명하고 있다. 참조하자.
fullstackreact참조사이트

Read More

상담사례2. SNS API 활용 프로그램 개발 가이드

category: 컨설팅/과외/상담
tags: [컨설팅, 사례, vb.net, python, SNS]

외뢰 개요

  • 의뢰자는 20대 비 개발자.
  • 어렸을떄부터 vb 배워서 사용하는 생활코딩러
  • SNS의 글이나 사용자를 찾아 팔로잉/좋아요 하는 프로그램 제작 희망
  • vb.net 독학 시작 얼마 안됨.
  • json 파싱, 쓰레드 처리 등 모르는 개념이 많아서 무엇을 먼저 시작할지 혼란.

의뢰 상세

  • 유투브에 공개되 있는 예제 프로그램이 있어 해당 건 기준으로 소스 분석 및 필요 업무, 스킬 확인 요청
  • 계정 별 프록시 ip로 접속 희망
  • 쓰레드로 여러 프로그램 띄우지 않고 다계정 활용 희망
  • 유사 기능을 검색하면 대부분 .net이나 python 소스인데 아는게 vb뿐이라 걱정.
  • vb, vb.net관련 자료가 많이 부족한 상황에서 확인해서 의뢰 문의함.
  • 웹 드라이브 쪽 관심 있음.
  • 관련 프로그램 제작비용 등이 많이 부담되 자체 제작 하려고 함.

소스 및 상황 분석

  • 예제 프로그램 분석결과
    • 프록시 ip와 아이디를 파일로 입력받아서 처리하는 소스.
    • 공식 api를 사용하는것은 아니지만 기본적으로 해당 sns에서 사용하는 url api
    • 접속, 브라우저인증, 로그인 기능 구현되 있음.
    • 팔로잉이나 해쉬검색 등에 대한 api 문서나 샘플이 없어 구현 가능여부 불명.
  • python으로 구현된 서드파티 api 확인.
  • 해당 소스 기반의 추가 api를 확인하여 구현은 가능하나 의뢰인 실력과 시간분배 문제로 보임.

솔루션

  • python 소스를 .net에서 사용 가능함(ironpython)
  • json 파싱 관련 가이드(샘플 등.)
  • 예제 프로그램 주요 로직 주석작업 제공.
  • http 통신 방식(get, post 방식) 설명.
  • vb와 vb.net 문법간 상이점 질의에 대한 응답(try 등)
  • C# 학습에 필요한 정보(책 추천, 학습 사이트) 추천.

후기

  • 채팅으로 1일 간 진행됨. (오전에 연락 받아서 낮에 분석, 정리후 오후에 가이드)
  • 채팅만으로는 실질적으로 도움될 만한 부분 전달이 좀 어려움을 느낌.
  • 비 개발자인 일반인에게 주요 개념 설명이 쉽지 않음.(의뢰인 이해여부를 떠나서..)
  • 난이도가 높은 프로그램은 아니고 의뢰인이 자체개발 혹은 제작의뢰를 희망 하였으나 본인 시간이 안되 의뢰는 못 받음…
  • 평일에는 상담이 아무래도 제한됨. 분석 후 주말에 영상이나 보이스를 활용한 상담 방안 강구 필요.
  • 추후 관련 스킬 관련 추가 과외 필요로 보임. 포인트 과외나 기초 개념 관련 과외준비를 빨리 마무리 해야할듯…
Read More

상담사례1. 신입 웹디자이너 메뉴 수정

category: 컨설팅/과외/상담 tags: [css,jquery, 컨설팅, 사례]

외뢰 개요

  • 의뢰자는 20대 신입 웹디자이너.
  • html,css 배웠고, jquery 겉핥기로 배워서 그런가 원하는대로 구현이 안됨.
  • 호스팅 사이트에서 템플릿 쇼핑몰 소스를 받아 처리하는 데 수정은 별도 계약이 필요하여 현재 불가한 상황
  • 디자이너 뿐이라 본인이 수정해야만 하는 상황

의뢰 상세

  • 현재 메뉴 분류는 대분류-중분류 드랍다운으로 되어 있음.
  • 소분류를 추가해야하는데 단순추가시 중분류와 소분류가 함께 떠버림.

소스 및 상황 분석

  • div>ul>대분류>li>중분류 인데다 아이템은 전부 a tag.
  • jquery는 자체 참조하는 부분이 너무 많아 소스 전체를 다 뜯지 않으면 파악이 어려움.
  • 디자이너가 수정할 수 없을 정도로 꼬여있는 소스

솔루션

  • 해당 html 재구성 추천 (기존 div.nav로 구성되어 있어 작업 용이)
  • 태그 간소화 및 jquery 의존도를 최대한 낮추고, 메뉴의 동작은 css로 처리하도록 샘플소스 작성/제공
  • 의뢰자에게는 디자이너로서 좀 더 css에 비중을 두어 공부하도록 가이드 라인 제공.
Read More

방화벽 예외 등록하기

category: Dev
tags: [c#, firewall]
reference site :
crystalcube.co.kr/12

개요

cmd 프로세서를 이용해서 netsh 명령으로 간단하게 처리하는 방법.
xp부터 적용 가능한 것 같고, win7이후부터 작업이 추가된다.

소스

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
    /// <summary>
      ///  방화벽 예외 추가(xp~)
      /// </summary>
      /// <refer>http://crystalcube.co.kr/12</refer>
      public static class Fwall
      {
          private static readonly string FirewallCmd = "netsh firewall add allowedprogram \"{1}\" \"{0}\" ENABLE";
          private static readonly string AdvanceFirewallCmd = "netsh advfirewall firewall add rule name=\"{0}\" dir=in action=allow program=\"{1}\" enable=yes";
          private static readonly int VistaMajorVersion = 6;
          /// <summary>
          /// 방화벽 등록 
          /// </summary>
          /// <param name="name">등록할 product name </param>
          /// <param name="programFullPath">실행 경로</param>
          /// <returns>작업 성공 여부 </returns>
          public static bool AuthorizeProgram(string name, string programFullPath)
          {
              try
              { // OS version check
                  string strFormat = Fwall.FirewallCmd;
                  if (System.Environment.OSVersion.Version.Major >= Fwall.VistaMajorVersion)
                  {
                      strFormat = Fwall.AdvanceFirewallCmd;
                  }

                  // Start to register 
                  string command = String.Format(strFormat, name, programFullPath);
                  System.Console.WriteLine(command);

                  ProcessStartInfo startInfo = new ProcessStartInfo();
                  startInfo.CreateNoWindow = true;
                  startInfo.FileName = "cmd.exe";
                  startInfo.UseShellExecute = false;
                  startInfo.RedirectStandardInput = true;
                  startInfo.RedirectStandardOutput = true;
                  startInfo.RedirectStandardError = true;

                  Process process = new Process();
                  process.EnableRaisingEvents = false;
                  process.StartInfo = startInfo;
                  process.Start();
                  process.StandardInput.Write(command + Environment.NewLine);
                  process.StandardInput.Close();
                  string result = process.StandardOutput.ReadToEnd();
                  string error = process.StandardError.ReadToEnd();
                  process.WaitForExit();
                  process.Close();
              }
              catch
              {
                  return false;
              }
              return true;
          }
      }
Read More

Emmet(Zen coding) html 사용법 요약

category: Dev
tags: [web,html,emmet,zen coding]
reference site :
emmet 공식 홈페이지 가이드 문서

개요

html 태그를 생성하기 위한 방법중 사실상 가장 편한 방법이라고 생각하는 emmet.
기본적인 사용법정도는 익혀두면 좋다. css 에도 사용 가능하다는데 그건 다음에

기본 사용법

  • 태그 생성 : {tab}키

    • grid {tab}

        <grid></grid>
  • 하위(Child) 태그 생성 : “>”

    • grid>button

        <grid><button></button></grid>
  • 형제(Sibling) 태그 생성: “+”

    • grid>button+li

        <grid>
      <button></button>
      <li></li>
  </grid>
  • 상위(Climb-up) 태그 생성: “^”
    • 굳이 그럴필요 있을까 싶지만 작성중 편의를 위한 것으로 보임.

    • div>grid>li^textbox

        <div>
      <grid>
          <li></li>
      </grid>
      <textbox></textbox>
  </div>

    • div>grid>li^^textbox

        <div>
      <grid>
          <li></li>
      </grid>
  </div>
  <textbox></textbox>
  • 태그 반복(Multiplication) 생성 : “*”

    • 동일 태그 반복 생성. 표그리기 등    - ul>li*5

        <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </ul>
  • 그룹(Grouping) 묶기 : “()”
    • 반복작업시에 여러개 태그를 하나의 그룹으로 처리한다.

    • (div>dl>(dt+dd)*3)+footer>p

        <div>
      <dl>
          <dt></dt>
          <dd></dd>
          <dt></dt>
          <dd></dd>
          <dt></dt>
          <dd></dd>
      </dl>
  </div>
  <footer>
      <p></p>
  </footer>

속성(attribute) 관리

자주쓰는 속성도 emmet으로 선언할 수 있다.

  • ID, CLSS 선언 : “#”, “.”
    • css셀렉터와 동일함.

    • div#header+div.page+div#footer.class1.class2.class3

        <div id="header"></div>
  <div class="page"></div>
  <div id="footer" class="class1 class2 class3"></div>
  • 커스텀 속성 관리 : “[attr=val]”
    • 임의, 그외 속성 관리도 가능.

    • td[title=”Hello world!” colspan=3]

        <td title="Hello world!" colspan="3"></td>
  • 넘버링 (descending, ascending): “$” / “$@-“
    • 특정속성의 이름 넘버링 하는 방식.

    • ul>li.item$*5

        <ul>
      <li class="item1"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      <li class="item4"></li>
      <li class="item5"></li>
  </ul>

    • ul>li.item$$$*5

        <ul>
      <li class="item001"></li>
      <li class="item002"></li>
      <li class="item003"></li>
      <li class="item004"></li>
      <li class="item005"></li>
  </ul>
    • 역순

    • ul>li.item$@-*5

        <ul>
      <li class="item5"></li>
      <li class="item4"></li>
      <li class="item3"></li>
      <li class="item2"></li>
      <li class="item1"></li>
  </ul>
    • 시작 번호를 매길 수 있음.

    • ul>li.item$@3*5

        <ul>
      <li class="item3"></li>
      <li class="item4"></li>
      <li class="item5"></li>
      <li class="item6"></li>
      <li class="item7"></li>
  </ul>

내용쓰기

  • 내용쓰기 : “{}”

    • button{click me}

        <button>click me</button>
  • 복합사용
    • 아래 두 예시에서 a에 대한 텍스트를 참조 하자

    • a{click}+b{here} : a와 b가 형제태그임.

        <a href="">click</a><b>here</b>

    • a>{click}+b{here} : a 하위에 텍스트와 b태그가 존재.

        <a href="">click<b>here</b></a>

사용 팁

  • 이미 만들어진 html 안에서도 작성 가능하다.

      <grid>
      li   <!--이걸 탭하면 li tag가 생성됨. -->
      .item <!-- 여기서 탭하면 "<div class="item"></div>" 태그가 됨.  -->
  </grid>

  • 생략가능한 태그도 존재.

   
.wrap>.content div.wrap>div.content
em>.info em>span.info
ul>.item*3 ul>li.item*3
table>#row$*4>[colspan=2] table>tr#row$*4>td[colspan=2]
  • 하위태그가 자동으로 붙는 것도 있음 (Implicit tag names)
    • ul>.item : ul 아래에 item클래스를 갖는 li 태그
    • tr>.item : tr 아래 item클래스를 갖는 td 태그
    • 최상위에서는 div가 기본 태그가 됨.
  • 맨 뒤에 e 를 붙이면 <> 가 < , > 로 표시됨. (필터)
  • lorem 태그명으로 생성시 흔히 말하는 “Lorem Ipsum” 내용이 복사됨.

예제

표 만들기

  • .table>table>.header>.FirstNm{First Name}+.LastNm{Last Name}+.Point1{Point1}+.point2{Point2}^(.row$>.FirstNm${test$}+.LastNm${data$}+.Point1${ponit$}+.Point2${testing$})*3

      <div class="table">
      <table>
          <tr class="header">
              <td class="FirstNm">First Name</td>
              <td class="LastNm">Last Name</td>
              <td class="Point1">Point1</td>
              <td class="point2">Point2</td>
          </tr>
          <tr class="row1">
              <td class="FirstNm1">test1</td>
              <td class="LastNm1">data1</td>
              <td class="Point11">ponit1</td>
              <td class="Point21">testing1</td>
          </tr>
          <tr class="row2">
              <td class="FirstNm2">test2</td>
              <td class="LastNm2">data2</td>
              <td class="Point12">ponit2</td>
              <td class="Point22">testing2</td>
          </tr>
          <tr class="row3">
              <td class="FirstNm3">test3</td>
              <td class="LastNm3">data3</td>
              <td class="Point13">ponit3</td>
              <td class="Point23">testing3</td>
          </tr>
      </table>
  </div>

리스트 만들기 (원본: 부트스트랩 소스 )

  • ul.nav.nav-pills>.active>a[#]{Home}^li>a[#]{Profile}^.disabled>a[#]{Disabled}^.dropdown>a.dropdown-toggle[data-toggle=dropdown href=#]>{Dropdown}+span.caret^ul.dropdown-menu>li>a[#]{Action}^li>a[#]{Another action}^li>a[#]{Something else here}^.divider+li>a[#]{Separated link}

      <ul class="nav nav-pills">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li class="disabled"><a href="#">Disabled</a></li>
      <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></a>
          <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
          </ul>
      </li>
  </ul>
Read More

베스킨라빈스 스파이더맨 홈커밍 이어셋(블랙) 개봉기

category: Review
tags: [Review, 리뷰, 스파이더맨 홈커밍 이어셋]

일단 전 31세 아이스크림장수 아이스크림을 별로 좋아하지 않습니다만 선물용도로 사려고 갔다가 발견했습니다.

일단 행사 포스터

포스터

**블랙 케이스 는 블랙이어셋 레드 케이스는 흰색 이어셋입니다. ** 넵. 쓸모없는 패밀리 사이즈 아이스크림은 여친에게 버리고 (본격 본말전도) 하나 업어왔습니다.

포장

조런 봉지에 넣어줍니다.

케이스 앞 케이스 뒤

깔끔하게 생긴 블랙 케이스 입니다. (레드 케이스는 흰색 이어셋입니다.)

이제 하나하나 까봅시다.

케이스 오픈

짜잔

케이스 내부 오픈

???

봉지안

봉지안엔 이런거…

이어폰 보관앞

거미무늬

이어폰 보관뒤

마감은 미묘하게 좋지 않습니다. 케이스쪽 내부도 보면 칠이 약간 뭍어있기도 하고…

배터리 컨트롤

왼쪽에는 배터리 오른쪾에는 컨트롤러가 있습니다.

이어폰

헤드는 자석처리되서 들러붙습니다. 거미가 저 상태에서 보이거나 하면 멋질텐데..

마지막으로 메뉴얼 연결, 설명 부분

메뉴얼1 메뉴얼2 메뉴얼3

어제 저녁에 받아서 오늘 아침에 들어본 간단한 사용감은 이전에 쓰던 중국제 (qcy의 qy8)에 비해 소리가 전체적으로 떨어진다는 느낌이 있습니다.

QCY의 qy8 goldenears.net 정보

qy8는 미친 가성비가 장점이란걸 생각해보면 (음질이 좋지 않음 ««<겁나 쌈 ) 이 이어셋도 그냥 스파이더맨 기념품 정도로 생각하면 그럭저럭…

전 qy8 블루투스 연결모듈이 파.괘. 되어서 쓸걸 찾던 중에 우연히(스파이더맨이라) 겸사겸사 산거니 쓰게 될 예정입니다.

Read More

마크다운 참조

category: Dev
tags: [web, markdown]

  • 제목

텍스트

#을 하나 쓰면 HTML의 <h1> 태그를, #을 두개 쓰면 <h2>태그를 의미한다. 즉, #은 하나에서 여섯개까지 쓸 수 있고, #이 늘어날때마다 제목의 수준은 내려간다.(보통 글씨 크기가 작아진다.)

  • 번호 없는 리스트

-/+/* 텍스트

  • 번호 있는 리스트

숫자. 리스트

  • 기울인 글씨 (html의 <em>태그)

*텍스트* or _텍스트_

  • 굵은 글씨 (html의 <strong>태그)

**텍스트** or __텍스트__

  • 인용

텍스트 인용문안에 인용문을 넣으려면 >를 더 추가해주면 된다.

텍스트

  • 인라인 링크

[텍스트](링크주소)

  • 참조 링크

[텍스트][참조명]

[참조명]: 링크주소

  • 이미지

![텍스트](이미지링크)

  • 수평선

-, *, _을 세개 이상 나열

  • 코드 html이나 md 표기를 그대로 표시함.

`코드 내용`

  • 코드 블럭

    앞에 스페이스 4개 이상 삽입

    코드내용

  • 이스케이프 ‘\’ 문자를 앞에 넣으면 마크다운 문법용 문자들을 사용할 수 있음.

    이걸

    # 이렇게

Read More