블로그 이미지

1장 Convention

2018. 6. 24. 00:12

Front-End Developer (프론트 앤드 개발자) Road Map (로드맵) 시리즈를 작성 해보려고 합니다.


프론트 엔드 개발자로서 자리잡고 성장해 나가기 위해 필수적으로 익혀야 할 기술 스택 들을 우선 순위를 정해서 순차적으로 정리해 보려고 합니다.


작성하는 저를 위해서 그리고 이 글을 보시는 다른 개발자 분들께 도움이 되었으면 합니다.


1장 Convention


Enterprise환경에서 소프트웨어를 개발 할때는 여러명의 개발자 들과 협업을 하게 됩니다.

이때, 여러명이서 동시에 하나의 소프트웨어를 만들기 때문에 프로젝트가 상당히 지저분해 질 수 있습니다.


따라서, 팀내에서 운영할 공동 규칙들을 정해서 코드 구조,  커밋 로그 형식등을 일관된 스타일로 적용하여 운용하여야 합니다.


프로젝트 시작전, 대표적으로 정하는 규칙(Convention)은 다음과 같습니다.


1. Git Branch Strategy (깃 브랜치 전략)

  • master : 제품으로 출시될 수 있는 브랜치
  • develop: 다음 출시 버전을 개발하는 브랜치
  • feature: 기능을 개발하는 브랜치
  • bugfix: 버그 수정 브랜치
  • release ???


2. Git Commit Message Convention (깃 로그 작성 규칙)

AngularJS Commit Convention을 사용한다.


<type>: <subject>

<BLANK LINE>

<body>

<BLANK LINE>

<footer>


예제)

feat: add ABR Controller


ABRController.js file is added.

It uses BOLA Algorithm.


Close #321


가)  type 

커밋의 종류

  • feat: 새로운 기능
  • fix: 버그 수정
  • docs : 설명 추가& 변경
  • style: 코드 스타일 변경
  • refactor: 코드 구조 변경
  • test: 테스트 코드 추가& 변경
  • chore: 개발 환경 변경

나) subject


커밋 요약문
  • 소문자로 시작
  • 현재 시제의 명령문으로 작성
  • .(마침표) 사용 금지


다) body

커밋 상세한 설명


라) footer

???



3. Code Convention


가) 변수/함수/클래스 명칭

  • 파스칼 표기법 : 단어의 모든 첫 글자를 대문자로 표기
클래스 명
  • 카멜 표기법 : 단어의 첫글자 대문자로 표기, 맨 앞에 오는 글자는 소문자 표기
변수명,  함수이름


나) 들여쓰기

스페이스로 두 번

4. Directory Structure

일반적으로 Web Component 개발을 위한 디렉토리 구조와 Web Service 개발을 위한 디렉토리 구조는 다르다.

Web Component의 경우, javascript Component 형태의 산출물을 가지고 있기 때문에 html, css 들을 string 형태로 변형해서 javascript 형태로 포함된다.

그러나, Web Service의 경우, 웹 페이지 기반이므로 HTML, CSS가 별도로 관리된다.

이 밖에도 Web Framework에 따라서 폴더구조가 정해지기도 한다. 여기서는 Vanila JS를 기준으로 한다.


※ 참고

윈도우 프롬프트 창에서 tree 를 입력하면 하위 폴더구조를 그려준다.


  • Web Component 유형

└─project

    ├─config
    │  └─webpack
    ├─dist (또는 build)
    │  └─assets
    │      ├─css
    │      ├─images
    │      └─js
    ├─doc
    ├─src (또는 app)
    │  ├─skin: 컴포넌트 html, css 파일
    │  ├─utils: javascript 유틸리티
    │  └─index.js:  시작 entry 파일
    └─test (또는 spec)


  • Web Service 유형 (SPA)
└─project
    ├─config
    │  └─webpack
    ├─dist (또는 build)
    │  └─assets
    │      ├─css
    │      ├─images
    │      └─js
    ├─doc
    ├─src (또는 app)
    │  ├─assets
    │  │  ├─images
    │  │  └─sass
    │  ├─components: javascript 컴포넌트
    │  ├─utils: javascript 유틸리티
    │  └─views: 페이지 html
    │  └─index.html:  시작 페이지 html
    │  └─index.js:  시작 entry 파일
    │  └─router.js: 라우팅 파일
    └─test (또는 spec)






