📍동기 : 위에서 아래로 실행 되어야 한다.
📍비동기 : 뭐가 먼저 실행될지 알 수 없다.
📍ajax는 서버에서 데이터를 가지고 오는 것이다(처음에는 비동기 이다)
비동기로 되는 것을 최소화 해야 한다(코드를 보면서 돌아가는 방실을 알 수 있어야 하기 때문이다)
상황에 따라 개발자가 정하지만 대부분 동기로 한다
메서드는 대표적으로 get(데이터를 가지고 오는 것) 하고 post(데이터를 내가 서버에 보낼때)가 있다.
DataType :
📍json은 모두 문자열(String)이다.
📍제이쿼리ajax에서는 자동으로 배열이나 객체로 바꾸어 주어 바로 사용이 가능하다
error: function(){}, : 서버와 통신 실패시 함수 실행
finally: function() {}, : 무조건 이 함수를 타게 된다.
📍
$.ajax({ url: "https://pokeapi.co/api/v2/pokemon?limit=10", //요청할 주소 == 서버 주소 async: false, //동기 (true로 하면 비동기) method: "get", dateType: "json", success: function (response) { //==> 성공했을때 실행할 함수 //response 응답온 데이터 아무 변수명 으로 사용해도 괜찮다 console.log(response); const list = response.results; //results는 가지고온 데이터들이다 //제이쿼리 반복문(가지고온 데이터를 뿌리기 위해 사용) $.each(list, function (index, value) { //제이쿼리는 시작할때 $가 기본 // console.log(index, value);
node.js
📍서버 설정 방법
자바스크립트로 만들수 잇는 서버 : node.js
📍Step1 : node.js설치(서버 환경 구축)
(설치 확인 : 윈도우 -> cmd -> node -v -> 버전 뜨면 성공)
📍Step2 : vs.code -> server우클릭 -> 통합 터미널에서 열기 -> npm -v(오류시 구글링) ->
(파일 이름을 영어로)
📍node.js 설치해야할 것들
📍package.json : 서버에 다운로드를 해주는 것(라이브러리들을 관리 해주는 기능)
(만드는 방법 : 터미널 -> npm install express)
터미널에서 다운 받을 것 들 : npm install express, npm install nodemon
📍브라우저 에서는 데이터를 주고 받을 때
포트 번호가 서로 다르면 브라우저에서 막는다
cors에러(아래의 문제때문에 정책적으로 막는다.)
EX.
네이버 서버의 주소를 알아내서 우리 싸이트에서 네이버의 데이터를 가지고 오고 싶다 - 네이버 데이터는 네이버에서만 사용이 가능
따라서 에러를 해결해 주어야 한다.
📍터미널 -> npm install cors
server.js에 아래 코드 추가
const cors = require('cors');
app.use(cors());
(요청 보내는 포트가 서버랑 다르면 cors정책에 따라 막지만 라이브러리를 통해 허용해주는 과정)
📌Node.js를 위해서 자바스크립트 필수 문법 알아보기
1.템플릿 리터럴(template lliterals)
2.화살표 함수(arrow function)
함수 선언하는 방법 중 하나 아래의 형식 (일반 함수로 선언한 함수 안에 여러 함수가 들어가면 화살표 함수 사용)
(최상단 함수 인지 화살표 함수인지 유추하고 화살표 함수라면 위에 함수가 더 있겠구나 추측)
(개발자간 약속??) (일반 함수와 선언 부분만 다르다)const getName = () => { console.log('') }
- 매개변수 기본 값(degault parameter value)
ex.const addNumber = (number, number2) => { return number + number2; //100 + undefined = null : 치명적 오류가 생기기 때문에 기본값을 준다. //const addNumber = (number, number2 = 0) ==> number2의 기본값을 0으로 지정 } addNumber(100);
- 스프레이드 문법(spread)
ex.const arr1 = [1,2,3,4,5]; const arr2 = [6,7,8,9,10]; 두 배열을 합치고 싶다. console.log(...arr1); ==> ...은 안에 있는 것을 밖으로 빼내는 것 버겨내어 number가 된다 [1,2,3,4,5] -> 1,2,3,4,5 console.log(...arr1, ...arr2); 를 하면 두개의 배열이 합쳐진다. (...이 스프레드 문법이다, 문자열 모두 가능 하다) (배열은 얕은 복사라고 해서 방법이 따로 있다.) 5. 배열 디스트럭처링(array destructuring) == 구조분해 할당 ==> 많이 사용한다. Ex.let array1 = ["홍길동", 20]; let myName = array1[0]; let age = array1[1];==>한줄로 처리
let[myName, age] = array1;
- 자바스크립트 대표 반복문(map, forEach, filter, find, findeIndex // for of, for in)
==>중요!!
[step1 : map 반복문]
--EX1--const array = [1,2,3,4,5,6,7,8,9,10]; //반복문을 돌리기 위해서는 배열 //반복문을 할때는 함수를 이렇게 선언하는게 더 좋다. array.map((value, index) => { console.log(value); });--EX2-- const array = [{ name : "kvin", age : 19, },{ name : "kvin", age : 19, },{ name : "kvin", age : 19, }] array.map((value, index) => { console.log(value); });--EX3-- //구조분해 할당 사용 array.map(( {name, age}, index) => { console.log(name, age); });--EX4-- 나이에 10씩 더해 주는 기능 const newArray = array.map((value, index) => { value.age += 10; retrun value; //return을 해주면 newArray에 계속 쌓인다. }); console.log(newArray); ---[step2 : forEach 반복문]
--EX1-- let sum = 0; 배열은 위의 배열을 사용 array.forEach((value, index) => { console.log(value, index); sum += value.age; }) //forEach, map의 차이 : forEach는 return이 없다. 나이의 총합을 알고 싶을 경우 -> forEach 를 돌린다 return할 필요가 없는 것. ==>forEach, map을 어떨때 사용할지 판단은 개발 경험을 쌓아야 하기 때문에 사용방법을 우선 숙지
- JSON.stringify : 객체나 배열을 문자열로 변환
- JSON.parse : 문자열을 객체나 배열로 반환
- 쿠키,localStorage : 웹안에 저장하는 데이터 개념 (브라우저 바뀌면 초기화)
- 쿠키 : 시간이 유한해요 값 유효기간을 설정할수 있지만 무제한은 안된다
- localStorage : 사라지지않음 (용량이 좀 더 높음)
