Suhyeon's 개발일지

일단, FR page를 생성하기 위해 사용자 추가 시 opcode에 fr을 추가했다.그런 다음, model이 fr일 때 frdashboard를 열기 위해,contentRoutes.js에서 FR에 대한 routes정보를 추가해주었다.그리고, login 페이지에도 fr일

FR 페이지를 띄었으니 이제 어떤 것을 넣을지 생각해야 한다.일단, 산불 페이지이기 때문에 지도가 필요했다.kakaomap을 사용했다.여기서 P와 Position 데이터는 내가 그냥 직접 넣어줬다. (아직 데이터가 없기 때문에)kakaomap을 사용하기 위해 conta

산불이 난 곳을 클릭했을 때, 그 산불이 난 위치와 산불의 정보를 보여주기 위해 kakao.maps.event.addListener을 사용했다.원래 처음에는 영역을 확대하도록 했지만, 뭔가 표현이 되지 않아서 정보를 보여주기로 결정했다.경도와 위도의 정보를 가지고 주소

원래 카카오를 통해 주소 검색을 통해 직접 주소를 검색 후 저장되는 방식을 사용했다.하지만, 기기의 위치를 하나하나 주소를 적기에 불편함이 존재했다. 이 문제점을 해결하기 위해🙌 페이지에 들어왔을 때 현재의 위치를 파악한 후 지도에 마커와 함께 표시되고, 현재의 위치

사용자 이름 클릭 시 사용자의 정보가 아래 사진처럼 나와야 한다.하지만, 처음 클릭 한 사용자에 대한 정보가 나오지 않았고, 다른 사용자를 클릭 한 후 클릭해야 나오는 오류가 생겼다.코드를 찾아보니,이렇게, formik.values를 직접 변경하고 있었고, formik

산불의 현황을 알려주는 것이 중요하다 생각하여, 왼쪽 div에는 테스트 데이터 p의 갯수와 positoion의 갯수를 받아와 대시보드에 표시해 주었다. 그리고, 오른쪽 div에는 작년 산불 발생의 건수를 알려주기 위해, 공공데이터포털 산림청에서 제공하는 "산림청_산

스마트팜 페이지의 레이아웃을 유지하기 위해 변경을 했다.하지만, 필요한 정보가 달라서 기상청\_단기예보 api를 받아와 습도, 강수량, 풍량, 풍속의 정보를 1시간 단위로 받아왔다.현재의 날짜와 기상청에서 제공하는 예보 시간을 가져와 설정을 해주었다.그리고 기상청에서

하나의 기기에 설정 아이콘을 눌렀을 때 보여지는 단말기 설치 정보 모달을 수정했다. 전에 지도로 위치 찾기의 코드를 가져와 적용했다.이 부분에서 만약 이미 기기에 주소가 할당되어 있는 상태라면, 할당된 주소의 위치를 표현해주는 것이 맞다고 생각했다. 하지만, 현재 위치

기기 설치 정보에서 초기화를 클릭 시 imei와 serialnumber, 설치자이름은 기기의 정보를 받아와 정보가 입력되기 때문에 초기화가 되면 안 된다. 하지만, 위 코드를 보면 전체 value가 초기화가 되기 때문에 초기화 버튼 클릭 시 제대로 작동하지 않는다.그래

전에 지도에서 위치를 찾을 때, 현재의 위치로만 보여지는 부분에서 주소가 할당되어 있을 때 할당된 위치가 보이도록 변경했다.위치를 매개변수를 받아와, 만약 위치가 지정되어있으면 그 위치를 표시해주고, lat / lng이 모두 0이면 현재의 위치를 받아오도록 했다.추가로

산불 페이지에서 유용한 정보를 넣는 것이 좋다고 생각했다.그래서 메인 페이지에 지역별 나무의 분포를 넣기로 결정했다. 위의 정보는 산림 통계 시스템에서 제공하는 "수종별 산림면적 및 임목축적" 데이터를 다운받아, csv파일로 만들어 준 다음 그 파일을 불러와서 정보를

산불에 필요한 데이터 F_tmep, F_humidity, F_pressure, F_gas을 socket으로 받아오면 packet을 처리하고, 화면에 보여주는 과정을 개발했다.일단. socket.js파일에 protocol에 맞게 info와 item, size, forma

