Julyee Blog

2016년 4월 27일 수요일

키보드 맵핑 / 키보드 배열 바꾸기

sharpKeys
다운로드 주소: https://sharpkeys.codeplex.com/

설정방법:

왼쪽에서 바꾸고 싶은 키를 선택한다.
Type Key 클릭 후, 키보드에서 키 눌러도 됨

오른쪽에서 바꿀 설정을 선택해준다.
한/영: 0x0072 (00_72)
한자: 0x0071 (00_71)

ok 누른 후 Write Registry 클릭
컴퓨터 재부팅 해주면 됨

> 맥북에 부트캠프에 윈도우 10에서 작동 확인 (2016.4.27)

2016년 4월 21일 목요일

Debuging - Chrome Developer Tools

chrome developer tools

Chrome 공식사이트 Tutorial: https://developer.chrome.com/devtools

디버깅 순서:
1. 크롬에서 파일 실행
2. F12 클릭
3. 디버깅하고 싶은 요소에 따라 탭(element, sources, console, network etc..) 선택

<HTML요소 검사> :Elements 탭
- DOM 트리 node 별로 따라가서 오류를 찾는데 용의

종류:
1. DOM Tree
DOM editor-> Elements 탭의 Properties or페이지 오른쪽 마우스 클릭후 inspect (Ctrl+Shift+i)

바꾸고 싶은 글자가 있을때, 오른쪽 마우스 누른후 edit Text -> 변경가능

2. Break On (오른쪽 클릭)
3. Edit as HTML: 바로 수정가능함 (원본은 수정되지 않음)
4. Hover
hover 했을때 색으로 구분 하는 요소
-하늘색: 컨텐츠
-보라색: 패딩
-노란색: 마진
5. Bread Crumbs: 화면 아래 노드의 계층을 루트인 <html>부터 차례대로 나타냄

<CSS> :Elements 탭
- layout 이나 스타일 속성을 찾는데 용의

CSS Style editor -> Elements 탭의Style

1. Toggle Element State (a테그 속성만 가능)
2. Edit Element Specific CSS properties
3. Edit Class Specific CSS properties
4. Edit Element type Specific CSS properties
Disable a CSS Style- 선택된 요소앞의 체크박스표시로, CSS 속성을 껏다, 켰다 할수 있음
5. View and edit layout- 마진,보더,패딩,높이,넓이 요소를 수정 가능

<JavaScript> :Console / Sources탭
- JavaScript의 오류를 찾는데 용의

Console 탭에서 확인하는 흐름
1. Console 클릭 -> 에러 메세지가 뜸
2. 오른쪽에 에러난 라인 번호 클릭하면 소스로 넘어감
3.에디터로 돌아가서 수정
4. 크롬으로 돌아와 F5(새로고침)

에러내용:
Uncaught SyntaxError: Unexpected identifier
: 문법 오류 (오타 체크)

Page is Loaded
:오류는 나타나지 않지만 Function을 실행시켜 보면 오류가 있을 경우 오류가 나타남

Uncaught ReferenceError: 함수명 is not defined
:함수명이 같지 않을 경우, 혹은 작성되지 않았을 경우 나타남

Sources 탭에서 세부적인 내용을 확인/수정
1. Sources 클릭 -> Ctrl+p 후 파일 선택 -> 코드를 바로 열람
2. Break Point설정 (앞의 줄 번호를 클릭하면 됨)
3. javaScript부분 실행
->다음줄로 넘어가기: Step over (F10)
->끝내기: Resume execution (F8)
*참고
Watch Expressions에 변수에 담긴 값을 보고 싶을때,
+ 누르고 변수 이름 넣으면 값 추적 가능

2016년 4월 18일 월요일

IDE - Sublime Text 3

Sublime Text 3

Sublime Text 공식사이트: https://www.sublimetext.com/
Package Control: https://packagecontrol.io/

다운로드 및 설치:
공식사이트에 들어가서, 다운로드 후 설치한다.

구성:
1. Package Control 설치
- https://packagecontrol.io/installation 로 들어가서, Sublime Text 3 코드를 복사한다.
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

