ID속성 와 NAME 속성

프론트엔드 와 백엔드

우리는 흔히 프론트 엔드라고 하면 HTML, CSS , JavaScript 로 알고 있고,

백엔드라고 하면 Controller , Service, Repository, Dto , Entity 로 알고 있다.

오늘은 놓쳐서는 안될 기본 지식인 ID 와 NAME 속성에 대해 정리하고자 한다.

프론트엔드에서 백엔드로 데이터를 전달할때 백엔드에서는 프론트엔드의 어떤 속성을 바라보고 접근하는지 헷갈려하는데,

결론부터 말하자면, name 속성을 기반으로 접근한다.

 

 

여기 아래 아주 평범한 날씨 API 를 개발하기 위한 HTML 코드가 있다.

아래는 해당 HTML 로부터 데이터를 전달 받은 백엔드-controller 이다.

 

컨트롤러에서는 주로 @RequestParam 어노테이션을 사용하여 프론트엔드로부터 값을 가져온다. 이 어노테이션은 URL 매개변수로 전달된 값을 해당 메서드의 파라미터로 받아온다. 여기서 매개변수의 이름은 URL 매개변수(@GetMapping(”/weather”)의 이름 , 즉 <input>요소의 name속성 와 일치해야한다.

 

 

즉, HTML에서 <input> 요소의 name 속성이 컨트롤러에서 값을 가져오는 데 사용됩니다.
id 속성은 CSS나 JavaScript에서 요소를 식별하는 데 사용되지만, 컨트롤러에서 값을 가져오는 데 사용되지 않습니다.