[web]Dreamhack_session : 자바스크립트 추가 공부

워게임을 풀고 공부를 진행했다.

https://hae9-9.tistory.com/78

---

 

자바스크립트에 대한 기초 지식이 부족한 것이 느껴져서, 유튜브로 기초 강의를 보고 몇 내용은 서치하면서 보강했다.

-> 이유 : 웹 해킹 관련 워게임 푸는 데에 도움이 될 것 같아서.. 

 

내용 정리

시청한 유튜브 강의

 

JavaScript

REPL 방식 - Read(입력), Eval(평가), Print(출력), Loop(반복)

: 코드를 입력하면 결과가 바로 출력되는 과정을 반복하는 것

 

 

변수 선언

• var : 변수 재선언 가능
• let : 변수를 만들 때에 일반적인 방법, 저장된 값을 바꿀 수 있음
• const : 변수에 저장된 값을 바꿀 수 없게 함

 

변수 타입

• String : 문자
• Number : 숫자, int/double 등의 구분X
• Boolean : True or False / 이외 0, -0, null, undefined 등으로 대체 가능 -> 이는 falsy

 

함수

• 정의

function myFunction(x) {
	let temp = 2*x + 3
    return temp
}

• 실행

myFunction(1)

 

 

조건문

if(money > 5000) {
	rideTaxi();
} else if(money > 2000) {
	rideBus();
} else {
	walk();
}

 

 

 

반복문

for (let i=0; i<10; i++) {
	console.log("나무 찍기 " + i);
}

 console.log() : 괄호 안의 메시지 출력 기능, printf와 유사

 

 

 

---

추가 공부

 

쿠키

document.cookie = "sessionuser=admin";   // 쿠키 쓰기
console.log(document.cookie);           // 쿠키 읽기

쿠키 쓰기

쿠키 읽기

-> 기존 쿠키를 유지하면서 새 쿠키인 sessionid가 덧붙여진 모습을 확인할 수 있음(기존 쿠키의 경우 가렸다.)

 

 

fetch : 브라우저 내장 함수, 네트워크 요청을 보내고 응답을 받아옴

// GET
fetch("https://example.com")
  .then(res => res.text())
  .then(data => console.log(data));

// POST
fetch("https://example.com/login", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ username: "admin", password: "1234" })
})
  .then(res => res.json())
  .then(data => console.log(data));

• GET : 정보 가져오기 용도(?key=value 형태)
• POST : 서버에 데이터 보내기 용도
  
  
• json(JavaScript Object Notation) : 데이터를 주고받을 때 쓰는 텍스트 형식
• .then() : 비동기 작업이 끝난 다음 실행할 코드를 이어붙이는 문법
• => : 화살표 함수 문법, 함수를 짧게 쓰는 거

//기존
.then(function(response) {
  return response.json();
})

// 짧은 버전
.then(response => response.json())

 

fetch의 경우 보안정책 때문에 막혀서 실습을 못했다.