sw 보관소

2022년 11월 5일 토요일

깃허브 1~2강(명령어)

1. git으로 할 수 있는 것?

버전 관리, 백업, 협업

2. 깃 프로그램 종류

깃허브 데스크톱(깃허브에서 제공하는 GUI) : https://desktop.github.com/

토터스 깃(윈도우 전용) : https://tortoisegit.org/

깃(윈도우, 맥, 리눅스) : https://git-scm.com/

3. 깃 환경 설정

git config --global user.name "사용자이름(영문)"

git config --global user.email "깃허브 가입 이메일"

4. 자주 쓰는 리눅스 명령어

pwd : 현재 위치의 경로

ls : 디렉터리와 파일 표시

-ls 옵션 -

-a : 숨긴 파일과 디렉터리도 함께 표시

-l : 파일이나 디렉터리 상세 정보를 함께 표시

-r : 파일의 정렬 순서를 거꾸로 표시

-t : 파일 작성 시간 순으로 내림차순 표시

cd : 디렉터리 이동

cd .. : 상위 디렉터리로 이동

cd ~ : 홈 디렉터리로 이동

mkdir : 디렉터리 생성

rm : 디렉터리 삭제 (-r 옵션 시 하위 디렉터리와 파일까지 함께 삭제)

5. 자주 쓰는 깃 명령어

git init : 현재 디렉토리에 후 깃 저장소 생성

git status : 깃 상태 확인

git add 파일명 : 수정한 파일 스테이징 (git add . : 전체 파일 스테이징)

git commit : 커밋

-m : 커밋 + 변경사항 메세지 기록

--amend : 커밋 메세지 수정

git log : 저장소에 저장된 커밋 기록 확인(--stat 옵션시 : 커밋 관련 파일까지 출력)

git diff : 작업 트리에 있는 파일과 스테이지에 있는 파일 비교

git checkout --파일명 : 작업 트리에서 수정한 파일 되돌리기

git reset HEAD 파일이름 : 스테이징 되돌리기

--soft HEAD^ : 최근 커밋 전 상태로 작업 트리 되돌린다.

--mixed HEAD^ : 최근 커밋 + 스테이징 전 상태로 되돌리기(기본)

--hard HEAD^ : 최근 커밋 + 스테이징 + 파일 수정 전 상태로 되돌리기

--hard 해시 값 : 특정 커밋으로 돌아가고 그 이후 버전 삭제

git revert 해시 값 : 커밋은 되돌리되 해시값 이후의 커밋 삭제는 안함.

2022년 11월 4일 금요일

자바스크립트 10강(브라우저 객체 모델)

1. 브라우저 객체 모델이란?

브라우저 전체를 객체로 관리하는 것. 최상위 객체는 window 객체다.

2. 자주 사용하는 브라우저 내장 객체

window : 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체

Document : 웹 문서에서 <body> 태그가 만나면 만들어지는 객체. HTML 문서 정보를 가지고 있다.

History : 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체

Location : 현재 페이지에 대한 URL 정보를 가지고 있는 객체

Navigator : 현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체

Screen : 현재 사용 중인 화면 정보를 다루는 객체

3. Window 객체에서 자주 사용하는 함수

alert() - 알림 창을 표시한다.

blur() - 창에 포커스를 제거 한다.

close() - 현재 열려 있는 창을 닫는다.

confirm() - 확인, 취소가 있는 확인 창을 표시한다.

focus() - 현재 창에 포커스를 부여한다.

moveBy() - 현재 창을 지정한 크기 만큼 이동한다.

moveTo() - 현재 창을 지정한 좌표로 이동한다.

open() - 새로운 창을 연다.

postMessage() - 다른 창으로 메세지를 전달한다.

print() - 현재 문서를 인쇄 한다.

prompt() - 프롬프트 창에 입력한 텍스트를 반환한다.

resizeBy() - 지정한 크기만큼 현재 창 크기를 조절한다.

