[코딩애플] JavaScript 강의 정리 (Level3 7강 ~ 8강)

이언덕·2024년 5월 8일

코딩애플

목록 보기

17/37

7강 / array, for 반복문 실력향상 과제

1. Array에서 철수라는 자료를 찾고 싶습니다

array에서 이름을 찾아주는 함수를 만들고 있습니다.
함수 안에 파라미터로 이름을 집어넣으면
그 이름이 출석부에 있으면 콘솔창에 출력해주는 함수를 만들어봅시다.
어떻게 만들면 될까요?

let Attendance = ['흥민', '영희', '철수', '재석'];

function searchName(){
//여기다 코드 짜십쇼
}

동작 예시 :
searchName('철수'); 라고 쓰면 콘솔창에 '있어요'라는 글자가 떠야합니다.
searchName('명수'); 라고 쓰면 콘솔창에 아무 글자도 뜨지 않아야합니다.
(조건) 이상한데서 찾아온 find, indexOf 같은 자바스크립트 기본함수들 사용금지

풀이

만약 하드코딩이 된다면 if문을 계속 사용해서 아래와 같은 코드가 만들어질 수가 있다.
function searchName2(name) {
  if (attendance[0] == name) {
    console.log("있어요");
  } else if (attendance[1] == name) {
    console.log("있어요");
  } else if (attendance[2] == name) {
    console.log("있어요");
  } else if (attendance[3] == name) {
    console.log("있어요");
  } else {
    console.log("");
  }
}
하지만 이런 코드는 만약 array가 늘어나거나 줄어들면 오류가 발생하니 for문을 통해 간단히 해결할 수 있다.

let attendance = ["흥민", "영희", "철수", "재석"];

function searchName(name) {
  for (let i = 0; i < attendance.length; i++) {
    if (attendance[i] == name) {
      console.log("있어요");
    } else {
      console.log("");
    }
  }
}

searchName("철수");
searchName("명수");

for문을 통해 i가 attendance의 길이보다 작다면 for문코드가 작성되도록 만들었다. 이 부분은 attendance의 array수가 늘어나거나 줄어드는 것에 상관 없이 원활하게 작동된다.

철수와 명수를 파라미터에 집어넣었을 때 결과는 있어요와 빈 칸이 나오는 것을 볼 수 있다.

2. 갑자기 구구단을 콘솔창에 출력하고 싶습니다.

철수는 구구단을 외우지 못하는 관계로
자바스크립트를 이용해 구구단을 2단부터 9단까지 콘솔창에 출력하고 싶어졌습니다.
빨리 출력해보십시오.

콘솔창 출력결과 :
2
4
6
8
...
18
3
6
9
12
...
27

이렇게 2단부터 9단까지의 곱셈 결과부분만 쭉 출력해보면 됩니다.

풀이

먼저 2단에 대해 만들어보자
for (let i = 1; i < 10; i++) {
  console.log(2 * i);
}
이런식으로 한다면 i는 1 부터 9까지 올라가게 되고 i는 2에 곱해지면서 2단이 완성된다.

위와같은 방식으로 9단까지 완성하면 되는데 그러면 8개의 같은 for문이 만들어지기 때문에 더 줄여보는 방법을 찾아봐야할 것 같다.

for문 중첩

2단 ~ 9단 for문이 비슷한 코드이니 이 위에 for문으로 씌워주면 될 것 같다.
for (let k = 2; k < 10; k++) {
  for (let i = 1; i < 10; i++) {
    console.log(k * i)
  }
}
이런식이면 맨위의 k는 2단 부터 9단까지 정해주는 것이 되고 i는 1 부터 9까지 곱해주는 수가 된다.
위 코드를 작성하게 되면 콘솔에 2단부터 9단까지 모두 출력되는 것을 볼 수 있다.

3. 평균점수 계산기 만들기

어떤 함수에
기존 모의고사 성적들을 array 자료에 전부 담아 첫 파라미터로 입력하고
이번 11월 모의고사 성적을 둘 째 파라미터로 입력하면
11월 성적이 기존 성적들의 평균에 비해 얼마나 우수한지 결과를 알려주고 싶습니다.
어떻게 함수를 만들면 될까요?