'컴퓨터 > Front-End 개발' 카테고리의 다른 글

1장 Convention  (0) 2018.06.24


블로그 이미지

TCP 통신 TIME_WAIT, CLOSE_WAIT의 차이점

2017. 5. 20. 12:02

TCP 통신에 관한 내용으로 면접 질문으로 자주 나오는 TIME_WAIT, CLOSE_WAIT 에 대해서 다뤄 볼까 합니다.


TCP연결이 해제 될때는 FIN 패킷, ACK 패킷을 각각 한번 씩 주고 받으면서 연결을 종료 하게 됩니다.

이때, Close 요청을 먼저한 주체가 누구냐에 따라 Active Close, Passive Close 대상이 달라집니다.

Server와 Client의 구분법으로 보면 안됩니다.

Server가 먼저 연결 해제요청을 할 수 도 있고 Client가 먼저 연결 해제요청을 할 수 도 있습니다.


Active Close :  TCP 연결 해제를 요청한 대상

Passive Close : TCP 연결 해제를 수신한 대상


이 때, 각 대상들은 상태가 존재 합니다.


Active Close 대상의 상태 : FIN_WAIT1, FIN_WAIT2, TIME_WAIT 

Passive Close 대상의 상태 : CLOSE_WAIT 상태, LASK_ACK 상태



FIN 패킷의 의미는 '나는 더 이상 보낼 데이터가 없다. + 연결을 해제 하고 싶다' 로 볼 수 있습니다.

ACK 패킷의 의미는 기존의 TCP에서 동일한 의미로 '알았다' 확인의 의미 입니다.


여기서 중요하게 봐야할 3가지 상태가 있습니다. 각 의미를 살펴 보겠습니다.


1. CLOSE_WAIT

FIN 요청을 수신한 Passive Close는 CLOSE_WAIT 상태로 변경됩니다.

이후, Passive Close는 즉시 Close실행을 하지 않고, TCP 포트를 사용중인 프로세스에게 종료 명령을 내리고 Close 명령을 실행할 때까지 대기 하게 됩니다.

즉, Close 명령을 실행 할 때까지 기다리는 상태 입니다.


2. FIN_WAIT2

Active Close 대상이 Passive Close로 부터 FIN패킷을 기다리는 상태를 FIN_WAIT2 상태라 합니다.

이때, 일정 시간 FIN이 오지 않으면, 자동으로 TIME_WAIT 로 넘어가는 특징이 있습니다.


3. TIME_WAIT

Active Close 대상이 FIN 패킷에 대한 ACK 응답을 송신한 후, 즉시 Disconnect를 하지 않습니다.

세그먼트 Lifetime의 2배 약, 60초 정도 뒤에 실제 연결을 Disconnect 하게 됩니다.

그 이유는 두 가지가 있습니다.


1. 즉시 연결을 종료하고 바로 다음 연결을 맺였을 때, 

첫번째 연결했을때의 데이터 패킷이 뒤늦게 도착하여 Sequence ID가 꼬이는 것을 방지

2. 마지막 ACK 패킷이 손실 되어 Active Close 혼자 연결을 Disconnect 해버리는 경우.


블로그 이미지

[Linux] 절전(대기) 모드 해제

2017. 4. 22. 08:53

노트북에 리눅스를 설치하고 서버로 운영하는 경우, 노트북 덮게를 덮으면 절전(대기) 모드로 들어가는 경우가 있다.

GUI 없이 설정 파일 수정을 통해서 절전 모드를 해제하는 방법에 대해서 알아본다.


예제환경 : Ubuntu 16.04 64bit


1. /etc/systemd/logind.conf 파일 수정

sudo 권한으로 시스템 설정 파일을 수정 한다.

sudo vi /etc/system/logind.conf 파일 수정

HandleLidSwitch 주석을 해제하고 ignore 값을 입력한다.

HandleLidSwitch=ignore

