본문 바로가기

분류 전체보기18

[OSM]OpenStreetMap을 이용한 내비게이션 만들기 - 2 [DB 생성]전 게시물에서 작성한 DB를 추가했다. [SQL]-- 데이터베이스 생성-- CREATE 테이블명;-- 데이터베이스 사용-- USE 테이블명;-- 사용자 테이블 생성CREATE TABLE `user` ( `id` INT AUTO_INCREMENT PRIMARY KEY, `name` VARCHAR(255) NULL, `password` VARCHAR(255) NULL, `email` VARCHAR(255) NULL, `create` DATETIME, `update` DATETIME);-- 차량 동작 로그 테이블 생성CREATE TABLE `operation` ( `id` INT AUTO_INCREMENT PRIMARY KEY, `user` INT NUL.. 2024. 9. 13.
[OSM]OpenStreetMap을 이용한 내비게이션 만들기 - 1 [목표]- 내비게이션의 기본 기능 탑재 (경로 탐색, 장소 검색)- 사용자의 말을 인식하고 답변을 마커(위)와 리스트(아래)로 표시하기- 사용자의 개인 차량 동작 로그 표시하기- 교통정보를 경로 위 또는 지도 위에 마커로 표시하기(사고, 정체, 흐림) [시나리오]사용자가 내비게이션을 이용하기 위해 지도를 켠다사용자이름, 이메일, 비밀번호검색창에서 검색을한다출발위치, 도착위치목적지를 말한다 목적지가 앱에 저장된다검색기록현재위치에서 목적지를 설정해서 보여준다 자동차/도보/자전거를 고른다 어떤 경로(고속도로)로 갈지 고른다 경로별로 소요시간을 보여준다 경로별 교통상태를 보여준다 가는길에 사고, 공사중 등(알림)이 있는지 보여준다 경로를 고른다 현재위치를 보여준다 현재위치에서 어떻게 이동하는지 보여준다(노드)종.. 2024. 9. 9.
[REACT] 리액트를 쓰는 이유와 리액트 기초환경 설정 개발환경 셋팅 1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다. - 13버전이하 아니면 17버전은 쓰면 안됩니다. - 설치 경로는 C드라이브 어쩌구 되어있는거 바꾸지말고 그대로 쓰는게 좋습니다. - 설치 중 chocolatey 어쩌구는 설치 안하셔도 됩니다. 2. Visual Studio Code 에디터도 구글에 검색해서 설치합니다. (기존 에디터 쓰셔도 되지만 터미널을 기존에 안다뤄본 분들은 필수) Q. 맥북은 다른가요? A. 다른거 없음 똑같습니다 리액트 프로젝트 생성은 1. 작업용 폴더를 하나 만들어줍니다 찾기좋게 바탕화면에 만드는게 어떨까요. 2. 폴더에 shift + 우클릭해서 여기서 powershell 열기를 누릅니다. 맥북은 손가락 두개 클릭해서 터미널열기 누르면 됩니다.. 2023. 7. 13.
[NODEJS] NODE.JS란 무엇인가? 핵심 개념 이해하기 노드가 무엇인지, 어디에 쓰이는지, 누가 쓰는지 알아보고, 노드의 핵심 개념을 알아봅시다. 이번 글에서는 노드와 관련된 코드는 나오지 않지만, 노드의 핵심 개념을 다루므로 꼭 읽어보길 바랍니다. 많은 노드 입문자가 핵심 개념을 충분히 이해하지 못한 채 코딩부터 시작하다가 어려움을 겪습니다. 만약 여러분이 이미 런타임, 이벤트 기반, 논 블로킹 I/O, 싱글 스레드 모델이 무엇인지 알고 있다면 다음 글로 넘어가도 좋습니다. 노드 공식 사이트에서는 노드를 다음과 같이 설명하고 있습니다. Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임입니다. 대부분의 사람들은 노드를 서버로 사용하는 방법을 익히기 위해 정보를 찾지만 공식 사이트의 노드 소개글에는 서버라는 말이 .. 2023. 7. 13.
[NODEJS] express 모듈을 이용한 웹서버 구축 및 API 만들어보기 [기초설정] 1) NODE JS 설치 필요 2) npm init (초기 설정) 3) npm install express (설치) 4) npm install cors (설치) 5) node index.js (실행) [자바스크립트] index.js const express = require('express') //cors 설정을 위해 선언 var cors = require('cors') const app = express() const port = 3000 //cors 설정을 위해 사용 app.use(cors()) //root 페이지 app.get('/', (req, res) => { res.send('Hello World!') }) //API 실습 app.get('/sound/:name', (req, re.. 2023. 7. 4.
[모니터링시스템] 기초설계 기존에 개발했던 모니터링 시스템들은 하나하나 커스텀으로 개발해야 하는 경우가 많아 더 빠르고 편하게 개발하기 위해 통합 모니터링 시스템을 개발하려고 합니다. 우선 개발 예정 메뉴는 아래와 같습니다. ============================== 메뉴 특이사항 메인화면 Dashboard 역할(검사화면을 크게 넣을 것) 검사이력 데이터 저장 및 보기(일관적인 디자인으로 가시성을 높일 것) 그래프 월별 월별 데이터 일별 일별 데이터 SPC 검사의 정확도 판별 사용자 설정 검사항목 관리 검사할 항목명, 최소값, 최대값 등을 수정 유저 관리 가입유저 관리(관리자용) 프로그램 설정 설정1 (개발자용) 설정2 (개발자용) 설정3 (개발자용) 기타 다크모드 부가기능 2023. 7. 4.