동작예시 :
averageCal([10, 20, 30, 40, 50], 40) 이렇게 쓰면 콘솔창에 "평균보다 10점이 올랐네요"가 떠야합니다. (평균이 30이니까)
averageCal([40, 40, 40], 20) 이렇게 쓰면 콘솔창에 "평균보다 20점이 떨어졌네요 재수추천"이 떠야합니다. (평균이 40이니까)

풀이

array 안에 있는 숫자들 평균내기

평균낸 수와 모의고사 성적을 비교하여 모의고사 성적이 더 크면 console.log('올랐네요')

평균낸 수와 모의고사 성적을 비교하여 평균낸 수가 더 크면 console.log('재수추천')
위 한글코딩을 코드로 바꾸면 될 것 같다.

1. array 안에 있는 숫자들 평균내기

function averageCal(arr, ave) {
  let result = 0;
  for (let i = 0; i < arr.length; i++) {
    result = result + arr[i];
  }
  console.log(result / arr.length);
}

averageCal([10, 20, 30, 40, 50], 40);

평균이 잘 나오는 것을 볼 수 있다.

2. 평균낸 수와 모의고사 성적을 비교하여 모의고사 성적이 더 크면 console.log('올랐네요')

3. 평균낸 수와 모의고사 성적을 비교하여 평균낸 수가 더 크면 console.log('재수추천')

function averageCal(arr, ave) {
  let result = 0;
  for (let i = 0; i < arr.length; i++) {
    result = result + arr[i] / arr.length;
  }
  if (result < ave) {
    console.log(`평균보다 ${ave - result}점이 올랐네요`);
  } else {
    console.log(`평균보다 ${result - ave}점이 떨어졌네요 재수추천`);
  }
}

이런식으로 완성될 것 같다.

최종적 코드를 봐보자면

function averageCal(arr, ave) {
  let result = 0;
  for (let i = 0; i < arr.length; i++) {
    result = result + arr[i] / arr.length;
  }
  if (result < ave) {
    console.log(`평균보다 ${ave - result}점이 올랐네요`);
  } else {
    console.log(`평균보다 ${result - ave}점이 떨어졌네요 재수추천`);
  }
}

averageCal([10, 20, 30, 40, 50], 40);
averageCal([40, 40, 40], 20);

결과도 잘 나오는 것을 볼 수 있다.

과제 전체코드

array.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./array.js"></script>
  </body>
</html>

array.js

//문제 1번
let attendance = ["흥민", "영희", "철수", "재석"];

function searchName(name) {
  for (let i = 0; i < attendance.length; i++) {
    if (attendance[i] == name) {
      console.log("있어요");
    } else {
      console.log("");
    }
  }
}

searchName("철수");
searchName("명수");

// 문제 2번
for (let k = 2; k < 10; k++) {
  for (let i = 1; i < 10; i++) {
    console.log(k * i);
  }
}

//문제 3번
function averageCal(arr, ave) {
  let result = 0;
  for (let i = 0; i < arr.length; i++) {
    result = result + arr[i] / arr.length;
  }
  if (result < ave) {
    console.log(`평균보다 ${ave - result}점이 올랐네요`);
  } else {
    console.log(`평균보다 ${result - ave}점이 떨어졌네요 재수추천`);
  }
}

averageCal([10, 20, 30, 40, 50], 40);
averageCal([40, 40, 40], 20);

8강 / Ajax 1 : 개념정리

서버란?

Ajax는 서버와 데이터주고받는 법 중 하나인데
서버가 뭔지 모르면 아무리 Ajax 문법 외워봤자 응용을 못하기 때문에 서버가 뭔지 정리부터 해보자.

전문 용어로 정리하자면
'클라이언트의 요청을 받으면 서비스, 데이터를 제공하는 컴퓨터 혹은 프로그램'을 말한다.
쉽게 다시 설명하자면
'요청을 받으면 데이터를 보내주는 기계'라고 할 수 있다.

비유하자면 서버는 닭갈비집 알바생과 똑같은 역할을 한다.
닭갈비 2인분 주세요~ 하면 닭갈비 2인분 가져다준다.
웹서버도 마찬가지로
네이버 웹툰 페이지 주세요~ 하면 네이버 웹툰 페이지를 가져다준다.
이게 서버이다.

