Node.js 및 Express로 서버 측에서 웹 양식 처리하기

오늘의 튜토리얼에서는 Node.js와 Express를 사용하여 서버에서 양식 데이터를 수신하는 방법을 보여드리겠습니다. 간단한 서버를 함께 설정하고 이 서버로 데이터를 전송하는 양식을 만드는 데 필요한 단계를 살펴볼 것입니다. 이 튜토리얼은 JavaScript와 Node.js에 대한 기본적인 이해가 있고 웹 개발 기술을 확장하고자 하는 모든 분을 대상으로 합니다.

주요 요점

• Express로 간단한 Node.js 서버를 만드는 기본 사항
• 프로젝트 디렉터리 설정 및 필수 패키지 설치하기
• 폼을 표시하고 사용하기 위한 HTML 파일 만들기
• 전송된 데이터의 서버 측 처리

단계별 지침

먼저 들어오는 양식 데이터를 처리할 서버를 설정해야 합니다. 따라서 새 Node.js 프로젝트를 만드는 것부터 시작합니다.

비주얼 스튜디오 코드와 같은 편집기를 열고 터미널을 엽니다. 또는 일반 터미널을 사용할 수도 있습니다. 컴퓨터에 Node.js가 설치되어 있는지 확인합니다.

루트 디렉토리로 이동하여 서버 앱의 새 하위 디렉터리를 만듭니다. 디렉터리 이름을 "FormServerApp"으로 지정하는 것이 좋습니다.

새로 만든 디렉토리로 변경하고 npm init 명령으로 새 Node.js 프로젝트를 초기화합니다. 프로젝트 이름, 버전 및 진입점 파일과 같은 몇 가지 정보를 입력하라는 메시지가 표시됩니다. 기본값을 그대로 사용하거나 직접 입력할 수 있습니다.

프로젝트를 생성하면 디렉터리에 package.json 파일이 표시됩니다. 이 파일에는 프로젝트의 모든 메타데이터가 포함되어 있습니다. 이제 Express를 설치해야 하므로 npm install express 명령을 실행합니다.

설치가 완료되면 package.json을 확인하여 종속성 중 Express가 나열되어 있는지 확인하세요. 계속하기 전에 설치가 성공적으로 완료되었는지 확인하세요.

이제 애플리케이션의 진입점 역할을 하는 index.js라는 새 파일을 만듭니다. 이 파일에는 Express 서버의 주요 로직이 포함됩니다.

시작하려면 index.js 파일에 console.log("FormServer"); 를 작성하고 노드 index.js로 실행하여 빠른 테스트를 실행하여 모든 것이 작동하는지 확인할 수 있습니다.

이제 index.js 파일에서 Express를 사용할 차례입니다. Express를 가져오는 데 필요한 코드를 추가하고 Express 앱을 만듭니다. 다음은 Express 애플리케이션을 초기화하고 포트에서 수신 대기하는 간단한 코드입니다.

특정 포트인 3000에서 서버를 실행해야 합니다. 브라우저에서 localhost:3000을 호출하여 애플리케이션이 올바르게 작동하는지 확인합니다. "Hello World"라는 출력이 표시되어야 합니다.

애플리케이션에서 양식을 지원하려면 이제 양식의 HTML 구조가 포함된 index.html 파일이 필요합니다. 먼저 "public"이라는 새 폴더를 만듭니다. 이 폴더에 index.html 파일을 넣습니다.

index.html 파일에 간단한 HTML 구조를 양식과 함께 삽입하면 됩니다. 이 양식은 나중에 제출된 데이터를 서버로 전송합니다.

Express 서버를 통해 정적 파일(HTML, CSS, JS)을 제공하려면 app.use() 메서드를 사용하여 "public" 폴더를 정적 디렉토리로 설정하세요. 이렇게 하면 브라우저가 localhost:3000/index.html을 호출할 때 index.html 파일을 요청할 수 있습니다.

이제 서버를 시작하고 브라우저에서 index.html을 로드하면 양식을 올바르게 표시할 수 있습니다. 그러나 양식을 작성하고 제출하면 아직 서버 측 로직을 구현하지 않았기 때문에 아무 일도 일어나지 않습니다.

다음 단계에서는 양식 데이터의 서버 측 처리에 중점을 두겠습니다. 즉, 양식에서 전송된 데이터를 수신하고 처리하는 경로를 추가해야 합니다. 웹 애플리케이션을 더욱 발전시키고 기능을 추가하는 다음 단계를 기대해 주세요!

요약

이 튜토리얼에서는 Node.js와 Express로 간단한 서버를 설정하는 방법을 배웠습니다. Node.js 프로젝트 생성, 종속성 설치, HTML 양식 시작하기의 기본을 배웠습니다. 이러한 단계는 서버 측에서 웹 양식을 처리하는 데 매우 중요합니다.