resizeTo() - 동적으로 브라우저 창의 크기를 조절한다.

scroll() - 문서에서 특정 위치로 스크롤 한다.

scrollBy() - 지정한 크기만큼씩 스크롤 한다.

scrollTo() - 지정한 위치까지 스크롤 한다.

showModalDialog() - 모달 창을 표시 한다.

sizeToContent() - 내용에 맞게 창 크기를 맞춘다.

stop() - 로딩을 중지한다.

4. Navigator 객체 속성

appCodeName - 브라우저 이름을 문자열로 반환한다.

appName - 브라우저 공식 이름을 문자열로 반환한다.

appVersion - 브라우저 버전을 문자열로 반환한다.

battery - 배터리 충전 상태를 알려주는 정보가 담긴 객체를 반환한다.

connection - 브라우저 장치의 네트워크 정보가 담긴 객체를 반환한다.

cookieEnabled - 쿠기 정보를 무시한다면 false, 그렇지 않으면 true를 반환한다.

geoloction - 모바일 기기를 사용한 위치 정보가 담긴 객체를 반환한다.

maxTouchPoints - 장치에서 동시에 터치 가능한 포인트가 몇 개인지 반환한다.

platform - 브라우저 플랫폼 정보를 가지고 있는 문자열을 반환한다.

userAgent - 현재 브라우저 정보가 있는 사용자 에이전트 문자열을 반환 한다.

5. History 객체 속성과 함수

length - 현재 브라우저 창의 History 목록에 있는 항목의 개수를 반환한다.

back() - 이전 페이지를 현재 화면에 불러온다.

forward() - 다음 페이지를 현재 화면에 불러온다.

go() - 현재 페이지를 기준으로 상대 위치에 있는 페이지를 현재 화면에 불러온다.

go(1)은 다음 페이지를 가져오고, go(-1)은 이전 페이지를 가져온다.

6. Location 객체 속성과 함수

hash - URL 중 #으로 시작하는 해시 부분을 나타낸다.

host - URL의 호스트 이름과 포트 번호를 나타낸다.

hostname - URL의 호스트 이름을 나타낸다.

href - 전체 URL을 표시한다.

pathname - URL 경로를 나타낸다.

port - URL의 포트 번호를 나타낸다.

protocol - URL의 프로토콜을 나타낸다.

password - password 정보를 저장한다.

search - URL 중 ?로 시작하는 검색 내용 부분을 나타낸다.

username - username 정보를 저장한다.

assign() - 현재 문서에 새 문서 주소를 할당해 새 문서를 가져온다.

reload() - 현재 문서를 다시 불러온다.

replace() - 현재 문서의 URL을 지우고 다른 URL의 문서로 교체 한다.

toString() - 현재 문서의 URL을 문자열로 반환한다.

자바스크립트 9강(폼과 자바스크립트)

1. 폼 요소에 접근하는 여러가지 방법

- id 값은 폼 요소 1개에 접근하여 사용

document.querySelector("#billingName").value;

- class 값은 여러 요소를 한번에 가져와 배열 형태로 저장하고 사용

document.querySelectorAll(".input-box").value;

2. 폼 검증 하기

<input> 태그 유형으로 폼 검증

<input type="email"> : 이메일 주소 필드, 이메일 주소 형식에 맞지 않으면 오류 메세지 표시

<input type="tel"> : 전화번호 필드, 숫자가 아닌 값이 입력되면 오류 메세지 표시

<input type="url"> : 사이트 주소 필드, http: 로 시작하지 않으면 오류 메세지 표시

3. <input> 태그의 속성

autocomplete : 자동 완성 기능을 켜고 끄는 속성

autofocus : 해당 필드에 마우스 커서를 자동으로 표시

placeholder : 필드 안에 힌트가 표시되고 사용자에게 어떤 내용을 입력해야 하는지 알려줌.

