Javascript 정리 ⑤

영긔·2024년 4월 30일
CSSJavaScriptfrontendhtml
1

📒 Vanilla JS

목록 보기
5/8
post-thumbnail

✨ Array, Object 자료형

🔎 Array 자료형

var me = ['영긔', 5, 'computer'];
me[1] = 10;

array는 이런식으로 정의, 수정 가능

🔎 Object 자료형

var me = {name:'영긔', num:5, major:'computer'};
console.log(me['name']);
console.log(me.name);
me['name'] = '긔긔';

[]를 사용하거나 .을 사용하여 데이터를 출력할 수 있다.

🔎 Array, Object의 차이

array는 순서개념이 있고, object는 순서개념이 없음
따라서 array를 사용하면 sort(), slice(), push()(->제일 뒤에 넣어줌)등을 사용할 수 있다.

📋 Object를 사용해 html 요소 바꾸기

<div class="container mt-3">
    <div class="card p-3">
        <span class="title">상품명</span>
        <span>가격</span>
    </div>
</div>

<script>
    var car2 = { name: '소나타', price: 50000 }
    document.querySelector('.title').innerHTML=car2.name
</script>

이런식으로 바꿀 수 있다.

📋 심화

object 안에 array, object 넣을 수 있고, array 안에 array, object 넣을 수 있다.

var car2 = { name : '소나타', price : [50000, 3000, 4000] }

{} 이렇게 시작하면 object 자료형
[] 이렇게 시작하면 array 자료형이다.

🔎 SSR, CSR

💻 SSR

server side rendering
서버 측에서 렌더링하는 방식

기본적으로 웹 브라우저는 처음에 빈 HTML 파일을 로드한다. 이후에 로드되는 자바스크립트와 스타일은 웹 브라우저에서 전체 사용자 친화적인 페이지를 렌더링하는 역할을 한다.
CSR과 달리 각 페이지는 해당 페이지에 대한 전체 HTML을 동적으로 렌더링하고 제공하는 앱 서버에 대한 요청을 시작한다. 사용자가 요청할 때마다 페이지를 요청하고 렌더링하므로 페이지 제공 시간은 CSR 애플리케이션 그 이상이다.

💻 CSR

client side rendering
클라이언트 측에서 렌더링하는 방식

Angular 및 React와 같은 대부분의 웹 프레임워크가 기본적으로 지원. 단일 페이지 애플리케이션(SPA)과 사용자 상호 작용(예: 게임)이 많고 양식, 채팅 애플리케이션과 같은 매우 동적인 콘텐츠가 있는 애플리케이션에 일반적으로 적합
기본적으로 웹 브라우저는 처음에 빈 HTML 파일을 로드한다. 이후에 로드되는 자바스크립트와 스타일은 웹 브라우저에서 전체 사용자 친화적인 페이지를 렌더링하는 역할을 한다.
출처

📋 데이터바인딩해보기


이런 페이지를 만들어볼 것이다.

html

    <div class="card-group container">
        <div class="card">
            <img src="https://via.placeholder.com/600">
            <div class="card-body">
                <h5>Card title</h5>
                <p>가격 : 70000</p>
                <button class="btn btn-danger">주문하기</button>
            </div>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/600">
            <div class="card-body">
                <h5>Card title</h5>
                <p>가격 : 70000</p>
                <button class="btn btn-danger">주문하기</button>
            </div>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/600">
            <div class="card-body">
                <h5>Card title</h5>
                <p>가격 : 70000</p>
                <button class="btn btn-danger">주문하기</button>
            </div>
        </div>
    </div>

js

        var products = [
            { id: 0, price: 70000, title: 'Blossom Dress' },
            { id: 1, price: 50000, title: 'Springfield Shirt' },
            { id: 2, price: 60000, title: 'Black Monastery' }
        ];
        for (i = 0; i < 3; i++) {
            document.querySelectorAll('.card-body h5')[i].innerHTML = products[i].title;
            document.querySelectorAll('.card-body p')[i].innerHTML = '가격 : ' + products[i].price;
        }

📋 문자 중간에 변수 넣기

var a = '영긔';
console.log('천재' + a + '아긔');// '천재영긔아긔'출력

