반응형
React를 통해 Tistory에 공유한 HTML5 코드들의 특징들과 제가 알고 있는 CSS나 지식들을 웹페이지를 만들기를 올리겠습니다.이거 떄문에 로스트아크 api를 급하게 마무리.. 내일부터 시작!1. 작업한것들은 무조건 Tistory에 올리기2. 한달안에 만들기
너무 오랜만에 글을 작성하게 되었습니다. 위사진처럼 캐릭터 이미지가 나오게 하려면 아래 저번에 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 ..
최종 화면을 보여드리자면 비주얼 업데이트를 조금 진행했습니다.이렇게 만들게 되면 반응형을 따로 하지 않아도 바로 모바일 형식으로 볼 수 있는 장점이 있습니다.오늘은 네이게이션 설정과 메인 디자인을 하도록 하겠습니다.Navigation 영역 import styles from "./nav.module.css";import { Link } from "react-router-dom";function Nav() { return ( My Info 홈 ..
LostArk Open-API를 사용해서 홈페이지를 만드는데 왜 POSTMAN을 쓰는지 간단하게 설명드리겠습니다. POSTMAN : API 개발을 보다 빠르고 쉽게 구현할 수 있도록 도와주는 테스트 결과를 공유하며 API개발의 생산성을 높여주는 플랫폼입니다. 그래서 오늘은 한번 POSTMAN으로 첫 번째 탭 컬렉션에 들어가서 new를 눌러주면 그러면 이렇게 새로운 화면이 나오는데 저희는 headers 탭으로 갑니다! 저희는 로아 캐릭터정보를 먼저 얻어옵시다. 닉네임을 입력해야 하는데 없으신 분들은 이 사이트 접속하셔서 https://loawa.com/ 오른쪽아랫부분에 TOP 10 BEST SEARCH 이분 들 거 입력하셔도 됩니다. 닉네임을 입력하고 execute 보내게 되면 밑에 curl -X 'GET..
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://..