[Login]
#NAutoVTs=6
#ReserveVT=6
#KillUserProcesses=no
#KillOnlyUsers=
#KillExcludeUsers=root
#InhibitDelayMaxSec=5
#HandlePowerKey=poweroff
#HandleSuspendKey=suspend
#HandleHibernateKey=hibernate
HandleLidSwitch=ignore                    //덮개 닫힘 무시
#HandleLidSwitchDocked=ignore
#PowerKeyIgnoreInhibited=no
#SuspendKeyIgnoreInhibited=no
#HibernateKeyIgnoreInhibited=no
#LidSwitchIgnoreInhibited=yes
#HoldoffTimeoutSec=30s
#IdleAction=ignore
#IdleActionSec=30min
#RuntimeDirectorySize=10%
#RemoveIPC=yes
#UserTasksMax=12288



2. 재부팅 한다.

  1. mireu 2020.11.05 00:15  address  modify / delete  reply

    우분투 20.04에서는 /etc/systemd/logind.conf 이네요
    우분투 사용자들은 이거 확인 해서 진행해보세요


블로그 이미지

ONVIF 국제 보안 표준 프로토콜

2017. 3. 1. 10:24

오늘은 ONVIF 프로토콜에 대해서 다뤄볼 예정입니다.


ONVIF란 무엇이냐? 

간단히 소개하자면 '감시카메라(CCTV)를 제어할 때 사용하는 국제 표준 프로토콜' 이라고 할 수 있습니다.


물론, 위의 설명은 아주 좁은 의미에서 ONVIF에 입니다.

자세하게 표현하자면 아래와 같습니다.

'보안장비에서 전세계 표준으로 사용되는 프로토콜'

  => 감시카메라 뿐만 아니라, 녹화장치(NVR), 뷰어(CMS), 출입통제시스템과 같은 모든 보안장비에서 사용되는 프로토콜입니다.


그럼, ONVIF의 용도는 무엇이냐?

보안장비끼리 서로 연결되어 동작하게 해주는 프로토콜입니다.

그림으로 표현하자면 아래와 같습니다.


그림으로 보시니까 어떨때 사용하는지 한 번에 아시겠죠?


그럼 이제 ONVIF가 어떤것인지 대충 감을 잡으셨다고 생각하고 본격적으로 자세하게 다루어 보겠습니다.


먼저, 보안장비의 프로토콜에 대해서 다뤄보겠습니다.


일반적으로 보안장비들, 그중에서 영상감시장비들은 다양한 프로토콜들을 지원하고 있습니다.  이 프로토콜은 두 부류로 나눌수 있습니다.


1. 자사 표준 프로토콜

2. 국제 표준 프로토콜(ONVIF)


프로토콜을 하나만 사용하면 될것이지 왜 여러개를 지원하느냐? 라고 물으실 수 있겠습니다.


그 이유는,

국제표준프로토콜의 경우 표준이 아닌 해당 장비에만 있는 특화된 기능들을 지원하지 않기 때문입니다.

가령 예를 들어,  한화테크윈(구 삼성테크윈)에서 판매하는 PTZ카메라의 경우 Handover 라는 기능이 있는데 ONVIF 프로토콜에서는 아직 그 기능을 지원을 하지 않고 있습니다.


국제표준프로토콜의 경우, 

전세계 공통적으로 사용하는 프로토콜이기에 새로운 사양이 추가되거나 변경되는 작업이 굉장히 어렵고 오래 걸리게 되어 있습니다.


그래서 자사 표준 프로토콜을 두어 해당 기능들을 사용할 수 있게 해준 것이지요.


한화테크윈 제품들의 경우 아래와 같은 프로토콜을 지원합니다.

자사 표준 프로토콜 : SVNP 프로토콜, SUNAPI1.0 프로토콜, SUNAPI2.0 프로토콜

국제 표준 프로토콜 : ONVIF 프토토콜



이제 본격적으로 ONVIF 프로토콜에 대하여 자세하게 다루어 보겠습니다.


ONVIF 프로토콜은 HTTP 기반의 프로토콜 입니다.


일반적으로 프로토콜은 Socket 통신 기반 프로토콜이 있고 HTTP 기반 프로토콜이 있는데

HTTP를 선택한 이유라고 하면,  프록시 환경이나 방화벽 환경에서도 자유롭게 사용할 수 있다는 장점 때문인것 같습니다.


ONVIF 프로토콜은 내부적으로 두가지 프로토콜을 사용합니다.

기능에 따라 사용하는 프토콜이 다릅니다.

기능 

