Julyee Blog

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");
    });
});

HTML5

Semantic markup

HTML5 = HTML + CSS3 + JavaScript

- 컴퓨터가 웹상의 정보의 의미를 이해할 수 있도록, 문서를 논리적인 구조로 작성하는것
- 구조와 내용(컨텐츠)을 완전히 분리함으로써, 검색시, 정확하게 분류될 수 있게 함

참고 사이트: http://www.w3schools.com/html/html5_semantic_elements.asp

전체 구조:
1.<!DOCTYPE>: 어떤 HTML버전을 쓸것이에 대한 정의
2.<header>: 브라우저에서는 랜더링 되지 않는 스크립트나 메타데이타 포함시킴
3.<body>: 브라우저에서 랜더링 되어 사용자가 볼수있는 요소를 포함시킴

e.g.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" /> -end tag가 없으므로 '/'를 붙임
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

HTML를 이루는 3가지 중요 구성요소
1.태그(Tag) - 괄호<>안에 들어가는 요소들
브라우저에게 어떤 타입의 html요소인지 알려줌
2.속성(Atrribute) - 태그안에서 기능을 추가하고 싶을때, value와 함께 작성
3.컨텐츠(Content) - 태그 안에 들어가는 내용물

e.g.
<p align="left">내용</p>
<p> : tag
align="left" : attribute="값"
내용: content

▶ Head Elements

1.<title>: 브라우저에 제목에 나타남, 즐겨찾기나 검색엔진에서 이것으로 찾을수 있음.
2.<meta>: 문자 종류, 검색엔진에서 웹페이지의 목적을 찾아낼때, 혹은 키워드를 찾을때, 브라우저가 웹페이지를 일정한 시간마다 새로고침을 하게 만들때 등.. 유용하게 쓸 수 있음.
e.g.
<meta charset="UTF-8">
<meta name="keywords" content="HTML5, CSS3, jQuery, JavaScript">
<meta http-equiv="refresh" content="300"> (60초마다 새로고침)
3.<style>: css코드를 직접 혹은 파일을 링크해 추가할때 사용함.
e.g.
<style type="text/css">내용</style>

4.<script>: javaScript코드 작성, javaScript 파일을 링크해 추가할때 사용.
5.<noscript>: 스크립트를 사용할수 없게 한 브라우저에 경고메세지나, 대신할수 있는 것을 작성할때 사용.
e.g.
<head>
  <script src="파일명.js"></script>
  <noscript>
    <h2>귀하의 브라우저는 자바스크립트를 사용할 수 없으므로
웹페이지의 작동이 제대로 되지 않을 수 있습니다.</h2>
  </noscript>
</head>
6.<link>: css파일을 따로 저장했을 경우, 현 페이지에 연결할때 사용
css파일연결:
<link rel="stylesheet" type="text/css" href="링크주소" />

▶ Body Elements
body요소에 포함되는 3가지 중요속성
1.id: 한 요소에 한번 사용됨 (unique해야함)- css/javaScript가 사용 가능하게 함.
2.class: 여러요소들에 한번에 정의할때 사용됨.
3.style: html코드에 바로 css 스타일을 적용하는 것 (되도록 사용하지 않는게 좋음)

e.g.
<div id="d1">
<p id="divHead" class="heading">Head1</p>
<p id="divContent" class='content">Content1</p>
</div>
<div id="d2">
<p id="divHead2" class="heading">Head2</p>
<p id="divContent2" class='content">Content2</p>
</div>

블록과 인라인 요소
차이:
블록: full width 브라우저안에서 먼저 실행됨 (e.g. div, p)
인라인: 공간만큼 순차적으로 실행됨 (e.g. span, a, img)

e.g.
[ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ블록ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ]
[ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ블록ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ]
[ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ블록ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ]
[ㅇ인라인ㅇ][ㅇㅇㅇ인라인ㅇㅇㅇ][ㅇ인라인ㅇ]

CSS로 스타일 변경가능
종류:
1.block: 블록으로 렌더링
2.inline: 인라인으로 렌더랑
3.none: 렌더링 안함
line break tags:
1.<br>: 한줄내리기, 인라인 요소도 한줄 내려가게 됨
2.<hr>: 가로줄 삽입

Container 요소
e.g. <p>, <div>, <span>
그룹으로 묶어서 스타일을 지정할 수 있음.

link요소
1.외부파일 링크
<a href="http://www.~ /">설명</a>
2.내부파일 링크
<a href="#위치">설명</a>
3.Anchor (바로가) - 같은페이지에서 이동 가능
<a id="로컬링크">설명</a>

이미지
<img src="링크" height="높이px" width="넓이px" />

목차
<ul> <li></li> </ul> - 순서 없이
<ol> <li></li> </ol> - 순서 매겨서

테이블
-웹페이지 레이아웃 또는 데이터 테이블에 사용 가능

table
<table> - 테이블 테그 시작/종료
headers
<thead> -써도되고 안써도 됨
body
<tbody> -써도되고 안써도 됨
cell
<tr> -테이블의 한 줄(row), th&td 밖에 정의
<th> -테이블 데이터중 헤더 표시
<td> -테이블 하나의 셀

footer
<tfoot> -써도되고 안써도 됨
기타:
<caption> -설명
<colgroup> -columns 묶는것
<col>-colgroup안의 정의

폼
<form> - 폼 테그 시작/종료
name- 폼이름
value
disabled

입력
<input type="속성">
속성:
button, file, reset, submit,
text, password, search, email, tel, number,range, url,
checkbox, radio,
month, week, date, datetime, time,
image, color, hidden,

<textarea>
속성: cols, rows
사이즈 조절이 가능함

<select>-<option>
속성: value
드롭다운 메뉴

<button>
속성: type, submit, reset

그래픽
그래픽API로 CSS로 속성을 변경 가능
1.<svg> - 벡터 형식,xml기반
2.<canvas> - 비트맵 형식 (픽셀), javaScript

미디어
1.<video>
2.<audio>

시맨틱 마크업
마크업이란?
화면에 출력되는 구조를 정의하는 작업

마크업(Markup)이란 문서의 내용이 아니라 내용이 어떻게 배치되고 어떤 크기와 모양을 가지며 여백은 어느 정도인지를 표현하는 기술
출처: http://www.zdnet.co.kr/news/news_view.asp?artice_id=00000010047880&type=det&re=

마크업은 그 파일이 프린터로 출력되거나 화면에서 어떻게 보여야할 것인지를 나타내기 위해, 또는 그 문서의 논리적인 구조를 묘사하기 위해서, 텍스트나 워드프로세싱 파일의 특정 위치에 삽입되는 일련의 문자들이나 기호들을 말한다. 마크업에 사용되는 표지를 흔히 "태그"라고 부른다. 예를 들어 다음의 태그는 문단을 나누는데 사용된다.
출처: http://www.terms.co.kr/markup.htm