기본 콘텐츠로 건너뛰기

nodeJS 서버 호스팅 (Web IDE Cloud9 사용법)

nodeJS 서버 호스팅 (Web IDE Cloud9 사용법)

요즘 한창 nodejs에 대한 공부를 하고있다.

독학으로 하고 있어서 조금은 더디지만 열심히 공부하고 있다.

어느정도 사용법을 알게 되어 호스팅을 받아서 공부를 해야겠다 라는 마음을 가졌다.

하지만 nodejs에 대한 호스팅을 해주는 업체가 국내에서 찾아보기가 힘들다.

그러던 와중 c9.io라는 곳을 알게 되었다.

클라우드나인?? 게임단 중 클라우드나인 이라는 곳이 있는데 그쪽 스폰서인가?? 사실 잘모른다.

확실한건 지금 소개할 곳은 Web IDE(말그대로 웹기반으로 돌아가는 개발환경이다.)

쉽게 말하자면 비쥬얼스튜디오나 이클립스, 웹스톰 등을

직접 컴퓨터에 설치하지 않고 단지 인터넷창에 주소만 치면 인터넷 브라우저에서 개발을 할 수 있는 클라우드 환경이다.

처음에는 '에이 사용적으로 제한이 엄청나게 많겠지~' 라는 생각으로 대충 살펴보았다.

그러나 생각보다 많은 기능에 오히려 컴퓨터사양이 낮을때 더 유용하게 사용이 가능하였다.

카페에서 프로그래밍 공부를 하는경우가 꽤나 있기 때문에 노트북을 항상 소지하고다닌다.

문제는 노트북 사양이 그렇게 좋지 않아서 이클립스나 웹스톰, 안드로이드 스튜디오 등등 IDE만해도 노트북이 벅차다.

하지만 c9을 이용하면 전혀 그점이 문제가 되지 않는다.

오로지 인터넷 속도와 브라우저속도만으로 모든일이 가능하다.

세상이 참 좋아졌다.

가장 중요한것은 호스팅이 된다.(그것도 꽤나 안정적으로)

그래서 이 글에서는 간단하게 c9를 이용한 nodeJS 사용법에 대해 설명하려한다.

(c9의 워크스페이스)

처음 로그인을 할때 깃허브와 연동이 되서 따로 회원가입을 하지 않았다.

벌써 +를 먹고 들어갔다.(귀찮은 회원가입..)

또한 직관적인 ui로 어렵지 않게 워크스페이스를 생성하고 사용할 수 있었다.

(워크스페이스 생성창 생각보다 많은 템플릿에 두번째 +)

각 종 정보를 입력하고 create workspace를 누르면 끝!

물론 private으로 워크스페이스를 생성하려면 일정 금액을 지불해야한다.

하지만 공부목적으로 사용 하는데 굳이 사람들이 워크스페이스에 접근할 일도 없고

얻어갈 정보도 그리 많지 않으니 별상관없이 public!

(대망의 IDE의 첫화면!)

IDE의 구성은 기존의 많은 IDE의 구성과 비슷하다.

c9 IDE 는 리눅스 우분투로 서버OS가 잡혀있기 때문에 아래쪽에 console 명령창이 있다.

리눅스 명령어는 다 잘 먹는다.

(npm init 부터!)

기본적으로 템플릿 구성되있는 모든 파일과 폴더를 지운후에 npm init 명령을 이용하여 package.json 파일부터 생성하였다.

web으로 이런일들이 가능한 시대가 됬다는 것이 정말 신기하다.

결국 IDE 역시 js기반으로 만들었을텐데 대단하다.(난 한참 먼 학생일뿐 ㅠㅠ)

(package.json 수정)

package.json에 dependencies를 추가하여 express 모듈과 mysql 모듈을 입력하였다.

그리고 콘솔창에 npm install을 때리니 뾰로로로로로로롱 모듈이 설치되었다.

(node_modules 폴더가 생성되었다면 성공!)

그렇다면 이제할 일은?

서버js파일 만들어야지~

(우클릭으로 폴더생성 파일생성!)

