📣 3주차 웹해킹 스터디 정리

 

---

---

1. JavaScript

 

👉 기본

• <script>태그 안에 있는 부분이 자바스크립트 부분이다.
• 자바스크립트는 브라우저에서 동작하는 언어이다.
• 텍스트 편집기, 메모장을 이용해서 실행, 실습할 수 있다.

 

👉 숫자와 문자

• 큰따옴표나 작은따옴표가 붙지 않는 숫자는 숫자로 인식한다.

alert(1 + 1);
alert(1.1 + 2.4);

• 곱하기는 * 를 사용

alert(2 * 5)

• 나누기는 /를 사용

alert(6 / 2)

• 숫자의 연산

Math.pow(3,2);       // 9,   3의 2승 
Math.round(10.6);    // 11,  10.6을 반올림
Math.ceil(10.2);     // 11,  10.2를 올림
Math.floor(10.6);    // 10,  10.6을 내림
Math.sqrt(9);        // 3,   9의 제곱근
Math.random();       // 0부터 1.0 사이의 랜덤한 숫자

• 문자는 큰 따옴표 혹은 작은 따옴표로 감싸야한다.

alert("coding everyday");
alert('coding everyday');


alert(typeof "1")  //string,   typeof는 값의 데이터 형을 알려준다. 

alert(typeof 1)   // number,   따옴표 없는 숫자는 number가 출력된다.

• \n는 줄바꿈을 의미한다.
  
  
• 문자 연산

alert("coding" + " everybody");    //coding everybody
alert("coding everybody".length) //16,  문자의 길이를 구할 때는 문자 뒤에 .length를 붙인다.

👉 변수

• 변수 선언 : javascript에서 변수는 var로 시작한다. var은 변수를 선언하겠다는 것을 의미한다.

var a=1;
var b="coding";
var c='coding';

• 변수 수정 : 이미 선언된 변수에 대해서는 수정할 때 var을 사용하지 않아도 된다.

a = 2;
b = "dingding";

• 변수는 코드의 재활용성을 높여준다.

👉 주석

• //을 사용한다. 주석은 자바스크립트가 해석하지 않는다.

//주석, comment

• /* */ 여러줄의 주석을 사용할 때 사용한다.

/*
여러줄의 주석
여러줄의 주석
*/

👉 줄바꿈과 여백

• 세미콜론 ; : 명령이 끝났다는 것을 명시적으로 알려준다. 세미콜론 생략 가능, 이 경우 줄바꿈을 명령의 끝으로 간주한다.

👉 비교 (비교 연산자)

• 동등 연산자 == : 좌항의 값과 우항의 값이 같은가 확인한다. true, false(블린 데이터 형식)
• 일치 연산자 === : 좌항과 우항이 정확하게 같을 때 true 다르면 false
  정확하다는 것은 데이터형까지 같음을 의미한다. ===사용하는 것을 권장.
  
  +) null은 값이 없음을 명시적으로 표시, undefined는 값이 없는 상태

alert(null == undefined);   //true
alert(null === undefined);  //false

alert(true == 1);   	   //true
alert(true === 1);   	   //false
alert(true == '1');  	   //true
alert(true === '1'); 	   //false

NaN은 0/0과 같은 연산의 결과로 만들어지는 특수한 데이터 형, 계산할 수 없음 혹은 숫자가 아니라는 뜻이다.

alert(0 === -0);		   //true
alert(NaN === NaN); 	   //false

• 부정 != : !는 부정을 의미한다. !=는 같지 않다를 의미한다. ==와 정반대의 결과를 보여준다.
• 부정 !== : 정확하게 같지 않음을 의미한다.
• 부등호 > < <= >=

👉 조건문

• if로 시작한다. 괄호에 조건이 오고, 조건이 될 수 있는 값을 boolean이다. else는 주어진 조건이 거짓일 때 실행된다.

if(true) {
	alert(1);
} else if(true){
	alert(2);
} else if(true) {
	alert(3);
} else {
	alert(4);
}

• 변수와 비교연산자

<script>
        id = prompt('아이디를 입력해주세요.')
        if(id=='egoing'){
            alert('아이디가 일치 합니다.')
        } else {
            alert('아이디가 일치하지 않습니다.')
        }
    </script>

