반응형 SMALL 전체 글26 <HtmlStudy /> 웹페이지 상황 1. React UI 라이브러리 적용곰곰이 생각해 보니깐 react 라이브러리를 한 번도 사용해 본 적도 없고 적용하면 내가 만든 것보다 편하게 사용하기 위해 왼쪽 nav 바를 React UI 라이브러리 material-ui 적용시켜 봤다.엄청나게 간단하게 적용된 줄 알았던 라이브러리는 엄청난 대작업을 가져왔다.내가 원래 만든 것도 있고 라이브러리는 구 리액트버전이라 적용시키는데 애를 먹었다. 하나하나 찾아보면서 2시간 정도 걸렸던 거 같다. 역시 사용할 때는 먼저 찾아보고 적용시키고 진행하는 게 베스트다. 기획의 중요성을 다시 한번 깨닫는다.내비게이션의 아이콘들도 Material UI를 사용했으니 한번 React 라이브러리를 사용할 때 참고 사이트로 좋은 거 같다.https://mui.com/m.. 2024. 7. 15. <HtmlStudy /> 웹페이지 제작 시작 https://frontdevpark.tistory.com/entry/HmtlTeacher-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0%EB%82%98%EC%9E%90%EC%8B%A0%EA%B3%BC%EC%9D%98%EC%95%BD%EC%86%8D HmtlTeacher 홈페이지 만들기(나자신과의약속)React를 통해 Tistory에 공유한 HTML5 코드들의 특징들과 제가 알고 있는 CSS나 지식들을 웹페이지를 만들기를 올리겠습니다.이거 떄문에 로스트아크 api를 급하게 마무리.. 내일부터 시작!1. 작업한것frontdevpark.tistory.com 콘셉트를 많이 뒤집었기에 원래는 다음날 작성하려고 했으나. 이름이 결정했지만 내.. 2024. 7. 8. HmtlTeacher 홈페이지 만들기(나자신과의약속) React를 통해 Tistory에 공유한 HTML5 코드들의 특징들과 제가 알고 있는 CSS나 지식들을 웹페이지를 만들기를 올리겠습니다.이거 떄문에 로스트아크 api를 급하게 마무리.. 내일부터 시작!1. 작업한것들은 무조건 Tistory에 올리기2. 한달안에 만들기 2024. 6. 27. 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 .. 2024. 6. 27. React - LostArk Open-API 사용 홈페이지 만들기(3) 최종 화면을 보여드리자면 비주얼 업데이트를 조금 진행했습니다.이렇게 만들게 되면 반응형을 따로 하지 않아도 바로 모바일 형식으로 볼 수 있는 장점이 있습니다.오늘은 네이게이션 설정과 메인 디자인을 하도록 하겠습니다.Navigation 영역 import styles from "./nav.module.css";import { Link } from "react-router-dom";function Nav() { return ( My Info 홈 .. 2024. 4. 2. 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.. 2023. 12. 20. 이전 1 2 3 4 5 다음 반응형 LIST
