React - LostArk Open-API 사용 홈페이지 만들기(3-1) 최종

너무 오랜만에 글을 작성하게 되었습니다.  위사진처럼 캐릭터 이미지가 나오게 하려면 아래 저번에 postman을 통해 가져온 json데이터에  CharacterImage입니다. "CharacterImage": "https://img.lostark.co.kr/armory/3/2cf62d73eb826b998660819ee163dca4862c6e0cf8d8b49c107b3324ae0e778e.png?v=20231219054109",json 데이터 형식에 맞게 코드를 작성해 주면  아래코드와 같이 나오게 됩니다.// swiperimport "swiper/css";// swiperimport "swiper/css/navigation";import React, { useState, useEffect } from ..

• format_list_bulleted Front
• · 2024. 6. 27.
• textsms

React - LostArk Open-API 사용 홈페이지 만들기(3)

최종 화면을 보여드리자면 비주얼 업데이트를 조금 진행했습니다.이렇게 만들게 되면 반응형을 따로 하지 않아도 바로 모바일 형식으로 볼 수 있는 장점이 있습니다.오늘은 네이게이션 설정과 메인 디자인을 하도록 하겠습니다.Navigation 영역 import styles from "./nav.module.css";import { Link } from "react-router-dom";function Nav() { return ( My Info 홈 ..

• format_list_bulleted Front
• · 2024. 4. 2.
• textsms

React - LostArk Open-API 사용 홈페이지 만들기(2)

LostArk Open-API를 사용해서 홈페이지를 만드는데 왜 POSTMAN을 쓰는지 간단하게 설명드리겠습니다. POSTMAN : API 개발을 보다 빠르고 쉽게 구현할 수 있도록 도와주는 테스트 결과를 공유하며 API개발의 생산성을 높여주는 플랫폼입니다. 그래서 오늘은 한번 POSTMAN으로 첫 번째 탭 컬렉션에 들어가서 new를 눌러주면 그러면 이렇게 새로운 화면이 나오는데 저희는 headers 탭으로 갑니다! 저희는 로아 캐릭터정보를 먼저 얻어옵시다. 닉네임을 입력해야 하는데 없으신 분들은 이 사이트 접속하셔서 https://loawa.com/ 오른쪽아랫부분에 TOP 10 BEST SEARCH 이분 들 거 입력하셔도 됩니다. 닉네임을 입력하고 execute 보내게 되면 밑에 curl -X 'GET..

• format_list_bulleted Front
• · 2023. 12. 20.
• textsms

React - LostArk Open-API 사용 홈페이지 만들기

React Mini Project lostarkopenapi생성 $ npm create-react-app lostarkopenapi 필요 없는 파일들 삭제 - public 폴더 내의 로고사진들 - src 폴더안의 불필요한 파일들 삭제 - app.js 파일을 열어 내용을 꺠끗이 삭제 // index.js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); npm start 이렇게 빈 화면을 만든후 아래 사이트를 접속해 로그인을 한다. https://..

• format_list_bulleted Front
• · 2023. 12. 19.
• textsms