프로토콜 종류 

 영상 송수신, 음성 송수신, 이벤트 송수신

 RTP/RTSP 프로토콜

 제어, 설정, 조회

 WSDL, SOAP 프로토콜


즉, ONVIF는 영상을 볼때는 RTP/RTSP 를 사용하고, IP를 변경하거나 셔터 스피드를 변경하거나 PTZ를 제어하는 등의 각종 기능들을 수행할때는 WSDL, SOAP을 사용하게 됩니다.


여기서 알고 계셔야 할것이 ONVIF 프로토콜 자체가 RTP/RTSP 프로토콜을 구현한 것은 아닙니다.

단지 카메라와 같은 장비에서 사용할 수 있는 RTP/RTSP 주소를 알려주는 역할을 할 뿐입니다. 


그러면, ONVIF의 핵심이 되는 WSDL과 SOAP 기술들을 위해 기본적으로 알아야할 용어? 기본 지식에 대해서 설명 드리겠습니다.


1. Web Service: 

HTTP또는 XML 기반으로 제공되는 서비스

2. WSDL

Web Services Description Language의 약자

어떠한 Web Service를 제공하는지 기술한 XML 문서

3. SOAP: 

Simple Object Access Protocol의 약자.

HTTP, HTTPS, SMTP를 사용하여 통신하고 XML을 주고받는 프로토콜

XML

UDDI


...작성 중






  1. 아프리카탈출은 IQ순 2020.06.18 05:04  address  modify / delete  reply

    IP camera 살려고 구글링 하다가 오게 되었습니다.
    알아먹기 쉽게 설명주셔서 감사합니다.
    글 좀 계속 추가작성해주세요.

  2. 건우아빠유리남편 2021.01.28 09:47 신고  address  modify / delete  reply

    잘 읽었습니다.

    이해하기 쉽게 잘 설명해주셔서 감사합니다.


블로그 이미지

[Java] 키보드 입력받는 방법

2017. 2. 14. 16:50

Java에서 키보드 문자 입력 방법에 대해서 정리해봅니다.


C언어로 이야기 하자면 scanf() 에 해당할 수 있습니다.




총 3가지 있으며 결론 부터 이야기 한다면,


1) Scanner를 사용하거나

2) System.in.read() 함수와 BufferedReader를 혼용해서 사용 하는 방법이 있을 수 있겠습니다.

Scanner 와 BufferedReader를 차이점을 비교하자면, 사용의 편의성을 말할 수 있습니다.
그리고 Scanner가 더 최근에 나온 객체입니다.


방법1. Scanner 객체 사용


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Scanner scn = new Scanner(System.in);
 
byte byt = scn.nextByte();
 
short srt = scn.nextShort();
 
long lng = scn.nextLong();
 
float flt = scn.nextFloat();
 
double dbl = scn.nextDouble();
 
boolean ble = scn.nextBoolean();
 
String strLine = scn.nextLine();
String str = scn.next();
cs


위와 같은 방법으로 Scanner 객체를 생성하고 System.in 을 연결 시켜주면 표준입력스트림을 받아 볼 수 있다.


Enter 입력 예외처리

그런데, 여기서 주의 깊게 봐야할 점이 있다.  

바로, 문자열을 입력 받을 때 사용하는 함수가 두개가 있는 점이다. 


1
2
String str = scn.next();
String strLine = scn.nextLine();
cs


두 개의 차이점은 무엇인가?


next()는 공백 단위로 문자열을 읽는다.


nextLine()는 Enter 단위로 문자열을 읽는다.  (Enter 입력은 \r\n 으로 구성된 두개의 문자이다.)



그래서 next()와 nextLine()을 섞어서 사용할 때 주의 할 점이 있다.


1
2
3
4
5
6
7
8
9
10
Scanner scn = new Scanner(System.in);
System.out.println("배열 크기를 입력하세요");
        
int ArraySize = scn.nextInt();
 
String[] strArray = new String[ArraySize];
 
System.out.println("문자열을 스페이스바로 띄워서 입력해주세요.");
 
String strInput = scn.nextLine();
cs


위와 같은 예제에서

next() 실행 라인에서 숫자 2와 Enter를 입력 시, nextLine()에서 입력을 기다리지 않고 바로 통과 되어 버린다.

그 이유는, nextInt()가 실행될때 숫자 2만 읽고, Enter(\r\n)값은 입력 스트림 버퍼에 남아 있기 때문이다. 