기기 명령 정보를 삭제할 때 편리하게 하기 위해 checkbox를 설정해주었다.checkbox를 설정한 뒤 제목의 checkbox를 클릭하면 전체선택이 되지 않는 문제점이 발생했다.초기코드(checkbox를 클릭했을 때 handleCheckboxChange 함수를 불러

google Elevation Api를 사용할 때 월에 5000회만 무료라는 제약이 걸려있었다. 초기에 진행한 코드는

서버를 구축하게 된 이유는 현재 운영중인 서버에서 디스크 용량 문제로 계속 DB가 다운되는 현상(OOM-kill)이 생겼다.AWS를 통해 볼륨 용량을 늘려서 해결하긴 했지만 계속 데이터가 쌓이는 문제가 생겨서 여전히 DB가 죽는 현상이 발생한다.그래서 새로운 서버를 구

현재 운영중인 DB 데이터를 덤프파일로 받아와 테스트를 하기로 결정했다.pg_dump를 하기 위해 DB 서버의 hostname과 user, database 의 정보가 필요하다.powershell에서 아래 명령어를 통해 백업 파일을 생성한다.\-f 뒤에 경로를 지정해주면

디비는 다 옮겨놨고, 이젠 nodejs와 npm을 설치 했다. 그 후, github에 있는 폴더를 다운로드 했다. git에서 코드를 가져오기 위해 토큰 방식과 ssh 방식이 있는데 난 토큰 방식을 사용했다. (ssh 방식이 더 안전하고 편리하다는 정보를 늦게 알았기

디비 연결, 필요한 것들 install, 도메인 연결 완료 후 그 뒤에는 간단하다.먼저 pm2를 시작하기 위해위 명령어를 통해 시작 후 save를 해서 설정을 저장해준 후 서버가 재시작 되었을 때 자동으로 설정으로 복구가 되도록 해주었다. 그 후 backend 폴더 이

1. 엑셀 다운로드 시 전체 정보 다운로드로 되도록 설정 --> 전체 데이터를 지정해줌으로써 엑셀 다운로드 시 전체 데이터를 확인할 수 있게 하였다. --> 그 중, 저장시간이 Sensing_time으로 지정될 수 있도록 하였고, 데이터베이스의 변경으로 user?으

오늘은 산불 페이지에 대한 내용이다. 산불은 알림이 가장 중요한 요소이기 때문에 알림에 대해 생각을 많이 해봤다. 일단 첫번째로 생각한 것은 문자이다. 하지만, 문자는 비용 문제로 탈락 두 번째는 메일 전송이다. 세 번째는 텔레그램이다. 텔레그램이 가장 예제가 많

텔레그램 알림 기능은 측정한 데이터의 값(Gas)가 임곗값 이상일 때 알림이 가도록 설정해야 한다. 그래서 생각한 방법은 대시보드의 지도가 load 될 때마다 값을 비교해서 알림이 가도록 구현했다.FR_page에 들어오면 처음 화면에 지도가 뜬다.저 대시보드의 지도가

알림 기능을 구현하기 위해서는 chat id가 고정된 값이 아닌, 사용자 별 chat id가 필요했다. 그래서 user 페이지에 설정 탭에서 텔레그램 chat id를 받아 올 입력칸을 구현해주었다.알림과 텔레그램의 체크박스를 체크하면 텔레그램 ID를 적을 수 있는 칸이

지도가 로드될 때만 텔레그램 알림이 가면 제일 중요한 실시간 알림이 되지 않는다.. 사용자가 사용하지 않을 때에도 알림을 통해 산불 경고를 주어야 하는데 지금까지 구현한 알림 기능은 그렇지 않다. 그래서 소켓 통신이 시작되고 데이터가 들어올 때 데이터 값을 비교해서

텔레그램의 실시간 전송 중 오류로 인해 전송이 안 되는 경우가 많아서 메일도 함께 설정해 주기로 결정했다.노드메일러는 사용할 메일에서 직접 설정해 주어야 한다.회사 메일을 사용할 것이기 때문에 네이버 웍스에서 설정해 줬다.일단 설정에서 IMAP/SMTP 설정을 통해 p

🧩 프로젝트 초기 회고 이번 프로젝트는 기존 웹 페이지 중 필요한 기능만 선별해 새로운 서버를 구축하는 방식으로 진행하기로 했다. 기존 사이트는 외주 업체로부터 인수인계받은 코드라 구조가 복잡하고 직접 수정하기 애매한 부분이 많았다. 그래서 이번에는 처음부터 내가

우리 시스템에서는 메일뿐만 아니라 문자 알림도 실시간으로 발송될 수 있도록 구현해야 했다.문자 전송 API로는 쿨에스엠에스(CoolSMS) 를 선택했다.테스트용 무료 기간이 있고, 공식 문서가 잘 정리되어 있어서 빠르게 적용할 수 있을 것 같았다.먼저 회원가입을 진행하

우리 페이지는 Login, Device List, Sensor Chart — 이렇게 세 개의 페이지로 구성되어 있다.Device List에서 특정 Device_Id를 클릭하면 Sensor Chart로 이동하도록 구현했다.초기에 React Router를 사용하지 않고 상

기존에는 삭제 버튼을 클릭해 하나씩만 삭제할 수 있는 구조였다.이 방식은 데이터가 많을 때 불편함이 컸기 때문에, 체크박스를 통한 다중 선택 삭제 기능을 새로 구현했다.다중 선택을 위해 두 개의 상태를 추가했다.checkedItems: 선택된 행의 데이터를 저장하는 배

초반에 chart.js를 사용했는데 화면에 예쁘게 보이지 않아서 많은 사람들이 개발자들이 사용하는 recharts를 적용하기로 결정했다. recharts는 적용 방법 등 문서화가 잘 되어 있어서 쓰기 편했다. recharts 공식 문서 링크 일단 설치부터 해줘

비동기 데이터를 활용한 동적 UI 컴포넌트 구현오늘은 바닐라 JavaScript로 SPA(Single Page Application)를 개발하면서 비동기 API 데이터를 동적으로 UI에 반영하는 작업을 진행했습니다.HTML 템플릿 문자열을 반환하는 함수형 컴포넌트Tai

addEventListener를 활용한 동적 상품 필터링 기능 구현오늘은 사용자가 드롭다운에서 상품 개수와 정렬 옵션을 변경할 때마다 실시간으로 상품 목록이 업데이트되도록 하는 인터랙티브 기능을 완성했습니다.사용자가 "10개", "20개", "50개", "100개" 중

오늘은 사용자가 스크롤을 내릴 때마다 추가 상품이 자동으로 로드되는 무한 스크롤 기능을 완성했습니다. 단순한 페이지네이션을 넘어서 끊임없는 사용자 경험을 제공하는 모던 웹 애플리케이션의 핵심 기능을 구현했습니다.현재 페이지, 로딩 상태, 더 로드할 상품 여부 등을 전역