서버에서는 그냥 데이터를 달라고해서 그냥 주는게 아니라
서버에 데이터를 요청할 때는
1. 어떤 데이터인지 url로 잘 기재해야하고
2. 어떤 방법으로 요청할지 결정해야 (GET/POST 등)
서버에서 데이터를 보내준다.

GET/POST 요청하는 법?

GET/POST 요청하는 법을 알기 전에 GET/POST가 무엇인지 대충 알아보자

HTTP Method

HTTP 메서드란 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식을 일컫는다. 쉽게 말하면 서버에 주어진 리소스에 수행하길 원하는 행동, 서버가 수행해야 할 동작을 지정하는 요청을 보내는 방법이다.
HTTP Method

많이 사용되어지는 HTTP Method 4가지에 대해 알아보자

읽기(GET) 요청 (웹페이지를 읽을 때)

쓰기 혹은 생성 (POST) 요청 (글쓸 때, 로그인할 떄)

수정 (PUT) 요청 (글이나 댓글 수정)

삭제 (DELETE) 요청 (글이나 댓글 삭제)

GET요청을 날리고 싶으면 가장 쉬운 방법은 브라우저 주소창이다.
거기에 url 적으면 그 곳으로 GET요청을 날려준다.

POST요청을 날리고 싶으면
<form action="요청할url" method="post"> 태그 이용하면 된다.
그럼 폼이 전송되었을 때 POST요청을 날려준다.
근데 GET, POST 요청을 저렇게 날리면 단점이 뭐냐면 브라우저가 새로고침된다.

AJAX란?

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는
간단한 브라우저 기능을 AJAX라고 한다.
그거 쓰면 새로고침 없이도 쇼핑몰 상품을 더 가져올 수도 있고
새로고침 없이도 댓글을 서버로 전송할 수도 있는 기능들을 만들 수 있다.

아래 사이트를 꼭 읽어보고 넘어가야한다 자세하고 예제들을 모두 알려주기 때문!
AJAX

쌩자바스크립트는 fetch 이런거써서 AJAX 요청가능

fetch

프로미스 기반
ES6부터 생긴 Javascript 내장 API.
Web API인 Fetch API가 제공하는 fetch() 함수를 통해 네트워크 리소스를 비동기적으로 받아올 수 있다.
XMLHttpRequest 객체보다 사용법이 간단하고 프로미스를 지원하기 때문에 비동기 처리를 위한 콜백 패턴의 단점에서 자유롭다.

장점
(1) 자바스크립트 내장라이브러리이므로 사용을 위한 별도의 절차가 필요없음
(2) Promise 기반으로 데이터를 다루기 편리
(3) 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지 가능
단점
(1) 네트워크 에러 발생시 response timeout이 없어 기다려야함
(2) json으로 변환해주는 과정 필요
(3) axios에 비해 상대적으로 기능 부족

2-2. fetch() 사용법

fetch를 사용할 때는 두단계를 거친다.
1. 올바른 url로 요청을 보낸다.
2. 응답에 대해 json으로 바꿔준다.
fetch() 함수는 2개의 인자를 받는다.
기본적으로 GET 방식으로 통신한다.
fetch(url, options)
	.then(response => response.json())
	.then((data) => console.log(data));
    .catch(error => console.log(error));
url : 접근하고자 하는 url (필수)

options : 매개변수 (선택)

.then() : 요청이 성공하면 실행

.catch() : 에러 처리, 요청이 실패하면 실행

일반적으로 에러 캐치할 때는 아래와 같은 방식으로 한다.

fetch(url)
	.then((response) => {
    	if (!response.ok) {
        	throw new Error('500 Error')
        }
    })

[options]에서는 사용할 HTTP 메서드, headers, body 등을 정의한다.
생략이 가능하며 생략할 경우 GET 방식으로 통신되어 url로부터 콘텐츠가 다운로드된다.

대부분의 REST API들은 JSON 형태의 데이터를 응답하기때문에 응답(response) 객체는 json()메서드를 통해 JSON 포맷의 응답 전문을 자바스크립트 객체로 변환하여 얻을 수 있다.

ES7에 도입된 async/await를 활용해서 fetch API를 활용하면 코드 양을 줄일 수 있다고한다.

fetch('https://codingapple1.github.io/price.json')
  .then(res => res.json())
  .then(function(data){
    console.log(data)
  })
  .catch(function(error){
    console.log('실패함')
  });

