# 웹 서비스/애플리케이션 개발 문제 실행해보기

이 문서에서는 웹 서비스/애플리케이션 개발 문제 만들기에서 **실행해보기**에 대한 내용만을 다룹니다. \
웹 서비스/애플리케이션 개발 문제 만들기의 기본적인 사항에 대해서는 아래 링크를 참고하시기 바랍니다.

{% content-ref url="webservice-application" %}
[webservice-application](https://help.goorm.io/ko/edu-lecturer/04.quiz/webservice-application)
{% endcontent-ref %}

### 1. 문제 해결 언어 - php

'**php(Hypertext Preprocessor)**'란 범용성을 지닌 널리 사용되는 오픈 소스 스크립트 언어입니다. \
특히 웹 개발과 HTML에 포함하기 적합한 언어입니다.

php를 문제 해결 언어로 지정했을 때, 'goorm.zip' 파일을 예시로 설명하겠습니다. \
goorm.zip 프로젝트 파일의 디렉토리와 코드 정보는 다음과 같습니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_NUljQ_1517887271816/1516177835547_php%20%E1%84%89%E1%85%A9%E1%84%89%E1%85%B3%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3.png)

'**기본 프로젝트**' 탭에서 zip파일 형태의 프로젝트 파일을 업로드 한 후 '**프로젝트 설정**' 란의 \
'**웹 서버 실행시 연결될 프로젝트 경로**'를 작성해야 합니다. \
goorm.zip 파일을 기본 프로젝트로 업로드 했을 때 goorm 폴더의 example.php 파일을 실행하고 싶다면 프로젝트 경로를 **`/goorm/example.php`**로 작성하시면 됩니다.  

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_NUljQ_1517887271816/1516178178118_%E1%84%86%E1%85%AE%E1%86%AB%E1%84%8C%E1%85%A6%20%E1%84%92%E1%85%A2%E1%84%80%E1%85%A7%E1%86%AF%20%E1%84%8B%E1%85%A5%E1%86%AB%E1%84%8B%E1%85%A5-php.png)

php의 경우에는 apache2 서버를 리눅스 서비스로 사용하기 때문에 \
따로 실행 스크립트를 작성할 필요가 없습니다. 

'**웹 서버 확인 및 실행 설정**' 탭의 웹 서버 확인 포트를 '**80**'으로 설정하고 \
하단의 **`▶실행해보기`** 버튼을 누르면 다음과 같이 웹 서버가 실행됨을 확인하실 수 있습니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_NUljQ_1517887271816/1516178237095_php%20%E1%84%89%E1%85%B5%E1%86%AF%E1%84%92%E1%85%A2%E1%86%BC%E1%84%92%E1%85%A2%E1%84%87%E1%85%A9%E1%84%80%E1%85%B51.png)

###

### 2. 문제 해결 언어 - Node.js

'**Node.js**'란 구글 크롬의 자바스크립트 엔진 (V8 Engine) 위에서 동작하는 \
이벤트 처리 I/O 프레임워크입니다. 

웹 서버와 같이 확장성 있는 네트워크 프로그램 제작을 위해 고안된 서버 사이드 플랫폼입니다.

Node.js를 문제 해결 언어로 지정 했을 때, 'goorm.zip' 파일을 예시로 설명하겠습니다. \
goorm.zip 프로젝트 파일의 디렉토리와 코드 정보는 다음과 같습니다. \
Node.js 코드 작성 시 외부접속이 허용되도록 hostname을 '**0.0.0.0**'으로 설정해야 합니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_NUljQ_1517887271816/1516331757221_node.js%20%E1%84%89%E1%85%A9%E1%84%89%E1%85%B3%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3.png)

'**기본 프로젝트**' 탭에서 zip파일 형태의 프로젝트 파일을 업로드 한 후 '**웹 서버 확인 및 실행 설정**' 탭에서 \
'**웹 서버 확인 포트**'와 하단 부분의 **`#!/bin/bash`**로 시작하는 bash 쉘 스크립트 입력란에 \
'**서버 실행 스크립트**'를 작성해야 합니다.

