Knowledge Map

AngularJS 1.2~ 1.3버전이다.ng-repeat에 ng-show, ng-if, filter를 이용한 것이다. ng-show는 다 로딩하고 나서 보여주지만 않는 거지만ng-if는 if절에 해당하는 구문만 로딩한다.filter는 잘 모르겠다. 아마 로딩에서 바로 거르지 않을까 싶다.그리고 filter의 경우 좀더 제대로 쓰고 싶다면 커스텀 필터를 만들어서 써야 한다.

DOM 이란 무엇인가?DOM은 HTML에 대한 매핑 레이아웃 모델이자 자바스크립트가 HTML에서 특정작업을 할 수 있는 수단이다. DOM은 HTML도 아니고 자바스크립트도 아니지만 세가지는 서로 긴밀하게 연결되어야 있다. 이것은 엘리먼트의 조합(객체)이자 그러한 객체를 표시하는 순서(모델)이며 자바스크립트에서 제공하는 다양한 메소드를 이용해 돌아다니는 동안 전체 구조(문서)의 일부를 추가, 삭제, 수정하는 무한한 접저을 제공한다. HTML은 문서이며 문서안에는 수많은 객체로 구성돼 있다. 이러한 객체는 특정순서(모델)로 나타난다. DOM트리DOM은 웹 브라우저에서부터 시작한다. 웹사이트를 방문할 때 브라우저는 HTML을 문서로 렌더링하고 각 엘리먼트를 통해 읽으며, 그것들을 사용자에게 보여준다. 이 과정..

출처 : https://namu.wiki/w/UDP 1. 개요User Datagram Protocol의 축약어로 컴퓨터가 다른 컴퓨터와 데이터 통신을 하기 위한 규약(프로토콜)의 일종이다. TCP는 세계 통신표준으로 개발된 OSI 모형에서 4번째 계층인 전송 계층(Transport Layer)에서 사용하는 규약이다. 동일 계층에서 사용하는 또다른 프로토콜로 TCP가 존재한다. 2. 개발동기와 특징 네트워크로 통신을 하는데 있어서 신뢰성을 얻기 위해 프로그램들은 TCP로 통신을 하고 있었다. TCP는 데이터 신뢰성을 보장하기 위한 방식이기 때문에 누락된 데이터를 모두 받기위한 메커니즘이 정의되어 있다. 이것이 이메일이나 파일전송과 같은 분야에서는 필수불가결의 요소였으나 실시간 스트리밍 서비스에서는 걸림돌로..

참고사이트http://bendetat.com/karma-and-mocha-for-angular-testing.htmlhttp://webframeworks.kr/tutorials/angularjs/angularjs_unit_test/ AngularJS 관련 스터디를 준비하면서 Unit Test 대목이 나왔다. 참고해라고 줬던 책이 출판되어 나온지 2,3년이 지났기 때문에 지금의 Angular, Karma, Jasmine, Mocha와 버전이 많이 달랐다. 당연히 책대로 하니까 잘 안되었고 할수 없이 인터넷에서 최대한 찾아볼수밖에 없었는데 그게 참 시행착오를 많이 겪은거 같다. 일단 Unit 테스트를 위해서 사용한 것은 AngularJS, Mocha, Chai, Karma, PhantomJS 였다.Jasmi..

▼문서 객체 모델(DOM, Document Object Model)DOM은 책, 기사, 용어집 등 구조를 띤 모모든 문서의 윤곽이 기능하는 것과 굉장히 유사한 방식으로 기능한다. DOM에는 최상위 수준의 항목, 중첩된 항목, 그룹을 형성하는 덩어리(한 장에 포함된 여러 페이지와 책 한 권에 포함된 여러 개의 장과 같이)가 있다. 이러한 항목을 노드(Node)라고 하며 DOM안의 몯느 노드는 그것을 둘러싼 노드와 관계를 맺는다. 이러한 관계는 현실세계의 가족과 마찬가지로 부모, 자식, 형테의 형태를 가진다. ㅇ부모부모 노드는 다른 노드를 담고 있는 노드를 말한다. ex) 부모 : ||| 자식 : ..... ㅇ자식자식노드는 부모노드 안에 위치한다. ㅇ형제형제는 같은 레벨에 위치한다. 12..

