Seungdols Company

jquery 적응기 jquery를 업무에서 많이 쓰다보니 알게 된 사실 몇가지를 적고자 합니다. 웹 개발을 하다보면 생기는 일 중에 하나가 html에 data 값을 저장 해둘 일이 필요로 합니다. 그러다보니 서버에서 프론트로 데이터를 내려주는데 이 데이터는 사용자에게는 필요한 정보는 아니니 숨겨서 보여주는 것이죠. data() 메소드 그래서 태그 안에 data를 숨겨두어야 합니다. 바로 아래처럼 말이죠. click jquery-data api를 보면 사용법이 주로 나와 있습니다. 그럼 이제 이 데이터를 쓰려면, HTML에 있는 값을 읽어 오거나, 다시 쓸 때 사용하는 게 data() 메소드 입니다. data api 이쪽에서도 확인을 할 수 있죠. 여기서 중요한 사실 하나가 있습니다. 위 코드에 ‘data..

J. Fla의 커버 노래 제목을 가져오고 싶은데, 어떻게 할까? 우연히 듣게 된 J. Fla의 커버 노래 제목을 가져오고 싶은데? 어라 이 노래 좋다. 원곡자 노래 들어봐야지 이런 생각을 하다가, 음 쉽게 할 수 있는 방법은 뭐가 있을까 하다가 JavaScript로 빠르게 제목만 가져와야지 하면서 간단하게 코드를 짜보았다. 일단 유투버의 재생목록을 클릭하여 들어갔다. J.fla의 커버 재생 목록으로 들어간다. 우측에 재생 목록이 뜨는데, 89개의 동영상 있다. 우선은 리스트의 상위 부모 노드를 찾아야 한다. 이때 크롬의 개발자 도구를 열어 HTML의 영억을 찍어 해당 li의 부모를 찾는다. 찾았더니 가 재생 목록 리스트의 상위 부모 노드더라. 그래서 우리는 상위 부모노드의 id 값이 있는지 확인 할 필요..