• 논리 연산자
  && : and 연산자 : 좌항과 우항이 모두 참일 때 참이된다.
  || : false 연산자 : 좌우항 중에 하나라도 참이라면 참이된다.
  ! : not 연산자 : 부정의 의미로 Boolean의 값을 역전시킨다.
• Boolean 대체제
  0은 false, 0이 아닌 값은 true이다.
• 기타 false로 간주되는 데이터 형

if(!''){
    alert('빈 문자열')
}
if(!undefined){
    alert('undefined');
}
var a;
if(!a){
    alert('값이 할당되지 않은 변수'); 
}
if(!null){
    alert('null');
}
if(!NaN){
    alert('NaN');
}

👉 반복문

• while 을 사용한다.

while(조건) {
	반복해서 실행할 코드
}

-for을 사용한다.

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드) {
	반복해서 실행될 코드
}

• 반복문의 제어
  break을 사용하면 반복작업을 중간에 중단시킬 수 있다. -> 반복문 완전 종료
  continue을 사용하면 실행을 즉시 중단하면서 반복을 지속돼게 한다.

👉 함수

• 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.

function 함수명 ( [인자...[,인자]]) {
	코드
    return 반환값
}

• 인자는 함수를 호출할 때 함수의 로직으로 전달될 변수다. 생략 가능하다.
• 함수 실행 : 함수를 호출한다.

함수이름();

• return : return 뒤에 따라오는 값을 함수의 결과로 반환함과 동시에 함수를 종료시킨다. 한 함수 안에 return을 여러개 만든다면, 맨 위의 결과값만 출력된다.
• 함수를 정의하는 다른 방법

var 함수명 = function () {
	함수 내용
}

👉 배열

• 연관된 여러개의 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입.
• 배열의 생성

var 배열명 = [원소1, 원소2, 원소3]

• 배열의 접근

배열명[0]
배열명[1]

• 배열의 크기 배열명.length

var arr = [1,2,3,4,5];
alert(arr.length);

• 배열의 조작
  데이터의 추가 :배열명.push, .concat, .unshift, .splice

var arr = ['a','b','c','d','e'];
arr.push('f');
alert(arr);
// 배열의 끝에 원소를 추가

var arr = ['a','b','c','d','e'];
arr = arr.concat(['f','g']);
alert(arr);
// 복수의 원소를 배열에 추가

var arr = ['b','c','d','e'];
arr.unshift('a');
alert(arr);
// 배열의 시작점에 원소 추가, 기존 값들의 인덱스를 1씩 증가

var arr = ['a','b','c','d','e'];
arr.splice(2,0,'B');
alert(arr);
// b, B
// 첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴한다. 세번째 인자를 첫번째 인자의 원소 뒤에 추가한다.

• 배열의 제거 : shift, pop

var arr = ['a','b','c','d','e'];
arr.shift();
alert(arr);
// 배열의 첫번째 원소를 제거
// b, c, d, e

var arr = ['a','b','c','d','e'];
arr.pop();
alert(arr);
// 배열의 마지막 원소를 제거
// a, b, c, d

• 배열의 정렬 : sort, reverse

var arr = ['c','e','a','b','d'];
arr.sort();
alert(arr);
// 알파벳 순 정렬

var arr = ['a','b','c','d','e'];
arr.reverse();
alert(arr);
// 역순으로 정렬

👉 객체

• 배열은 인덱스로 숫자를 사용하였다. 인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용한다. 연관배열 또는 맵, 딕셔너리 데이터 타입이 객체에 해당한다.
• 객체의 생성

// 방법 1
var grades = ['egoing' : 10, 'ju' : 6, 'min' : 80);
// egoing은 key가 되고, 10은 value가 된다.

// 방법 2
var grades = (); // 여기서, 대신에 new Object();를 사용해도 된다.
grades['egoing'] = 10;
grades['ju'] = 6;
grades['min'] = 80;

• 객체의 접근

// 방법 1
alert(grades['ju']);

// 방법 2
alert(grades.ju);

• 객체와 반복문

var grades = {'egoing': 10, 'ju': 6, 'min': 80};
for(key in grades) {
    document.write("key : "+key+" value : "+grades[key]+"<br />");
}

• 객체 지향 프로그래밍
  객체에는 객체를 담을 수도 있고 함수도 담을 수 있다.

var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    // list는 key, {객체}는 value
    'show' : function(){
        for(var name in this.list){  // this는 grades(객체)를 가리킨다. list key안에 객체 반복문 돌림
            document.write(name + ':' + this.list[name] + "<br />");
        }
    }
    // show는 key, function()는 value
};
grades.show(); // 또는 grades['show'];

