[TIL] 210921

Lee Syong·2021년 9월 21일

JavaScript TIL ajax

TIL

목록 보기

34/204

📝 오늘 한 것

ajax / hash / location.hash / hashBang / fetch API polyfill / < table >
달력(Calendar) 구현 시작

📖 학습 자료

생활코딩 2018 ajax 강의 11 ~ 16편

📚 배운 것

Ajax

생활코딩 2018 ajax 강의 (11 ~ 16편) 참고

1. 초기 페이지 설정

1) hash(해시)

페이지 로딩 없이, 페이지에서 원하는 위치로 이동 가능

<a href="#main">click</a> // 클릭하면 (fragment identifier)
<!-- 코드 중략 -->
<p id="main">lorem</p> // 화면이 여기로 바뀜 (fragment)

2) location.hash

현재 페이지에 hash가 있으면, 그 값을 출력해준다

if (location.hash) {
  console.log(location.hash); // #main
  console.log(location.hash.substr(1)); // main
}

3) hashBang(해시뱅)

초기 페이지를 설정하고자 할 때 이를 응용할 수 있다
일반적인 북마크 기능을 의미하는 해쉬(#)와 구별하기 위해 그 뒤에 관습적으로 느낌표(!)를 붙여서 표현한다

📌로 표시된 부분 비교 !

<body>
  
  <h1><a href="#!welcome">WEB</a></h1>
  
  <!-- 📌 메뉴를 누른 경우, 주소를 바꾸고(hashBang), 화면의 일부를 바꿈(fetch API) -->
  <li><a href="#!javascript" onclick="fetchPage('javascript')">JavaScript</a></li>
  
  <article>

  </article>
  
  <script>
    // fechPage 함수 정의
    function fetchPage (name) {
      fetch(name).then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
          })
        });
      }
    
    // 📌 주소창에 ~ #!... 라고 쳐서 들어온 경우, 보여지는 '초기 페이지' 설정
    if (location.hash) {
      fetchPage(location.hash.substr(2));
    } else {
      fetchPage('welcome'); // 주소창에 ~ index.html 만 쳐서 들어온 경우, 보여지는 초기 페이지 설정
    }
  </script>
  
</body>

🔥 코드 해석

페이지 안에서 JavaScript를 감싸고 있는 📌 a 태그를 클릭하면,
(fetch API에 의해) 화면의 일부가 바뀔 뿐 아니라
(hashBang에 의해) url 주소도 바뀐다. ex) ~ index.html#!javascript

다른 사람이 공유된 그 주소를 통해 페이지에 접근했을 때(ex. 주소창에 ~ index.html#!javascript 입력) 똑같은 화면을 보여주기 위해 if 조건문을 추가한다.
(여기서 if 조건문을 추가하지 않으면, #!javascript가 붙은 url 주소로 들어가도 else 구문이 없다면 기본 index.html 화면으로 나옴)

if 조건문 해석

📌 다른 사람이 그 주소를 통해 페이지에 접근했을 때

만약 페이지가 load 됐을 때 페이지에 hash가 있으면, fetchPage 함수 즉, fetch API를 실행시켜라. fetchPage 함수의 인자로는 #!를 제외한 세 번째 문자 즉, javascript를 넣도록 해라.

그럼 fetch API에 의해 웹 브라우저가 웹 서버에 javascript란 파일을 요청하게 된다

else 구문 해석

📌 다른 사람이 그 주소를 통해 페이지에 접근했을 때,

만약 페이지가 load 됐을 때 페이지에 hash가 없으면, 'welcome'을 인자로 넣은 fetchPage 함수를 실행시켜라.

그럼 fetch API에 의해 웹 브라우저가 웹 서버에 welcome이란 파일을 요청하게 된다

💡 hashBang의 단점

실제로 index.html 파일 즉, 웹 페이지에는 콘텐츠가 없고, 대부분의 콘텐츠는 백엔드에서 동적으로 가져오기 때문에 검색엔진 최적화가 어렵다

뒤로 가기 버튼을 눌렀을 때 반응이 없다

→ 이를 해결하기 위해 Pjax라는 새로운 API를 이용할 수 있다

2. '데이터' 관리 (ex. 글 목록)

1) '데이터'를 외부로 빼내서 관리하기

데이터와 로직 또는 데이터와 애플리케이션은 서로 구분된다.

데이터는 바뀔 수 있는 부분을 말한다. 코드도 물론 바꿀 수 있지만, 코드는 한번 짜 놓으면 로직에 의해 알아서 돌아가므로 데이터와 구분된다.

이런 데이터는 따로 외부로 빼내서 별도의 파일에 두고 관리하면 유용하다.

예를 들어, 여러 개의 < li ></ li >가 모여 있는 부분은 데이터에 해당한다. 이 부분만 따로 list라는 이름의 파일을 만들어 옮겨온다.

그 후, < ol > 태그에 id를 nav로 지정해주고, fetch API를 추가해 list라는 파일에 들어 있는 내용을 innerHtml을 통해 #nav에 넣도록 할 수 있다.

이렇게 하면 더 이상 데이터를 수정하고자 할 때 index.html을 수정하지 않고, 데이터가 들어 있는 list라는 파일을 수정하면 된다.

이렇게 데이터만 따로 관리함으로써 마음대로 수정하다가 생길 수 있는 사고를 방지할 수 있다.

2) 중복되는 '데이터' 지우기

위에서 한 걸음 더 나아가

list 파일에서 나머지 부분을 다 지우고
html,css,javascript
라고만 써줘도
페이지에 글 목록이 뜨도록 만들어보자

1)의 과정에서 작성했던 이 코드를

fetch('lilst').then(function(response){
  response.text().then(function(text){
    document.querySelector('#nav').innerHTML = text;
  })
});

