[ASP.NET] C# 백엔드와 Vue 프론트엔드 파라미터 매칭 오류 해결

웹 개발을 하다 보면 프론트엔드에서 백엔드로 데이터를 전송할 때 파라미터 매칭 때문에 고생하는 경우가 많습니다.

특히 C#과 Vue를 사용하는 환경에서는 데이터 전달 방식과 매핑 규칙을 정확히 이해하지 못하면 계속해서 같은 실수를 반복하게 됩니다.

파라미터 매칭이란 프론트엔드에서 보낸 데이터가 백엔드의 올바른 파라미터로 전달되도록 하는 과정입니다.

 

이번 포스팅에서는 Vue에서 C# API로,

그리고 C#에서 SQL로 이어지는 전체 데이터 흐름을 단계별로 분석하고,

자주 발생하는 실수들과 해결 방법을 정리해보겠습니다.

C# 파라미터 바인딩의 기본 규칙

Rule 1: 첫 번째 복합객체는 자동으로 Body에서 받음

C#에서는 메서드의 첫 번째 복합객체(DTO, 클래스 등)를 자동으로 HTTP Body에서 받아옵니다.

public class ProjectController : ApiController
{
    public List<object> SelectData(DtoModel request, string dueDateStart, string dueDateEnd)
    //                              ↑ 자동으로 Body에서 받음    ↑ 쿼리파라미터들
    {
        // request는 HTTP Body의 JSON 데이터
        // dueDateStart, dueDateEnd는 URL 쿼리파라미터
    }
}

Rule 2: 원시타입들은 자동으로 쿼리파라미터에서 받음

string, int, DateTime 등의 원시타입 파라미터들은 기본적으로 URL 쿼리파라미터에서 값을 가져옵니다.

public List<object> GetUserInfo(string name, int age, DateTime birthDate)
//                              ↑ 모두 쿼리파라미터 (?name=값&age=값&birthDate=값)

Rule 3: [FromBody] 속성으로 강제 지정 가능

[FromBody] 속성을 사용하면 원시타입도 Body에서 받을 수 있습니다.

public int InsertData([FromBody] string scheduleIdx)
//                    ↑ 문자열도 Body에서 받음

Vue에서 C#으로 데이터 전송하기

올바른 데이터 분리 방법

Vue에서 axios를 사용할 때는 Body 데이터와 쿼리파라미터를 명확히 구분해야 합니다.

// ❌ 잘못된 방법 - 모든 데이터를 Body에 포함
const wrongData = {
  project_name: "프로젝트",
  due_date_start: "2025-01-01",  // 쿼리파라미터인데 Body에 넣음
  due_date_end: "2025-01-31"     // 쿼리파라미터인데 Body에 넣음
};
axios.post("api/SelectData", wrongData);

// ✅ 올바른 방법 - Body와 쿼리파라미터 분리
const bodyData = {
  project_name: "프로젝트"  // Body에는 DTO 내용만
};

const queryParams = new URLSearchParams();
queryParams.append('dueDateStart', '2025-01-01');
queryParams.append('dueDateEnd', '2025-01-31');

axios.post(`api/SelectData?${queryParams.toString()}`, bodyData);

JSON 속성명 매칭 규칙

Vue의 JSON 속성명과 C# DTO의 JsonProperty 이름이 정확히 일치해야 합니다.

// Vue에서 보내는 데이터
const requestData = {
  project_item_idx: "7",    // snake_case 사용
  zone: "구역1",
  block_no: "블럭1"
};

// C# DTO 정의
public class DtoProjectItemSchedule
{
    [JsonProperty("project_item_idx")]  // Vue JSON과 정확히 일치
    public string ProjectItemIdx { get; set; }
    
    [JsonProperty("zone")]
    public string Zone { get; set; }
    
    [JsonProperty("block_no")]
    public string BlockNo { get; set; }
}

C#에서 SQL로 데이터 전달하기

AddProperty 파라미터명 매칭

C#에서 SQL 프로시저를 호출할 때는 AddProperty의 첫 번째 파라미터가 SQL 프로시저의 파라미터명과 일치해야 합니다.

