Axios 및 DOM 조작 학습 | 웹 개발 프로젝트

소개

이 프로젝트에서는 Axios 를 사용하여 인증 헤더와 함께 요청을 보내고, 응답 데이터를 기반으로 DOM 을 업데이트하는 방법을 배우게 됩니다. 신비로운 주문의 일부를 얻기 위해 서버와 상호 작용하는 간단한 웹 애플리케이션을 구축할 것입니다.

웹 앱 상호 작용 미리보기

이 프로젝트에서 다음을 배우게 됩니다:

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── css
├── lib
├── js
│   └── index.js
└── index.html

그 중:

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

이 단계에서는 "Key 1" 버튼의 기능을 구현합니다.

js/index.js 파일에서 key1Button.addEventListener("click", async () => { ... }) 블록을 찾습니다.
let { data } = await axios.get("/spellone");을 다음 코드로 변경합니다:
```
let { data } = await axios.get("/spellone", {
  headers: {
    Authorization: "2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7"
  }
});
```
이 코드 줄은 제공된 토큰으로 설정된 Authorization 헤더와 함께 /spellone 엔드포인트로 GET 요청을 보냅니다. 응답 데이터는 spell1 요소에 표시됩니다.
js/index.js 파일을 저장합니다.

이 단계에서는 "Key 2" 버튼의 기능을 구현합니다.

js/index.js 파일에서 key2Button.addEventListener("click", async () => { ... }) 블록을 찾습니다.
let { data } = await axios.get("/spelltwo");을 다음 코드로 변경합니다:
```
let { data } = await axios.get("/spelltwo", {
  headers: {
    Authorization: "2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7"
  }
});
```
이 코드 줄은 제공된 토큰으로 설정된 Authorization 헤더와 함께 /spelltwo 엔드포인트로 GET 요청을 보냅니다. 응답 데이터는 spell2 요소에 표시됩니다.
js/index.js 파일을 저장합니다.

이 단계에서는 보물 상자를 열 수 있는지 확인하는 로직을 구현합니다.

js/index.js 파일에서 tryOpenTreasureBox() 함수를 찾습니다.
이 함수는 spell1 및 spell2 요소의 내용이 예상 값 ("I love you" 및 "You love me too") 과 일치하는지 확인합니다. 조건이 충족되면 treasureBox 요소에 "opened" 클래스를 추가하고 성공 메시지를 표시합니다.
js/index.js 파일을 저장합니다.

Completed Effect

축하합니다! "Mysterious Incantation" 프로젝트를 완료했습니다. Axios 를 사용하여 인증 헤더와 함께 요청을 보내는 방법과 응답 데이터를 기반으로 DOM 을 업데이트하는 방법을 배웠습니다.

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.