아래처럼 바꿔주면 된다

    fetch('list').then(function(response){
      response.text().then(function(text){
        var items = text.split(',');
        var tags = '';
        for (var i = 0; i < items.length; i++) { // 강의에선 while 반복문 사용
          var item = items[i];
          var tag = `<li><a href="#!${item}"token interpolation">${item}', 'article')">${item}</a></li>`
          tags = tags + tag;
        }
        document.querySelector('#nav').innerHTML = tags;
      })
    });

3. fetch API polyfill(폴리필)

브라우저 호환성을 확보하기 위해 pollyfill을 이용할 수 있다

예를 들어, fetch API를 이용하면 옛날 브라우저에서도 fetch API를 작동시킬 수 있다

구글 검색 후 나오는 코드를 다운받아서 사용법 읽어보고 그대로 적용시키면 된다

4. Ajax 강의 마무리

앞으로 공부하면 좋은 것들

json / xml
- list와 같은 별도의 파일에서 , 로만 구분하기에 복잡한 많은 데이터들을 다뤄야 한다면 json이나 xml을 이용할 수 있다
pjax ( pushState + ajax )
- 지금까지 javascript와 ajax를 이용해
  웹 페이지 reload 없이 부분적으로 데이터 교체가 가능한 애플리케이션
  즉, SPA를 다뤘다
- 여기서 pjax를 활용하면
  똑같이 웹 페이지를 reload 하지 않고 부분적으로 데이터를 교체하면서도
  ajax를 썼을 때 검색엔진 최적화가 어려웠던 문제를 해결할 수 있다
프로그레스 웹 앱 (PWA)
- ajax를 기반으로 만들어진 일련의 애플리케이션
  SPA(single-page application)
- spa를 기반으로 하며 오프라인에서도 동작 가능한 웹 앱
  PWA(progressive web apps)
- 언제나 최신 상태를 유지하는 웹의 이점과 오프라인에서도 동작 가능한 앱의 이점을 모두 살릴 수 있다

달력(Calender)

1. `<table></table>`

순서 : caption - colgroup( ⊃ col) - thead( ⊃ th) - tbody( ⊃ td) - tfoot( ⊃ td)

2. HTML 작성

추후 수정

<body>
  <section>
    <h1>Calendar</h1>

    <!-- 달력 Start -->
    <div class="day-of-the-week-and-day">
      <p class="day-of-the-week"></p>
      <p class="day"></p>
    </div>
    <div class="month-and-year">
      <span class="month"></span>
      <span class="year"></span>
    </div>
    <div class="prev-calendar-next">
      <button class="prev" type="button"><i class="fas fa-angle-double-left"></i></button>
      <table class="calendar">
        <colgroup span="7" class="columns">
          <col class="sun-line">
          <col class="weekday-line" span="5">
          <col class="sat-line">
        </colgroup>
        <thead class="thead">
          <tr>
            <th>SUN</th>
            <th>MON</th>
            <th>TUE</th>
            <th>WED</th>
            <th>THU</th>
            <th>FRI</th>
            <th>SAT</th>
          </tr>
        </thead>
        <tbody class="tbody">
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <button class="next" type="button"><i class="fas fa-angle-double-right"></i></button>
    </div>>
    <!-- 달력 End -->
  </section>
</body>

3. CSS 작성

추후 수정

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: white;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "Varela Round", sans-serif;
}

h1 {
  font-family: "Pacifico", cursive;
  text-align: center;
  font-size: 72px;
  margin: 50px 0;
}

.day-of-the-week-and-day {
  text-align: center;
}

.day-of-the-week,
.day {
  font-size: 45px;
  font-weight: bold;
  margin: 20px;
}

.month-and-year {
  text-align: center;
  margin: 50px 0 30px 0;
}

.month,
.year {
  font-size: 25px;
}

.prev-calendar-next {
  display: flex;
  justify-content: center;
}

button {
  border-style: none;
  background: transparent;
  font-size: 30px;
  margin: 20px;
}

/* calendar */

.sun-line {
  background-color: #ffebed;
}

.weekday-line {
  background-color: #ebebeb;
}

.sat-line {
  background-color: #ebf2ff;
}

th {
  padding: 10px 20px;
}

td {
  text-align: center;
  width: 50px;
  height: 25px;
  padding: 10px 20px;
}

✨ 내일 할 것

달력 구현 이어서

Lee Syong

능동적으로 살자, 행복하게😁

이전 포스트

[TIL] 210920

다음 포스트

[TIL] 210921

TIL

📝 오늘 한 것

📖 학습 자료

📚 배운 것

Ajax

1. 초기 페이지 설정

1) hash(해시)

2) location.hash

3) hashBang(해시뱅)

2. '데이터' 관리 (ex. 글 목록)

1) '데이터'를 외부로 빼내서 관리하기

2) 중복되는 '데이터' 지우기

3. fetch API polyfill(폴리필)

4. Ajax 강의 마무리

달력(Calender)

1. `<table></table>`

2. HTML 작성

3. CSS 작성

✨ 내일 할 것

[TIL] 210920

[TIL] 210922

0개의 댓글

[TIL] 210921

TIL

📝 오늘 한 것

📖 학습 자료

📚 배운 것

Ajax

1. 초기 페이지 설정

1) hash(해시)

2) location.hash

3) hashBang(해시뱅)

2. '데이터' 관리 (ex. 글 목록)

1) '데이터'를 외부로 빼내서 관리하기

2) 중복되는 '데이터' 지우기

3. fetch API polyfill(폴리필)

4. Ajax 강의 마무리

달력(Calender)

1. <table></table>

2. HTML 작성

3. CSS 작성

✨ 내일 할 것

[TIL] 210920

[TIL] 210922

0개의 댓글

1. `<table></table>`