가카리의 공부방

5. 사용자와 커뮤니케이션하기 HTML은 form을 통해서 사용자와 커뮤니케이션할 수 있는 기능을 제공한다. 자바스크립트에는 사용자와 정보를 주고 받을 수 있는 간편한 수단을 제공한다. 1) alert 경고창이라고 부른다. 사용자에게 정보를 제공하거나 디버깅등의 용도로 많이 사용한다. 2) confirm 확인을 누르면 true, 취소를 누르면 false를 리턴한다. 3) prompt 4) Location 객체 Location 객체는 문서의 주소와 관련된 객체로 Window 객체의 프로퍼티다. 이 객체를 이용해서 윈도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다. 5) 현재 윈도우의 URL 알아내기 아래는 현재 윈도우의 문서가 위치하는 URL을 알아내는 방법이다 ..

4. Browser Object Model(BOM)BOM(Browser Object Model)이란 웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다. BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다. 따라서 BOM에 대한 수업은 Window 객체의 프로퍼티와 메소드의 사용법을 배우는 것이라고 해도 과언이 아닐 것이다. 본 토픽의 하위 수업에서는 Window 객체의 사용법을 알아볼 것이다. 1) 전역객체 Window 객체는 식별자 window를 통해서 얻을 수 있다. 또한 생략 가능하다. Window 객체의 메소드인 alert을 호출하는 방법은 아래와 같다. 다음도 동일 객체를 만든다는 것은 결국 window 객체의 프로퍼티를 만드는..

3. Object Model 웹브라우저의 구성요소들은 하나하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다. 이 객체들은 서로 계층적인 관계로 구조화되어 있다. BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다. 이 관계를 그림으로 나타내면 아래와 같다. (출처 : http://learn.javascript.ru/browser-environment) var imgs = document.getElementsByTagName(‘img’); imgs[0].style.width = ‘300px’; //width값을 바꿔줌. window.document : DOM(Document Object Model)을 의미함 window.navigator..

1. 웹브라우저와 Javascript Javascript 여기서 onclick 부분에서 클릭이 되면 클래스이름을 dark로 하라는 의미이다. 클릭 후 결과 2. HTML에서 JAVA Script 로드하기 1) inline 방법 inline 방식은 태그에 직접 자바스크립트를 기술하는 방식이다. 장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다. 하지만 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다. ex_1.html onclick은 HTML 문법 alert는 자바스크립트 문법임 2) script 태그 방법 ex_2.html 3) 외부 파일로 분리 js를 별도의 파일로 분리할 수도 있다. 장점은 보다 엄격하게 정보와 제어를 분리할 수 있다. 하나의 js 파일을 여러 웹페이지에서 로드함으..

22. 환경파일의 관리 데이터 베이스 접속 인증 ID와 패스워드 같은 내용이 들어있는 파일이 환경파일이다.1. 일단 2개의 파일을 만들자 index.php password.php 여기서 설정 파일은 password.php가 된다. 2. 즉 password.php는 버전관리에서 제외해야 한다는 의미이다. 이를 위해 password.php 파일을 ignore 해주자. 3. 아래와 같이 Ignore exact filename(s)를 누른다. 4. 그리고 커밋 한다. 5. 그 다음 Push를 해서 원격 저장소로 데이터를 올리자. 6. exnode1_clone으로 이동 후 Pull을 해서 데이터를 가져와보자. OK을 누른다. 7. 그 다음 프로젝트 폴더로 가면 password.php 파일이 없는 것을 볼 수 있다..

21. 버전관리에서 제외하기(.gitignore) 프로젝트 중 버전관리를 할 필요가 없는 파일들을 설정해보자. 1. 먼저 프로젝트에서 쓸모없는 파일을 만들자. 2. 쓸모 없는 파일을 오른쪽 클릭 후 Ignore을 누른다. 3. 여기서 Ignore exact filename(s)는 파일 이름이 같으면 무시한다는 의미이다. Ignore all files with this extension은 확장자가 .txt파일을 무시한다. 4. 두번째 라디오 버튼을 선택하고 OK을 누르면 다음과 같이 .gitignore 파일이 생긴다.*.txt는 확장자가 txt인 모든 파일을 무시한다는 의미이다. 5. 이 상태에서 커밋을 한다. 그러면 모든 저장소에서 txt파일은 버전관리를 무시하게 된다. 6. 한가지 팁을 주면 .giti..