goorm.zip 파일을 기본 프로젝트로 업로드 했을 때 goorm 폴더의 app.js 파일을 실행하고 싶다면(goorm/app.js) 다음과 같이 서버 실행 스크립트에서 cd 명령어로 해당 파일이 있는 디렉토리로 \
이동한 후 실행 명령어를 작성하시면 됩니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_NUljQ_1517887271816/1516331806535_node.js%20%E1%84%86%E1%85%AE%E1%86%AB%E1%84%8C%E1%85%A6%20%E1%84%92%E1%85%A2%E1%84%80%E1%85%A7%E1%86%AF%20%E1%84%8B%E1%85%A5%E1%86%AB%E1%84%8B%E1%85%A5.png)

'**웹 서버 확인 및 실행 설정**' 탭에서 **코드에 작성된 포트 번호**와 **웹 서버 확인 포트 번호**를 반드시 동일하게 \
작성하셔야 합니다. 예를 들어 코드에 작성된 포트 번호가 3000이라면 웹 서버 확인 포트도 3000으로 \
작성해야 합니다. **goorm/app.js** 의 app.js를 실행할 때 서버 실행 스크립트 작성 예시는 다음과 같습니다.

```bash
cd goorm
```

cd 명령어로 실행하고자 하는 js 파일이 있는 디렉토리로 이동합니다

```bash
node app.js
```

js 파일을 실행하는 명령어를 작성합니다.

```
#!/bin/bash
cd goorm
node app.js
```

하단의 **`▶실행해보기`**버튼을 누르면 다음과 같이 웹 서버가 실행 됨을 확인하실 수 있습니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_NUljQ_1517887271816/1516180095695_nodejs%20%E1%84%89%E1%85%B5%E1%86%AF%E1%84%92%E1%85%A2%E1%86%BC%E1%84%92%E1%85%A2%E1%84%87%E1%85%A9%E1%84%80%E1%85%B5.png)

###

###

### 3. 문제 해결 언어 - Django

'**Django**'란 파이썬으로 작성된 오픈 소스 웹 애플리케이션 프레임 워크입니다.  \
Django 프레임 워크는 웹 개발에서 번거로운 요소들을 새로 개발할 필요 없이 \
내장된 기능만을 이용해 빠른 개발을 할 수 있다는 장점이 있습니다.

Django를 문제 해결 언어로 지정 했을 때, 'goorm.zip' 파일을 예시로 설명하겠습니다. \
goorm.zip 프로젝트 파일의 디렉토리와 코드 정보는 다음과 같습니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_NUljQ_1517887271816/1516331906419_Django%20%E1%84%89%E1%85%A9%E1%84%89%E1%85%B3%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3.png)

'**기본 프로젝트**' 탭에서 zip파일 형태의 프로젝트 파일을 업로드 한 후 '**웹 서버 확인 및 실행 설정**' 탭에서 \
'**웹 서버 확인 포트**'와 하단 부분의 **`#!/bin/bash`**로 시작하는 bash 쉘 스크립트 입력란에 \
'**서버 실행 스크립트**'를 작성해야 합니다.

goorm.zip 파일을 기본 프로젝트로 업로드 했을 때 goorm 폴더의 Django 프로젝트를 실행하고 싶다면 \
다음과 같이 서버 실행 스크립트에서 cd 명령어로 Django 프로젝트가 있는 디렉토리로 이동한 후 \
실행 명령어를 작성하시면 됩니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_NUljQ_1517887271816/1516331964086_Django%20%E1%84%86%E1%85%AE%E1%86%AB%E1%84%8C%E1%85%A6%20%E1%84%92%E1%85%A2%E1%84%80%E1%85%A7%E1%86%AF%20%E1%84%8B%E1%85%A5%E1%86%AB%E1%84%8B%E1%85%A5.png)

'**웹 서버 확인 및 실행 설정**' 탭에서 **웹 서버 확인 포트 번호**와 **실행 스크립트에서 작성한 포트 번호**를 \
반드시 동일하게 작성하셔야 합니다. 예를 들어 웹 서버 확인 포트 번호를 8000으로 설정했다면 \
실행 스크립트에서의 포트 번호 또한 8000으로 작성해야 합니다. 