required : 필수 입력 항목으로 지정. 필드가 작성되지 않으면 오류 메시지 표시

2022년 11월 3일 목요일

자바스크립트 8강(DOM)

1. 문서 객체 모델(DOM)이란?

웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법.

2. DOM 트리

DOM을 조작하기 위해서는 웹문서 요소의 구조를 알아야 한다.

DOM의 구조는 부모 요소, 자식 요소로 되어 있다.

예)

<body>

</body>

위의 소스 코드는 아래와 같은 연결 관계가 있다.

<body> //부모 요소

<h1> <p> //자식 요소

-웹 문서의 태그는 요소 노드로 표현한다.

-태그가 품고 있는 텍스트는 해동 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드로 표현

-태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현

-주석은 주석 노드로 표현

3. DOM 요소에 접근하기

<body>
<div id="container">
    <h1 id="heading">에디오피아 게뎁</h1>
    <div id="prod-img">
        <img src="images/coffee-pink.jpg" alt="에디오피아 게뎁">
    </div>
    <div id="desc">
        <h2 class="bright">Information</h2>
        <p>2차 세계대전 이후 설립된 
            <span class="accent">게뎁농장</span>은  
            <span class="accent">SCAA 인증</span>을 받은 커피
        </p>
        <h2>Flavor Note</h2>
        <p class="bright">은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
    </div>
</div>
</body>

위와 같은 구조가 있다면~

(1) id 선택자로 접근하는 함수 : getElemenById()

document.getElementById("heading"); //결과 : <h1 id="heading">에티오피아 게뎁</h1>

이렇게 접근하고, 이벤트를 연결해 해당 요소에 함수를 적용할 수 있다.

//해당 요소를 클릭하면 폰트 사이즈가 변한다.

document.getElementById("heading").onclick = function() {

this.style.fontSize = "5em";

}

(2) class 값으로 접근하는 함수 : getElementsByClassName()

class 선택자는 id와 다르게 2개 이상의 웹 요소에 접근이 가능하다. 배열과 비슷하다.

document.getElementsByClassName("accent"); //결과 [span.accent, span.accent]

1개만 접근하고 싶으면 배열의 인덱스처럼 해야 한다.

document.getElementsByClassName("accent")[0]; //결과 : <span class="accent">게뎁농장</span>

document.getElementByClassName("accent")[0].style.textDecoration="underline"//결과:게뎁농장에 밑줄 생김

(3) 태그 이름으로 찾아내는 함수 : getElementsByTagName()

id, class가 없는 DOM 요소에 접근 할 때 태그 이름으로 접근한다. 태그 이름은 중복이 많기에 배열로 저장하고 접근할 수 있다.

document.getElementsByTagName("h2"); //결과 [h2, h2]

//h2 요소 중 첫번째 요소의 배경색을 바꾼다.

document.getElementsByTagName("h2")[0].style.backgroundColor='#eee';

(4) id, class, 태그이름 다 사용할 수 있는 querySelector(), querySelectorAll() 함수

document.querySelector(".클래스명"); //클래스로 접근할 때는 마침표(.)을 앞에 붙인다.

document.querySelector("#id"); //id로 접근할 때는 샵(#)을 앞에 붙인다.

document.querySelector("태그이름"); //태그 이름으로 접근할 때는 이름만 쓴다.

document.querySelectorAll(); //배열 형식으로 접근할 때 사용

4. DOM에서 이벤트 처리 하기

var pic=document.querySelector('#pic');

pic.onclick= changPic; //pic 요소를 누르면 changPic()함수 실행

function changPic() {

pic.src="images/boy.png";

}

addEventListener() 함수로 여러 이벤트 한번에 처리하기

var pic = document.querySelector('#pic');

pic.addEventListener("mouseover", changePic, false); //마우스 올리면 남자 그림으로 변경

pic.addEventListener("mouseout", originPic, false); //마우스 벗어나면 여자 그림으로 변경