// C# 코드
public static int InsertSchedule(DtoProjectItemSchedule dto, string userName)
{
    DataPack dataPack = new DataPack();
    dataPack.AddProperty("@project_item_idx", DbType.Int32, dto.ProjectItemIdx);
    dataPack.AddProperty("@zone", DbType.String, dto.Zone);
    dataPack.AddProperty("@user", DbType.String, userName);
    //                   ↑ SQL 파라미터명과 일치해야 함
}

-- SQL 프로시저
CREATE PROCEDURE InsertProjectSchedule
    @project_item_idx INT,     -- C#의 "@project_item_idx"와 일치
    @zone NVARCHAR(50),        -- C#의 "@zone"과 일치
    @user NVARCHAR(50)         -- C#의 "@user"와 일치
AS
BEGIN
    INSERT INTO Tb_Schedule (project_item_idx, zone, insert_user)
    VALUES (@project_item_idx, @zone, @user)
END

자주 발생하는 실수들과 해결법

실수 1: JsonProperty 누락

// ❌ 문제 상황
public class BadDto
{
    public string ProjectItemIdx { get; set; }  // JsonProperty 없음
}

// ✅ 해결 방법
public class GoodDto
{
    [JsonProperty("project_item_idx")]  // 명시적 매핑
    public string ProjectItemIdx { get; set; }
}

실수 2: 파라미터 타입 혼동

// ❌ 문제 상황 - 날짜를 Body에 포함해서 전송
public List<object> SelectData(DtoModel request)
// request 안에 날짜 파라미터들이 포함되어 있음

// ✅ 해결 방법 - 날짜는 별도 쿼리파라미터로 분리
public List<object> SelectData(DtoModel request, string dueDateStart, string dueDateEnd)
//                              ↑ Body            ↑ 쿼리파라미터들

실수 3: SQL 파라미터명 불일치

// ❌ 문제 상황
dataPack.AddProperty("@user_name", DbType.String, userName);  // 오타

// ✅ 해결 방법
dataPack.AddProperty("@user", DbType.String, userName);  // SQL과 일치

실무에서 바로 적용할 수 있는 체크리스트

API 개발 전 필수 확인사항

1. 백엔드 메서드 시그니처 확인: 어떤 파라미터가 Body이고 어떤 것이 쿼리파라미터인지 파악
2. JsonProperty 속성명 확인: Vue JSON과 C# DTO 매핑이 정확한지 검증
3. SQL 파라미터명 확인: AddProperty와 프로시저 파라미터명이 일치하는지 점검

디버깅 시 필수 로그

// Vue에서 항상 확인할 로그들
console.log("요청 파라미터:", requestParams);
console.log("응답 데이터:", response.data);
console.log("첫 번째 아이템 구조:", response.data[0]);

에러 발생 시 점검 순서

1. 브라우저 개발자 도구에서 네트워크 탭 확인
2. 요청 Body와 쿼리파라미터가 올바르게 분리되었는지 확인
3. C# 메서드에서 파라미터 바인딩이 정상적으로 이루어지는지 확인
4. SQL 실행 시 파라미터 전달이 올바른지 확인

마무리

프론트엔드와 백엔드 간의 데이터 전달은 웹 개발의 핵심이지만, 매칭 규칙을 정확히 이해하지 못하면 계속해서 같은 실수를 반복하게 됩니다.

핵심 포인트: Vue의 JSON 속성명 = C#의 JsonProperty 이름 = SQL 파라미터명(@ 제외)

이번 포스팅에서 정리한 규칙들을 숙지하고 체크리스트를 활용한다면, 파라미터 매칭으로 인한 오류를 크게 줄일 수 있을 것입니다.

---

📋 요약 정리표

구분	Vue 프론트엔드	C# 백엔드	SQL 데이터베이스
Body 데이터	axios.post(url, bodyData)	첫 번째 복합객체 자동 바인딩	-
쿼리파라미터	url?param=value	원시타입 자동 바인딩	-
속성명 규칙	snake_case (project_item_idx)	JsonProperty 이름	컬럼명과 일치
매핑 확인법	개발자도구 Network 탭	디버깅 중단점	SQL Profiler
주의사항	Body/쿼리 분리 필수	[FromBody] 명시적 사용	@ 파라미터명 정확히