10. 마지막으로 json-server를 구동시키기 위해 터미널에 json-server --watch db.json 명령어를 입력하고 엔터키를 누릅니다.
json 서버 구동 명령어
json-server --watch db.json
11. 엔터키를 누르고 잠시 뒤에 아래 코드가 나오면 구동까지 완료된 상태입니다.
* http://localhost:3000/posts 는 해당 db.json파일 안 데이터 posts에 접근할 수 있는 리소스 주소를 나타냅니다.
\{^_^}/ hi!
Loading db.json
Done
Resources
http://localhost:3000/posts // 접근가능한 리소스 주소
http://localhost:3000/comments // 접근가능한 리소스 주소
http://localhost:3000/profile // 접근가능한 리소스 주소
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
Watching...
http://localhost:3000/posts는 db.json에서 posts에 접근하는 리소스 주소 입니다.
* 위 주소를 javaScript로 활용하여 데이터 조회, 생성, 수정, 삭제가 가능합니다.
* 위의 db.json파일의 데이터들은 원하는대로 수정해서 테스트할 수 있습니다.
* json-server로 미리 구현 후 최종적으로 벡엔드 api가 완료되면 주소부분만 수정하여 대기시간 없이 구현할 수 있게 됩니다.
나. json-server 사용방법
위에서 json-server를 설치하여 구동까지 완료되었습니다. 아래부터는 json-server를 구동한 상태에서 데이터 조회, 생성, 수정, 삭제를 알아보고자 합니다.
fetch api
데이터를 조작하기 위해 다양한 방법 중 fetch api를 사용하고자 합니다.
fetch api를 이용하면 필요할 때 서버에 요청을 보내고 정보를 받아오는 일을 할 수 있습니다. - 첫 번째 파라미터 : 접근할 URL - 두 번째 파라미터 : 옵션
- fetch('http://localhost:3000/posts') 데이터를 정상적으로 받아오면 then()안의 함수가 실행됩니다.
- .then((response) => response.json()) fetch는 promise를 포함하고 있어 서버로 받은 응답을 response 파라미터로 받습니다.
response 안에는 응답코드, 응답메시지 등의 정보를 담고 있습니다.
- response.json()은 받아온 json 데이터를 사용할 수 있도록 객체 형태로 변환합니다. (JSON.parse()와 동일한 기능입니다)
- .then((json) => console.log(json)); json 데이터를 마지막 then()에서 출력합니다.
fetch api로 db.json의 posts데이터를 조회한 결과 콘솔창
posts 리소스를 조회한 결과, 위 콘솔창의 0번 인덱스와, 아래 db.json파일의 posts와 동일한 것을 확인할 수 있습니다.
fetch api로 posts데이터를 조회한 결과 db.json의 posts의 데이터와 동일
데이터 생성
function postData() {
const data = { title: "javaScript", author: "Mike" }; // 생성할 코드
fetch("http://localhost:3000/posts", { // 첫 번째 파라미터 : 주소, 두 번째 파라미터 : 옵션
method: "POST", // 데이터 생성 method : POST
body: JSON.stringify(data), // body 보낼 데이터 입력 (문자열로 변환 후 전송)
headers: headers = {
"content-type": "application/json;charset=UTF-8" // 데이터 타입 : json, 인코딩 방식 : UTF-8
},
}).then((response) => response.json()).then((json) => console.log(json))
}
위 코드는 fetch api를 이용해 데이터를 생성하는 코드 입니다.
- 생성할 데이터를 미리 변수에 담아 놓습니다. (const data = { title: "javaScript", author: "Mike" };) - 첫 번째 파라미터에 주소가 입력되고, 데이터를 생성하기 위해 두 번째 파라미터로 옵션을 입력해야 합니다.
- 데이터를 생성하기 위해서는 method에 POST를 입력합니다. - body에는 보낼 데이터를 입력합니다. - 데이터를 전송하려면 JSON.stringify(data)를 이용해 문자열로 변환 후 전송합니다. - 생성할 데이터 타입이 json이므로 headers에는 content-type이 application/json이 되고 인코딩 방식은 전 세계 언어를 지원하는 charset=UTF-8을 사용합니다.
데이터 생성 결과 콘솔창 : 인덱스 번호 1번이 생성되었습니다.
실제로 코드 실행 시 1번 인덱스에 데이터가 생성된 것을 확인할 수 있습니다.
데이터 수정
function putData() {
const data = { title: "fetch api", author: "john" }; // 수정할 데이터를 변수에 담아놓습니다.
fetch("http://localhost:3000/posts/2", { // 주소 끝에 변경할 id 값을 입력합니다.
method: "PUT", // 데이터 수정시 method에 PUT을 입력합니다.
body: JSON.stringify(data), // 데이터 전달 시 문자열로 변경 후 전송합니다.
headers: headers = {
"content-type": "application/json;charset=UTF-8"
}
}).then(response => response.json()).then(json => console.log(json))
}
위 코드는 fetch api를 이용해 데이터를 수정하는 코드 입니다.
- 수정할 데이터를 미리 변수에 담아 놓습니다. (const data = { title: "fetch api", author: "john" };) - fetch("http://localhost:3000/posts/2" 수정할 id 값을 주소 마지막에 입력합니다. - 데이터를 수정하기 위해서 method에 PUT를 입력합니다.
id 값이 2번인 데이터가 수정된 콘솔창
실제로 코드 실행 시 id값이 2인 title 값이 javaScript에서 fetch api로 변경되었고 author 값이 Mike에서 john으로 변경된 것을 확인할 수 있습니다.
데이터 삭제
function deleteData() {
fetch("http://localhost:3000/posts/2", { // 삭제할 id 값을 입력합니다.
method: "DELETE" // 삭제를 위해 method는 DELETE를 입력합니다.
}).then(response => response.json()).then(json => console.log(json))
}
위 코드는 fetch api를 이용해 데이터를 삭제하는 코드 입니다.
- fetch("http://localhost:3000/posts/2" 삭제할 id 값을 주소 마지막에 입력합니다. - 데이터를 삭제하기 위해서 method에 DELETE를 입력합니다.
id값이 2인 데이터가 삭제된 콘솔창
실제로 코드 실행 시 id값이 2인 데이터가 삭제된 모습을 확인할 수 있습니다.
여기까지 json-server를 설치하고 fetch api를 이용해 간단한 데이터 조작까지 알아보았습니다. 실제 서버 api 주소가 없더라도 가상 서버인 json-server를 이용해 미리 코드를 구현하고 실제 api 주소를 전달받으면 주소만 교체하여 일을 효율적으로 처리할 수 있게 됩니다.
위의 숫자 배열을 sort()함수로 정렬 시 문자열로 비교하게 되어 원하는 정렬을 얻지 못합니다.
* 정렬순서에 대한 함수를 sort()함수의 파라미터로 정의하면 원하는 정렬을 반환할 수 있습니다.
const num = [9, 2, 100, 250, 50, 80, 31]
num.sort(function (a, b) {
if (a > b) return 1;
if (a < b) return -1;
if (a === 0) return 0;
// a = 9, b = 2 / a > b이므로 9와 2는 교체
// [2, 9, 100, 250, 50, 80, 31]
// a = 9, b = 100 / a < b이므로 그대로 유지
// [2, 9, 100, 250, 50, 80, 31]
// a = 100, b = 250 / a < b이므로 그대로 유지
.
.
.
// [2, 9, 31, 50, 80, 100, 250] 최종적으로 오름차순 배열 형태로 정렬
})
console.log(num) // [2, 9, 31, 50, 80, 100, 250]
파라미터 a와 b에 배열 요소가 순차적으로 들어가고 그 둘을 비교합니다.
a와 b를 비교해서 리턴값이 양수이면 a와 b의 자리를 교체합니다.
a와 b를 비교해서 리턴값이 음수이면 a와 b의 자리를 교체하지 않습니다.
더 이상 a와 b의 자리가 교체되지 않을 때까지 진행되면 원하는 정렬을 얻게 됩니다.
따라서 양수인지 음수인지를 확인하므로 숫자 정렬의 경우 아래와 같이 축약할 수 있습니다.
const num = [9, 2, 100, 250, 50, 80, 31]
num.sort(function (a, b) { return a - b })
console.log(num) // [2, 9, 31, 50, 80, 100, 250]
내림차순의 경우 아래와 같이 작성할 수 있습니다.
const num = [9, 2, 100, 250, 50, 80, 31]
num.sort(function (a, b) { return b - a })
console.log(num) // [250, 100, 80, 50, 31, 9, 2]
오름차순을 a - b로 비교했다면 내림차순은 b - a로 하여 정렬할 수 있습니다.
* 객체 정렬 & 문자 정렬
let drinkList = [
{name: "콜라", price: 1400},
{name: "칠성사이다", price: 1300},
{name: "아메리카노", price: 1200},
{name: "바나나우유", price: 1500},
{name: "초코우유", price: 1000}
]
drinkList.sort(function (a, b) {
if (a.name > b.name) return 1; // 양수 : 자리교체
if (a.name < b.name) return -1; // 음수 : 자레교체 안함
if (a.name === b.name) return 0; // 0 : 다음 순서 진행
})
console.log(drinkList)
객체에 접근하여 문자를 정렬할 경우 숫자 정렬할 때의 a - b로 정렬되지 않고 if 문을 사용하여 정렬할 수 있습니다.
console에 표시된 sort() 함수 결과
11. filter() 함수
- 배열에서 특정 조건에 맞는 요소만 모아 새 배열로 반환됩니다.
- filter() 함수의 파라미터로 함수가 사용되며 그 함수의 파라미터에는 배열의 요소가 포함됩니다.
하지만 나중에 1,000까지, 10,000까지 숫자로 표현해야 한다면 많이 힘들어질 수 있습니다.
이런 경우 중복되는 코드를 줄이고 반복해서 실행할 수 있도록 하는 것이 반복문입니다.
다음 글부터 자바스크립트 반복문의 종류와 사용법에 대해서 알아봅시다.
나. 반복문의 종류와 사용법
반복문의 종류에는 for-loop, for-in, for-of, forEach, while, do while이 있습니다.
왼쪽부터 차례대로 알아봅시다.
1. for-loop 문
for-loop 문은 초기식, 조건식, 증감식이 포함되어 있는 반복문 입니다.
for-loop 문은 객체에서 사용할 수 없으며 배열에서 사용 가능합니다.
아래 코드는 for loop문의 기본 형식입니다.
// for 문의 형식
for(statement1 ; statement2 ; statement3){
실행될 코드
}
- statement1 : for-loop문 실행할 때 무조건 딱 한번 실행 - statement2 : 코드 블록을 실행시킬 조건절 - statement3 : 코드블록을 실행한 후 실행되는 코드
아래 for-loop문을 이용한 예제 코드를 보면서 이해하고자 합니다.
// 1에서 100까지 숫자를 출력
for (let i = 1; i <= 100; i++) {
document.write(i);
}
1) statement1에 해당하는 "let i = 1" 은 한 번 실행됩니다. (변수 i에 숫자 1이 할당됩니다)
2) statement2에 해당하는 조건인 "i <= 100" 은 i 가 숫자 100보다 작거나 같으면 아래 코드가 실행됩니다.
3) statement3에는 i++가 있습니다. 이것은 for-loop문 안 코드가 실행된 후 i가 1씩 증가됨을 의미합니다.
아래는 위의 코드가 실행되는 순서를 표현한 코드입니다.
for (let i = 1; i <= 100; i++) {
i = 1, 1이 100보다 작으므로 조건에 부합
document.write(1) 실행
i++되어 i는 2가 됨
i = 2, 2는 100보다 작으므로 조건에 부합
document.write(2) 실행
i++되어 i는 3이 됨
.
.
.
i = 100, 100은 100과 같으므로 조건에 부합
document.write(100) 실행
i++되어 i는 101이 됨.
i = 101, 101은 100보다 크므로 조건에 부합하지 않음
for문이 종료되고 코드블록을 빠져나감
}
위와 같이 조건에 부합하면 계속 반복실행되며 조건에 부합되지 않으면 for-loop문이 종료됩니다.
* for-loop 문 - break
break는 for-loop문을 사용하면서 원하는 특정 시점에 for 블록 전체를 실행하지 않고 빠져나올 수 있는 용도로 사용합니다.
for (let i = 0; i < 10; i++) {
if (i === 3) {
break; // break를 만나면 for문 종료
}
console.log(i); // 0, 1, 2 콘솔에 출력
}
위의 for-loop문을 break 없이 실행한다면 0에서 9까지 콘솔에 출력되어야 하지만
if 조건문을 사용, i 가 3일 때 break를 적용하므로 콘솔에는 0, 1, 2만 출력되고 for-loop문을 빠져나옵니다.
* for-loop 문 - continue
continue는 for-loop문을 사용하면서 continue를 만나면 아래 실행 코드를 실행하지 않고 statement3으로 이동됩니다.
for (let i = 0; i < 10; i++) {
if (i === 3) {
continue; // continue를 만나면 아래 코드를 실행하지 않고 i++로 이동 후 진행
}
console.log(i); // 0, 1, 2, 4, 5, 6, 7, 8, 9 콘솔에 출력 (3 생략)
}
continue가 없다면 0~9까지 콘솔에 출력되지만 i가 3일 때 continue가 실행되므로
i가 3일 때의 continue 아래 코드가 실행되지 않고 statement3인 i++로 진행됩니다.
for-loop문은 객체에서 사용할 수 없지만 for in은 객체에서 사용할 수 있습니다.
아래는 for in 문의 기본 형태입니다.
// for in 기본 형태
for (선언자 변수명 in 객체) {
실행 코드
}
아래 for-loop문과 비교하면서 알아봅시다.
const fruit = ["orange", "apple", "banana", "grape"];
// for 문
for (let i = 0; i < fruit.length; i++) {
console.log(fruit[i]);
}
// for in 문
for (const i in fruit) {
console.log(fruit[i]);
}
위의 for와 for in 은 똑같은 결과를 가집니다.
for 같은 경우 statement를 설정해야 하지만 for in은 따로 statement를 설정하지 않더라도 모든 배열 요소를 순회합니다.
for in의 변수명에는 배열의 인덱스 번호가 출력됩니다. (위의 예제에서는 배열의 인덱스 번호가 0, 1, 2, 3이 됩니다)
* object에서 사용되는 for in
let person = {
name: "김미영",
age: 28,
tel: "010-1234-5678",
city: "daegu"
};
for (const key in person) { // key에는 person 객체의 키 명이 입력됩니다.
console.log(key, person[key])
}
객체에서 사용되는 for in 은 변수명에 객체의 키 명이 입력되어 위 예제 key에는 name, age, tel, city가 담겨있습니다.
객체의 키 값을 출력하기 위해서는 객체[키]를 이용하며 객체의 모든 키 값을 출력할 수 있습니다.
위의 예제에선 person[key]로 가져올 수 있습니다. (김미영, 28, 010-1234-5678, daegu가 출력됨)
- for in을 사용하는 경우
(1) 객체의 키, 값을 모두 출력해야 하는 상황
(2) 객체의 키 명을 알 수 없을 때 for in을 사용 가능
3. for of 문
배열의 요소만큼 반복하고 요소 값을 출력할 수 있습니다.
const fruit = ["orange", "apple", "banana", "grape"];
for (const fruitsName of fruit) { // 배열을 순회하면서 fruitsName에 요소값을 넣어준다.
console.log(fruitsName) // orange, apple, banana, grape
}
for in은 변수명에 인덱스 번호가 담긴다면 for of는 배열 각각의 요소 값이 입력됩니다.
const str = "js is the best language";
for (const string of str) {
console.log(string)
}
위의 코드를 실행 시 아래와 같이 출력됩니다.
문자열을 for of로 출력한 모습
4. forEach 문
forEach문은 배열의 내장함수로 사용됩니다.
forEach의 파라미터는 함수를 전달 받습니다.
*파라미터(매개변수)란 함수를 호출할 때 전달받은 인수를 함수 내부로 전달하기 위한 변수를 의미합니다.
배열을 순회하면서 배열의 요소값, 인덱스번호를 출력할 수 있습니다.
const fruit = ["orange", "apple", "banana", "grape"]; // fruit - 배열 객체
fruit.forEach(function (item, index) { // array 내장함수, 첫번째 파마리터 : 요소값, 두번째파라미터 : 인덱스번호
console.log(item) // orange, apple, banana, grape 출력
console.log(index) // 0, 1, 2, 3 출력
})
위 예제의 첫번째 파라미터 item에는 배열의 요소 값인 orange, apple, banana, grape를 전달받고
두번째 파라미터 index에는 인덱스 번호인 0, 1, 2, 3을 전달 받습니다.
5. while 문
while문은 조건식을 만족하는 동안 코드 블록을 실행합니다.
조건식이 만족하는 동안 실행되므로 while문을 종료할 수 있는 코드가 반드시 존재해야 합니다.
let i = 1;
while (i < 5) { // 변수 i가 5미만일 때만 while문 실행
console.log(i)
i++; // 반복할 때마다 변수 i를 1씩 증가, i가 5가되면 while문 종료
// i = 1, i < 5 코드 블록 실행
// i = 2, i < 5 코드 블록 실행
// i = 3, i < 5 코드 블록 실행
// i = 4, i < 5 코드 블록 실행
// i = 5, i < 5 조건식에 부합하지 않으므로 while 문 종료
}
조건식에 부합하는 동안 반복하다가 조건에 부합하지 않게 되면 while문은 종료됩니다.
위의 예제에서는 i 가 5 미만일 때까지 반복하다가 5가 되면 조건에 부합하지 않으므로 종료됩니다.
* while문이 사용되는 경우
얼마나 반복해야 될지 모를 때 사용합니다.
// 동전교환기
let inputCoin = 6000; // 넣은 금액
let coinUnit = 500; // 교환할 동전
let coinCount = 0; // 교환 동전의 갯수, 초기값은 0
while (inputCoin >= 0) { // 넣은 금액이 0보다 클 경우 반복 (조건식)
inputCoin = inputCoin - coinUnit; // 넣은 금액 - 교환할 동전, 넣은 금액이 0보다 작을 때까지 반복
coinCount++; // 교환 동전 갯수 1씩 증가
}
위의 예제는 동전교환기 코드입니다.
동전 교환기의 경우 사용자가 돈을 얼마나 교환할지 정해져 있지 않습니다.
따라서 얼마나 반복해야 할지 알 수 없으므로 while문을 통해 반복 횟수를 명시하지 않더라도 반복문을 사용할 수 있게 됩니다.
6. do while 문
do while문은 무조건 1번 코드 블록이 실행되고, 그 다음 조건식을 체크합니다.
let i = 1;
do {
console.log(i) // 무조건 1번 실행되므로 console에 1이 출력된다.
i++;
} while (i > 5)
위의 예제에서 조건식인 i 가 5보다 커야 조건에 부합하지만 do while 문은 코드블록이 무조건 1번 실행되므로 콘솔에 1일 출력되고 do while문이 종료됩니다.
여기까지 자바스크립트 반복문에 대해서 알아보았습니다.
배열 및 객체에서 반복문을 통해 값 또는 인덱스 번호를 가져올 수 있으며 반복되는 코드를 줄일 수 있는 장점이 있습니다.
반복문에는 6가지가 있으며 각각의 쓰임새가 조금씩 다르므로 필요에 맞게 사용하시면 됩니다.