20. Tag(태그) 여러 가지 버전들이 생겼을 때 버전들 안에서 의미있는 버전 즉, 최종 버전 같은 것을 기록하는 것을 태그라고 한다. 1. 태그를 지정한 버전을 선택한 후 오른쪽 마우스 버튼을 눌러서 tag를 클릭하자 2. Tag Name을 작성한 뒤 Add Tag를 누른다. 3. 다음과 같이 입력한 태그가 기록 된다. 4. 만약 브랜치를 생성할 때 다음과 같이 Specified commit에 태그명을 넣어주고 브랜치를 생성하면. 5. 만든 브랜치는 그 태그에 해당하는 버전을 가지게 된다. 6. 만약 원격 저장소로 푸쉬를 하면 태그는 푸쉬가 되지 않는다. Push를 할 때 아래 Push all tags를 체크하고 Push를 해야 모든 태그가 원격 저장소로 올라가게 된다. 7. 깃헙으로 가서 relea..

19. stash(안전한 곳에 보관해 둠) 무언가 코딩을 하다가 갑자기 긴급하게 버그를 수정해 된다면? 아직 완성되지 않은 코딩 때문에 프로그램이 동작하지 않을 수도 있다. 즉 아직 커밋하지 않은 내용을 임시로 저장해두는 기능을 stash라고 한다. 1. index.html을 한 뒤 무언가 수정을 해보자 2. Stash 버튼을 눌러보자3. 그러면 stash를 할 때 남길 메시지를 입력한 후 OK을 누른다. 4. 그러면 다음과 같이 지금까지 수정한내용이 있어야 되는데 Uncommited changes 가 사라졌다. 5. 왼쪽에 STASHES를 누르면 아까 수정한 내용들이 들어갔다.6. 이 상태에서 소스에서 핫픽스를 수행한 뒤 커밋을 하자. 7. 다음과 같이 잘 커밋이 되고 이제 STASH의 내용을 가져와 ..

18. 비교, 병합 외부 도구 연결 충돌이 났을 때 수정을 하는데 도와주는 소프트웨어를 diff라 한다. diff 프로그램은 다음 링크에 가보면 있다. http://en.wikipedia.org/wiki/Comparison_of_file_comparison_tools 이중 유료지만 강력한 툴인 Beyond compare 툴을 사용해본다(30일 무료) 1. http://www.scootersoftware.com/ 를 방문해서 다운받아서 설치한다. 2. 설치가 끝난 후 소스 트리의 다음 경로로 간다. Tools -> Options(윈도우 기준) 3. Diff탭으로 간 뒤 다음과 같이 세팅을 한다. 4. 비교할 파일을 선택한 후 Actions -> External Diff를 누른다. 5. 다음과 같이 프로그램..

17. 충돌의 해결 충돌은 서로 같은 소스 부분을 수정해서 발생하는 현상이다. 1. 일부러 충돌을 만들기 위해서 exnode1에서 충돌을 작업을 한다. 그리고 커밋을 해둔다. 2. 그다음 exnode1_clone에서 충돌을 만들기 위해 동일한 위치의 소스를 수정 후 PULL을 한 뒤 커밋을 하면 다음과 같이 충돌이 발생한다. 3. exnode_clone으로 가보면 충돌 난 부분을 볼 수 있다.index.html 파일 4. 그러면 소스를 수정해서 충돌을 해결하자. 5. index.html에서 오른쪽 버튼을 누르고 Resolve Conflicts -> Mark Resolved를 누른다. 6. 다음 창이 뜨면 Ok를 누른다. 7. 다음과 같이 충돌이 해결된 상태로 된다. 8. 그리고 바로 커밋을 해주자. 그러..