본문 바로가기

분류 전체보기

 (36)
[페이지 로딩 속도 개선 #1] 페이지 로딩 속도 개선 - vue webpack 에서 vite 로 빌드 방식 변경 vue 로 제작된 웹 페이지의 속도개선을 요청받았다. 주로 카카오톡의 웹뷰에서 실행되는 페이지 이다. 우리나라는 네트워크 속도가 충분히 빨라서 대부분의 사용자는 인지 하지 못 하지만, 모바일은 간혹 중요한 순간에 네트워크 속도 때문에 페이지가 굉장히 느리게 열릴 수 도 있다. (터널 속, 지하주차장, 산 정상 등등) 때문에 페이지 로딩 속도 최적화에 대한 이슈가 있었다. 수정내용 1. index.html 위치 및 내용 수정 설명 이미지 webpack 의 프로젝트/public/index.html 위치에 index.html 이 위치하였으나 vite 로 변경 후에는 프로젝트 폴더 최상단에 index.html 을 위치시켜줬다. script 태그 추가해주기 2. .env 관련 내용 수정 3. vite.config..
[시행착오] naver map api 를 react 프로젝트에 적용 하면서 겪었던 문제 기록하기 ncloud 를 통해 maps api 사용신청을 한 후, 문서를 확인해보았지만 react 로 적용하는 문서는 발견하지 못했다; 내가 삽질한 내용 위주로 남겨 본다. 1. naver 객체는 어떻게 사용해야 하지? getting started 문서를 보고 가장 먼저 들었던 의문은 "그래서 naver 객체는 어떻게 사용해야 하지?" 였다. window 객체에서 가져오면 된다! const {naver} = window; 2. client_id 맞게 설정했는데?? 왜 에러가 나지?? web service url 에 http://localhost 도 함께 등록해주자! (개발 할때만 추가해주거나, 완료후에는 설정에서 삭제해주는게 좋을 듯 하다~) 최종코드 모습 import React, {useEffect, useRe..
[디아블로4-드루이드 캐릭터 분석] 최적의 기술 궁합찾기 #1 지피지기 기술 트리를 파악해보자! 드루이드를 83까지 키우면서 ~50 까지는 메인스토리 위주로 키웠고 50~60 중반 까지는 악몽 난이도에서 명망획득을 위주로 키웠다. 최근 문제라고 느낀 점은 60 중반쯤 고행으로 넘어오고 나서 인장 던전 클리어가 쉽지 않다는 것이다. 좀 더 세밀하게 아이템, 정복자, 영혼의 은총, 기술 트리를 파악해서 설정할 필요가 있다고 느꼈다. 드루이드 기술들 기술분류 기본기술 자연 계열 변신 계열 핵심 기술 공통점: 영력을 소모한다. 방어 기술 공통점: 재사용 대기 시간이 있다. 진노 기술 공통점: 재사용 대기 시간이 있다. 동료 기술 공통점: 재사용 대기 시간이 있다. 궁극기 공통점: 재사용 대기 시간이 있다. 핵심 지속 효과
[ant.design] html 페이지에 햄버거 메뉴 추가하기 create-react-app + antd 조합 으로 간단하게 랜딩페이지를 만들고 햄버거 메뉴를 추가해 보았다. import React, {useState} from 'react'; import {MenuUnfoldOutlined, MenuFoldOutlined} from '@ant-design/icons'; import type {MenuProps} from 'antd'; import {Layout, Button, Menu, Typography} from 'antd'; import "./Home.scss"; const {Header, Sider, Content} = Layout; const {Link} = Typography; const items: MenuProps['items'] = [ { labe..
[CSS] 스크롤 올리면 변경되는 헤더 create-react-app 으로 만든 프로젝트에서 스크롤을 올림에 따라 변경되는 헤더 만드는 방법을 알아보자. HTML 코드 script 태그 부분이 핵심이다. header 의 offset 을 인지하여 small 클래스를 동적으로 부여 또는 삭제해 준다. CSS 코드 동적으로 부여된 #header.small 부분이 핵심이다. postion 을 fixed로 잡아주고(top: 0, left: 0) height 를 부여해줬다. #header 에서는 transion 부분과 z-index 부분이 핵심이다. transion 은 변경이 부드럽게 보이도록 하고 z-index 는 content 부분이 스크롤되어서 올라와도 header 가 항상 제일 위에 보이도록 설정해 준다. .App { text-align: cen..
[드루이드 고행던전 클리어율 Up! #3] 최고의 방어는 공격!! 극대화 확률 높이기 드루이드 고행던전 클리어율 Up! #1 드루이드 고행던전 클리어율 Up! #2 에 이어서 마지막으로 공격력에 도움이 되었던 위상을 정리해 보았다. 공격력을 7206 -> 9368 까지 상승 시켜줬다. 폭풍강타(기본기술)을 서서 사용할 때 효과를 봤다. 폭풍강타(기본기술)로 영력을 채운후 쳐부수기를 사용할 때 효과를 봤다. 짓밟기 사용후 패시브로 화면 전체에 걸쳐서 일어나는 패시브 인데 양손무기에 각인 해서 x2 효과를 봤다. 60~70 구간에서 유용했던 위상인데, 현재는 마땅한 위상이 없어서 사용중이다. 좋은 효과이지만 고행 단계에서는 데미지가 약한듯 하다. 가만히 서있을 때 공격력 변화 테스트 요약해보면 극대화 확률을 높여주는 스킬(확정적으로 20%를 올려주는 냉혹한 맹독 덩굴 추천!) 혹은 마법부여를..
[드루이드 고행던전 클리어율 Up! #2] 최고의 방어는 공격!! 극대화 확률 높이기 일반 데미지를 높이는 것이 +(플러스) 라면 극대화 대미지는 x(곱하기)! 극대화 대미지를 높여서 공격력을 개선해보자. 아이템 마법효과는 제외하고 주요 스킬과 위상 위주로 알아보자. 기본 스킬 위상 종합 스킬중에는 확정적으로 극대화 확률을 높여주는 것이 있다. 쳐부수기와 짓밟기를 대지의 기술로 취급해주는 위상과 대지의 기술을 사용하면 극대화 확률을 높여주는 위상을 조합하면 자주 사용하는 스킬을 활용하여 극대화 확률을 높일 수 있다. 기본: 24.9% 스킬: 20% 위상: 17.4% 합: 62.3%! 2번 공격시 1회 이상 극대화로 데미지를 넣을 수 있다!
[드루이드 고행던전 클리어율 Up! #1] 최고의 방어는 공격!! 기본 공격으로 핵심기술 과 진노기술 활용도 높이기 그동안 드루이드는 몸빵이라는 생각이 있었다. 그래서 습관적으로 방어도 관련 아이템과 스킬을 찍어줬다. 무난하게 던전이나 지옥불등을 클리어 할 수 있었으니까 아마도 결과적으로 봤을때 악몽에서 60~70렙 구간에서는 유효한 전략 이었었던것 같다. 하지만!! 고행의 73+ 구간에 들어오니까 정예병들에게 데미지가 안들어가도 너~~~무 안들어 갔다. 방어도가 높아도 결국에 몹을 잡지 못하면 시간 끌다가 죽기 마련... 특히 흡혈을 하는 정예병을 넘지 못하니 진행이 불가 했다. 공격력변화가 필요했다. 투구 갑옵 장갑 바지 장화 무기 목걸이 반지1 반지2 궁합이 좋은 위상 조합 1타쌍피! 계속 사용해야할 기본 기술 사용으로 핵심기술 사용을 위한 영력을 채우면서 진노기술 발동빈도 상승 효과도 가져온다. 위상 기본기술 ..
[라우팅] react-router-dom 사용하여 hash router 적용하기 1페이지로 만들었던 리액트 프로젝트에 화면을 하나 추가했다. 라우팅이 필요해졌다. react-router-dom 을 사용해서 간단하게 처리해보자. 먼저 기존 App.tsx 파일을 확인해보자. import React from 'react'; import Summary from "./dungeon/Summary"; import logo from '../diablo4_logo2.png'; import './App.scss'; function App() { return ( ); } export default App; 헤더 아래 메인 컨텐트 1개 있는 구조이다. 이 코드에 router를 적용하기 위한 주요한 작업은 부분을 RouterProvider 로 변경하는 것이다. import React from 'react..
[배포] Github pages 이용해여 React 배포하기 리액트를 이용해서 웹 페이지를 만들었으니 배포도 해보자. 여러가지 배포 방법중 github pages를 이용한 배포 방법을 알아보자. 1. 배포하고자 하는 프로젝트에 gh-pages 의존성을 추가해준다. 배포하고자 하는 React 프로젝트에 npm 명령어를 사용해서 gh-pages 를 설치해줬다. npm install --save gh-pages 2. 그다음 package.json scripts 부분에 deploy 명령어를 추가한다. 3. package.json 에 hompage 키도 추가해준다. homepage의 값은 https://계정명.github.io/레포지토리이름 또는 https://조직명.github.io/레포지토리이름 으로 입력해 주면 된다. 4. 배포 명령어 실행하기 아래 배포 명령을 실행..

티스토리툴바