이런식으로 작성해 줄 수도 있고

var a = '영긔';
console.log(`천재 ${a} 아긔`);// '천재 영긔 아긔'출력

이런식으로 backtick키(`)를 사용한 후에 ${변수명} 이렇게 출력할 수도 있다.

✨ <Select>

<select>는 <input>과 같은 기능을 한다. 

    <select>
      <option>카고바지</option>
      <option>맨투맨</option>
    </select>

이런 식으로 쓰인다. <select>도 input,change 이벤트 발생하고, .value로 입력한 값 가져올 수 있다.

📋 select 들어간 폼 만들기


셔츠를 누르면 select 들어간 폼이 추가되고, 모자를 누르면 다시 사라지게 하도록 하는 코드를 짤 것이다.

html

<form class="container my-5 form-group">
        <p>상품선택</p>
        <select class="form-select mt-2">
            <option>모자</option>
            <option>셔츠</option>
        </select>
        <select class="form-select mt-2 form-hide">
            <option>95</option>
            <option>100</option>
        </select>
    </form>

css

.form-hide{
  display: none;
}

js

var formSelects = document.querySelectorAll(".form-select");

formSelects[0].addEventListener("click", function (e) {
  var value = e.currentTarget.value;
  var formSelect2 = formSelects[1];

  if (value === '셔츠') {
    formSelect2.classList.remove("form-hide");
  } else if (value === '모자') {
    formSelect2.classList.add("form-hide");
  }
});

e.currentTarget을 사용했다.

📋 자바스크립트로 html 생성하기

📍 1번째 방법

<div id="total">

</div>

<script>
  var a = document.createElement('p');
  a.innerHTML = '영긔';
  document.querySelector('#total').appendChild(a);
</script>

이런식으로 document.createElement을 사용해서 html을 생성한 후에, appendChiled로 넣어주면 html을 생성할 수 있다.

📍 2번째 방법

<script>
  var a = '<p>영긔</p>';
  document.querySelector('#total').insertAdjacentHTML('beforeend', a);
</script>

이런식으로 a를 만들어준다음 insertAdjacentHTML을 통해 넣어주면 된다.

insertAdjacentHTML(position, text)

insertAdjacentHTML() 메서드는 지정된 텍스트를 HTML 혹은 XML로 파싱하고 결과 노드들을 지정된 위치의 DOM 트리에 삽입한다
position은 다음과 같은 것들이 있다.
beforebegin : 요소 이전에 위치, 오직 요소가 DOM 트리에 있고 부모 요소를 가지고 있을 때만 유효
beforeend : 요소 바로 안에서 마지막 자식 이후에 위치
afterbegin : 요소 바로 안에서 처음 자식 이전에 위치
afterend : 요소 이후에 위치, 오직 요소가 DOM 트리에 있고 부모 요소를 가지고 있을 때만 유효

📋 html을 수정해 Option 바꿔주기

앞에서 'select 들어간 폼 만들기'의 js를 바꿔 아래와 같이 동작하도록 만들었다.

js

var formSelects = document.querySelectorAll(".form-select");

formSelects[0].addEventListener("click", function (e) {
  var value = e.currentTarget.value;
  var formSelect2 = formSelects[1];

  if (value === '셔츠') {
    formSelect2.classList.remove("form-hide");
    formSelect2.innerHTML = '<option>95</option><option>100</option>';
  } else if (value === '모자') {
    formSelect2.classList.add("form-hide");
  } else if (value === '바지'){
    formSelect2.classList.remove("form-hide");
    formSelect2.innerHTML = '<option>28</option><option>30</option>';
  }
});

🔎 forEach

array 뒤에 forEach를 사용해 반복할 수 있다.

var length = [156, 157, 158];
pants.forEach(function(){
  console.log('뭐게')
});

이렇게 작성했을 때, length 안의 데이터 갯수만큼 forEach 콜백함수 안에 있는 코드가 실행된다.

var length = [156, 157, 158];
pants.forEach(function(a, i){
  console.log(a)
});

파라미터가 위와같이 2개가 들어갈 수 있다. a는 array안의 데이터, i는 0부터 1씩 증가하는 정수

📋 forEach 사용해 앞의 코드 수정하기

앞에서 작성한 'html을 수정해 Option 바꿔주기'의 코드를 수정할 것이다.

js

var formSelects = document.querySelectorAll(".form-select");
var shirts=[95,100,105];
var pants=[28,29,30];
formSelects[0].addEventListener("click", function (e) {
  var value = e.currentTarget.value;
  var formSelect2 = formSelects[1];
  if (value === '셔츠') {
    formSelect2.classList.remove("form-hide");
    formSelect2.innerHTML='';
    shirts.forEach(function(a){
      formSelect2.insertAdjacentHTML('beforeend', `<option>${a}</option>`);
    })  } else if (value === '모자') {
    formSelect2.classList.add("form-hide");
  } else if (value === '바지'){
    formSelect2.classList.remove("form-hide");
    formSelect2.innerHTML='';
    pants.forEach(function(a){
      formSelect2.insertAdjacentHTML('beforeend', `<option>${a}</option>`);
    })
  }
});


작동화면은 다음과 같다.

🔎 for in

📋 object 자료 갯수만큼 반복문 돌리기

var obj = { name : '긔긔', age : 1 }
for (var key in obj){
  console.log(key)
}

for in 반복문을 사용해 반복할 수 있고, 위의 코드로는 2번 출력된다. 또한 키값과 value값을 출력할 수 있다. 위 코드는 key값을 출력하고, value를 출력하게 하고 싶다면 코드를 밑과 같이 작성한다.

console.log(obj[key])

🔎 arrow function

es6의 가장 큰 문법적 변화사항인 arrow function

var pants = [28, 30, 32];
pants.forEach(function(a){
  console.log(a)
});
pants.forEach((a) => {
  console.log(a)
});

콜백함수 작성할때 function대신 =>를 사용해 함수를 만들어도 됨
파라미터가 하나라면 

pants.forEach(a => {
  console.log(a)
});

이렇게 소괄호 없애줘도 됨

let func1 = function(){ console.log('바보') }
let func2 = () => { console.log('몽총이') }

위와같이 함수를 만들어도 된다.

🤔 주의사항

함수안에서 this를 쓸때, arrow function은 함수안에서 this를 재정의하지 않고 바깥에 있던 this(상위 환경의 this)를 쓰기 때문에 의도와 다르게 동작할 가능성이 있다.

function objFunction() {
  console.log('Inside `objFunction`:', this.foo); // 13
  return {
    foo: 25,
    bar: () => console.log('Inside `bar`:', this.foo) // 13
  };
}

objFunction.call({foo: 13}).bar();

es5에서는 메소드 호출시, this는 메소드를 소유하고 있는 객체를 가리키므로 es5라면 5라인의 this.foo는 25가 되어야 했겠지만 arrow function은 Lexical this를 가진다. 그렇기 때문에 call 메소드를 통한 간접실행이 일어날때의 this 문맥을 그대로 계승함
출처

✨ array, for를 이용한 문제풀이

💡 출석부에서 영긔 찾기

미리 작성해놓은 출석부에서 영긔가 있으면 '있어요'를 출력하고, 없으면 아무것도 출력하지 않도록 구현한다.

js

        var nameList = ['영긔', '긔긔', '둥긔', '승긔'];
        function findName(name) {
            nameList.forEach(function (a) {
                if (name == a) {
                    console.log('있어요');
                    return 
                }
            })
        }

💡 평균 점수 계산기 만들기

기존 성적들을 첫번째 파라미터에 담고, 최근 성적을 두번째 파라미터에 담으면, 최근 성적이 얼마나 오르고 떨어졌는지를 출력해보자

js

        function func(l,g){
            var sum=0
            l.forEach((a) => {
                sum+=a
            });
            var avg=sum/l.length
            if(avg<=g){
                console.log(`평균보다 ${g-avg}점 올랐네요😁`);
            }
            else{
                console.log(`평균보다 ${avg-g}점 떨어졌네요..😥`);
            }
        }


위와 같이 작동한다

profile
영긔
SKYDeveloper
이전 포스트

Javascript 정리 ④

다음 포스트

Javascript 정리 ⑥

0개의 댓글