[사전캠프 19일차] _ 프로젝트 6일차 / 브라우저 보안 오류

프로젝트 진행에 집중했다.
진전은 있는데 디자인에 자꾸 신경 쓰다 보니 가계부 기능 구현은 못했다.
(그렇지만 본판 구성은 중요해...!)
브라우저 보안으로 인한 오류를 해결하는 데 시간을 다소 할애했다.

[오늘의 학습 키워드]

#브라우저의 보안으로 인한 오류 해결

---

[학습 내용 정리]

• 웹 페이지 구성

- 왼쪽 위의 버튼을 누르면 offcanvus 형식의 내비게이션 창 표시
- 왼쪽 aside 영역에 프로필, 이름 표시
   (가계부 기능 구현 후, 이번 달 예산, 현재까지의 지출 등의 내용을 표기할 예정)
- 오른쪽의 콘텐츠 영역 (아직 구현 중)

• 웹 페이지 디자인의 일관성을 위한 코드 재사용
  웹 페이지의 똑같은 디자인을 유지하기 위해 페이지 html마다 같은 코드를 복사하는 것은 비효율적으로 느껴졌다.
  코드를 재사용할 수 있는 방법을 검색해서 적용했다. 
  
  
  

fetch('base-layout.html')
            .then(response => response.text())
            .then(data => {
                document.getElementById('base').innerHTML = data
                const username = localStorage.getItem('loginUserName');
            })
            .catch(error => console.error('Error loading base layout:', error));

---

[학습하며 겪었던 문제점]

1. 코드 재사용을 위한 Fetch 시, "Failed to Fetch" 발생

보안상의 이유로 브라우저는 로컬 파일 시스템(file://)에서 실행되는 파일에 대해 
일부 제한을 두기 때문에 실행이 되지 않는다.

VSCODE의 확장 프로그램으로 Live Server를 설치해서 사용함으로써 문제를 해결했다.

2. Not allowed to load local resource 오류

Live Server를 사용하니 로그인 페이지에서 로그인 성공 시, 메인 웹 페이지로 넘어가지지 않았다.
브라우저에서는 보안상의 이유로 절대경로를 사용할 수 없다.
html 파일의 경로를 상대경로로 바꿔주니 해결할 수 있었다.

3. fetch 시, 유저의 이름에 따라 제목을 바꾸는 코드가 동작하지 않음

기존에 잘 동작하던 코드가 동작하지 않았다.

원인은 fetch()의 특성에 있었다.
fetch()는 비동기적으로 실행되므로, HTML 내용을 DOM에 추가하기 전에
JavaScript 코드가 실행될 수 있기 때문이었다.

then에 유저의 이름을 가져오는 스크립트를 넣어 불러오니 기존의 기능이 잘 동작했다.

---

[ 내일 학습할 것 ]

사전캠프의 새로운 과제를 준다고 하셨다.
내일은 과제를 빨리 해결하는 대로 프로젝트를 계속 진행할 것이다.