폴더 파일생성은 항상 하던대로 우클릭으로 가능하다.

항상 하던대로 bin 폴더에 www.js라는 파일로 생성하였다.

nodejs 책도 그렇고, 유튜브의 영어강좌도 그렇고, webStorm에서 nodejs템플릿으로 워크스페이스 생성해도 그렇고

서버파일은 bin폴더내에 www.js로 생성해서 일단은 따라할 뿐이지 사실 막만들어도 된다.

(그래도 유지보수를 위해 bin폴더안에 관리하는게 좋을 듯하다.)

(간단하게 서버 코딩)

간단하게 서버 코딩을 해보았다.

단축키들이 먹는것도 신기했고 자동완성 역시 꽤나 잘나온다.

물론 외장모듈은 안나오겠지만..

하여튼 이렇게 간단하게 서버코딩을하고 상단에 run버튼을 누르니!

여기서 Tip!

c9 IDE 내에서 js 파일은 ctrl+shift+b 로 자동정렬이 가능하다.

(똭! 서버가 켜졌다!)

서버가 정상 작동 하였다!

정말 쉬운 방법으로 호스팅까지 되는 c9

nodejs를 공부하고 있는 나에게는 정말 가뭄의 단비같다.

이제 이렇게 nodejs를 공부하며 사용하면된다.

피씨방에서도 코딩할 수 있고 노트북만 있다면 그 어디서든 편하게 코딩이 가능하다~

돈을 내면 서버용량도 커지고 각종 기능이 붙는다.

현재 친구들과 프로젝트를 진행하고 있는데 돈을 내고 c9호스팅을 이용해볼까 생각중이다.

('무료라며? 왜 돈내고해?' 라고 생각하시겠지만 무료로 서버를 켜면 하루정도 서버가 켜져있다가 자동적으로 서버가 꺼진다.)

공부목적으로 정말 괜찮은 IDE를 찾아 기분이 좋다.

결론

IDE 설치하기에는 컴퓨터 사양이 딸리고, 간편하게 테스트 코드정도 보고싶거나 공부를 목적으로 하는 학생에게는 정말 강추하는 IDE

p.s

정말 괜찮은 기능이 하나 있는데 콜라보레이션 코딩이라고 마치 채팅하듯이 한 화면에서 같이 코딩이 가능하다.

(이게 정말 신선하고 재밌는 기능! 프로젝트할때 정말 재밌게 코딩이 가능할 것 같다.)

(글만으로 무슨말인지 모를테니 20초 짜리 영상 투척!)

재미있고 유익한 글이었다면 공감한번 눌러주세요^^

(비회원도 가능합니다.)

from http://twowix.me/35 by ccl(A) rewrite - 2020-03-06 13:54:06

댓글

이 블로그의 인기 게시물

[Mac OS X] 데스크탑 응용프로그램 개발시작

[Mac OS X] 데스크탑 응용프로그램 개발시작 현재 회사에서 다음 프로젝트로 Mac OS X를 개발해야 하는 일정이 생겨 난생 처음 데스크탑 응용프로그램을 개발하기 공부를 시작했고 여러가지 플랫폼이 있다는것을 발견했다. 어떤 플랫폼을 사용해야할 지 먼저 고민해보자. 무엇으로 개발할것인가? Xcode & Swfit or Objective-C Mac OS X 는 objective-c를 기반으로 만들어졌다. apple에서 제공하는 Xcode와 objective-c 혹은 Swift로 응용 프로그램을 만들 수 있다. Electron Electron 프레임워크를 사용하면 javascript, HTML, CSS를 사용하여 크로스 플랫폼 데스크탑 응용 프로그램을 만들 수 있다. react-native-desktop Qt 프레임 워크를 기반으로하는 크로스 플랫폼이다. react-native 와 javascript로 응용 프로그램을 만들 수 있다. Qt는 컴퓨터 프로그래밍에서 GUI 프로그램 개발에 널리 쓰이는 크로스 플랫폼 프레임워크. 각 플랫폼의 장단점은 무엇인가? Xcode & Swfit or Objective-C - 장점 모든 OSX API에 직접 접근할 수 있다. Xcode를 통해 App Store에 쉽게 배포할 수 있다. - 단점 Windows 전용 응용 프로그램을 다시 개발해야한다. Swift언어를 모른다면 새로 공부해야 한다. Electron - 장점 웹스택을 가지고 빠르게 만들 수 있다. 다양한 플랫폼을 지원한다. - 단점 Native언어로 개발할때 보다 성능이 떨어질 이슈가있다. OS X API를 사용하는데 복잡하다. *API에 대한 JavaScript 래퍼가 없으면 자체 래퍼를 작성하지 않는 한 프로젝트에서 사용할 수 없습니다. React-native-desktop - 장점 현재 개발스택과 완전히 동일하므로 더 빠르게 개발 할 수 있다. 다양한 플랫폼을 지원한다. - 단점 N...

