-
웹을 데이터 관점으로 바라보기
IT란 Information Technology. 정보 기술.
웹은 정보를 빠르게 교환하기 위해 태어났다.
웹 페이지 하나 하나는 정보를 담은 문서. 화면은 정보(데이터)를 표현한 것.
데이터가 우리 눈에 보이도록 화면을 만드는 것이 프론트엔드(Front-end)의 역할이고,
데이터를 관리(전송, 저장, 수집, 가공)하는 것이 백엔드(Back-end)의 역할이다.
-
웹 기초 동작원리
웹은 HTTP(HyperText Transfer Protocol)라는 통신규약(Protocol)을 따른다.
url에서 http:// 가 바로 HTTP라는 통신규약을 따른다는 표시.
HTTP에서 요청(Request)하는 쪽을 클라이언트,
요청을 처리하여 그에 맞게 응답(Response)하는 쪽을 서버라고 한다.
서버가 요청에 응답해서 HTML파일을 보내줄 때도 있지만, 데이터만 보내줄 때가 더 많다.
예를 들어 티켓을 예매하는 상황에서 계속 페이지가 새로고침 되면 안되므로
데이터만 받아서 데이터 값만 바꿔주는 것이다.
데이터만 보내줄 경우 사용하는 데이터 형식을 JSON 형식이라고 한다.
-
크롬 개발자도구 콘솔창이란?
띄워놓은 페이지에서 빠르게 자바스크립트를 테스트 해볼 수 있게, 개발자들을 위해 만들어둔 도구.
console 창에서 입력하면 실행에 대한 값이 바로 보이지만, script 태그 안에서는 console.log를 사용해야 한다.
console.log(변수)
console.log(변수1, 변수2)
처럼 여러 값을 한 번에 출력할 수 있다.
-
코딩 컨벤션(코딩 규칙, coding convention)
변수의 naming 형식. 이름을 작성하는 규칙.
변수의 이름을 지을 때는 담고 있는 정보를 잘 표현해야 한다.
또한 변수명은 숫자로 시작되거나, 일부 특수문자 또는 띄어쓰기를 사용할 수 없다.
이러한 규칙들을 포함해 특정 프로그래밍 언어로 프로그래밍 할 때 일련의 지침을
코딩 컨벤션(coding convention)이라고 한다.
-
data의 형식
문자, 숫자, boolean(참, 거짓), 자료형(List, Dictionary)
-
자료형(Data Type)
자료를 담는 형태. List와 Dictionary가 가장 많이 쓰인다.
-
리스트(List)
순서를 지켜서 가지고 있는 형태
let sampleList = [];
let sampleList = [1,2,3,'string'];
//리스트 선언. []로 선언한다.
console.log(sampleList[2]); //3이 출력됨
console.log(sampleList[3]); //string이 출력됨
sampleList.push('5'); //sampleList의 마지막에 5 삽입
console.log(sampleList); //[1,2,3,'string',5] 출력
console.log(sampleList.length); //5 출력. sampleList의 data갯수 구하기- 딕셔너리(Dictionary)
키(key)와 값(value)이 한 쌍으로 존재하는 형태
let sampleDic = {};
let sampleDic = {'name':'YuJin','age':'28'};
//딕셔너리 선언. {}로 선언한다. {'키':'값','키':'값'} 형태.
console.log(sampleDic['name']); // YuJin이 출력됨
console.log(sampleDic['age']); //28이 출력됨
sampleDic['height'] = 160; //딕셔너리에 key:value 넣기
console.log(sampleDic); //{'name':'YuJin','age',28,'height',160} 출력됨- List와 Dictionary의 조합
let sample = [
{'name':'Yujin','age':28},
{'name':'Minsu','age':30}
];
//List 안에 Dictionary
console.log(sample[0]['name']); //'YuJin' 출력됨
console.log(sample[1]['age']); //30 출력됨
newSample = {'name':'Sanghoon','age':29};
sample.push(newSample);
//sample List 안에 newSample 삽입
//같은 형식으로 맞춰서 push해야 데이터를 활용하기 쉽다.
console.log(sample);
// [{'name':'Yujin','age':28},{'name':'Minsu','age':30},'name':'Sanghoon','age':29};] 출력- 왜 자료형을 사용할까?
자료의 순서를 표시할 수 있고, 정보를 묶을 수 있다.
let customer1Name = 'Yujin';
let customer1Age' = 28;
let customer2Name = 'Minsu';
let customer2Age = 30;let customer1 = {'name':'Yujin','age',28};
let customer2 = {'name':'Minsu','age',30};let customers = [
{'name':'Yujin','age',28},
{'name':'Minsu','age',30}
]이처럼 보기에도 깔끔해지고 push함수를 이용해 새로운 데이터를 쉽게 추가할 수 있다.
- 기타 다양한 함수들
특정 문자로 문자열을 나누고 싶을 때
let Email = 'Yujin@gmail.com';
let splitEmail = myEmail.split(@);
console.log(splitEmail); //['Yujin','gamil.com'] 출력됨
console.log(splitEmail[0]); // Yujin 출력됨
console.log(splitEmail[1]); // gmail.com 출력됨let domain = splitEmail[1].split('.');
console.log(domain[0]); //gmail 출력됨 --> 구하고 싶었던 값
console.log(domain[1]); //com 출력됨let mailDomain = domain[0];
console.log(mailDomain); //gmail 출력직접 함수 만들기
function functionName(필요한 변수들) {
내릴 명령어들을 순차적으로 작성
}함수 사용하기
functionName(필요한 변수들);