-
[learn-typescript] live server ์ด์ฉํด์ user ์ ๋ณด ๊ฐ์ ธ์ค๊ธฐcodeStates front-end/Typescript 2023. 6. 28. 18:09๋ฐ์ํ
๐ live server ์ด์ฉํด์ user ์ ๋ณด ๊ฐ์ ธ์ค๊ธฐ
app.ts
// api url var url = 'https://jsonplaceholder.typicode.com/users/'; // dom var username = document.querySelector('#username'); var email = document.querySelector('#email'); var address = document.querySelector('#address'); // user data var user = {}; function startApp() { axios .get(url) .then(function (response) { console.log(response); user = response.data; // console.log(user); // TODO: ์ด๋ฆ, ์ด๋ฉ์ผ, ์ฃผ์ ํ์ํ๊ธฐ username.innerText = user[0].name; email.innerText = user[1].email; // .street์ ์ ๋ถ๋ ๊ฑด๊ฐ์? // ํ์ฌ ๋ฐ์ดํฐ์ address๋ ๊ฐ์ฒด๋ก ๋ฌถ์ฌ์๊ธฐ ๋๋ฌธ์ address์์ ๊ฐ์ ธ์ฌ ๋ฐ์ดํฐ ๋ณ์๋ช ์ ํ๋ฒ ๋ ์ ์ด์ค๋๋ค. address.innerText = user[1].address.street; }) .catch(function (error) { console.log(error); }); } startApp();
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Why Typescript?</title> </head> <body> <h1>์ฌ์ฉ์ ์ ๋ณด</h1> <div> <p>์ด๋ฆ: <span id="username"></span></p> <p>์ด๋ฉ์ผ: <span id="email"></span></p> <p>์ฃผ์: <span id="address"></span></p> </div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="./app.js"></script> </body> </html>
์คํ๊ฒฐ๊ณผ
๋ฐ์ํ'codeStates front-end > Typescript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[learn-typescript] ํ ์ผ ๊ด๋ฆฌ ์ฑ JS -> TS ๋ณํ (0) 2023.07.04 [learn-typescript] typescript์ ์ฅ์ (0) 2023.07.03 [TS] ์ ๋ค๋ฆญ (0) 2023.03.23 [TS] ํ์ ์ ํ์ (0) 2023.03.21 [TS] ํด๋์ค (0) 2023.03.20