OpenFrameWork

오픈프레임워크_Day63

px 2015. 6. 12. 14:04
### : 목차 구분 기호
--- : 목차 내에 항목 구분 기호
@@@ : 태그 용도 
,,, : 같은 목차 내에 구분 기호

목차
1. 이론 및 정보
2. 설정 및 그 밖에
3. 소스코드 또는 실습
4. 과제

###################################
1. 이론 및 정보
-----------------------------------
* CDN 방식
가장가까운 서버에 연결해서 사용할 수 있게 해줌
----------------------------------- 
* SCM(Software configuration management) 
CM - 형상 관리
앞에 software가 붙어서 SCM

같은 이름의 다른 거
supply chain management? 공급망 관리? 이것은 다른 거

각종 결과물에 대한 형상을 만들고, 관리, 제어하기 위한 활동

프로그램 종류  -> CVS, SVN, GIT

GIT?? 공식 사이트 -> git-scm.com

GIT은 분산형 버전 관리 시스템(DVCS)
GIT 이전에는 중앙 집중 관리 시스템(CVCS)이었음 
-> 모든 소스를 한군데에서 관리
-> 관리 용이
-> 단점 : 1.서버가 날아가면 끝임
          2.인터넷 안되면 안됨

분산형
- 소스를 서버 및 모든 사용자가 가지고 있음
- 서버는 임시 보관 장소임
- 서버가 날아가도 한명만 소스가 있으면 복구 가능
- 네트워크 안되도 괜찮음. 나중에 연결 가능


오픈 소스 원격 저장소
- github
- bitbucket
- gitlab
- yobi
...

GIT을 이해하는데 처음에는 명령어로 공부해는게 좋음
Bash shell을 이용해서 Git을 사용함

책 pdf
http://dogfeet.github.io/articles/2012/progit.html
http://git-scm.com/book/ko/v2


Working directory - 내가 코드 수정중인 디렉토리

staging directory(index) - 중간에 git directory에 넣기 전에 준비 장소
git directory(local repository) - DB

local repository에 들어가야 서버와 통신을 함

git-scm 의 git 프로그램
github에서 조금 변경한 git 프로그램
두 개의 프로그램이 다르니 필요한 것을 설치

tracked 상태 - git에 관리 되는 상태
untracked 상태 - 아직 git에 관리 되지 않는 상태, 여기서 add 하면 tracked 됨


----------------------------------- 

* 코드 아카데미
----------------------------------- 
###################################
2. 설정 및 그 밖에
-----------------------------------
* jQuery 실습시 CDN 방식으로 
----------------------------------- 
* Git 프로그램 다운
git-scm.com 에서 다운 받음



----------------------------------- 
* Git 실습 하기 위한 장소 준비
~\GitWork  폴더 만듬
해당 폴더 들어가서 우클릭 하면 추가된 요소가 보임

해당 프로젝트에서 Tomcat 처음 배울때 
수동으로 프로젝트 만드는 방식으로
폴더 및 index.html 만듬

~\GitWork\GitWebProject\index.xml
~\GitWork\GitWebProject\WEB-INF\web.xml
~\GitWork\GitWebProject\WEB-INF\classes
~\GitWork\GitWebProject\WEB-INF\bin
----------------------------------- 
* Git 설치시 맨 처음에 한번 해야하는 일
아무 폴더에서나 우클릭 "Git bash" 클릭

- 사용자 등록 - 일종의 회원가입,
     프로젝트 별로 따로 등록 가능 --global을 빼면 됨
     --global은 이 PC의 관리자를 의미

git config --global user.name "scott"
git config --global user.email "scott@scott.com"


위 내용이 실제로 어디로 등록이 되는지 확인해 보기
C:\Users\jhta\.gitconfig
안에 아래와 같이 등록이 된다
[user]
     name = scott
     email = scott@scott.com
----------------------------------- 
* 프로젝트 할 때마다 하게 되는 명령, 혹은 모든 프로젝트에서 할 수도 있음
- 관리할 프로젝트를 지정(init 명령, DB 만드는 것)

저장소를 프로젝트 폴더 안에 넣어도 되고, 따로 놓을 수도 있음

~\GitWork\GitWebProject
여기에서 local repository 만들기
여기서 git bash 안에서 아래 내용