위 코드가 이루어지는 순서

url에서 정보를 가지고 온다.

정보를 json으로 바꾼다.

json으로된 정보를 콜백함수 안의 파라미터인 data에 들어간다.

정보를 제대로 갖고왔다면 .then코드가 실행된다.

정보를 제대로 갖고오지 못했다면 .catch코드가 실행된다.

fetch() 함수는 Edge 브라우저 이상에서만 동작한다.
근데 코드가 jQuery보다 한 줄 더 필요한 이유가 뭐냐면
서버와 데이터를 주고받을 때는 문자만 주고받을 수 있다.
array, object 이런거 전송불가능하다.
jQuery 에서는 { price : 5000 } 이런 object 무리없이 받아왔다.
어떻게 한거냐면 jQuery 에서 object를 JSON으로 바꿔서 전송해줘서 그렇다.
array 아니면 object에 따옴표를 다 쳐서 '{ "price" : 5000 }' 대충 이렇게 만들면 JSON이라는 자료가 된다.
JSON은 문자로 인식하기 때문에 서버와 데이터주고받기가 가능하다.
하지만
jQuery의 $.get() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔주지만,
기본함수 fetch() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔주지 않는다.
그래서 fetch() 로 가져온 결과를 array/object로 바꾸고 싶으면 res.json() 이런 코드 한 줄 추가하면 된다.

요약

데이터를 주고 받을 때는 JSON으로만 주고 받을 수 있다.
jQuery는 JSON으로 자동으로 바꿔준다.
fetch()는 JSON으로 바꿔주는 작업이 필요하다.

숙제

자바스크립트 코드짜서 상품목록 3개를 동적으로 생성해오십시오
let products 안에 있던 데이터도 html에 잘 표기되어있어야합니다.
list.html 안에 있던 상품목록 html을 비우고
아래 코드를 넣고 시작하면 된다.

<div class="container">
  <div class="row">

      <div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>Card title</h5>
        <p>가격 : 70000</p>
      </div>

  </div>
</div>

url

https://codingapple1.github.io/js/more1.json
위 url은 id와 상품, 가격을 담고있는 url이다.

풀이

카트 3개로 만들기

우리는 row안에 있는 카드 1개를 3개로 바꿔주기 위해 forEach를 사용할 것이다.

const card = document.querySelector(".row");

let products = [
  { id: 0, price: 70000, title: "Blossom Dress" },
  { id: 1, price: 50000, title: "Springfield Shirt" },
  { id: 2, price: 60000, title: "Black Monastery" },
];

products.forEach((a, i) => {
  let template = `<div class="col-sm-4">
      <img src="https://via.placeholder.com/600" class="w-100">
      <h5>${products[i].title}</h5>
      <p>가격 : ${products[i].price}</p>
    </div>`;

  card.insertAdjacentHTML("beforeend", template);
});

위와 같이 코드를 완성시키고 HTML의 row안에 있는 코드들은 지워준다.

상품 더보기 버튼누르면 상품3개 가져오기

<div class="container">
  <button class="btn btn-danger" id="more">더보기</button>
</div>

const plusBtn = document.querySelector("#more");

plusBtn.addEventListener("click", getGoods);

function getGoods() {
  fetch(`https://codingapple1.github.io/js/more1.json`)
    .then((response) => response.json())
    .then(function (data) {
      console.log(data);
    });
}

url에 있는 정보들이 성공적으로 data에 담겨져 있는 것을 볼 수 있다.

가져온 상품 3개 카드 만들기

성공적으로 가져온 상품들을 카드로 만드려고 한다. 그렇다면 아까 첫번째 했던 방식으로 상품들을 카드로 바꾸어보자

function getGoods() {
  fetch(`https://codingapple1.github.io/js/more1.json`)
    .then((response) => response.json())
    .then(function (data) {
      data.forEach((a, i) => {
        let template = `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${data[i].title}</h5>
            <p>가격 : ${data[i].price}</p>
          </div>`;

        card.insertAdjacentHTML("beforeend", template);
      });
    });
}

전체코드

list.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Level3</title>
  </head>
  <body>
    <div class="container">
      <div class="row"></div>
    </div>
    <div class="container">
      <button class="btn btn-danger" id="more">더보기</button>
    </div>

    <script src="./list.js"></script>
  </body>
