본문 바로가기

분류 전체보기

(148)
node.js 웹서버 프로젝트 실시간 데이터 dashboard 만들기 4(데이터 베이스 연동) mariaDB mariaDB는 mariaDB사가 만든 관계형 DBMS 소프트웨어 입니다 이는 MYSQL이 오라클에 인수합병당하면서 상업적으로 mysql을 이용할 시 사용료를 내도록 정책을 바꾸어 버렸는데 mysql의 창업자중 한명이였던 몬티 와이드니어스가 동료들과 함께 mysql 기반 오픈소스 RDBMS를 개발한 것이 지금의 mariaDB 가 되었습니다. 본 프로젝트에서는 mariaDB를 활용하여 데이터베이스 생성 및 연동을 진행해 보겠습니다. maiaDB와 해당 프로젝트 연동 직접적으로 데이터베이스와의 연동이 필요할 때마다 커넥트를 시켜줘도 되지만 그건 매우 번거로운 작업이기 떄문에 커넥션 정보를 가지고 있는 js 파일과 커넥션 pool을 생성하여 db에 연동이 필요할 경우 연동이 가능하게 분리할 수 ..
github 연동 및 버전관리 하기 VSCode 와 GIT 연동 github는 대표적인 형상관리 및 버전관리를 수행하는 협업툴이기 떄문에 이클립스 , visualstudio 등 여러 컴파일러나 에디터 등에서 쉽게 연동하여 사용할 수 있다 이번 포스팅에서는 어떤 컴파일러나 에디터를 사용하던 원리는 같기때문에 특별히 vscode를 사용해서 연동을 해보았습니다 ( 꼭 vscode를 사용할 필요는 없다) https://evols-atirev.tistory.com/14 Visual Studio Code Git 연동하기 vscode에서 git과 github를 연동하는 방법이다. 먼저 vscode와 git을 설치해준다. http://evols-atirev.tistory.com/4 이걸 보고 vscode를 설치할 수 있을 것이다. https://git-..
Github 리포지토리 생성 및 로컬 저장공간과 연결 이번에 포스팅을 할 내용은 깃허브를 실제 연동해 보고 코드의 변경사항 발생시를 이를 원격 저장소에 올리고 받는 방법에 대해 다뤄보겠습니다 1.리포지토리 생성하기 2. 생성한 리포지 토리와 로컬 디렉터리 연결 리포지토리를 생성한 후 해당 리퍼지토리에 들어가면 위와 같은 화면을 볼 수 있습니다. 위 화면은 현재 아무정보도 들어와 있지 않기 때문에 초기 설정에 대한 마크다운 만이 기록 되어 있습니다. 리포지토리를 생성하게 되면 리포지토리의 해당 주소가 상단에 표시가 되는데 옆에 copy 버튼을 통해 copy가 가능합니다. 3. git 초기 설정 git을 사용할떄 전초적으로 설정이 필요한데 git config --global user.name'[해당 유저 네임 입력]' git config --global use..
Github 사용 전 알아둬야할 지식과 기초 흐름 Github 깃허브는 git을 호스팅해주는 웹 서비스 입니다. git 저장소 서버를 대신 유지 및 관리해주는 서비스를 의미하는데 오픈소스 프로젝트는 무료이고 pivate 프로젝트는 유료다 다른 유저들과 함께 온라인으로 하나의 프로그램을 제작하는 것이 가능하기 떄문에 만은 사람들이 github를 통해 제작을 하고 있습니다 Github를 사용하기 전 알아두어야 할 사전 지식 ※ 로컬 저장소와 원격 저장소 저장소는 파일이나 디렉토리를 저장하하는 공간입니다 변경 이력을 관리하고자 하는 디렉토리 등을 저장소의 관리하의 두는 것으로 디렉토리에 잇는 파일 등의 변경 내용을 기록 할 수 있습니다. 저장소는 자신의 컴퓨터에 있는 로컬 저장소와 서버 등 네트워크에 잇는 원격 저장소의 두개가 있는데 기본적으로 로컬 저장소에..
GIT 이란 무엇인가 GIT? 깃은 컴퓨터 파일의 변경사항을 추적하고 여려 명의 사용자들 간에 해당 파일드의 작업을 조율하기 위한 분산 버전관리 시스템을 의미합니다. 소프트웨어 개발에서 소스 코드 관리에 주로 서용되지만 어떠한 집합의 파일의 변경사항을 지속적으로 추적해주기 위해 사용할 수도 있습니다. 깃은 다른 대부분의 분산 버전 관리 시스템처럼 또는 대부분의 클라이언트-서버 시스템과는 다르게 모든 노드의 모든 깃 디렉토리는 네트워크 접속이며 중앙 서버와는 독립적으로 동작하는 완전한 이력 및 완전한 버전 추적 기능을 갖춘 성숙한 저장소입니다. 형상관리 & 버전관리 형상관리 : 소프트웨어는 한번 만들어졌다고 해서 그걸로 끝나는 것이 아닙니다. 환경의 변화나 기술의 변화에 따라 지속적으로 변경이 이루어지기 때문입니다. 그렇지만 ..
node.js 웹서버 프로젝트 실시간 데이터 dashboard 만들기 3(ejs & Ajax) ejs? ejs란 Embedded JavaScript의 약자로 쉽게 말하자면 자바스크립트가 내장 되어 있는 html 파일을 의미한다 html 에서 코딩을 해본 사람들은 알겠지만 html 문서 자체에서도 javascript 문장은 를 통해 삽입이 가능합니다. 그렇지만 내장되어 있다는 것과 분리가 되어 있다는 것은 다른 의미이다 ejs에서는 자바스크립트를 내장시킬 수 있는 두가지의 테그가 있습니다. 테그가 가장기본이 되며 저 테크 사이에 원하는 자바스크립트 내용을 넣으면 된는데, 해당코드를 통해 정적은 문서에서 동적으로 처리를 해야하는 부분에 대한 편의성이 높아지고 서버에서 보낸 변수를 그대로 가져와서 사용할 수 있다는 것에서 유연한 코드 작성이 가능합니다. JSP 에서 자바 테그를 삽입 할 수 있은 것과 ..
node.js 웹서버 프로젝트 실시간 데이터 dashboard 만들기 2(express 모듈) web에서 사용하는 모듈 http 모듈로 웹 서버를 생성하면 일을 직접 처리해야 하므로 기존에 서버 생성 개념에 익숙하지 않다면 어렵습니다. 이런 상황에서 http 모듈에 여러가지 기능을 추가해 여러 기능을 쉽게 사용할 수 있도록 만든 모듈을 express모듈이라 합니다 아래는 node.js 웹 개발에서 많이 사용하는 각각의 모듈에 대한 간단한 description입니다. 개념 설명 express 모듈 http 모듈처럼 사용할 수 있지만 더 많은 기능을 내장한 내부 모듈 미들웨어 expres 모듈 user() 메서드의 매개변수에 입력하는 함수를 의미 router 페이지 라우팅을 지원하는 미들웨어 static 지정한 폴더에 있는 내용을 모두 웹서버 루트 폴더에 올릴떄 사용 cookie patser 용청한 ..
node.js 웹서버 프로젝트 실시간 데이터 dashboard 만들기 1(Bootstrap4) Bootstrap4 웹 페이지의 개발이 진행 될 때 트위터에서 사용하는 각종 레이아웃, 버튼 , 입력창 등의 디자인을 css와 javascript를 통해 만들어 놓은 것입니다. 웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 반응이 좋은 프레임워크입니다. BootStrap을 간혹 어떤 언어 혹은, 프로임워크 등으로 오해하는 경우들이 있는데 간단하게 설명하자면 우리가 파워포인트 발표 차료를 만들 때 ppt를 물론 자신이 직접 디자인해서 사용하는 경우도 있지만, 남이 만들어 놓은 템플릿을 가져다 ppt 제작시간을 줄이고 원하는 디자인을 적용하듯 일종의 WEB 템플릿이라고 생각하면 됩니다. 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지 등의 자잘한 것 뿐만이 아니라 드롭다운, 메뉴, ..