**goorm/manage.py** 의 manage.py 파일을 통해 웹 서버를 실행할 때 서버 실행 스크립트 작성 예시는 \
다음과 같습니다.

```bash
cd goorm
```

cd 명령어로 Django 프로젝트가 있는 디렉토리로 이동합니다.

```bash
python manage.py runserver 0:8000
```

웹 서버를 실행하는 명령어를 작성합니다. 웹 서버에 대한 외부접속이 허용되도록 포트 번호를 \
**0:(포트 번호)**의 형태로 작성해야 합니다. 포트 번호는 웹 서버 확인 포트 번호와 일치해야 합니다.

```
#!/bin/bash
cd goorm
python manage.py runserver 0:8000
```

하단의 **`▶실행해보기`**버튼을 누르면 다음과 같이 웹 서버가 실행 됨을 확인하실 수 있습니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_NUljQ_1517887271816/1516182168912_Django%20%E1%84%89%E1%85%B5%E1%86%AF%E1%84%92%E1%85%A2%E1%86%BC%E1%84%92%E1%85%A2%E1%84%87%E1%85%A9%E1%84%80%E1%85%B5.png)

###

###

### 4. 문제 해결 언어 - Flask

'**Flask**'란 파이썬 웹 애플리케이션을 만드는 프레임 워크입니다. \
Flask는 Django에 비해 가벼우면서도 단순하고 빠르게 웹을 만들 수 있다는 장점이 있습니다.

Flask를 문제 해결 언어로 지정 했을 때, 'goorm.zip' 파일을 예시로 설명하겠습니다. \
goorm.zip 프로젝트 파일의 디렉토리와 코드 정보는 다음과 같습니다. \
코드 작성 시 외부접속이 허용되도록 run() 메소드에서 호스트를 '**0.0.0.0**'으로 설정해야 합니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_NUljQ_1517887271816/1516183887062_Flask%20%E1%84%89%E1%85%A9%E1%84%89%E1%85%B3%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3.png)

'**기본 프로젝트**' 탭에서 zip파일 형태의 프로젝트 파일을 업로드 한 후 '**웹 서버 확인 및 실행 설정**' 탭에서 \
'**웹 서버 확인 포트**'와 하단 부분의 **#!/bin/bash**로 시작하는 bash 쉘 스크립트 입력란에 \
'**서버 실행 스크립트**'를 작성해야 합니다.

goorm.zip 파일을 기본 프로젝트로 업로드 했을 때 goorm/myproject 폴더의 hello.py 파일을 실행하고 \
싶다면(goorm/myproject/hello.py) 다음과 같이 서버 실행 스크립트에서 cd 명령어로 해당 파일이 있는 디렉토리로 이동한 후 실행 명령어를 작성하시면 됩니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_NUljQ_1517887271816/1516345790314_Flask%20%E1%84%86%E1%85%AE%E1%86%AB%E1%84%8C%E1%85%A6%20%E1%84%92%E1%85%A2%E1%84%80%E1%85%A7%E1%86%AF%20%E1%84%8B%E1%85%A5%E1%86%AB%E1%84%8B%E1%85%A5.png)

'**웹 서버 확인 및 실행 설정**' 탭에서 **코드에 작성한 포트 번호**와 **웹 서버 확인 포트 번호**를 반드시 동일하게 \
작성하셔야 합니다. 예를 들어 코드에 작성된 포트 번호가 5000이라면 웹 서버 확인 포트 번호 또한 \
5000으로 작성해야 합니다. 

**goorm/myproject** 의 hello.py 파일을 통해 Flask 웹 서버를 실행할 때 \
서버 실행 스크립트 작성 예시는 다음과 같습니다.

```bash
cd goorm/project
```

cd 명령어로 실행하고자 하는 py파일이 있는 디렉토리로 이동합니다.

```bash
python hello.py
```

py 파일을 실행하는 명령어를 작성합니다.

```
#!/bin/bash
cd goorm/project
python hello.py
```

