본문 바로가기

[개발] Programming197

jQuery mouseover 이벤트 - 마우스 커서를 올리면 인식하기 웹 프런트 단을 개발하다 보면 가장 흔하게 사용하는 자바스크립트 이벤트는 아마 mouseover 이벤트일 것이다. 해당 이벤트는 마우스 커서를 이벤트가 바인딩된 태그(엘리먼트) 올려두면 트리거 되는 방식이다. 이는 클릭 이벤트와는 다른 형태이다. HTML 소스 마우스 올려보삼. jQuery 소스 $(document).ready(function () { $("#testId").mouseover( function () { alert("뿌잉 뿌잉"); }); }); 위 소스를 보면 '요기 마우스 올려보삼.' 이라는 문구가 페이지에 노출될 것인데, 여기에 마우스 커서를 올려 두면 '뿌잉 뿌잉' 이라는 문구의 알럿이 뜬다. 또 다른 방법으로는 아래와 같이 구현할 수 있다. 결과는 당연히 동일~! $(documen.. 2021. 8. 1.
깃허브 push 할 때 실행되는 웹 hook 설정하기 Web Hook by GitHub Push 이번 포스트에서는 깃허브에 Push를 할 경우 젠킨스나 기타 시스템과 연동하기 위해 사용하는 웹 hook 설정 방법을 알아본다. 이는 CICD 환경에 필수고 솔직히 깃을 사용할 거면 대부분은 사용하는 설정일 정도로 유용하다. 우선 어드민 계정으로 로그인한 뒤, Settings 메뉴로 들어간다. 그럼 바로 Webhooks 메뉴가 왼편에 보인다. 설명 : " Webhooks allow external services to be notified when certain events happen. When the specified events happen, we’ll send a POST request to each of the URLs you provide. " 'Ad.. 2021. 7. 31.
자바스크립트 노드(태그) 리스트 조회하는 함수 - querySelectorAll() 웹 개발하다 보면 동적으로 특정 노드(엘리먼트)를 수정하게 되는 경우가 흔히 발생한다. 이때 자바스크립트 함수 querySelectorAll()을 사용하면 태그의 id로 하위 노드의 객체를 리스트 형태로 모두 호출할 수 있다. 해당 함수는 아래와 같이 사용할 수 있다. var list = document.querySelectorAll("id 또는 class 명"); querySelectorAll()의 특징이 있는데, CSS 같은 방법으로 사용한다는 점이다. 즉, 노드를 접근할 때 아래와 같이 계층 구조로 접근하면 된다는 것이다. idName 이라는 태그 하위에 li 태그들을 호출한다는 의미이다. var list = document.querySelectorAll("#idName li"); 그럼 예를 들어 .. 2021. 7. 27.
자바스크립트, 태그에 이벤트 함수 바인딩하기 - addEventListener() html 노드(엘리먼트)에 이벤트를 바인딩하는 방법은 간단하게 addEventListener()라는 함수로 해결할 수 있다. 그럼 동적으로 생성되는 태그에도 onchange, onclick 같은 함수들을 사용할 수 있게 된다. 우선 함수는 아래와 같이 사용하면 된다. window.addEventListener("load", function(){ 노드객체.addEventListener( "이벤트 종류", 함수 정의 ); }); 예제를 통해 사용 방법을 알아보자. 아래와 같은 html 코드가 있고, test2 태그에 click 이벤트를 바인딩해본다. test1 test2 해당 태그의 id 값은 test2이고 이를 가지고 해당 태그의 객체를 읽어 온다. 객체는 document.querySelector("#te.. 2021. 7. 25.
자바스크립트 document.getElementById() - id로 dom 요소 찾기 바닐라 자바스크립트로 특정 엘리먼트(요소)를 id 기준으로 찾기 위해서는 document.getElementById() 메서드를 사용할 수 있다. 이 함수를 이용하면 해당 태그의 객체를 반환받아 여러 가지 작업을 진행할 수 있다. 형식 : document.getElementById("아이디 명"); 예로 아래와 같은 HTML 소스가 있다고 가정하고, 1 2 3 4 5 자식1 자식2 자식3 cs id가 test2인 엘리먼트의 객체를 접근하고 싶으면 아래와 같이 할 수 있다. 그러면 test2에 해당되는 요소의 객체가 반환될 것이고, 콘솔 창에 출력해보고 싶으면 'textContent'를 활용하면 된다. 그러면 결과 값은 '자식2'가 나온다. 1 2 3 4 5 6 7 8 9 var tmp2 = documen.. 2021. 7. 20.
깃허브 기초3 - 브랜치에 소스 추가 후 커밋, 메시지 수정 (gitbash 이용) 깃허브 소스 만들고 커밋하기 자습ㅋ 1. 소스 파일 생성 이번에는 깃 bash를 사용하여 소스를 하나 만든다. 새로운 파일 만들기 $ vi TestService.java i 누른 뒤에 내용 입력 후 내용 저장. (리눅스 명령어랑 같으니 자세한 건 생략) 2. 로컬 레파지토리(브랜치) 등록 '$ git status' 명령어를 쳐보면 아래와 같이 커밋이 없다고 나온다. 또 형상 관리가 되고 있지 않으므로 Untracked files 라고도 나온다. 아래 명령어로 해당 소스를 로컬 레파지토리에 등록한다. $ git add ./소스파일명 그다음에 다시 git status를 해보면 디폴트 브랜치에 등록되었음을 알 수 있다. 3. 소스 커밋 명령어는 간단하게 아래와 같다. $ git commit 그러면 아래와 같이.. 2021. 7. 2.
깃허브 기초2 - 깃허브 저장소 생성하기 (gitbash 이용) 깃허브 공부를 위한 두 번째 포스트. 저번에 깃허브 글로벌 변수를 설정한 뒤 이제 새로운 저장소를 만들 차례, 원하는 위치에서 새로 my_project 디렉터리를 생성한다. (새로운 디렉터리 생성) $ mkdir ./my_project (만든 디렉터리로 이동) $ cd ./my_project 다행히 리눅스를 바탕으로 만들어져서 쉽게 사용할 수가 있다. 리눅스 경험이 없으신 분들은 먼저 명령어부터 익히는 게 좋을 것 같다. cd로 새로 만든 디렉터리로 이동한 뒤에, git 초기화를 한 번 실행한다. 초기화를 진행하면 깃 사용에 필요한 설정 파일들이 생성된다. $ git init 그리고 아래와 같이 기존에는 안보이던 (master)라는 게 추가됐다. master 브랜치를 생성했다는 의미이다. 조회해보면 gi.. 2021. 7. 1.
깃허브 기초1 - 기본 환경 설정 : 이름, 이메일 등록, 디렉토리 생성 (gitbash) 깃허브 온라인 강의를 들으면서 CLI를 통해 설정 해본적은 없어서 기록해봤습니다. 기초부터 차근차근 깃허브를 공부하실분들은 따라해 보세요. Git Bash 실행 우선 이름, 이메일부터 설정. 참고로 global은 글로벌 변수로 등록한다는 의미. $ git config --global user.name "사용할 이름" $ git config --global user.email "이메일 주소" 기본 에디터는 VIM으로 설정 (리눅스에 익숙하면 바로 사용 가능) $ git config --global core.editor vim 글로벌로 설정한 깃 정보 확인 $ git config --global --list 조회 결과 user.name=사용한 이름 user.email=이메일 주소 core.editor=vim.. 2021. 6. 29.
무료 메모장(텍스트 편집) 툴 노트패드++(NotePad) 추천드립니다. 개발자로 근무하면서 반드시 사용하는 텍스트 편집기가 있어 많은 분들께 추천하고 싶어 소개 글을 준비했습니다. 가볍고 많은 기능을 가진 무료 텍스트 편집기를 찾고 계신 분들에게는 도움이 될 겁니다ㅎㅎ 특히 광고도 없고 모든 기능이 무료이기 때문이죠. 진짜 이거 개발해서 배포하신 분은 정말 복 받으실 겁니다! 그럼 설치 방법과 간단한 기능을 소개해 보겠습니다. 1. 노트패드++ 설치하기 설치 방법은 매우 간단한데, 아래 링크 접속해서 자신의 운영 체제에 맞는 파일을 다운로드, 설치하면 됩니다. https://notepad-plus-plus.org/downloads/v7.9.5/ 처음 실행하면 아래와 같이 노트패드에 대한 버전과 소개글이 나옵니다. 2. 노트패드++ 기능, 장점 소개 노트패드의 가장 마음에 드.. 2021. 6. 24.

티스토리툴바