function changePic() {

pic.src = "images/boy.png";

}

function originPic() {

pic.src = "images/girl.png";

}

5. DOM에 요소 추가하기

(1) createElement() : 새 요소 노드를 만든다.

(2) createTextNode() : 텍스트 내용이 있을 경우 텍스트 노드를 만든다.

(3) appendChild() : 텍스트 노드를 요소 노드에 자식 노드로 추가

(4) createAttribute() : 요소에 속성이 있을 경우 속성 노드를 만든다.

(5) setAttributeNode() : 속성 노드를 요소 노드에 연결한다.

(6) appendChild() : 새로 만든 요소 노드를 부모 노드에 추가 한다.

(예제)

function newRegister() {            
  var newP = document.createElement("p");  // 새 p 요소 만들기 
  var userName = document.querySelector("#userName");         
  var newText = document.createTextNode(userName.value);  // 새 텍스트 노드 만들기
  newP.appendChild(newText);  // 텍스트 노드를 p 요소의 자식 요소로 연결하기
   
  var delBttn = document.createElement("span");   // 새 button 요소 만들기 
  var delText = document.createTextNode("X");  // 새 텍스트 노드 만들기
  delBttn.setAttribute("class", "del");  // 버튼에 class 속성 설정하기
  delBttn.appendChild(delText);  // 텍스트 노드를 button 요소의 자식 요소로 연결하기              
  newP.appendChild(delBttn);  //  del 버튼을 p 요소의 자식 요소로    

  var nameList = document.querySelector("#nameList");  
  // p 요소를 #nameList 맨 앞에 추가하기
  nameList.insertBefore(newP, nameList.childNodes[0]);  
  userName.value = "";  // 텍스트 필드 지우기
  
  var removeBttns = document.querySelectorAll(".del");
  
  // removeBttns에 있는 요소 전체를 반복
  for (var i=0; i<removeBttns.length; i++) {  
    // i번째 버튼을 클릭했을 때 실행할 함수 선언
    removeBttns[i].addEventListener("click", function() {  
      //현재 부모 노드의 부모 노드가 있을 경우 실행
      if (this.parentNode.parentNode)  
      //현재 부모 노드의 부모 노드를 찾아 현재 노드(this)의 부모 노드(p 노드) 삭제
        this.parentNode.parentNode.removeChild(this.parentNode);  
    });
  } 
}   

2022년 11월 2일 수요일

자바스크립트 7강(Array 객체)

1. Array 객체란?

한 자료형인 항목을 하나의 변수에 여러 개 저장할 때 Array 객체를 사용한다.

2. Array 객체로 배열 만드는 법

var myArray = new Array(); //myArray 이름의 Array객체 인스턴스를 생성했다.

var numbers = new Array("one", "two", "three", "four"); //배열 객체를 만들면서 값도 넣어줬다.

3. 배열에서 for문 사용하기

for(var i=0; i < numbers.length; i++) {

console.log(numbers[i]);

}

4. Array 객체의 함수 종류

(1) 둘 이상의 배열을 연결하는 concat() 함수

var nums = ["1", "2", "3"];

var chars = ["a", "b", "c", "d"];

nums.concat(chars); //결과 : "1", "2", "3", "a", "b", "c", "d"

chars.concat(nums); //결과 : "a", "b", "c", "d", "1", "2", "3"

(2) 배열 요소를 연결하는 join()함수

nums.join() //결과(기본 값은 ,) : 1,2,3

nums.join("-") //결과 : 1-2-3

(3) 새로운 요소를 추가하는 push()함수와 unshift()함수

var nums = ["1", "2", "3"];

-기존 배열 맨 끝에 요소 추가: push() 함수

nums.push("4", "5"); //결과 ["1", "2", "3", "4", "5"]

-기존 배열 맨 앞에 요소 추가: unshfit() 함수