$ git init
Initialized empty Git repository in f:/study/GitWork/GitWebProject/.git/

아래 .git 폴더 생성, 여기에 모든 local repository가 저장이 됨


----------------------------------- 
* 현재 상태 보는 명령어
git status

$ git status
On branch master

Initial commit

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        WEB-INF/
        index.html

nothing added to commit but untracked files present (use "git add" to track)
----------------------------------- 
* 특정 파일을 git에 관리 맡기도록 명령
  임시 공간에 저장이 됨

git add index.html

$ git add index.html

jhta@L4-01 /F/study/GitWork/GitWebProject (master) 
$ git status
On branch master

Initial commit

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

        new file:   index.html

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        WEB-INF/

----------------------------------- 
* 파일 내용 변경 확인(add 한 파일은 변경을 확인함)
$ git status
On branch master

Initial commit

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

        new file:   index.html

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   index.html

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        WEB-INF/
        test1.jsp
----------------------------------- 
* 여러 파일을 git에 관리 맡기도록 명령 

git add *.jsp
git add test*.jsp

$ git add test*.jsp

jhta@L4-01 /F/study/GitWork/GitWebProject (master)
$ git status
On branch master

Initial commit

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

        new file:   index.html
        new file:   test1.jsp
        new file:   test2.jsp
        new file:   test3.jsp

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   index.html

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        WEB-INF/
-----------------------------------
* stage로 올리기(곧 repository에 올릴 것들)

add는 두가지 기능 
1. 관리되지 않는 파일 관리되게
2. 관리되고 있는 파일 stage 올릴때

git add *

Changes to be committed 는 stage 상태에 있다는 말임

$ git add *

jhta@L4-01 /F/study/GitWork/GitWebProject (master)
$ git status
On branch master

Initial commit

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

        new file:   WEB-INF/web.xml
        new file:   index.html
        new file:   test1.jsp
        new file:   test2.jsp
        new file:   test3.jsp
-----------------------------------
* local repository에 저장하기

git commit

아래 vim이 뜨는데 여기에 기록을 남기라는 것임
vi를 사용할 줄 알면 그냥 내용을 기록하고 저장하면 됨


$ git commit
[master (root-commit) f6f9f2b] git commit test, 처음 변경한 git test
5 files changed, 39 insertions(+)
create mode 100644 WEB-INF/web.xml
create mode 100644 index.html
create mode 100644 test1.jsp
create mode 100644 test2.jsp
create mode 100644 test3.jsp

Warning: Your console font probably doesn't support Unicode. 
If you experience strange characters in the output, 
consider switching to a TrueType font such as
Lucida Console!

이 상태에서는 원격에 서버 업로드 가능

-----------------------------------
* vim을 띄우지 않고  commit

git commit -m "메시지..."

$ git commit -m "두번째 수정, test4.jsp 추가"
[master dec35f9] 두번째 수정, test4.jsp 추가
1 file changed, 1 insertion(+)
create mode 100644 test4.jsp

Warning: Your console font probably doesn't support Unicode. 
If you experience strange characters in the output, 
consider switching to a TrueType font such as
Lucida Console!
-----------------------------------
* Stage 상태에서 수정을 하면 다시 modified로 내려옴
-----------------------------------
* 작업 History

git log

해쉬 값은 수천, 수만번을 commit해도 중복이 안됨

$ git log
commit dec35f9589a7de34449c48e4c49b175d05b307e2
Author: scott <scott@scott.com>
Date:   Fri Jun 12 12:29:26 2015 +0900

    두번째 수정, test4.jsp 추가

commit f6f9f2b2426e2216815288cb01df714e5109a3db
Author: scott <scott@scott.com>
Date:   Fri Jun 12 12:17:45 2015 +0900

    git commit test, 처음 변경한 git test
-----------------------------------
* GitHub 서버에 등록

github.com 에서 New repository 클릭
이름 넣고 Create

git remote add origin git@github.com:ankptilh/GitWebProject.git
뒤에 긴 주소를 origin 이라는 이름으로 쓰겠다

$ git remote add origin git@github.com:ankptilh/GitWebProject.git

jhta@L4-01 /F/study/GitWork/GitWebProject (master)
$ git remote
origin

