> For the complete documentation index, see [llms.txt](https://help.goorm.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.goorm.io/ko/edu-student/quiz-type/web-service-application-develop.md).

# 웹 서비스/애플리케이션 개발 문제 유형

{% hint style="info" %}
**웹 서비스/애플리케이션 개발 문제**는 채점모드, 제출모드, 실행모드를 지원합니다.
{% endhint %}

**학습진행 장에서 실습화면 인터페이스를 확인하지 않으셨다면 아래 링크를 먼저 확인하시기를 권장합니다.**

{% content-ref url="/pages/-LrsePuO5JmOGn3Q0FMA" %}
[실습화면 인터페이스](/ko/edu-student/learing-process/interface-practice.md)
{% endcontent-ref %}

###

### &#x20;웹 서비스 / 애플리케이션 개발 문제

구름 EDU에서는 웹 서비스의 서버 사이드 프로그래밍을 할 수 있도록\
웹 서비스/애플리케이션 개발 문제 유형을 제공합니다.&#x20;

![](/files/-MLHdOMiqZ5k6cdeHyTR)

이 문제 유형에서는 수강자는 강의자가 업로드한 웹 프로젝트의 파일 중 \
지정된 일부 파일을 수정 및 열람을 할 수 있습니다.&#x20;

수정 및 열람 가능한 파일들의 소스코드를 자유롭게 수정하여 답안을 작성하면 되며, \
중간에 결과를 확인하기 위해 작성한 소스코드를 기반으로 웹 서버를 실행 해 볼 수도 있습니다.

우측 상단의 **`실행`** 버튼을 누르면 지금까지 작성한 소스 코드를 기반으로 웹 서버가 실행되고, \
해당 웹 서버에 접속해 볼 수 있는 페이지 링크가 '**실행 결과\`** 창 오른쪽에 나타납니다.&#x20;

생성된 링크를 클릭하면 작성&실행한 웹 서버에 접속할 수 있습니다. \
웹 서버가 실행되면, '**실행 결과**' 창에 웹 서버 로그를 볼 수 있고, 키 입력은 불가능합니다.&#x20;

소스코드를 변경한 뒤 웹 서버에 적용하려면 다시 웹 실행 버튼을 클릭하여 \
새로 작성한 소스 코드를 적용한 후 서버를 다시 시작 합니다.

![](https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_ZPzjP_1469021373326/1469151366074_image.png)

현재 구름EDU 웹 서비스/애플리케이션 문제에서 지원하는 백엔드 언어 및 프레임워크는 5가지 입니다.<br>

* **PHP (Apache2 Server)**
* **Node.js**
* **Django (Python Framework)**
* **Flask (Python Framework)**
* **Ruby on Rails (Ruby Framework)**

강의자가 설정한 언어를 확인하고 해당 언어로 프로그래밍 하시면 됩니다.

웹 서비스/애플리케이션 개발 문제도 일반 프로그래밍 문제 유형과 같이, \
**채점모드에서 답안을 제출하면,** 테스트 케이스를 통해 채점을 하게 되며, \
테스트 케이스 별 정답/오답 결과가 나타납니다.&#x20;

테스트 케이스마다 배정된 배점이 있으며 통과한 테스트 케이스의 \
배점의 합 만큼의 점수를 얻게 됩니다.&#x20;

**제출모드일 경우** 여타 다른 실습형 문제유형과 같이 소스코드를 제출하게 되며, \
채점자가 직접 확인하게 됩니다.

웹 서비스/애플리케이션 개발 문제의 채점은 UI 테스트 툴을 이용하여 진행됩니다. \
출제자가 지정한 테스트 시나리오대로 정상적으로 이루어지면 정답, 그렇지 않으면 오답입니다.

다음은 출제자가 작성하는 테스트 시나리오의 예시입니다.

1. 서버 url로 접속한다
2. body 태그가 존재할 때 까지 최대 5초 기다린다. \
   `- 5초 안에 body 태그가 존재하지 않으면 실패`
3. 2초 기다린다
4. id가 input인 태그가 보일 때까지 최대 5초 기다린다 `- 5초 안에 id가 input 태그가 보이지 않으면 실패`
5. id가 input인 태그에 'goorm'이라고 입력한다.\
   `- id가 input인 태그가 존재하지 않으면 에러`
6. class가 button인 태그가 보일 때까지 최대 5초 기다린다.`- 5초 안에 class가 button인 태그가 보이지 않으면 실패`
7. id가 button인 태그를 클릭한다.\
   `- id가 button인 태그가 존재하지 않으면 에러`
8. id가 output인 태그가 보일 때까지 5초 기다린다 `- 5초 안애 id가 output인 태그가 보이지 않으면 실패`
9. id가 output인 태그에 'login success'라는 글자가 포함되어있는지 확인한다. `- id가 output인 태그가 'login success'라는 글자를 포함하지 않으면 실패`<br>

출제자가 작성한 시나리오는 위와 같은 형태일 것 입니다. \
테스트에서 한 개 이상의 에러나 실패가 나타나면 해당 테스트는 오답처리가 되게 됩니다. &#x20;

**테스트 시나리오에서 DOM을 구분하는 방식은 id나 class값, 태그 이름 등이므로,** \
**문제의 요구 사항을 확실하게 파악하고 코드를 작성해야 알맞 채점 결과를 얻을 수 있습니다.**
