YumeHANA YUME'S DEV

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..

티스토리와 같은 방식의 태그를 구현Input TagonKeyDown함수를 활용하여 Enter와 Tab이 눌렀을때 input을 다시 빈값으로 초기화 해준다. const [tag, setTag] = useState("") const onKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); setTag(""); } }우선 해시태그와 input으로 태그를 입력할 수 있도록 작성 # setTag(e.target.value)} onKeyD..

react에서 color picker를 사용하기 위해서 react-colorful을 사용 https://npmjs.com/package/react-colorful react-colorful🎨 A tiny (2,8 KB) color picker component for React and Preact apps. Fast, well-tested, dependency-free, mobile-friendly and accessible. Latest version: 5.6.1, last published: 3 years ago. Start using react-colorful in your project by running `npm i reacwww.npmjs.com Installmentnpm install re..

component를 import 할때 ../../ 경로가 들어가는데 좀 더 단순화 하기 위해절대경로를 설정하여 좀 더 단순하게 표시할 수 있다. vite의 경우 이미 해당 라이브러리가 이미 포함되어있기 때문에 따로 설치할 필요가 없지만 vite가 아닌 경우 직접 라이브러리를 설치해줘야한다. 또한 추가적으로 설정을 해주어야한다.npm install path-browserify vite의 경우에는 vite.config.js 파일만 설정해주면 되지만vite가 아닌 경우 config.js 파일도 작업을 해주어야한다.Useageimport {defineConfig} from 'vite'import react from '@vitejs/plugin-react'import path from 'path'// https..

메뉴를 구성하기 위해 Drawer Navigator를 사용 https://reactnavigation.org/docs/drawer-navigator Drawer Navigator | React NavigationDrawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures.reactnavigation.org Navigation docs에서 expo기준으로 진행Setup두개를 설치npm install @react-navigation/drawernpx expo install react-native-gesture-handler react-native-reanimate..

tab 기능을 구현하기 위해서tabBar를 사용 https://api.flutter.dev/flutter/material/TabBar-class.html TabBar class - material library - Dart APIA Material Design primary tab bar. Primary tabs are placed at the top of the content pane under a top app bar. They display the main content destinations. Typically created as the AppBar.bottom part of an AppBar and in conjunction with a TabBarView. If a Tapi.flutter.de..