개발자노트 (261) 썸네일형 리스트형 Visual Studio Code에서 Ionic 사용하기 with Vue.js 일단 나는 앱 개발자가 아니다.공부 한 적도 없고 앱 개발에 뜻이 있지도 않다.현재 근무 중인 회사에서 급하게 앱이 필요하다고 해서 자바+코틀린으로 구성되어져 있는 네이티브 앱을 만들었는데,만들고 구현하는데 고생을 많이 했다.회사 입장에서는 돈을 주고 일을 시키는 직원이지만, 나는 앱개발자로 입사한 것도 아닐 뿐더러,한명의 개발자로써 역할을 충실히 행할 수 있는 레벨도 아니라고 생각이 드는 와중에 이런 포지션 전환까지 하고 있다는 것에 매우 불만이다.이것을 상사에게 보고한 결과, 앱을 하이브리드 앱으로 해서 언어를 웹 언어로 앱을 만들으라 한다.결국 의미없는 발악이라고 생각하지만 그렇게라도 진행하기 위해 찾아보던 중 Ionic이 그나마 부합한 것 같아서 선택하게 되었다.하지만 안드로이드 네이티브와 마찬가.. 안드로이드 스튜디오 배포 중 오류 정말 오랜만의 포스팅..이직 한 회사에 적응을 해갈 즈음 갑자기 파견근무를 나오게 되었다.이곳에서 하게 된건 뜬금 없는 안드로이드 프로젝트지금까지 했던건 웹인데, 자바기반으로 된 안드로이드 어플리케이션을 만드는 업무를 담당하게 되었다.나중에 다시 정리하겠지만, 파견을 나와서 4개의 안드로이드 어플리케이션을 만들기 위해 맞는지 틀린지 모르겠지만프레임워크를 대충 만들어 놓고 그걸 기반으로 어플리케이션들을 찍어냈는데 배포를 하려고 APK를 생성하면서 만난 오류들이 있어서 추후에 다시 확인하기 위해 포스팅을 작성해둔다. 1. 안드로이드를 배포하기 위해선 Key Store 라는 것이 필요해서 Key Store를 생성한다.상단에 Build > Generate Signed Bundle / APK ...APK 파일.. 인텔리제이 한글 깨짐 ( 인코딩 문제 ) 검색해서 나오는 사항들은 적용하였는데도 콘솔 한글이 깨지는 문제가 발생하였다. 1번 방법 -Xmx8192m-Dfile.encoding=UTF-8-Dconsole.encoding=UTF-8이렇게 인텔리제이 자체 VM Options도 작성하였고, 2번 방법 이렇게 인텔리제이 자체 Settings에 인코딩을 변경도 해보았지만 여전히 인코딩이 깨지는 것을 발견.. 생각 해 보니 저 로그는 톰캣 로그에서만 깨지는 것을 확인하였고, 3번 방법 다음과 같이 톰캣 실행 VM options에 -Dfile.encoding=UTF-8을 작성-Dfile.encoding=UTF-8 그런데 서버실행도 제대로 되지 않고 에러가 발생한다.그래서 추가로 언어랑 위치를 VM options에 추가했다.-Dfile.encoding=U.. 우분투 , RockyOS postgresql db 이관하기 버전이 다른 postgresql 2개 서비스하기 저번 포스팅에 이어서 두번 째 내용이다. 기존에 쓰던 서버는 ubuntu 이고, 새로운 서버는 RockyOS 이다. 현재 RockyOS에는 postgres 14 버전으로 DB가 구성되어있는 상태이기 때문에, database를 추가하면 되지만 , 서비스 장애가 있을 시 다른 프로젝트에 지장이 생기면 불편할 것 같기도 하고 (이중화), 현재 운영중인 서버와 싱크를 맞추기 위해 그대로 10버전을 채택하기로 결정하였다. 환경1 (legacy) : - ubuntu 20.04.5 LTS - postgresql : 10 환경2 (new) : - RockyOS 8 - postgresql : 10 - postgresql : 14 우선 , RockyOS에는 dnf 라는 패키징 관리도구 명령어가 있어서, 이를 통해 post.. Warning : Each child in a list should have a uniqe "key" prop. 프로젝트에 에러,워링 등을 제거하고 있었다. 말 그대로 list 에 고유한 key값들이 존재하지 않는다는 경고 로그를 보니 FloodRiskWaterLog.js 에 option에서 발생한 것을 확인할 수 있다. 해당 변수는 슬라이더의 최소값 최대값을 지정해 해당 길이만큼 DataList를 만들기 위한 변수이다. 그 후 optionList에 담아 화면에 표출해줄 예정이다. 현재 {i}을 배열에 담아주고 있는데, 이 때 key값이 지정되어 있지 않아 생기게 된 오류 다음과 같이 List에 option을 push할 때 key값을 지정해주면 된다. Error(Warring) Cannot update a component (`App`)... 리액트로 프로젝트를 진행 중 마주친 오류? 라고 해야하나 개발자 도구에 몇줄 씩이나 뜬다.. 이유로는 'MapRight2' 컴포넌트가 렌더링 되는 동안에 'App' 컴포넌트 상태를 업데이트 할 수 없기 때문이라고 한다.. 이해하기로는 다 세팅이 안끝났는데 화면에 그리려니 오류가 뜬게 아닐까.. 사실 지금 당장에는 에러가 발생한다던가 정보가 안뜨진 않지만 잘못하면 무한루프에 빠질 수 있다기에.. 거슬리니까 빠르게 먼저 해결해봐야지.. 문제를 해결하기 위해 MapRight2에 setState 한 부분들을 찾아보았다. useState와 슬라이스로 만들어 둔 setTab이 눈에 보였다. 일단 일반적인 useState는 init 값이 지정되어있고, 어차피 최초 App이 실행될 때 이미 호출을 하기 때문에 이 때문.. 시계 컴포넌트 (사용자 Hook) 에서 10분 단위로 표출하기 (day.js, floor) 현재 상황은 DB에는 10분단위 데이터가 쌓일 예정 하지만 시계는 실시간 정보를 화면에 보여주고 있다. 이러한 이유로 해당 정보에서 0~9분 데이터는 지우고 만약 현재 시간이 16분이라면 10분, 35분이라면 30분 등으로 표시될 수 있게 스크립트를 구현하였다. import { useEffect, useState } from 'react'; import dayjs from 'dayjs'; const useFloorTime = () => { const [clock, setClock] = useState(''); useEffect(() => { const interval = setInterval(() => { let now = dayjs(); let minutes = now.minute(); minutes .. 리액트 - 범위 슬라이더 현재 진행하고 있는 프로젝트는 리액트 + 스프링 부트로 이루어져있다. 일단 리액트를 사용할 줄 아는 선임이 없어 독학하면서 프로젝트 진행 중인 상태이다. 내가 원하는 슬라이더는 배너나 이미지 슬라이더가 아닌 범위 슬라이더이다. 흔히 쇼핑몰에서 검색 필터에 나오는 가격 슬라이더 같은 느낌의 ?.. 구글링을 해보니 리액트에서 많이 사용하는 무한 스크롤이 제일 많이 검색되었고, 그 다음은 라이브러리 위주만 나와서 내가 원하던 정보가 없던 중 input type 요소 중 range 라는 것을 발견 사용 해보니 내가 원하던 슬라이더 바가 나왔다. 이 value 값을 컨트롤 하기 위해 const handleChange = e => { let slider = document.getElementById('myRange.. 이전 1 2 3 4 ··· 33 다음