보통 저는 깃 명령어를 콘솔에서 입력하는 편인데.. 쓰다보면, 굉장히 귀찮아 질 때가 많습니다.. 그렇다보니 우연히 알게 된 건데, alias라는 것이 존재합니다. 역시 귀차니즘은 위대합니다. $ git config --global alias.co checkout $ git config --global alias.br branch $ git config --global alias.ci commit $ git config --global alias.st status 위 처럼, alias.co 로 checkout을 입력하게 되면, git co만 입력 해도 git checkout을 입력한 것과 동일합니다. 참고로 --global 옵션을 주게 되면, 당연히 전역적인 설정이 됩니다. (해당 시스템 내에서 전체적으..

jQuery Event 이벤트 메서드 on()메서드는 모든 이벤트를 처리 할 수 있다. 내부적으로 jQuery는 크로스 브라우저 이슈를 모두 고려 한다. .on() 메서드는 1.7 버전에서 처음 도입 되었고, 사용하는 방법은 jQuery가 제공하는 다른 메서드를 사용하는 방법과 크게 다르지 않다. 그 전에는 .click() 이나 .focus() 메서드를 제공 했으나 이제는 .on()메서드만 사용해야 한다. $('li').on('click', function() { $(this).addClass('complete'); }); .on()메서드를 이용하여 이벤트를 처리 한다. 이 메서드는 두 개의 매개변수를 필요로 한다. 첫 번째 매개변수로는 대응 할 이벤트를 지정한다. 여기서는 click이벤트를 처리한다. ..

자바스크립트 이벤트 요소에 이벤트를 바인딩하는 세 가지 방법 HTML 이벤트 핸들러 전통적인 DOM 이벤트 핸들러 DOM 레벨 2 이벤트 리스너 HTML 이벤트 핸들러 그다지 권장하는 방법은 아니다. 이유 : HTML과 자바스크립트 코드를 분리 시키는 것이 더 좋고, 현재 이 방식을 전혀 사용하지 않는다. 위 코드처럼 사용자가 a 태그를 누를 때, hide() 함수를 호출한다. 전통적인 DOM 이벤트 핸들러 DOM의 최초 명세에서 소개 된 방법이다. 장점으로는 주요 모든 브라우저에서 지원을 한다는 점이다. 그러나, 단점으로는 이벤트 별로 단 하나의 함수만 바인딩 할 수 있다는 점이다. element.onevent = functionName; //이러한 형식으로 작성한다. function checkUser..

웹 페이지 - DOM 트리 문서노드 트리의 최상위에는 문서노드가 존재하며, 이 노드는 전체 페이지를 표현한다. 요소노드 HTML 요소들은 HTML 페이지의 구조를 서술한다. 특성노드 HTML 요소의 여는 태그에는 특성을 지정할 수 있으며, 이런 특성들은 DOM 트리 내에서 특성 노드로 표현 된다. 텍스트노드 일단 요소 노드에 접근하면 해당 요소 내부의 텍스트에 접근할 수 있다. NODELIST : 하나 이상의 요소를 리턴하는 DOM Query참고로, NodeList 객체는 배열과 유사하게 보이며 동일한 방식으로 요소에 번호를 부여하지만 실제로 배열은 아니다. 이 객체는 컬렉션이라고 부르는 타입의 객체이다. Live NodeList 객체를 사용하면 스크립트를 이용하여 페이지를 수정할 때 NodeList 객..

Design Pattern을 공부해보자 커맨드 패턴 커맨드 패턴을 이용하면 요구 사항을 객체로 캡슐화 할 수 있으며, 매개변수를 써서 여러 가지 다른 요구 사항을 집어 넣을 수도 있다. 또한, 요청 내역을 큐에 저장하거나 로그로 기록 할 수 있으며, 작업 취소 기능도 지원 한다. 커맨드 패턴 코드 어댑터 패턴 한 클래스의 인터페이스를 클라이언트에서 사용하고자 하는 다른 인터페이스로 변환한다. 어댑터를 이용하면, 인터페이스 호환성 문제 때문에 같이 쓸 수 없는 클래스들을 연결해서 쓸 수 있다. 어댑터 패턴에서는 2가지가 존재한다. 객체 어댑터 클래스 어댑터 Java에서는 다중 상속을 지원하지 않기에, 클래스 어댑터는 적용할 수 없습니다. 퍼사드 패턴 어떤 서브 시스템의 일련의 인터페이스에 대한 통합된 인터..

Design Pattern을 공부해보자 추상 팩토리 패턴 서로 연관된 또는 의존적인 객체들로 이루어진 제품군을 생성하기 위한 인터페이스를 제공한다. 구상 클래스는 서브 클래스에 의해 만들어 진다. 추상 팩토리 패턴은 예시 코드로 치면, 먼저 피자의 지점에 따른 피자가 공통적인 피자라는 점에는 같지만, 속재료에 차이에 대해 집중하는 편이다. 그런 점에서 팩토리 메소드 패턴과는 다르다. 물론, 이용할 수는 있으나, 결론적으로 차이는 추상 팩토리 패턴은 상속을 통한 확장이 아닌, Composition을 통해 확장을 해나가는 패턴이다. 추상 팩토리 패턴 코드 팩토리 메소드 패턴 객체를 생성하기 위한 인터페이스를 만든다. 어떤 클래스의 인스턴스를 만들지는 서브 클래스에서 결정하도록 합니다. 팩토리 메소드를 이용하..

Design Pattern을 공부해보자 Strategy Pattern 전략 패턴은 쉽게 말해 확장성을 위하여 관심을 분리 시키는 것인데, 관심 분리를 하는 초점이 바로 객체의 행동이다. 객체의 다양한 행동을 위해 분리를 하는데 전제 조건은 특정 객체는 하는데 다른 객체는 그 행동이 필요하지 않을 수 있다. 고로, 객체마다 달라지는 부분과 달라지지 않은 부분을 분리 시키고 해당 코드들을 특정 군으로 모으는 것이다. 그래서 내가 필요로 할 때 추상화 된 기능을 구현하고, 실제 사용하는 측에서는 구현한 클래스에게 해당 기능을 위임 시키는 형태로 만든다. 그래서 내가 어떤 전략을 취하느냐에 따라 해당 객체가 특정 기능을 사용할지 말지 또한 결정 할 수 있게 된다. 전략 패턴 - code Observer 패턴 옵..

아카 ? 동시성 라이브러리 스칼라 언어로 작성 되어 있다. 액터 모델을 구현한 구현체 라이브러리 액터 모델을 구현한 언어로는 Erlang이 존재한다. 단점도 존재함. 그러나 가장 강력한 동시성에 대한 처리를 해주는 라이브러리 ​