출처 : 개발자와 디자이너가 함께 보는 자바스크립트 프로그래밍 점진적 기능향상 ▼정의웹 디자인 커뮤니티에서는 콘텐츠의 중요성을 강조하는 안내지침이 있는데 그것을 점진적 기능 향상(Progressive Enhancement)이라한다.가장 기본적인수준의 점진적 기능향상에서는 HTML, CSS, 자바스크립트를 기능적으로 분리한다.점진적 기능 향상은 웹 디자인에 대한 계층화된 접근법으로서 콘텐츠와 사용자, 접근성에 초점을 둔다. 첫 단계는 구조(structure), 표현(presentation, 행위(behavior) 이라는 계층으로 나타내는데 이 3가지를 분리해내는데 있다.이것은 웹사이트나 애플리케이션에 대한 상향식, 역방향 제작 모델에 해당한다. 첫번째 계층 구조 : 콘텐츠에 집중하고 콘텐츠에 시맨틱 및 유..

출처 : http://dimdim.tistory.com/entry/javascript%EC%97%90%EC%84%9C-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%B2%98%EB%A6%AC%EB%A5%BC-%EC%9C%84%ED%95%9C-addEventListener-%ED%95%A8%EC%88%98-%EC%84%A4%EB%AA%85 javascript에서 addEventListener 함수를 이용하여 DOM Element에 이벤트 처리 함수를 추가할때 Capturing 과 Bubbling 두가지의 전달방식을 선택할 수 있다. 1. Capturing - Capturing은 이벤트가 발생한 target element의 최상위 부모부터 target element까지 순차적으로 내려오면서 이벤트..

출처 : http://gorani7.tistory.com/4 carousel slide를 쓸려고 하면 angularjs에서는 제대로 되지 않는다.그 이유는 angularjs 내의 animate와 충돌을 하기 때문이라고 한다. 해결책은 아래와 같다. ng-non-bindable은 angular가 a tag에서 bind하지 않고 compile skip하라는 컨트롤 이라고 한다.target="_self" ng-non-bindable="" 위의 두가지를 다 써야 컴파일 에러가 멈췄다고 한다. 한가지씩은 안써봐서 잘 모르겠지만 2개 함께 썼을 때에는 잘 작동했다.bootstrap UI까지 쓸 필요 없이 간단히 특정 이미지들만 올린다면 이것도 괜찮은 방법 같다.==============================..

ㅇSPRING 에서 POST와 GET을 동시에 받을 수 있는 방법GET/POST를 둘다 선언@RequestMapping(value="/" , method = {RequestMethod.GET, RequestMethod.POST})method를 지우는것도 방법이라고는 하는데 가끔 안 먹혀서 둘다 명시하는게 더 나은거 같다. ㅇURL주소 바꾸기.여기서 말하는 주소바꾼다는건 redirect써서 하는게 아니라 A->B로 forward할떄 A라는 주소를 그대로 보여주는게 아니라 B주소로 보여지게 만드는 것이다.이걸 왜 하고 싶어했냐면 A는 내부 프로세스주소이고 B는 클라이언트가 보는 주소라서 계속 노출되는 주소만 노출되고 싶었다.즉 forward하면서 redirect하는 방법이라고 하면 될려나. web.xml 에..

참조 사이트 : https://nulpulum.gitbooks.io/angularjs-spa/content/chapter1-1.htmlhttp://jeonmyung.tistory.com/entry/AngulrsJS-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-01-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B0%8F-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1 1. 개발도구 설치- Git 설치http://www.git-scm.com/downloadshttp://www.git-scm.com/book/ko/v2 - NodeJS 설치http://www.nodebeginner.org/index-kr.ht..