</html>

list.js

const card = document.querySelector(".row");
const plusBtn = document.querySelector("#more");
let products = [
  { id: 0, price: 70000, title: "Blossom Dress" },
  { id: 1, price: 50000, title: "Springfield Shirt" },
  { id: 2, price: 60000, title: "Black Monastery" },
];

products.forEach((a, i) => {
  let template = `<div class="col-sm-4">
      <img src="https://via.placeholder.com/600" class="w-100">
      <h5>${products[i].title}</h5>
      <p>가격 : ${products[i].price}</p>
    </div>`;

  card.insertAdjacentHTML("beforeend", template);
});

plusBtn.addEventListener("click", getGoods);

function getGoods() {
  fetch(`https://codingapple1.github.io/js/more1.json`)
    .then((response) => response.json())
    .then(function (data) {
      data.forEach((a, i) => {
        let template = `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${data[i].title}</h5>
            <p>가격 : ${data[i].price}</p>
          </div>`;

        card.insertAdjacentHTML("beforeend", template);
      });
    });
}

이언덕

이전 포스트

[코딩애플] JavaScript 강의 정리 (Level3 5강 ~ 6강)

다음 포스트

[코딩애플] JavaScript 강의 정리 (Level3 7강 ~ 8강)

코딩애플

7강 / array, for 반복문 실력향상 과제

1. Array에서 철수라는 자료를 찾고 싶습니다

풀이

2. 갑자기 구구단을 콘솔창에 출력하고 싶습니다.

풀이

for문 중첩

3. 평균점수 계산기 만들기

풀이

1. `array` 안에 있는 숫자들 평균내기

2. 평균낸 수와 모의고사 성적을 비교하여 모의고사 성적이 더 크면 `console.log('올랐네요')`

3. 평균낸 수와 모의고사 성적을 비교하여 평균낸 수가 더 크면 `console.log('재수추천')`

과제 전체코드

8강 / Ajax 1 : 개념정리

서버란?

GET/POST 요청하는 법?

HTTP Method

AJAX란?

쌩자바스크립트는 fetch 이런거써서 AJAX 요청가능

fetch

2-2. fetch() 사용법

위 코드가 이루어지는 순서

요약

숙제

url

풀이

카트 3개로 만들기

상품 더보기 버튼누르면 상품3개 가져오기

가져온 상품 3개 카드 만들기

전체코드

[코딩애플] JavaScript 강의 정리 (Level3 5강 ~ 6강)

[코딩애플] JavaScript 강의 정리 (Level3 9강 ~ 10강)

0개의 댓글

[코딩애플] JavaScript 강의 정리 (Level3 7강 ~ 8강)

코딩애플

7강 / array, for 반복문 실력향상 과제

1. Array에서 철수라는 자료를 찾고 싶습니다

풀이

2. 갑자기 구구단을 콘솔창에 출력하고 싶습니다.

풀이

for문 중첩

3. 평균점수 계산기 만들기

풀이

1. array 안에 있는 숫자들 평균내기

2. 평균낸 수와 모의고사 성적을 비교하여 모의고사 성적이 더 크면 console.log('올랐네요')

3. 평균낸 수와 모의고사 성적을 비교하여 평균낸 수가 더 크면 console.log('재수추천')

과제 전체코드

8강 / Ajax 1 : 개념정리

서버란?

GET/POST 요청하는 법?

HTTP Method

AJAX란?

쌩자바스크립트는 fetch 이런거써서 AJAX 요청가능

fetch

2-2. fetch() 사용법

위 코드가 이루어지는 순서

요약

숙제

url

풀이

카트 3개로 만들기

상품 더보기 버튼누르면 상품3개 가져오기

가져온 상품 3개 카드 만들기

전체코드

[코딩애플] JavaScript 강의 정리 (Level3 5강 ~ 6강)

[코딩애플] JavaScript 강의 정리 (Level3 9강 ~ 10강)

0개의 댓글

1. `array` 안에 있는 숫자들 평균내기

2. 평균낸 수와 모의고사 성적을 비교하여 모의고사 성적이 더 크면 `console.log('올랐네요')`

3. 평균낸 수와 모의고사 성적을 비교하여 평균낸 수가 더 크면 `console.log('재수추천')`