S2 unit3 | 타이머 관련 API, 모듈 사용 방법, Fetch&Axios

📌 타이머 관련 API

setTimeout(callback, millisecond)
일정 시간 후에 함수를 실행

• 매개변수(parameter): 실행할 콜백 함수, 콜백함수 실행 전 기다려야 할 시간 (밀리초 단위)
• return 값 : 임의의 타이머 ID
• setTimeout(function() { console.log('1초 지났음'); }, 1000); //1초 지났음

 

clearTimeout(timerId)
setTimeout 타이머를 종료

• 매개변수(parameter): 종료할 타이머 ID
• return 값 : 없음

const timer = setTimeout(function() {
  console.log('10초 지났음');
}, 10000);
clearTimeout(timer);
// setTimeout이 종료되어 10초 후에도 아무 것도 뜨지 않음

 

setInterval(callback, millisecond)
일정 시간의 간격을 가지고 함수를 반복적으로 실행

• 매개변수(parameter): 실행할 콜백 함수, 콜백함수를 반복적으로 실행할 시간 간격 (밀리초 단위)
• return 값 : 임의의 타이머 ID

setInterval(function() {
  console.log('1초 지났어')
},100)
// 1초마다 '1초 지났어'가 콘솔에 찍힘

 

clearInterval(timerId)
setInterval 타이머를 종료

• 매개변수(parameter) : 종료시킬 setInterval 타이머 ID
• return 값 : 없음

const timer = setInterval(function() {
  console.log('10초 지났어')
},1000)
clearInterval(timer);

---

📌 모듈 사용

HTML에서 javascript 파일 불러올 때

<script src="불러오고싶은_스크립트.js"></script>

javascript에서 모듈 내보낼 때 : export 구문 사용

export{모듈이름} // 코드 중 하나의 변수만 가져가는 경우일 때 사용. 모듈이름으로만 import가능
export default 모듈이름 // 코드 자체를 고정적으로 가져옴. 이름 변경 가능

 

javascript에서 모듈 불러올 때 : import 구문 사용

import {모듈이름} from "module-name";
import 이름 from "module-name";

 

✔ Node.js 내장 모듈 불러오기

Node.js : 비동기 이벤트 기반 Javascript 런타임

런타임 : 프로그램 언어가 실행되는 환경 (예 : 브라우저, Node.js)

모듈 : 별도의 파일로 독립된 기능

 

 

🔗Node.js 내장 모듈 목록

 

 

javascript에서 Node.js 모듈 불러올 때

const fs = require('fs'); // 파일 시스템 모듈 부름

 

require()

: Node.js의 메서드

---

✔ 3rd-party 모듈 불러오기

서드 파티 모듈 : 해당 프로그래밍 언어에서 공식적으로 제공하는 빌트인 모듈(built-in module)이 아닌 모든 외부 모듈

npm install [서드파티모듈]

=> node_modules에 설치되어 Node.js 내장 모듈을 사용하듯 require 구문으로 불러올 수 있음

---

✔ file system module 🔗

fs.readFile(path\[,option\],callback)

비동기적으로 파일 내용 전체를 읽은 후에 callback 함수를 실행

 

전달인자

• path : string, Buffer, URL, integer 타입 (일반적으론 string 사용)
• option : object, string(인코딩) 타입 
• callback : function (콜백함수 전달, 파일을 읽고 난 후에 비동기적으로 실행되는 함수)

매개변수(parameter) : err(에러가 발생하지 않으면 null), data(문자열, buffer 타입의 파일 내용)

 

 

option에 object를 사용하는 예제

let options = {
  encoding: 'utf8', // utf8 인코딩 방식
  flag: 'r' // 읽기 위해 연다
}
fs.readFlie(Path, option, callback)

---

📌 fetch API 

: javascript에서 네트워크의 리소스를 비동기적으로 가져올 수 있게 하는 API

 

return 값 : Promise => .then을 뒤에 사용할 수 있다.

 

let url =
  "https://koreanjson.com/posts/1";
fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

 

---

📌 Axios 라이브러리

라이브러리 : 기능 모음

	Axios	Fetch API
형식	써드파티 라이브러리	빌트인 API
JSON 데이터 변환 여부	자동 변환	.json() 메서드 사용

 

✔ GET 요청

: 정보 요청하기 위해 사용되는 메서드

 

Axios

axios.get("url"[,option])

Fetch

fetch('URL', {method : get})

✔ POST 요청

: 서버에 데이터 전송

 

Axios

axios.post("url"[, data[, option]])

Fetch

fetch('URL', {
	method: 'POST', 
    headers: {
    	'Content-Type': 'application/json', // JSON 형식으로 데이터 보냄
	},
    body: JSON.stringfy({content: 'This is content!'}),
})