따라서, nextLine() 실행 시, 남아 있는 Enter 값을 읽어 들이고 통과하게 된다. 


따라서, 원하는 대로 동작하려면 아래와 같이 수정 해야 한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
Scanner scn = new Scanner(System.in);
System.out.println("배열 크기를 입력하세요");
        
int ArraySize = scn.nextInt();
 
/*!!!!!!!!!!!!! Enter 입력처리 !!!!!!!!!!!!!!*/
scn.nextLine();
 
 
String[] strArray = new String[ArraySize];
 
System.out.println("문자열을 스페이스바로 띄워서 입력해주세요.");
 
String strInput = scn.nextLine();
cs



방법2. System.in.read() 함수 사용


두 번째 방법으로 System 클래스에서 제공하는 read() 라는 함수를 이용하여 키보드 입력을 받아보자.

read() 함수는 1byte 크기만 입력스트림에서 읽어와 ASCII 코드에 해당하는 int 값을 리턴한다.


그래서 문자를 입력받을때 주로 사용한다.


1
2
3
4
5
//문자 a 저장
char chr = (Char)System.in.read();
 
//문자 a 대신 97숫자 저장
int ascii = System.in.read();
cs



Enter 입력 예외처리

그러면 Enter에 대한 예외 처리는 어떻게 할 것인가?
read()함수의 경우 Scanner의 next()함수와 유사하게 동작한다. 숫자 + Enter 입력 시, Enter(\r\n) 값은 입력스트림 버퍼에 그대로 남아 있게 된다.

따라서, 아래와 같이 예외 처리를 해주어야 한다.
Enter의 경우 두개의 문자 (\r\n) 이므로 read()함수를 두 번 호출하여 문자들을 버퍼에서 제거 해준다.


1
2
3
4
5
char chr = (Char)System.in.read();
 
/*!!!!!!!!!!!!! Enter 입력처리 !!!!!!!!!!!!!!*/
System.in.read();
System.in.read();
cs

또는

1
2
3
4
char chr = (Char)System.in.read();
 
/*!!!!!!!!!!!!! Enter 입력처리 !!!!!!!!!!!!!!*/
System.in.skip(2);
cs


방법3. BufferedReader 객체 사용


BufferedReader 객체는 문자를 스트림에서 읽을 때 버퍼를 사용하여 좀더 문자열 처리를 편리하게 해주는 객체 이다.

InputStreamReader의 경우 한 문자씩 스트림에서 읽어 오지만, BufferedReader는 미리 스트림에 있는 데이터를 버퍼에 받아 온다.

1
2
3
BufferedReader in = new BufferedReader(new InputStreamReader(System.in));
 
String srt = in.readLine();
cs

 
위와 같이 readLine() 함수를 사용하면 \r\n을 인식하며 한 줄을 읽어온다. Scanner의 nextLine() 함수와 유사하게 동작한다.

문자 하나만 읽고 싶을 때는 방법2의 System.in.read()함수를 사용한다.






  1. sd 2019.07.12 10:41  address  modify / delete  reply

    어우 감사합니다 감사합니다!!

  2. 고진_감래 2021.02.14 01:22 신고  address  modify / delete  reply

    감사합니다!!!!!!!!


블로그 이미지

[5][라즈베리파이 홈서버 구축] 외장하드 절전 모드 추가하기

2017. 2. 11. 14:57

라즈베리파이에 연결한 외장하드디스크가 하루 종일 돌고 있다면 하드디스크의 수명이 감축되는 소리가 귀에 들릴 것이다.


별도의 외장 하드디스크 도킹 스테이션을 산다면 장치에서 알아서 슬립 모드에 진입하지만, 직접 라즈베리파이에 하드디스크를 연결하면 슬립 모드란 없다.


그래서 직접 슬립모드를 구성 하는 방법을 소개한다.


1. sudo apt-get install hdparm


2. sudo vi /etc/hdparm.conf  를 열어 제일 아래줄에 추가한다.


/dev/sda1 {

spindown_time = 120 

}


※ spindown_time 에 준 시간만큼 HDD가 동작하지 않으면 대기상태로 진입하게 된다.

   spindown_time = 120  ==  10분

   /dev/sda1 은 외장 HDD이다.