jhta@L4-01 /F/study/GitWork/GitWebProject (master)
$ git remote -v
origin  git@github.com:ankptilh/GitWebProject.git (fetch)
origin  git@github.com:ankptilh/GitWebProject.git (push)

fetch는 가져올때, push는 올릴때 서버 주소
-----------------------------------
* GitHub 서버에 올리기
현재 내가 쓰는 프로젝트 별명은 master 임
내가 작업한 소스를 서버에 등록

git push origin master

-----------------------------------
* git help 명령어로 명령어 찾기
$ git help -a
----------------------------------- 
###################################
3. 소스코드 또는 실습 
-----------------------------------
3-1
생성 - AJAX 연습 - js를 jquery로 변경
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/jquery01.html

<!DOCTYPE html><html><head><meta charset="EUC-KR">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
     $(document).ready(function() {
          $("#btn").click(function() {
               //alert($("#name").val());
              
               // jQuery안에 포함된 Ajax 쓰기              
               // get방식으로 요청, post는 post 방식
               $.get("jquery01_proc.jsp",
                    {name:$("#name").val()},
                    function(data) {
                         //alert(data);
                         $("#message").html(data);                        
                    });
              
          })
     });              
</script>
</head><body><h1>jQuery를 이용한 Ajax 요청</h1>
이름 : <input type="text" name="name" id="name"/><br/><br/>
<input type="button" value="서버에 요청" id="btn"/>
<hr>
<div id="message"></div></body></html>
----------------------------------- 
3-2
생성 - AJAX 연습 - js를 jquery로 변경
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/jquery01_proc.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<%     request.setCharacterEncoding("utf-8"); %>
안녕하세요. ${param.name}님~~ 방문을 환영합니다.
----------------------------------- 
3-3
생성 - AJAX 연습 - 
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/jquery02_proc.jsp

<?xml version="1.0"?>
<%@ page contentType="text/html; charset=EUC-KR"%>
<result>
     <info>
          <no>가</no>
          <name>홍길동</name>
          <job>회사원</job>
     </info>
     <info>
          <no>나</no>
          <name>임꺽정</name>
          <job>농업</job>
     </info>
     <info>
          <no>다</no>
          <name>신돌석</name>
          <job>상업</job>
     </info>    
</result>
----------------------------------- 
3-4
생성 - AJAX 연습 - 
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/jquery02.html

<!DOCTYPE html><html><head><meta charset="EUC-KR">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
     $(document).ready(function() {
          // 정식 방법
          $.ajax({
               type:"GET",
               dataType:"xml",
               url:"jquery02_proc.jsp",
               success:function(data){
                    var xmlData = $(data).find("info");
                    //alert(xmlData.length);
                    if(xmlData.length > 0){
                         var contentStr = "";
                         $(xmlData).each(function() {
                              contentStr += $(this).find("no").text() + ", "
                                             + $(this).find("name").text() + ", "
                                             + $(this).find("job").text() + "\n"
                         });
                         alert(contentStr);
                    }
               }
          });
     });              
</script>
</head><body></body></html>
----------------------------------- 
3-5 
생성 - AJAX 연습 - member_json1.jsp
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/jquery03.html

<!DOCTYPE html><html><head><meta charset="EUC-KR">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
     $(document).ready(function() {
          // 정식 방법
          $.ajax({
               type:"GET",
               // json은 생략함
               //dataType:"xml",              
               url:"member_json1.jsp",
               success:function(data){
                    var jsonData = $.parseJSON(data);
                    alert(jsonData.length);
                   
                    //alert(xmlData.length);
                    if(jsonData.length > 0){
                         var contentStr = "";
                         $(jsonData).each(function(i) {
                              contentStr += jsonData[i].no + ", "
                                             + jsonData[i].name + ", "
                                             + jsonData[i].job + "\n";
                         });
                         alert(contentStr);
                    }
                   
               }
          });
     });              
</script>
</head><body></body></html>
----------------------------------- 
###################################
4. 과제
-----------------------------------
-----------------------------------
###################################
5. 과제 해결
-----------------------------------
-----------------------------------
###################################
6. 기타
-----------------------------------
-----------------------------------
###################################


저작자표시 비영리 변경금지 (새창열림)