YumeHANA YUME'S DEV

svg 아이콘을 좀 더 편하게 사용하기 위해svg 컴포넌트를 구현 Installmentvite에서 svg를 사용하기위해서 vite-plugin-svgr을 설치npm install vite-plugin-svgr --save-dev 이후 vite.config.ts에서 svgLoader plugin을 등록import svgLoader from 'vite-svg-loader'// https://vite.dev/config/export default defineConfig({ plugins: [vue(), svgLoader()],SVG Icon우선 svg 아이콘 관리를 위해 constant > icon.ts 파일을 만들어 svg 아이콘을 상수화 작업을 진행import calendarIcon from "@/ass..

이전에 react에서 했던 다크모드와 화이트모드 설정은 직접 class를 하나씩 주는 방식으로 했었는데이 부분에서 많은 노가다가 필요했었기에 보통 페이지들에서 사용하는 방식인data-theme을 주는 방식으로 진행Stylestyle 폴더에서 variable.css파일을 생성하여 스타일 변수를 저장하는 파일로 관리이후 main에 해당 css파일을 import해주면 된다. data-theme이 white는 화이트 모드data-theme이 dark는 다크모드 이때 변수명은 둘다 동일하게 가져가야한다.:root { --app-root-padding: 10px;}:root[data-theme='white'] { --app-theme-side-background: #f3f3f3; --app-them..

Desktop app 을 만들때 Electron 을 활용하여 만들 수 있다는 것을 알고,한번 만들어보기로 도전 개발 환경은 Vite + Vue + Typescript + Electron를 활용Initalized우선 vite + vue + typescript 프로젝트를 생성 이후 electron을 설치npm install electron --save-dev 그리고 루트 프로젝트에서 electron 폴더를 만들고 main.js파일을 생성이때 win.loadURL은 vite 포트랑 동일하게 세팅 electron의 main.js에서 ts로 하고싶었지만 ts로 할려니까 이것저것 세팅을 추가로 해줘야하고, 잘 안되어서 js로 그냥 진행import { app, BrowserWindow } from 'electron'..

페이지에 언어 변경이 가능한 페이지를 구현하기 위해서 i18n을 사용 우선 i18n 라이브러리를 설치합니다.npm install i18next react-i18nextInitalizedi18n 초기 세팅을 위해루트 경로에 i18n.ts 파일을 만들어서 기본 언어 설정 및 사용할 언어 리소스를 추가해줍니다.import i18n from 'i18next';import { initReactI18next } from 'react-i18next';import { enTranslation, koTranslation } from './locales/index';i18n .use(initReactI18next) .init({ resources: { en: { translati..

기존에 Router를 사용할때 Navigator를 활용해서 해당 메뉴를 누르면Navigator로 이동을 시키는 방법으로 router를 사용했었는데이 경우 메뉴를 하나 추가할때마다 여러 파일에서 추가적으로 작업을 해주어야했기에 좀 더 편하게 관리하고자 했다. 이번에는 navigator로 이동을 하는 것이 아닌 Link를 활용하여 a 태그로 이동이 되도록 처리하고,routes와 router도 자동으로 만들어지도록 하여좀 더 메뉴를 쉽게 관리할 수 있도록 바꿔보았다. 기존의 react-router는 그대로 사용한다.npm install react-router-domRouter Typerouter를 좀 더 편하게 사용하기위해 타입을 커스텀을 해준다.기존의 RouteObject를 활용하여 router 할 수 있지..

https://yumedev.tistory.com/57 [ Java ] 기상청 Api 완벽 활용하기 - 1 ( 실시간 날씨, 미세먼지 조회 )기상청 api를 사용하여 날씨 정보를 가져올때 각 api별로 보내야하는 파라미터가 달라서 사용하기가 까다롭다. 간단하게 설명을 위해 자세한 코드 실행 결과보다는 과정으로 설명 진행 ( 예외처yumedev.tistory.com 실시간 날씨, 미세먼지 api활용에 이어서 이제 날씨에서 시간별 날씨와 주간 날씨 데이터를 가져오고자 한다.어떤 api를 사용하는지 확인을 하고자 하면 위 링크를 통해 간단하게 보고 오면 좋을 것 같다.  간단하게 설명을 위해 자세한 코드 실행 결과보다는 과정으로 설명 진행 ( 예외처리 작업 및 DB 처리 과정은 생략했다. )Front 에서 지..

기상청 api를 사용하여 날씨 정보를 가져올때 각 api별로 보내야하는 파라미터가 달라서 사용하기가 까다롭다. 간단하게 설명을 위해 자세한 코드 실행 결과보다는 과정으로 설명 진행 ( 예외처리 작업 및 DB 처리 과정은 생략했다. )Front 에서 지오코딩을 활용하여 현재 위도 경도 값을 찾고 해당 위도 경도값을 Back으로 보내는 방식으로 진행 우선 기상청의 데이터를 활용하기 위해 총 4개의 api를 사용했다.날씨 정보를 가져오기 위한 중기예보, 단기예보 api미세먼지 정보를 가져오기 위한 에어코리아 api미세먼지 Api 활용하기 - 에어코리아 Api기상청의 미세먼지 정보를 보면 측정소 기준으로 미세먼지 정보를 가져오는 것을 알 수 있다.에어코리아의 대기오염 api를 보면 측정소별 실시간 측정정보를 조..

백에서 요청받은 데이터를 DTO에 담고 DB에 저장시 현재 어떤 사용자가 로그인했는지 알기 위해서 Security에 담겨있는 데이터를 받아와서 처리를 해야하는데 일일이 해당 값을 가져와서 저장하는 과정이 불편하기에요청 받는 DTO에서 단순히 상속 받으면 자동으로 요청시에 해당 DTO에도 로그인 정보가 담기도록 구현 UserDTO@Getter@Setter@AllArgsConstructorpublic class UserDTO { private Long id; private String email; private String username; private Set roles; public UserDTO() { Object principal = SecurityContex..