본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다
패스트캠퍼스 환급챌린지란?
(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스
초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!
fastcampus.co.kr
https://fastcampus.info/4n8ztzq
어제 턱이 많이 부어서 오늘 병원에 가봤는데 임파선염이라고 했다.. 턱이 많이 붓고 열감도 있고 기운이 없다.
힘들지만 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!
11일차 공부 시작!
오늘의 강의 주제는 '두 개의 화면을 가진 웹앱'이다.
(오늘도 마찬가지로 모자이크 처리..)
오늘의 학습 내용
- 개발자도구로 HTML 요소 확인 및 JavaScript 실습
* 싱글 페이지 어플리케이션(SPA) 이해하기
싱글 페이지 어플리케이션(SPA)은 하나의 웹 애플리케이션이 여러 화면을 가지면서 페이지 전체를 새로고침하지 않고 화면을 전환하는 방식을 의미한다. 사용자는 다양한 화면을 이동하더라도 실제로는 하나의 HTML 파일 내에서 동적으로 콘텐츠가 변경되는 경험을 하게 된다.
SPA에서 화면 전환은 매우 중요한 개념이고, 이를 라우팅이라고 해. 라우팅은 사용자가 어떤 링크를 클릭했을 때 해당하는 화면으로 전환하는 과정을 말한다.
* 실습: 글 목록에서 제목 클릭 시 화면 전환 구현
아래는 뉴스 목록에서 제목을 클릭하면 해당 뉴스의 상세 내용을 불러와 화면에 표시하는 예제 코드다.
const container = document.getElementById('root');
const ajax = new XMLHttpRequest();
const content = document.createElement('div');
const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json';
const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json';
ajax.open('GET', NEWS_URL, false);
ajax.send();
const newsFeed = JSON.parse(ajax.response);
const ul = document.createElement('ul');
window.addEventListener('hashchange', function() {
const id = location.hash.substr(1);
ajax.open('GET', CONTENT_URL.replace('@id', id), false);
ajax.send();
const newsContent = JSON.parse(ajax.response);
const title = document.createElement('div');
title.innerHTML = newsContent.title;
content.innerHTML = '';
content.appendChild(title);
});
for (let i = 0; i < 10; i++) {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = `#${newsFeed[i].id}`;
a.innerHTML = `${newsFeed[i].title} (${newsFeed[i].comments_count})`;
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
container.appendChild(content);
* 이벤트 시스템과 이벤트 리스너
자바스크립트만으로는 사용자의 행동(예: 클릭, 입력 등)을 직접 확인할 수 없다. 이런 상호작용을 감지하기 위해 브라우저가 제공하는 이벤트 시스템을 활용한다. 이벤트 시스템은 UI 요소에서 특정 이벤트가 발생했을 때, 자바스크립트 코드에서 지정한 함수를 호출할 수 있도록 해준다.
이벤트 리스너는 이벤트가 발생하는지 감시하는 역할을 하며, addEventListener 메서드를 통해 특정 이벤트에 반응하는 함수를 등록할 수 있다.
* 코드 개선 및 설명
- document.appendChild와 같은 코드가 여러 번 반복되는 것은 유지보수에 좋지 않으니 함수로 분리해서 중복을 줄이는 것이 좋다.
- `location.hash.substr(1)`은 URL의 해시(#) 뒤에 오는 문자열을 가져오는 방법이다. 이 방식으로 사용자가 선택한 항목의 ID를 쉽게 추출할 수 있다.
- location.hash와 substr의 기술적 설명
location.hash는 현재 브라우저 URL에서 #(해시) 기호 뒤에 오는 문자열을 반환하는 속성이다. 예를 들어, 주소가 `http://test.com/#section1`이라면, location.hash의 값은 #section1이 된다.
이 해시 값은 주로 SPA(싱글 페이지 어플리케이션)에서 라우팅(화면 전환)이나 특정 위치로의 이동, AJAX 데이터 호출, 뒤로가기/앞으로가기 등 다양한 용도로 활용된다.
location.hash.substr(1)은 해시 문자열에서 맨 앞의 # 기호를 제외하고 실제 값만 추출하는 코드다.
- substr(1)`은 문자열의 두 번째 문자(인덱스 1)부터 끝까지 잘라서 반환한다.
- 예를 들어, location.hash가 #post/123 이라면, `location.hash.substr(1)`의 결과는 post/123이 된다.
이렇게 해시 앞의 #을 제거하면 라우팅에 필요한 경로나 데이터 식별자만 남게 되어, 이 값을 활용해 AJAX로 데이터를 불러오거나, 특정 뷰를 렌더링하는 데 사용할 수 있다.
마치며
오늘도 환급 챌린지 11강 공부 완료!!
오늘은 임파선염으로 턱이 부어서 힘든 하루였는데 그래도 꿋꿋하게 오늘도 강의를 수강했다. 간단한 페이지 변경에 대한 내용이 이번 강의의 핵심이었는데 spa와 연관지어서 설명해주셔서 좋았다. 리프레시되는 느낌이었다.