- Sublime Text 3를 실행후 [Ctrl + `] 눌러 콘솔창을 연다.
- 복사한 코드를 붙여 넣고 enter 후 프로그램을 재 실행한다.
- [Ctrl+Shift+P]를 눌러 설치된 것을 확인한다.

2. Plug-in 설치
- [Ctrl+Shift+P]를 눌러 Command Palette를 열고, 'install'이라고 입력후, 'install Package'를 선택한다.
-[Ctrl+Shift+P]를 다시 누르고 'plug-in 명'을 검색후 선택하면 설치가 된다.

설치한 plug-in
1. Emmet : 코딩할때 기능 추가 해줌 (속도 up)
2. Color Picker: [Ctrl+Shift+C] 누르면 색상 선택해서 번호를 알수 있다.
3. SublimeLinter: 설치후 CSS / JS / Angular.js + Sublime Linter 설치하면, 문법오류(Linting)해줌.
4. SidebarEnhancement : 웹브라우저/local host로 바로 페이지 열수 있음
설치후, 열고 싶은 파일을 선택후 오른쪽 클릭하면, Open in Browser 나옴
local host 위치 지정해주고 싶으면, 오른쪽 클릭 후 Projects > Edit Preview URLs 클릭후
SidebarEnhancements.json 파일에

{

// 1st Project

"/프로젝트 위치": {

"url_testing":"http://localhost/프로젝트명",

"url_production":"http://www.프로젝트 주소"

}

// 2nd Project

"/Users/이름/프로젝트위치/julyee": {

"url_testing":"http://localhost/julyee",

"url_production":"http://www.julyee.com"

}

위와 같이 넣어주면 됨

추천 plug-in
SublimeCodeIntel

단축키:
커맨드 팔레트열기 : Ctrl + shift + P

< Editing 단축키 >
1. 한줄 복사하기: Ctrl + Shift + D
2. 한줄 지우기 : Ctrl + X
3. 커서부터 끝까지 지우기 : Ctrl + KK
4. 커서부터 맨 앞까지 지우기: Ctrl + K + backspace
5. 다음줄 추가 : Ctrl + Enter
6. 이전줄 추가 : Ctrl + Shift + Enter
7. 현재 줄에 indent 추가하기 : Ctrl + ]
8. 현재 줄 indent 삭제하기: Ctrl + [

9. 한줄 선택후 줄 위치 변경 : Ctrl + Shift + 위/아래 방향키
10. 현재 줄 맨 뒤에 아래 줄 붙이기: Ctrl + J
11. 한줄 선택: Ctrl + L
12. 한 단어 선택: Ctrl + D
13. 같은 단어 한번에 선택 : Alt + F3

14. 여러줄 한번에 선택하기: Ctrl + 원하는 줄 클릭

주석처리
한줄: Ctlr + /
블록: Ctrl + Shift + /

기타기능:
1. 커서 모양 변경: Insert (Fn+Enter)
   - 커서 모양이 세로에서 가로 모양으로 바꿀수 있다.

2. GoTo 기능:
[Ctrl + p + :라인번호]: 이동하고 싶은 라인으로 바로 이동
[Ctrl + ; ] : 원하는 단어 조회
[Ctrl + r ] : id값 조회

3.Sublime Text 는 기본적으로 vi 단축키가 내장되어있다.
But! 기본적으로 비활성화가 되어있으므로 활성화 시켜줘야한다.

<활성화 방법>
Preferences -> Settings - User -> Ctrl+F : Vintage -> "Vintage"를 "" 로변경

왼쪽 맨 하단에 Insert Mode 라고 뜨면 활성화 완료
Command 모드: ESC
Edit 모드: i

4. Regular Express 사용해서, 원하는 부분 선택후 바꾸기
Ctrl + H (Replace) 하고, [.*] 버튼을 누른다.
^\n (빈줄을 찾아라) 후 Replace를 빈칸으로 두면, 한줄씩 띄어진 공간이 삭제된다.

indent 사이즈 조절
Preferences -> Setting -User

e.g.
{
    "ignored_packages":
    [
        ""
    ],
    "translate_tabs_to_spaces": true,
    "detect_indentation": false,
    "tab_size": 2
}

프로젝트 폴더 추가:
Project -> Add Folder to Project -> 폴더지정

Node.js - Express

Express

Express is one of Node.js' external modules for server-side scripting.

Express를 사용해서 Node.js로 웹서버를 구축하기.

Express공식사이트: http://expressjs.com/

준비과정:
1. Node.js 다운로드 & 설치

2. npm으로 모듈 설치

-> 최종적으로 원하는 폴더의 하위폴더 node_modules에 저장됨.

*npm은 패키지를 관리하는 도구 그 자체 혹은 그 도구의 명령어를 이르는 말로 이 용어는 맥락에 따라 api, 패키지, 라이브러리, 모듈 등으로 부를 수 있습니다.

Express
- window 홈 -> cmd -> 원하는 폴더로 이동 (cd 폴더 path)
- npm install express@4.13.4(express 4.13.4 설치함)

body-parser
- npm install body-parser1.15.0 (body-parser 1.15.0 설치함)
: body에서의 HTTP GET과 POST 요청과 쿼리 파라메터를 분석 가능하게 함

작성 및 실행:
1. 파일 만들기: server.js 을 만든다.
2. 코드 입력
var express = require('express');
var app = express();
app.use('/', express.static('./'));
app.listen(8000);
3. run -> run as -> node.js application
4. 웹브라우져에서 localhost:8000 으로 들어가서 작동되면 끝.
5. 이클립스의 콘솔창에서 정지 누르면 서버 종료.

IDE - Eclipse

Eclipse

HTML, CSS, JavaScript + Node.js 개발환경 만들기

Eclipse 공식사이트: https://eclipse.org/
Oracle Java 공식 사이트: http://www.oracle.com/technetwork/java/index.html

준비과정:
Eclipse 설치

1. Java JRE or JDK가 설치 되어 있어야함.
-Java SE Development Kit 8 설치함.

2. Eclipse 다운로드 및 설치
-내 OS와 맞는 버젼을 다운로드 한다.
-Eclipse IDE for Java Developers 선택해서 설치

3.Node.js plug-in for Eclipse 설치
- Eclipse 실행후 -> Help -> Eclipse Marketplace 선택
- nodeclipse 라고 검색 후 Go-> install -> 약관 동의 후 -> finish
- Nodeclipse 1.0.1 설치함

4. html editor plug-in 설치
- HTML Editor (WTP) Mars 설치함

5. HTML 에디터 설정
설정: Window -> Preferences -> General의 Editors 의 File Associations 선택 후 ->
*.html 선택 -> Associated editors 의 Add 클릭 -> JavaScript Editor과 CSS Editor 추가

6. Eclipse Theme plug-in 설치
- Eclipse Color Theme 1.0 설치함
- Window -> Preferences -> General -> Appearance -> Color Theme -> 원하는 색상 선택

7. Vrapper (Vim) plug-in 설치
참고: http://vrapper.sourceforge.net/documentation/index.php?topic=configuration
설정: window -> Preferences -> General -> Keys -> Vim's key bindings 선택 후
아래 목록에서 원하는 기능의 단축키를 설정 할 수 있음
e.g.
Page Down: Ctrl+F
Page Up: Ctrl+B

Shortcut 설정 방법:
Window -> Preferences->General->Keys -> "vrapper"라고 검색 -> 토글하는 단축키 설정후 (e.g. Alt+T) -> apply -> ok

8. Emmet plug-in 설치
- html 코딩 속도 up

*주의사항*
Plug-in 기존 설정을 유지하고 싶을땐, 사용중인 Workspace의 .plugins 폴더를 복사해야함.
폴더 위치: workspace -> .metadata -> .plugins

plug-in 삭제방법:
Help -> About Eclipse -> Installation Details 버튼 -> plug-in 선택 -> Uninstall 클릭

* Eclipse에 Dynamic Web Project 가 없을 경우
1. Help > Install New Software
2. Work Width에 Mars - http://download.eclipse.org/releases/mars/201602261000 입력
3. Pending이 끝난 후 Web, XML, Java EE and OSGi Enterprise Development 에서
Eclipse Java EE Developer Tools를 선택후 Next 클릭 -> 동의 및 설치
4. 재 시작
5. File -> New -> Other -> Web -> Dynamic Web Project

추가적으로 아래 설치가능
- Eclipse Java Web Developer Tools
- Eclipse Web Developer Tools
- Eclipse XML Editors and Tools

작성:
1.Project 생성
- File -> New -> Project -> Node 선택 -> Node.js Project 선택 -> Next -> 프로젝트명 입력 후 Finish

2. File 만들기
- 프로젝트명 오른쪽 클릭 -> New -> File -> 파일명.js (JavaScript 파일 만들어짐)

실행:
1.파일명.js 안에 코드입력
- console.log("Hello"); 라고 입력후
- 라인2에서 더블클릭 하면 breakpoint가 셋업됨.
2. 실행
- Run -> Run As -> Node Application 클릭하면, 콘솔창에 Hello라고 뜨면 완료.

2016년 4월 14일 목요일

Node.js

Node.js is Server-side JavaScript.

Node.js is a JavaScript platform based on Google Chrome's V8 engine.

Node.js 공식사이트: https://nodejs.org/en/

공부할 사이트:
1. http://www.tutorialspoint.com/nodejs/

준비과정:
1. Node.js 다운로드 & 설치
2. 에디터 설치

사용방법
1. .js 파일 만들어서 코드 넣고
2. windows -> menu -> cmd 검색 -> node 파일명.js (나가기: Ctrl+c)
3. 웹브라우져에서 localhost:포트번호 로 확인

예제1. ) node.js 웹서버 만들기

var http = require('http');

http.createServer(function(req,res){
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('웹서버 만들기);
}).listen(8000);

console.log('localhost:8000에서 서버가 시작되었습니다.')

설명:
http.createServer :

2016년 4월 7일 목요일

jQuery - Effects

jQuery Effects

https://learn.jquery.com/effects/

http://www.w3schools.com/jquery/jquery_ref_effects.asp

1. .hide() & .show() & .toggle()
-속도는 milliseconds, slow, fast

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

e.g.
$("button").click(function(){
    $("p").hide(1000);
});

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide("slow");
    });
});

2. .fadeIn(), .fadeOut(), .fadeToggle(), .fadeTo()
-속도는 milliseconds, slow, fast

$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

.fadeIn() - 나타나라
.fadeOut() - 없어져라
.fadeToggle() - 껏다켰다
.fadeTo() - 불투명도 조절

3..animate()
주의사항:
- CSS에 position 주기
- 속성이름은 꼭 낙타작성법(?) 으로 해야함 (e.g. paddingLeft)
- 색깔 바꾸고 싶으면 Color Animations plugin 다운로드 받아야함

$(selector).animate({params},speed,callback);

e.g.
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '250px',
            opacity: '0.5',
            height: '150px',
            width: '150px'
        });
    });
});

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

4. Callback
2개의 동작을 작성했을때, 동시에 작동 됨을 막아줌

$(selector).hide(speed,callback);

e.g.
$("button").click(function(){
    $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
    });
});