nums.unshift("-1", "0"); //결과 ["-1", "0", "1", "2", "3", "4", "5"]

(4) 배열에서 요소 추출하는 pop() 함수, shift() 함수

var nums = ["-1", "0", "1", "2", "3", "4", "5"];

- 기존 배열에서 맨 뒤에 있는 요소 추출할 때

nums.pop(); //결과: 5

- 기존 배열에서 맨 앞에 있는 요소 추출할 때

nums.shift(); //결과: -1

(5) 원하는 위치의 요소를 삭제하거나 추가하는 splice() 함수

-인수가 1개일 경우 : 인수부터 ~ 끝까지 요소 모두 삭제

var nums = ["-1", "0", "1", "2", "3", "4", "5"];

nums.splice(2); //결과 : ["-1", "0"] 만 남음

- 인수가 2개일 경우 : 인덱스 값, 삭제할 갯 수

var nums = ["-1", "0", "1", "2", "3", "4", "5"];

nums.splice(2, 2); //결과 : ["-1", "0", "3", "4", "5"]

- 인수가 3개 이상일 경우 : 인덱스 값, 삭제할 갯 수, 삭제한 위치에 추가할 요소

var nums = ["-1", "0", "1", "2", "3", "4", "5"];

nums.splice(2, 3, "js"); //결과: ["-1", "0", "js", "4", "5"] //인덱스 2부터 3개 요소 지우고 js삽입

- 기존 배열 요소를 삭제하지 않고 새로운 요소를 삽입 하려면 두 번째 인수에 0 입력

nums.splice(2, 0, "js"); //결과 : ["-1", "0", "js", "1", "2", "3", "4", "5"];

(6) 원하는 위치와 요소들을 추출하는 slice() 함수

- 시작 인덱스와 끝 인덱스를 지정해 그 사이의 요소를 추출

var nums = ["-1", "0", "1", "2", "3", "4", "5"];

nums.slice(1,4); //결과 [ "0", "1", "2", "3"] 인덱스 1~4까지 추출

* 주의점 : slice() 함수를 통해 요소를 추출해도 원래 배열은 변경되지 않는다.

자바스크립트 6강(객체)

1. 객체란?

복합 자료형, 객체 안에 숫자,문자열 등 여러가지 자료형이 포함, 객체 자체도 ㅈㅏ료형이기에 자료를 저장하고 처리하는 기본 단위

2. 객체의 종류

-내장 객체 : 미리 만들어져 내장되어 있는 객체(Number, Boolean, Array, Math 등)

-문서 객체 모델(DOM): 웹 문서, 이미지, 링크, 텍스트필드, 등등

-브라우저 객체 모델 : 웹 브라우저의 주소 표시줄, 창 크기 등 웹 브라우저의 정보를 객체로 다룸

-사용자 정의 객체 : 사용자가 필요할 때 마다 자신의 객체를 정의하고 사용하는 것

3. 객체의 속성과 메서드

-속성: 객체의 값을 담고 있는 정보, 속성 값을 가져올 때는 객체이름.속성이름

-메서드: 객체의 동작을 선언해 놓은 함수. 객체이름.매서드함수명(인수지정)

-객체의 인스턴스 만드는 법 : new 객체이름();

(예) var now = new Date();

now.toLocaleString();

4. 사용자 정의 객체 만드는 법

//객체 설정