AWS CI/CD 파이프라인에 Slack 알람 적용(Lambda, CloudWatch Events 연동)

AWS CI/CD 파이프라인에 Slack 알람 적용(Lambda, CloudWatch Events 연동) 이번 글에서는 구축된 CI/CD 파이프라인과 Slack 알람을 연동하는 방법에 대해서 알아볼 것이다. CI/CD 파이프라인 시작/종료(성공/실패) 시 Amazon CloudWatch Events에서 해당 이벤트를 감지한 후 AWS Lambda로 트리거 신호를 보내면 AWS Lambda에서 Slack채널로 알람을 보내는 프로세스다. 글의 순서는 다음과 같다. Amazon CloudWatch Events, AWS Lambda란? 실습 전 준비사항 Slack Webhook 생성 AWS Lambda 함수 생성 AWS CloudWatch Events 생성 테스트 위와 같은 방식으로 구축을 하면 최종 프로세스는 다음 그림과 같다 (우리가 이 글에서 진행하는 내용은 빨간색으로 표시된 부분) 1. Amazon CloudWatch Events, AWS Lambda란? 1-1. Amazon CloudWatch Events란? Amazon CloudWatch Event(혹은 AWS CloudWatch Events)는 AWS 상태 변경 등을 감시할 수 있는 기능이다. 만약 사용자가 만든 규칙에 맞는 이벤트가 발생하게 되면 해당 이벤트가 사정에 정의된 규칙과 일치할 경우 하나 이상의 대상 작업을 호출한다. 이벤트 유형에 따라 알람을 보내거나, 이벤트 정보를 캡쳐하거나, 교정작업을 수행하거나, 이벤트를 시작하거나, 기타 작업을 수행할 수 있다. 이벤트가 발생할 경우 대상 작업은 AWS Lambda함수, AWS Kinesis 스트림, AWS SQS, Amazon SNS 등이 있다. 사용되는 사례로는 1) 이벤트가 발생하면 Lambda함수를 사용하여 Slack채널로 알림을 전달하거나, 2) AWS 상태 이벤트가 발생하면 Lambda 및 CloudWatch Events를 사용하여 Amazon SNS로 사용자 지정 텍스트 또는 SMS 알림을 보내는 등...

[2020-angstromCTF] web - A peculiar query write-up

[2020-angstromCTF] web - A peculiar query write-up English write-up UI seems like below. If you click the 'the source' link, you can get back-end source code. const express = require("express"); const rateLimit = require("express-rate-limit"); const app = express(); const { Pool, Client } = require("pg"); const port = process.env.PORT || 9090; const path = require("path"); const client = new Client({ user: process.env.DBUSER, host: process.env.DBHOST, database: process.env.DBNAME, password: process.env.DBPASS, port: process.env.DBPORT }); async function query(q) { const ret = await client.query(`SELECT name FROM Criminals WHERE name ILIKE '${q}%';`); return ret; } app.set("view engine", "ejs"); app.use(express.static("public")); app.get("/src", (req, res) => { res.sendFile(path.join(__dirname, "index.js")); }); app.get("/", async (req, res) => { if (req.query...