본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq
250712(토) 12일차
두 개의 화면을 가진 웹앱
웹 페이지 vs 웹 애플리케이션
웹 페이지 : 다른 HTML 문서를 불러오면서 전환 - 앵커 태그로
웹 애플리케이션 : 하나의 HTML 안에서 JavaScript가 직접 화면을 바꿔주는 방식
앵커 태그, hashchange
게시글의 타이틀을 클릭하면 해당 글의 내용이 나타나게끔 구현
타이틀을 앵커 태그로 감싸고 href=#id값으로 고유한 해시 값을 넣어주었다
해시가 바뀔때마다 함수가 실행되고, 주소에서 #을 제거한 값이 게시물의 id가 되어
해당 글의 내용을 요청하는 URL을 만들 수 있었다
데이터 요청, 화면 출력
해커뉴스 API로 글 내용을 요청하고
응답받은 JSON 데이터를 JSON.parse로 객체화하고
h1 태그로 타이틀 출력해서
사용자가 게시글 타이틀을 클릭할 때마다 새로운 콘텐츠가 화면 내에서 표시되는 구조 완성
화면 전환은 새 페이지를 여는 것이 아닌 상태를 바꾸는 것
: 페이지 이동 없이 해시만 바꿔도 충분히 전환 느낌을 줄 수 있다
브라우저가 제공하는 이벤트를 잘 활용하면 구현이 간단해진다
: hashchange, location.hash처럼 내장된 기능을 잘 활용하자
반복되는 코드는 정리
: 같은 DOM 요소를 계속 getElementById( )로 불러오는 것은 비효율적이므로 변수로 빼서 재사용하기
지금은 클릭할 때마다 appendChild로 계속 타이틀이 추가돼서 기존 내용이 누적되는 문제가 있다.
이건 의도된 버그라고 하니 다음에 수정할 예정
이번 강의는 하나의 HTML안에서 자바스크립트가 직접 화면을 바꿔주는 화면 전환 기능을 배워봄
생각보다 어려운 기술이 필요한 것은 아니었고
기존 웹 페이지와는 화면 전환의 개념이 완전히 다르다는 것만 이해했으면 금방 익힐 수 있었다
단순히 데이터만 가져오는 걸 넘어서 어떻게 웹앱에서 화면을 바꿀 것인가라는 중요한 개념을 직접 구현해본 시간
앵커 태그, 해시, 이벤트, 동적 데이터 처리만 잘 조합하면 생각보다 꽤 앱 같은 UI를 만들 수 있다니,,