3. sudo service hdparm restart


블로그 이미지

웹 플러그인 설치 유무 및 버전 확인 방법 (How to validate web plug-In)

2016. 11. 22. 10:17

How to validate web plug-In



안녕하세요. Luyin 입니다.


오늘은 현업에서 쓰이는 Web 플러그인들의 설치 유무 및 버전 확인 방법에 대해서 정리해볼까 합니다.



세계적인 추세를 봤을 때, 브라우저들은 더 이상 플러그인들을 지원하지 않는 추세 입니다.

그래도 아직까지나, 그 강력한 퍼포먼스 때문에 플러그인을 계속해서 사용하고 있는 서비스들이 많은데요.



우선, 현재 (2016.10.21 기준) 브라우저 별 플러그인 지원현황을 살펴보겠습니다.


IE

Edge 

Chrome 

Safari

Firefox

 ActiveX

No Support

PPAPI 

NPAPI

No Support


[표1 플러그인 브라우저별 지원현황 표


※ 자세한 정보는 아래링크에서 확인 하시면 됩니다.

http://www.koreahtml5.kr/jsp/supportCenter/activeXResearchCur.jsp



위의 표의 결과를 요약하면, IE, Chrome, Safari 브라우저 에서만 플러그인을 사용하고 있다고 할 수 있습니다.


그러면, 본격적으로 플러그인 설치 유무 확인 및 버전 확인 방법에 대해서 다뤄보겠습니다.




첫째,  웹 플러그인 설치 확인 방법입니다.



ActiveX


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var ActiveXPluginInfo = {
    Name: 'Hanwha_ACTIVEX.hanwha_activexCtrl.1',
    Version: 130,
    Path: 'plugin/PluginViewer.exe'
}
 
function ActiveXPlugInDetect(){
    try {
        var axObj = new ActiveXObject(ActiveXPluginInfo .Name);
 
        if(axObj){
            console.log("ActiveX is Detected");
            return true;
        } else {
            console.log("ActiveX isn't Detected");
            return false;
        }
    } catch (e) {
        console.log("ActiveX isn't Detected");
        return false;
    }
}
cs



NPAPI

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var NPAPIPlugInInfo = {
    Name : 'Hanwha Viewer Plugin',
    Description : 'Hanwha Viewer plugin',
    Version: 130,
    Path: 'plugin/PluginViewer.pkg'
};
 
function NPAPIPlugInDetect(){
    var plugins = navigator.mimeTypes;
 
    for (var i=0; i< plugins.length; i++)
    {
        if (plugins[i].description === NPAPIPlugInInfo.Description)
        {
            console.log("NPAPI is Detected");
            return true;
        }
    }
    console.log("NPAPI isn't Detected");
    return false;
}
cs




두번째,  웹 플러그인 설치 버전 확인 방법 입니다.

전제 조건: Plug-In 에는 GetCurrentVersion()이라고 하는 버전확인 메소드가 존재합니다.



ActiveX / NPAPI

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
var ActiveXPluginInfo = {
    Name: 'Hanwha_ACTIVEX.hanwha_activexCtrl.1',
    Version: 130,
    Path: 'plugin/PluginViewer.exe'
};
var NPAPIPlugInInfo = {
    Name : 'Hanwha Viewer Plugin',
    Description : 'Hanwha Viewer plugin',
    Version: 130,
    Path: 'plugin/PluginViewer.pkg'
};
 
function PlugInVersionCheck(PlugInObjectElement) {
 
    var InstalledPlugInVersion = PlugInObjectElement.GetCurrentVersion();
    console.log("Installed ActiveX Version : " + InstalledPlugInVersion);
 
    if(ClientBrowser === 'IE')
    {
        if(ActiveXPluginInfo.Version > InstalledPlugInVersion)
        {
            return false;
        }
    } else if(ClientBrowser === 'Safari' || ClientBrowser === 'Firefox')
    {
        if(NPAPIPlugInInfo.Version > InstalledPlugInVersion)
        {
            return false;
        }        
    }
 
    return true;
}
cs



블로그 이미지

ESP8266 개발하기 Step1 개발환경 구축

2016. 6. 26. 16:30

오늘은 ESP8266 개발 환경 설정 방법과 가장 기본 프로젝트인  IoT 데모 프로젝트를 빌드하는 방법에 대하여 알아보겠습니다.




개발환경 설명

Windows 7

USB ISP 


1. Virtual Box를 다운받는다.


다운로드 경로: https://www.virtualbox.org/




2. ESP8266 개발환경이 미리 설정되어 있는 VirtualBox 가상시스템 이미지를 다운받는다.


다운로드 경로 : https://drive.google.com/folderview?id=0B5bwBE9A5dBXaExvdDExVFNrUXM&usp=sharing


다운로드 경로로 가서 ESP8266_lubuntu_20141021.ova 파일을 다운 받는다.




3. '가상 시스템 가져오기' 기능으로 다운받은 이미지를 가져온다.


VirtualBox 실행 > 파일(F) > 가상 시스템 가져오기(J) > 다운받은ova파일 선택 > 가져오기







4. 가상 시스템의 '공유 폴더'를 지정한다.


C:\VirtualBox\share 폴더를 공유 폴더로 지정한다.





5. SDK를 다운받는다.


다운로드 경로 : http://www.espressif.com/ > support > SDKs & Demos > ESP8266 NONOS SDK 최신버전 다운로드


직접 다운로드 경로: http://www.espressif.com/sites/default/files/sdks/esp8266_nonos_sdk_v1.5.4_16_05_20.zip



6. 가상 시스템 공유폴더에 SDK를 복사한다.


다운로드 받은 SDK 압축파일을 공유폴더 (C:\VirtualBox\share) 내에 압축을 푼다


7. 공유폴더를 mount 한다.


가상 시스템을 실행하고 Terminal을 켠 뒤, mount.sh를 실행한다.

sudo 권한의 기본 비밀번호는 espressif 입니다.



8. IoT Example을 최상위 경로로 복사한다.


압축을 푼 SDK 폴더 경로내의 examples\IoT_Demo 폴더를 examples과 같은 단계인 SDK 최상위 경로로 복사한다.


mv /home/esp8266/Share/ESP8266_NONOS_SDK/examples/IoT_Demo /home/esp8266/Share/ESP8266_NONOS_SDK


9. hh 파일들을 수정한다.

10. 빌드 한다. (옵션들을 지정한다)

11. 펌웨어로 굽는다.



블로그 이미지

[10][라즈베리파이 홈서버 구축] 개인용 클라우드 스토리지 pydio

2016. 5. 23. 00:28

이번 시간에는 라즈베리파이에 외장하드를 장착해서 웹을 통하여 접근하는 클라우드 서비스를 구축 해보려고 한다.

onwcloud와 pydio 가 대표적으로 유명하다. UI가 이뻐서 일단 pydio를 설치해보았는데, 막상 설치해보니 속도가 많이 느려서 사용하기가 힘든것 같다.

남는 데스크탑 또는 노트북이 있다면 거기에다 설치하는 것을 추천한다.



1. 기본 필요파일 설치

sudo apt-get install nginx php5-fpm mysql-server openssl
여기서 mysql의 root계정 비밀번호는 12345678로 한다.


2. pydio 최신 버전 다운로드 하기

pydio 소스포지 사이트에서 최신버전의 tar.gz 파일을 다운 받는다. 블로그에서는 6.4.1 버전을 기준으로 하였다.

wget -O pydio.tar.gz https://sourceforge.net/projects/ajaxplorer/files/pydio/stable-channel/6.4.1/pydio-core-6.4.1.tar.gz/download

tar -zxvf pydio.tar.gz

6.4.1 버전의 압축을 해제 할경우 pydio-core-6.4.1 라는 폴더가 생성된다.


sudo mv pydio-core-6.4.1 /var/www
sudo chown -R www-data:www-data /var/www/pydio-core-6.4.1

3. mysql 데이터베이스 생성


mysql -u root -p

create database pydio


4. https 인증서 생성

sudo mkdir /etc/ssl/localcerts
sudo openssl req -new x509 -days 3650 -nodes -out /etc/ssl/localcerts/nginx_pydio.pem -keyout /etc/ssl/localcerts/nginx_pydio.key
sudo chmod 600 /etc/ssl/localcerts/*
sudo chown -R www-data:root /etc/ssl/localcerts

5. nginx 설정

sudo vi /etc/nginx/nginx.conf
nginx 프로세스의 사용자 권한을 www-data로 변경한다.

nginx 권한이 www-data이므로 동일한 권한을 가진 pydio에 접근할 수 있게 된다.

user www-data;

worker_processes 4;

pid /run/nginx.pid;


.....생략


아래 파일 생성

sudo vi /etc/nginx/site-enables/pydio

server {

        listen 9005;   #http 포트를 9005로 설정

        listen 9006 ssl;   #https 포트를 9006로 설정


        #root 폴더를 /var/www/pydio-core-6.4.1 로 설정 (pydio 압축을 해제한 폴더 위치를 지정)

        root /var/www/pydio-core-6.4.1;


        #index.php 추가 지정

        index index.php index.html index.htm;


        server_name _;


        #https 접속시 사용될 인증서 지정

        ssl_certificate /etc/ssl/localcerts/nginx_pydio.pem;

        ssl_certificate_key /etc/ssl/localcerts/nginx_pydio.key;


        #9005포트로 접속시 9006 포트로 redirect 되도록 지정

        if ($server_port = 9005) {

             rewrite ^ https://$host:9006$request_uri permanent;

        }


       #php 접속시 php5-fpm을 사용하도록 지정

        location ~ \.php$ {

          fastcgi_split_path_info ^(.+\.php)(/.+)$;

          fastcgi_pass unix:/var/run/php5-fpm.sock;

          fastcgi_index index.php;

          include fastcgi_params

        }


sudo service nginx restart

6. 브라우저로 pydio 설정



7. 외장 하드디스크 폴더 경로 지정

cd /var/www/pydio-core-6.4.1/data/personal/luyin/
sudo ln -s exthdd1 /home/pi/exthdd1


8. pydio 접속



  1. 1465984597 2016.06.15 18:56  address  modify / delete  reply

    잘보고가요~

  2. 123 2016.09.20 18:58  address  modify / delete  reply

    pydio 가 느린건가요 아니면 라즈베리파이가 느린건가요 ? ㅇㅅㅇ;

    • Luyin 2016.10.01 14:52 신고  address  modify / delete

      라즈베리파이도 느리고
      pydio 자체도 무거워서 그런것 같네요.

      라즈베리파이1, 3 둘 다에서 테스트 해봤는데 많이 느리네요.


블로그 이미지

Sublime Text 단축키

2016. 5. 17. 11:36

단축키

1.편집 명령 단축키(윈도우)

 


행 삭제

CTRL + X

다음 행 추가

CTRL + Enter 

이전 행 추가

Ctrl + Shift + Enter 

 행 위/아래 이동

Ctrl + Shift + 위/아래 방향 화살표 키 

행 선택 

Ctrl + L

단어 선택

Ctrl + D

매칭되는 괄호로 이동

Ctrl + M

커서부터 행 끝까지 삭제

Ctrl + KK

커서부터 행 앞까지 삭제

Ctrl + K + backspace

현재 행 들여쓰기

Ctrl + ]

현재 행 들여 쓰기 제거

Ctrl + [

행 복제

Ctrl + Shift + D

행 합치기

Ctrl + J

현재 행 주석 처리/취소

Ctrl + /

문단 주석 처리/취소

Ctrl + Shift + /

되돌리기

Ctrl + Z

다시하기

Ctrl + Y

이동 취소

Ctrl + U

재이동

Ctrl + Shift + U

다음 자동완성 추천

Ctrl + space

들여 쓰기 맞추어 붙여넣기Ctrl + Shift + V

 



2.북마크 명령 단축키(윈도우)

북마크 켜고 끄기

Ctrl + F2

다음 북마크

F2

이전 북마크

Shift + F2

북마크 지우기

Ctrl + Shift + F2


3.탭 명령 단축키(윈도우)

 새로운 탭

Ctrl + N

탭 닫기

Ctrl + W

마지막 닫은 탭 열기

Ctrl + Shift + T

다음 탭

Ctrl + Tab

이전 탭

Ctrl + Shift + Tab


4.일반 명령 단축키(윈도우)

명령 창 열기

Ctrl + Shift + P

사이드바 켜고 끄기

Ctrl + KB

상태 바에서 범위 보기

Ctrl + Shift + Alt + P

파이썬 콘솔

Ctrl + '

새창 열기

Ctrl + Shift + N