정수의 소인수 분해 2. - 코딩수업#17

지난 시간에 이미 "소인수분해"의 기본적인 알고리즘과 코딩 방법을 모두 설명하였다.

이번 시간에는 개발 환경을 웹으로 변경하는 방법을 하나씩 설명하며, 좀 더 

코드를 간단하게 줄이는 방법과 편한 사용자 인터페이스를 만드는 방법을 이야기해 보겠다.

다시 말해서 앞선 글에서 num이라는 변수에 숫자를 미리 지정하고 그 숫자에 대한 소인수 분해를 하는 것이 아니라 화면상에서 사용자가 입력한 숫자를 기반으로 소인수 분해를 하도록 하고, 코드 상의 조건 검색 및 반복의 방법을 달리 표현해 보도록 하려는 것이다.

현재의 웹 환경에서 자료를 입력받는 화면과 입력받은 자료를 가지고 진행한 프로세스의 결과물을 한 화면에서 표현하는 것이 어려운 일은 아니다. 그렇지만 프로그램을 단순화시키기 위하여 두 가지 화면을 분리하여 설명하겠다. 이 부분에 대한 기본적인 내용은 앞선 글 웹 형식 프로그램 구현 - 코딩 수업#15에서 설명하였지만, 초보 프로그래머들을 위하여 한 단계씩 다시 한번 설명하도록 하겠다.

(다시 한번 말하지만 화면 구성은 본 강좌의 핵심도 아니고 나의 전공도 아니다. 깊은 내용은 관련 서적을 참조하기 바란다.)

1. 사용자와 프로그램 간의 데이터 주고받기

앞선 글에서 사용했던 데이터 입력 화면을 다시 한번 가지고 오겠다.

달라진 것은 더하기 실행을 위한 문구가 소인수분해로 바뀐 것뿐이다. 해당 자료를 텍스트 에디터에서 입력하고 testform.html과 같은 이름으로 저장 후  브라우저에서 실행하도록 더블 클릭하면 아래의 그림과 같이 수행된다.

소인수 분해 숫자 옆의 텍스트 박스에 필요한 숫자를 입력하고 밑의 버튼을 클릭하면 소인수 분해의 결과가 출력되는 프로그램을 만들 것이다. 그러나 아직 관련 프로그램은 입력하지 않았으므로 에러가 발생할 것이다.

위의 코드 8번 줄에 미리 입력해둔 lec17.html이라는 프로그램을 만들어 같은 폴더에 두어야 해당 프로그램이 수행될 것이다.

그에 앞서 코드를 잠깐 살펴보자. html을 전혀 이해 못하는 분들에 대한 배려이다.

HTML 코드는 웹 브라우저가 이해하는 가장 기본적인 코딩 언어이다. <xxx>로 시작한 태그는 </xxx>로 마무리된다는 기본 개념만을 가지고 하나씩 확장되었다.

본 과정은 알고리즘과 코딩을 배우는 과정이므로 우리가 필요하여 입력한 부분만 설명하자면 9번 10 줄 사이의 내용이 사용자가 숫자를 입력하기 위하여 만들어둔 핵심 요소이다.  <input> 태그 안의 type에 따라 그 부분이 텍스트 입력창 또는 실행을 위한 버튼으로 표현되는 것이다. HTML은 별도의 공부를 필요로 하지만 본 과정에서는 위에 보여준 내용 이외의 부분을 이해할 필요는 없다.

이제 lec17.html을 만들어 보자.

2. 프로그램이 호출하는 프로그램

앞선 프로그램에서 만든 코드를 보면서 새로운 코드를 만들어 보자.

num이라는 변수에 소인수 분해가 필요한 정수를 입력할 것이므로 해당 변수가 앞선 프로그램의 텍스트 박스의 내용이다.

이 값을 num에 대입하면 간단한 웹 프로그램이 끝나게 되는 것이다.

추가로 코드를 단순화하는 방법은 뒤에 이야기하도록 하겠다.

입력화면으로 다시 돌아가 보자.

9번 줄의 input 태그에 있는 number라고 하는 이름이 데이터의 이름이다.

이를 새로운 lec17.html의 num에 대입하면 된다.

lec17의 코드를 아래와 같이 꾸며본다.

제일 하단의 function 부분은 앞선 강좌에서 설명한 부분이고,  코드의 일부가 강좌 16과 달라진 부분이 있지만 대부분 앞선 코드를 가지고 왔다. 다른 부분은 줄 29와 30 부분에서 만일 현재 찾고 있는 소수가 2일 경우 3으로 증가시키고 3부터는 홀수만을 찾기 위하여 2씩 증가시키라는 명령만 다르다.

3. 프로그램의 실행

프로그램을 실행시켜보면,

위와 같은 결과를 얻을 수 있다.

421324232=(2x2x2) x (7) x (811) x (9277)이라는 뜻이다.

보기 좋게 꾸미는 부분은 여러분의 몫이다 ^^.