하단의 '**실행해보기**' 버튼을 누르면 다음과 같이 웹 서버가 실행 됨을 확인하실 수 있습니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_NUljQ_1517887271816/1516242520951_Flask%20%E1%84%89%E1%85%B5%E1%86%AF%E1%84%92%E1%85%A2%E1%86%BC%E1%84%92%E1%85%A2%E1%84%87%E1%85%A9%E1%84%80%E1%85%B5.png)

###

###

### 5. 문제 해결 언어 - Ruby on Rails

'**Ruby on Rails**'란 루비 프로그램 언어에서 동작하는 웹 어플리케이션 프레임 워크입니다. \
Ruby on Rails는 모든 개발자가 개발을 시작할 때 필요한 초기 준비나 가정들을 쉽게 만들수 있는 \
도구를 제공하여, 웹 어플리케이션 프로그래밍을 더 쉽게 만들수 있도록 설계 되어 있습니다.

Ruby on Rails를 문제 해결 언어로 지정 했을 때, 'goorm.zip' 파일을 예시로 설명하겠습니다. \
goorm.zip 프로젝트 파일의 디렉토리 정보는 다음과 같습니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_NUljQ_1517887271816/1516332307207_Ruby%20on%20Rails%20%E1%84%89%E1%85%A9%E1%84%89%E1%85%B3%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3.png)

'**기본 프로젝트**' 탭에서 zip파일 형태의 프로젝트 파일을 업로드 한 후 '**웹 서버 확인 및 실행 설정**' 탭에서 \
'**웹 서버 확인 포트**'와 하단 부분의 **`#!/bin/bash`**로 시작하는 bash 쉘 스크립트 입력란에 \
'**서버 실행 스크립트**'를 작성해야 합니다.

goorm.zip 파일을 기본 프로젝트로 업로드 했을 때 Ruby on Rails 애플리케이션이 있는 \
goorm/blog 폴더로 이동해야 합니다. 

서버 실행 스크립트에서 cd 명령어로 해당 파일이 있는 디렉토리로 이동한 후 \
실행 명령어를 작성하시면 됩니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_NUljQ_1517887271816/1516346326591_Ruby%20on%20Rails%20%E1%84%86%E1%85%AE%E1%86%AB%E1%84%8C%E1%85%A6%20%E1%84%92%E1%85%A2%E1%84%80%E1%85%A7%E1%86%AF%20%E1%84%8B%E1%85%A5%E1%86%AB%E1%84%8B%E1%85%A5.png)

'**웹 서버 확인 및 실행 설정**' 탭에서 **웹 서버 확인 포트 번호**와 **실행 스크립트에서 작성한 포트 번호**를 반드시 동일하게 작성해야 합니다. 예를 들어 웹 서버 확인 포트 번호를 3000으로 설정했다면 실행 스크립트에서의 포트 번호 또한 3000으로 작성해야 합니다.

**goorm/blog** 폴더의 Ruby on Rails 애플리케이션에서 웹 서버를 실행할 때 서버 실행 스크립트 작성 예시는 다음과 같습니다.

```bash
cd goorm/blog
```

가장 먼저 **cd** 명령어로 Ruby on Rails 애플리케이션이 있는 디렉토리로 이동합니다.

```bash
bundle install
```

Ruby on Rails 웹서버 실행 시 필요한 gem 설치를 위해 작성합니다.

```bash
rails server -b 0.0.0.0 -p 3000
```

웹 서버를 실행하는 명령어를 작성합니다. 웹 서버에 대한 외부 접속이 허용되도록 -b 옵션에서 host를 '**0.0.0.0**' 으로 지정하고 -p 옵션으로 서버가 동작할 포트 번호를 지정합니다. 포트 번호는 웹 서버 확인 포트 번호와 일치해야 합니다.

```bash
#!/bin/bash
cd goorm/blog
bundle install
rails server -b 0.0.0.0 -p 3000
```

하단의 '실행해보기' 버튼을 누르면 다음과 같이 웹 서버가 실행 됨을 확인하실 수 있습니다.

![](https://2181851870-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lq-Q9LciN1X9EABxGkt%2F-Lrs_jQowN9KbMCs9VsG%2F-LrsaeQM9u2KeY8tihar%2Fimage.png?alt=media\&token=9fb6677c-c9f5-4cde-9c35-af5752ce8a42)