JavaScript문법,jQuery, Fetch

let

let 키워드는 블록 스코프(문단 안에서 노는 구역) 지역 변수를 선언하는 데 사용됩니다.

블록 외부, 즉 최상위 레벨에서 선언될 경우 글로벌 스코프를 가집니다.
선언된 블록, 문, 또는 표현식 내에서만 유효합니다.
선언 후 값 변경이 가능합니다.

 

const

const 키워드는 블록 스코프 읽기 전용 상수를 선언하는 데 사용됩니다.

블록 외부, 즉 최상위 레벨에서 선언될 경우 글로벌 스코프를 가집니다.
한 번 할당된 값은 변경할 수 없음 (불변은 아님, 객체 내부 속성은 변경 가능).
선언과 동시에 초기화되어야 합니다.

 

 

var (자주 사용하진 않지만 먼지는 알아야할 것 같음)

var는 함수 스코프(함수 안에서만 노는 구역)를 가지는 변수를 선언합니다.

함수 외부에서 선언될 경우 글로벌 스코프를 가집니다.

이는 if, for같은 블록 내부에서 선언된 var 변수도 블록 외부에서 접근 가능하다는 것을 의미합니다.
선언된 함수를 최상단으로 끌어올려집니다.(호이스팅)

초기화되지 않은 var 변수는 undefined 값을 가집니다.

 

 

글로벌 스코프 (Global Scope):

변수가 함수나 블록 밖에서 선언되면, 그 변수는 전역 변수가 되어 프로그램의 어느 곳에서나 접근할 수 있습니다.

함수 스코프 (Function Scope):
function 키워드를 사용하여 선언된 함수 내에서 변수를 선언하면, 그 변수는 해당 함수 내에서만 접근할 수 있습니다.
var 키워드로 선언된 변수는 함수 스코프를 가집니다.

블록 스코프 (Block Scope):
if, for, while 같은 블록 내에서 let 또는 const 키워드를 사용하여 선언된 변수는 그 블록 내에서만 접근할 수 있습니다.

 

 

리스트

자바스크립트에서 리스트는 일반적으로 '배열(Array)'이라고 불립니다.

1부터 세는것이 아닌 0부터 세어야함.

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "banana"

 

 

딕셔너리(객체)

키(key)-밸류(value) 값의 묶음

let person = {
  name: "John Doe",
  age: 30
};
console.log(person.name); // "John Doe"
console.log(person.age); // "30"

 

리스트와 딕셔너리의 조합

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

console.log(names[0]['name']) // 'bob'을 출력
console.log(names[1]['name']) // 'carry'을 출력

 

 

반복문

 

for 반복문

가장 기본적인 반복문 형태로, 조건식이 true인 동안 코드 블록을 반복 실행합니다.

for (초기화; 조건; 증감) {
  // 반복해서 실행할 코드
}

for (let i = 0; i < 5; i++) {
  console.log(i); // 0부터 4까지 출력
}

초기화: 반복문이 시작할 때 한 번 실행됩니다. 주로 반복문에서 사용할 변수를 초기화하는데 사용됩니다.
조건: 이 조건이 참(true)인 경우에만 코드 블록이 실행됩니다. 각 반복 시작 전에 평가됩니다.
증감: 코드 블록이 실행된 후에 실행됩니다. 주로 반복문에서 사용한 변수를 업데이트하는데 사용됩니다.

 

 

forEach 메소드
배열에 포함된 각 요소에 대해 주어진 함수를 한 번씩 실행합니다.
오직 Array 객체에서만 사용할 수 있는 메소드입니다.

배열.forEach(function(요소, 인덱스, 배열) {
  // 각 요소에 대해 실행할 코드
});

let fruits = ["apple", "banana", "cherry"];
fruits.forEach(function(item, index) {
  console.log(index, item); // 각 과일과 그 인덱스를 출력
});

요소: 배열에서 현재 처리 중인 요소입니다.
인덱스: 처리 중인 요소의 인덱스(위치)입니다.
배열: forEach가 호출된 배열입니다.

 

jQuery

jQuery라는 자바스크립트 라이브러리는 복잡한 코드와 라우저 간 호환성 문제 해결하고자 등장하게 되었다.

같은 의미의 아래 코드들을 비교해보면 간결해지고 더욱 직관적으로 표현되는 코드를 볼 수 있다.

Javascript)

document.getElementById("element").style.display = "none";

jQuery)

$('#element').hide();

 

 

서버-클라이언트 통신

 

* GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회

* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 예) 회원가입, 회원 탈퇴, 비밀번호 수정

 

https://movie.daum.net/moviedb/main?movieId=161806

위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
"?" 기준으로 앞부분이 [서버 주소], 뒷부분이 [영화 번호] 입니다.

* 서버 주소: https://movie.daum.net/moviedb/main?
* 영화 정보: movieId=161806

 

GET 방식으로 데이터를 전달하는 방법

?  : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

        위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
        q=아이폰                        (검색어)
        sourceid=chrome        (브라우저 정보)
        ie=UTF-8                   (인코딩 정보)

 

 

Fetch로 요청 보내기

 

Fetch 기본 골격

fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
	.then(res => res.json()
	.then(data => { 
		console.log(data)
})

 

fetch("여기에 URL을 입력")            이 URL로 웹 통신 요청을 보냄, 괄호 안에 URL밖에 들어있지 않다면 기본상태인 GET이.

.then()                                             응답을 받은 다음 이렇게 할 거임(통신이 성공했다면)

res ⇒ res.json()                              통신 요청을 받은 데이터는 res 라는 이름을 붙일 거임(변경 가능)

                                                        res는 JSON 형태로 바꿔서 조작할 수 있게 할 거임

.then(data ⇒ {})                               JSON 형태로 바뀐 데이터를 data 라는 이름으로 붙일 거임