var book = {

title: "자바스크립트", //속성은 속성이름 : 값 으로 지정

author: "김",

info : function() { //매소드는 함수이름 : 함수(인자값){} 으로 지정

alert(this.title + " 책은 " + this.author + "이 썼다.");

}

//객체 실행

book.title; //결과값 : 자바스크립트

book.info(); //결과값 : 자바스크립트 책은 김이 썼다.

5. 생성자 함수를 사용해 객체 만드는 법

-생성자 함수란? 객체를 만들어 내는 함수.

(예)

//생성자 함수를 이용해 book 함수 설정

function Book(author, pages, price, title) {

this.author = author;

this.pages = pages;

this.price = price;

this.title = title;

}

// book 객체 사용법

kimBook = new Book("김", 400, 30000, "자바스크립트");

kimBook에 들어 있는 값 : author: "김", pages:400, price:30000, title:"자바스크립트"

kimBook.title; //결과값 : 자바스크립트

2022년 11월 1일 화요일

자바스크립트 5강(함수와 이벤트)

1. 함수란?

자주 사용하는 프로그램을 하나로 묶어서 재사용 하는 기술

함수가 어떤 명령을 처리 해야 할지 미리 알려주는 것 : 함수 선언

선언한 함수를 가져와 사용하는 것 : 함수 실행

2. 함수 선언

function 함수명(인자1, 인자2) { //인자가 없다면 ()만 입력
//내부 프로그램

return ; // 출력할 것이 있다면 표시

}

예) function addNumber(a, b) {

var sum = a + b; //인자 2개를 받아서 합한 뒤 sum에 저장

return sum; //sum 출력

}

ES6부터는 => 표기법으로 함수 선언 가능

const hi = function() { return "하여~"; } //function 선언법

const hi = () => { return "하여~"; } //화살표 표기법으로 함수 선언

3. 함수 실행

함수명(인자1, 인자2); //인자가 없다면 ()로 생략 가능

4. let, constant 로 변수 선언

- 함수 안에서만 사용되는 변수 : 지역변수, 로컬 변수

- 스크립트 전체에서 사용되는 변수 : 전역변수, 글로벌 변수

- var : 변수를 선언하기 전에 사용해도 오류 발생 안하고, 재선언이 가능함, 같은 이름을 사용할 경우 덮어쓰기도 함(유연한 변수 선언), 함수 영역의 범위를 가짐.

- let : 블록 영역의 범위를 가짐, 지역 변수에 사용하기 좋음. 재할당은 가능, 재선언은 불가능, 변수를 초기화 하기 전까지는 사용할 수 없음.

- const : 상수로 선언함. 변하지 않음, 블록 레벨의 범위에 사용

- 전역 변수 선언 : 변수이름 = 초기값; //변수 이름 앞에 아무것도 적지 않음

5. 변수 선언 시 가이드

- 전역 변수는 최소한으로 사용

- var 변수는 함수의 시작 부분에 선언

- for문에서 카운터 변수를 사용할 때는 let를 사용하기

- ES6 버전을 사용하면 var보다 let를 사용하는 것 권장

6. 이벤트 다루기

이벤트란? 웹 브라우저나 사용자가 행하는 어떤 동작을 뜻함.

주로 마우스, 키보드를 사용할 때, 웹 문서를 불러올 때, Form에서 내용을 입력할 때 발생

이벤트와 이벤트 처리 함수를 연결해주는 것 : 이벤트 처리기 또는 이벤트 핸들러

이벤트 핸들러는 이벤트 이름 앞에 on을 붙여서 사용.(예) click 이벤트 - onclick

(예) 클릭 이벤트가 발생하면 상세 설명 내용은 화면에 표시하고 버튼은 감춤

<button class="over" id="open" onclick="showDetail()">상세설명보기</button>

function showDetail() {

document.querySelector('#desc').style.display = "block"; //상세 설명 내용을 화면에 표시

document.querySelector('#desc').style.display = "none"; //상세 설명 보기 버튼 감춤

}

7. 여러 이벤트 다루기

<script src="js/event-dom-result.js"></script> //js경로에 있는 event-dom-result.js 파일 연결

//event-dom-result.js 파일 내용 
var coverImage = document.querySelector("#cover");
        coverImage.onclick = function() {
            alert('눌렀습니다');
        };
        coverImage.onmouseover = function() {
            coverImage.style.border = "5px black solid";
        };
        coverImage.onmouseout = function() {
            coverImage.style.border = "";
        };