👉 모듈

• 코드를 여러개의 파일로 분리하는 것
• <모듈화의 효과>
  1. 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
  2. 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
  3. 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
  4. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
  5. 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)
• 모듈의 사용
  새로운 파일을 만든다. 함수를 외부 파일로 분리한다. 파일명.js 확장자는 js를 사용한다.
  호스트 환경에 따라 모듈을 로드하는 방법은 달라진다.

<script src="파일명.js"> </script>
// 브라우저는 src속성에 있는 파일을 다운로드해서 실행시킨다.

• 라이브러리
  모듈과 비슷한 개념이다. 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합.
  1. 홈페이지에서 파일을 다운로드 받는다.
  2. 메뉴얼을 이용해서 사용법을 파악한다.

• 라이브러리의 사용 : jQuery

👉 UI와 API 그리고 문서보는 법

• API(Application Programming Interface) : 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치이다. 프로그래밍 언어를 통해서 조작 가능

   javascript:alert("Hello world");

• UI(User Interface) : 사용자를 대면하는 포괄적인 접점. 입력장치들.

• 레퍼런스 : 명령어의 사전
• 튜토리얼 : 언어의 문법을 설명
• 자바스크립트의 API와 문서 : 크게 두가지로, 자바스크립트 자체의 API(ECMAScript) 와 자바스크립트가 동작하는 호스트 환경의 API(Node.js)로 구분된다.

👉 정규표현식

• 문자열에서 특정한 문자를 찾아내는 도구
• 컴파일(compile) -> 실행(execution)
• 컴파일 : 검출하고자 하는 패턴을 만드는 일. 우선 정규표현식 객체를 만든다.

/*
a라는 텍스트를 찾아내는 정규표현식 만들기
*/

var pattern = /a/;   //정규표현식 리터럴 
var pattern = new RegExp('a');  //정규표현식 객체 생성자

• 추출 : 필요한 정보를 추출
• test : 확인하고자 하는 정보가 있는지 테스트
• 치환 : 검색된 정보를 다른 정보로 치환

/*
추출
*/
pattern.exec('abcde'); // ["a"]
pattern.exec('bcdef'); // null

var pattern = /a./;  // a뒤의 .은 아무 문자를 뜻한다.
pattern.exec('abcde');  // ["ab"]

/*
테스트
*/
pattern test('abcde'); // true
pattern text('bcdef'); // false

• ---

  문자열 메소드 실행 : match(), replace()

var pattern = /a/;

'abcdef'.match(pattern);
//["a", index: 0, input: "abcdef", groups: undefined]
//exec()와 비슷

var pattern = /a/;

'abcdef'.replace(patten,'A'); 
// "Abcdef"
// 패턴을 검색하고 변경한 후, 변경된 값을 리턴

---

• 옵션 : i(대소문자 구분X), g(검색된 모든 결과 리턴)

 var oi = /a/i;
 "Abcde".match(oi);
 // ["A"]  
 // i가 없다면 null

var og = /a/g;
"abcdea".match(og);
// (2) ["a", "a"]
// g가 없다면 ["a", index: 0, input: "abcdea", groups: undefined]

---

정규표현식 시각화 사이트
정규표현식 빌더 사이트

• 캡처 : 그룹을 지정하고 그 지정된 그룹을 가져와서 사용하는 기능. 괄호 안의 패턴은 변수처럼 재사용 가능. 기호$사용

(\w+) \s (\w+)
\w : word, 단어
+는 수량자로 하나 이상일 때 유효
\s : space, 공백
$1 : 첫번째 그룹(앞의 \w+)
$2 : 두번째 그룹(뒤의 \w+)

• 치환

var pattern = /(\w+)\s(\w+)/;  // 단어 + (공백) + 단어
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1"); 
// str에서 패턴을 찾고, "$2, $1" 형식으로 바꾼다. 
result
// "everybody, coding"

---

(+참고) 아래 코드는 본문 중의 URL을 링크 html 태그로 교체한다.

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});

// 생활코딩 : <a href="http://opentutorials.org/course/1">http://opentutorials.org/course/1</a> 입니다. 네이버 : <a href="http://naver.com">http://naver.com</a> 입니다.

RegExr: Learn, Build, & Test RegEx

 

2021.01.19에 작성한 글