벌써 웹개발 기초를 시작한지 2주째라니!
근데 훅훅 어려워지기 시작한다 .. 복습이 중요하단걸 깨닫고 갑니다.
Javascript?
위의 사진처럼 클라이언트가 서버에 요청하면, 서버가 클라이언트에게 HTML+CSS+Javascript를 전달해준다.
당연한 말이겠지만 Javascript는 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.
Java와 Javascript는 아무 관련 없다.
자바 스크립트를 사용하려면, 항상 같이 사용하는 두가지가 있는데
'JQuery'와 'Fetch'도 알아줘야 한다.
Javascript: 웹을 움직이게 하는 코드
JQuery: html 뼈대를 선택해서 쉽게 조작할 수 있게 해주는 라이브러리
Fetch: 짧은 코드로 요청을 보내고 받아올 수 있는 코드
Javascript 기초 문법
자바 스크립트 작성위치
html의 'head'안의 'script'에 작성하면 된다.
<head>
<script>
/*자바 스크립트 작성*/
</script>
</head>console.log()
console.log(): 개발자가 사용자에게 보여지는 화면에 출력하기 전에 자신의 코드의 실행 여부 또는 문제 여부를 확인하기 위해 사용하는 도구
확인 방법
브라우저 화면에서 우클릭 > 검사 > console 탭
변수 선언
변수에는 크게 두가지 let과 const로 구분되며, 사용할 데이터 값에 이름을 지정하고 반복적으로 사용하기 위해 쓰인다.
- let: 선언된 데이터 값 변경 가능한 변수
- const: 선언된 데이터 값 변경 불가능한 변수
즉, 변수를 const로 선언한다면 이후 다른 값을 변수에 대입 및 변경이 불가능하다.
하지만, const로 선언된 상수 배열과 객체 내부의 상수값은 변경이 가능하다.
선언 방법
let 변수이름 = 할당할 값;
const 변수이름 = 할당할 값;함수 선언
자바 스크립트로 동작을 구현할 때 꼭 필요한 부분이며, 처리 작업을 한데로 모아 동작에 이름을 지정하여 반복하여 사용할 때 사용한다.
선언 방법
function 함수명(){
...
}조건문
보통 가장 많이 쓰이는 if 조건문의 구조는
if~else 구조이지만, 조건에 따라 if~ 또는 if~else if~else 처리가 가능하다.
선언 방법
if (조건){
...
} else if (조건) {
...
} else {
...
}배열 및 객체 선언
- 리스트: 순서를 지켜서 가지고 있는 형태로 배열이라고도 부른다.
선언 방법
let 배열이름1 = []
또는
let 배열이름2 = ['사과', '배', '감', ..]- 딕셔너리: 키(key)-밸류(value) 값의 묶음으로 객체라고도 부른다.
선언 방법
let 배열이름1 = {}
let 배열이름2 = {'name':'철수', 'age':20}
console.log(배열이름2['name']) /* 철수 */- 리스트와 딕셔너리 조합
자바 스크립트에서 가장 많이 쓰이고 기초가 되는 문법
let a = [
{'name':'영수', 'age':27},
{'name':'철수', 'age':15},
{'name':'영희', 'age':23},
{'name':'훈이', 'age':19}]
console.log(a[0]['name']) /*영수 출력*/!여기서 주의할 점! 컴퓨터는 0부터 세기 때문에, 리스트와 딕셔너리의 '키'는 모두 0 부터 시작한다.
Javascript & JQuery
JQuery?
HTML 요소들을 조작하는, 편리한 Javascript를 작성해둔 것을 모아놓은 라이브러리이다.
자바 스크립트로 모든 기능을 구현 가능하지만 코드가 엄청 복잡해지고 호환성 문제도 존재하기 때문에 함께 사용한다.
JQuery 사용하기
사용하는 방법은 총 두가지이고, 보통 두번째 방법을 많이 쓴다.
- JQuery 사이트에서 직접 다운받기
- CDN(Content Delivery Network) 사용하여 JQuery를 추가하기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>여기서 주의할 점, 무조건 자바 스크립트의 스크립트 태그보다 위에 있어야 한다. 자바 스크립트 코드 내에 JQuery가 쓰이기 때문이다.
사용방법
$('#아이디값').메소드()JQuery 반복문
- forEach 메서드
배열을 순회하는 여러 방법 중 하나로, 다음 매개변수와 함께 배열의 각 요소에 적용하게 될 콜백 함수를 전달한다.
사용방법
배열이름.forEach((익명함수이름) => {console.log(익명함수이름)}
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})
/*결과
사과
배
감
귤 */JQuery 반복문+조건문
가장 흔하게 쓰이는 문법 구조
반복문이 큰 테두리에 있고 그 안에 조건문이 들어가는 형식으로, 조건이 만족될시 그 코드가 반복되는 방식이다.
let ages = [12, 15, 20, 25, 17, 37, 24]
ages.forEach((a) => {
if(a > 20) {
console.log('성인입니다.')
} else {
console.log('청소년입니다.')
}
})백틱(``)
HTML 요소를 통째로 넣을 때 묶어주는 기호로, 문자와 기호를 함께 써줄 수 있도록 하는 특수기호이다.
백틱 안에 변수나 함수를 쓸 경우 ${}안에 넣어서 작성하면 된다.
Fetch
Fetch는 웹브라우저에서 서버로 HTTP 요청을 할 수 있게 해주는 최신 인터페이스입니다.
기본 골격
fetch("여기에 URL을 입력").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라는 이름을 붙인다
