[JS] 동적(Dynamic) VS 정적(Static) 웹사이트

Suji Kang·2023년 7월 31일

🐾 동적(Dynamic)

📒동적인 요소들은 데이터베이스로부터(백엔드) 받아온다.
📒보통 백엔드(서버)로부터 데이터를 받아오면 일정한 모양으로 구성된 객체로 받아온다.
📒서버로부터 받아온 객체는 Response(응답) 타입이다. 응답은 응답에 대한 정보가 들어있는 header 부분과 실질적으로 원했던 data 부분이 존재한다

요청(게시글 제목 가져다줘)
👇 응답(ok, 홍길동제목 줄게)

{
    key:value,
    key:value,
    ...
    data: '홍길동',
    ...
}

요청(게시글 제목 가져다줘)
👇 응답(no, 홍길동 이라는 제목이 있지만 너는 볼권한이 없어)

{
    key:value,
    key:value,
    ...
    data: '권한이 없습니다'
}

요청(게시글 제목 한 개 가져다줘)
👇 응답

{
    key:value,
    key:value,
    data: '게시글제목'
}

요청(게시글 제목 열 개 가져다줘)
👇 응답

{
    key:value,
    key:value,
    data: ['게시글제목', '다른제목', '또다른제목', ....]
}

📒 데이터베이스의 구조 (엑셀.표)

👉 요청(게시글 5번 게시글 한개의 정보를 가져다줘)
응답(ok 여깄어)

let res = {
    header:200,
    key:value,
    ...,
    data:{번호 : 5 , 제목 : '헬로', 작성자: '최최', 작성일자: '22015'} ,
}
console.log(res.data.제목)
//출력값: 헬로

👉 요청(게시글 열개의 정보를 가져다줘)
응답(ok 여깄어)

let res = {
    header:200,
    key:value,
    key:value,
    ...,
    data:
    [
        {번호 : 1 , 제목 : '헬로', 작성자: '최최', 작성일자: '22015'} ,
        {번호 : 2 , 제목 : '헬로', 작성자: '최최', 작성일자: '22015'} ,
        {번호 : 3 , 제목 : '헬로', 작성자: '최최', 작성일자: '22015'} ,
        {번호 : 4 , 제목 : '헬로', 작성자: '최최', 작성일자: '22015'} ,
        {번호 : 5 , 제목 : '헬로', 작성자: '최최', 작성일자: '22015'} ,
        {번호 : 6 , 제목 : '헬로', 작성자: '최최', 작성일자: '22015'} ,
        {번호 : 7 , 제목 : '헬로', 작성자: '최최', 작성일자: '22015'} ,
        {번호 : 8 , 제목 : '헬로', 작성자: '최최', 작성일자: '22015'} ,
        {번호 : 9 , 제목 : '헬로', 작성자: '최최', 작성일자: '22015'} ,
        {번호 : 10 , 제목 : '헬로', 작성자: '최최', 작성일자: '22015'} ,
    ], 
}
 console.log(res.data[8].번호) 
 // 결과값 9

✏️ 동적인 html code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .board_table {
        max-width: 800%;
        margin: 0 auto;
      }
      .table_row {
        height: 50px;
        border-bottom: 1px solid silver;
        display: flex;
        align-items: center;
        padding: 10px;
      }
      .table_header{
        background-color: #e9e9e9;
        justify-content: center;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="board_table">
      <div class="table_row table_header">게시글 제목</div>
      <div class="table_row">제목1</div>
      <div class="table_row">제목2</div>
      <div class="table_row">제목3</div>
      <div class="table_row">제목4</div>
      <div class="table_row">제목5</div>
      <div class="table_row">제목6</div>
      <div class="table_row">제목7</div>
      <div class="table_row">제목8</div>
    </div>
  </body>
</html>

🐾 객체(object)

✏️ API명세서

게시글 하나당
id title content writerId createdAt updatedAt like
총 7개의 값이 저장된다
이때 writerId는 회원가입한 사람의 email만 넣어줄 수 있다

회원 한 명당
email userName password createdAt updatedAt profileUrl 을 저장하겠다

게시글 타입 객체:

{
  id:값 , 
  title:값,
  content:값,
  writerId:값,
  createdAt:값,
  updatedAt:값, 
  like:값
}

로 정할것

✏️ fetchBoard(게시글id);

게시글 한 개 가져오기 성공 하면 응답을 이렇게 줄게
data 에 게시글타입 객체를 담아서 응답할게
{
  status:200,
  data : {
    id:값 , 
    title:값,
    content:값,
    writerId:값,
    createdAt:값,
    updatedAt:값, 
    like:값
  }
}

요청할때 너가 이렇게 요청해줘
fetchBoards(시작페이지, 끝페이지, 몇개씩, 정렬순서); 함수를 써

게시글 여러개 가져오기 성공 하면 응답을 이렇게 줄게
data에 게시글 타입의 객체가 요소로 들어있는 배열을 담아서
응답으로 줄게

{
  status:200,
  data : [
    {
      id:값 , 
      title:값,
      content:값,
      writerId:값,
      createdAt:값,
      updatedAt:값, 
      like:값
    },
    {
      id:값 , 
      title:값,
      content:값,
      writerId:값,
      createdAt:값,
      updatedAt:값, 
      like:값
    },
    {
      id:값 , 
      title:값,
      content:값,
      writerId:값,
      createdAt:값,
      updatedAt:값, 
      like:값
    },
    {
      id:값 , 
      title:값,
      content:값,
      writerId:값,
      createdAt:값,
      updatedAt:값, 
      like:값
    },
  ]
}

🐾 정적(Static)으로 바꾸면?

✏️ 정적인 html code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .board_table {
      max-width: 800%;
      margin: 0 auto;
    }
    .table_row {
      height: 50px;
      border-bottom: 1px solid silver;
      display: flex;
      align-items: center;
      padding: 10px;
    }
    .table_header{
      background-color: #e9e9e9;
      justify-content: center;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="board_table">
    <div class="table_row table_header">게시글 제목</div>
    <!-- <div class="table_row">제목1</div>
    <div class="table_row">제목2</div>
    <div class="table_row">제목3</div>
    <div class="table_row">제목4</div>
    <div class="table_row">제목5</div>
    <div class="table_row">제목6</div>
    <div class="table_row">제목7</div>
    <div class="table_row">제목8</div> -->
  </div>
  <script>
      //게시글 제목 10개가 data 방에 들어있는 응답
      let res = {
          status: 200,
          data:[
              'ddd', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'ggg', 'hhh', 'iii', 'jjj'
          ]
      }

      //res.data에 내가 실질적으로 필요한 10개 제목이 있다. 
     for(let i =0; i<10 ; i ++){
      let newRow = document.createElement('div');
      newRow.classList.add('table_row');
      newRow.textContent = res.data[i];

     let boardTable = document.querySelector('.board_table');
       boardTable.appendChild(newRow);
     }

  </script>
</body>
</html>

👇 result:

Suji Kang

나를위한 노트필기 📒🔎📝

이전 포스트

[JS] 반복문 (for statement, while statement)

다음 포스트