파라미터(매개변수, Parameter)란?
파라미터는 메서드(함수)나 생성자에 값을 전달하기 위해 사용되는 변수입니다. 호출하는 쪽에서 전달하는 값을 인자(Argument)라고 부르며, 이 인자를 받아서 활용하는 변수를 파라미터(Parameter)라고 합니다.
1. 파라미터의 기본 개념
- 정의 위치: 메서드의 소괄호( ) 내부에 선언됨.
- 역할: 메서드 실행에 필요한 데이터를 외부에서 전달받음.
- 종류:
- 값(Value) 전달 방식: 기본 타입(primitive type) 데이터를 복사하여 전달.
- 참조(Reference) 전달 방식: 객체 타입(참조형 데이터) 값을 전달하며, 원본 데이터에 영향을 줄 수 있음.
2. 자바에서 파라미터 사용 예제
public class ParameterExample {
// 정수형 파라미터를 받는 메서드
public static void printNumber(int number) {
System.out.println("입력된 숫자: " + number);
}
// 두 개의 파라미터를 받는 메서드
public static void addNumbers(int a, int b) {
int sum = a + b;
System.out.println("두 숫자의 합: " + sum);
}
public static void main(String[] args) {
printNumber(10); // 출력: 입력된 숫자: 10
addNumbers(5, 7); // 출력: 두 숫자의 합: 12
}
}printNumber(10);→number파라미터에10이 전달됨.addNumbers(5, 7);→a에5,b에7이 전달되어sum이 계산됨.
3. 파라미터의 유형
| 유형 | 설명 | 예제 |
|---|---|---|
| 기본형(Primitive Type) | 값을 복사하여 전달 (int, double, boolean 등) | void method(int x) { } |
| 참조형(Reference Type) | 객체의 주소값을 전달 (배열, 클래스, 컬렉션 등) | void method(String str) { } |
| 가변 길이 파라미터(Varargs) | 파라미터 개수를 가변적으로 설정 가능 | void method(int... nums) { } |
| 객체(Object) 파라미터 | 객체를 인자로 전달하여 내부 속성 변경 가능 | void method(Person p) { } |
| 배열(Array) 파라미터 | 배열을 전달하여 여러 개의 값을 한 번에 처리 | void method(int[] arr) { } |
4. 값 전달(Call by Value) vs. 참조 전달(Call by Reference)
- 기본형 데이터(Primitive Type) 전달 → 값이 복사됨 → 원본 값 변화 없음.
- 참조형 데이터(Reference Type) 전달 → 객체의 주소가 전달됨 → 원본 값 변화 가능.
(1) Call by Value 예제 (기본형)
public class CallByValueExample {
public static void changeValue(int num) {
num = 100;
System.out.println("메서드 내부 값: " + num);
}
public static void main(String[] args) {
int value = 50;
changeValue(value);
System.out.println("메서드 호출 후 값: " + value);
}
}출력 결과
메서드 내부 값: 100
메서드 호출 후 값: 50 // 원본 값 변화 없음📌 value는 num에 복사되어 전달되었으므로 원본 값이 변경되지 않음.
(2) Call by Reference 예제 (참조형)
class Person {
String name;
Person(String name) {
this.name = name;
}
}
public class CallByReferenceExample {
public static void changeName(Person p) {
p.name = "Changed Name";
}
public static void main(String[] args) {
Person person = new Person("Original Name");
changeName(person);
System.out.println("메서드 호출 후 이름: " + person.name);
}
}출력 결과
메서드 호출 후 이름: Changed Name // 원본 값이 변경됨📌 person 객체의 참조값이 전달되었으므로, 메서드 내부에서 변경한 값이 원본에 반영됨.
5. 가변 길이 파라미터 (Varargs)
...문법을 사용하면, 개수에 상관없이 여러 개의 값을 받을 수 있음.- 배열과 유사하지만, 호출 시 개수를 유연하게 조절 가능.
public class VarargsExample {
public static void printNumbers(int... numbers) {
for (int num : numbers) {
System.out.println("숫자: " + num);
}
}
public static void main(String[] args) {
printNumbers(1, 2, 3, 4, 5); // 여러 개의 숫자 전달 가능
}
}출력 결과
숫자: 1
숫자: 2
숫자: 3
숫자: 4
숫자: 5📌 printNumbers(1, 2, 3, 4, 5);처럼 여러 개의 인자를 넣어도 잘 동작함.
6. 메서드 오버로딩(Overloading)과 파라미터
- 같은 이름의 메서드를 다른 파라미터 리스트로 여러 개 정의할 수 있음.
- 파라미터의 개수, 타입이 다르면 메서드 오버로딩이 가능함.
public class OverloadingExample {
public static void greet() {
System.out.println("안녕하세요!");
}
public static void greet(String name) {
System.out.println("안녕하세요, " + name + "님!");
}
public static void greet(String name, int age) {
System.out.println(name + "님, 나이가 " + age + "살이군요!");
}
public static void main(String[] args) {
greet();
greet("철수");
greet("영희", 25);
}
}출력 결과
안녕하세요!
안녕하세요, 철수님!
영희님, 나이가 25살이군요!📌 메서드 이름이 같아도 파라미터 구성이 다르면 서로 다른 메서드로 인식됨.
7. 생성자(Constructor)와 파라미터
생성자는 객체를 생성할 때 호출되며, 파라미터를 받아 초기화 가능함.
class Car { String model; Car(String model) { // 생성자에서 파라미터 사용 this.model = model; } }
public class ConstructorExample {
public static void main(String[] args) {
Car myCar = new Car("Tesla Model S");
System.out.println("내 차의 모델: " + myCar.model);
}
}
**출력 결과**내 차의 모델: Tesla Model S
📌 `Car` 생성자는 `"Tesla Model S"`을 받아 `model` 필드를 초기화함.
---
### **8. 주요 정리**
✅ 파라미터는 메서드가 실행될 때 외부 값을 받아 처리하는 변수이다.
✅ 기본형은 Call by Value(값 복사), 참조형은 Call by Reference(주소 전달).
✅ 가변 길이 파라미터(`...`)를 사용하면 개수에 관계없이 값을 받을 수 있다.
✅ 메서드 오버로딩은 파라미터의 개수와 타입이 다르면 가능하다.
✅ 생성자도 파라미터를 받아 객체 초기화에 사용된다.
이제 파라미터를 활용하는 연습을 하면 실력이 확실히 늘어날 거야! 🚀
### **📌 프론트엔드에서 파라미터의 데이터 구조는?**
프론트엔드에서 사용되는 **파라미터(Parameter)**는 대부분 **키-값(Key-Value) 형태** 또는 **JSON(JavaScript Object Notation) 구조**를 가짐.
하지만 **상황에 따라 배열, 객체, 문자열 등의 다양한 형태로 전달될 수도 있음**.
---
## **1️⃣ 키-값 (Key-Value) 형태의 파라미터**
- 가장 기본적인 형태로, **이름(Key)과 값(Value)이 한 쌍으로 구성됨.**
- **URL 파라미터(Query Params), API 요청, 컴포넌트 Props, 이벤트 객체 등에서 사용됨.**
### ✅ **예제 1: URL 쿼리 파라미터 (Query Params)**
```javascript
const url = new URL("https://example.com?name=John&age=30");
console.log(url.searchParams.get("name")); // "John"
console.log(url.searchParams.get("age")); // "30"📌 ?name=John&age=30
✔ name과 age가 키, John과 30이 값
✔ searchParams.get("key")로 값을 가져올 수 있음.
✅ 예제 2: API 요청에서의 키-값 파라미터
fetch("https://api.example.com/users?limit=10&page=2")
.then(response => response.json())
.then(data => console.log(data));📌 ?limit=10&page=2 → API 요청에서 키-값 형태의 파라미터 사용.
✅ 예제 3: 컴포넌트 Props (React)
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
<Greeting name="Alice" />📌 name="Alice" →
✔ name이 키, "Alice"가 값
✔ React의 Props도 키-값 구조를 가짐.
2️⃣ JSON(JavaScript Object Notation) 구조
- API 요청(Request Body), 객체 파라미터, 이벤트 데이터 등에서 JSON 형태가 많이 사용됨.
- JSON은 기본적으로 키-값 형태의 확장된 구조.
✅ 예제 1: API 요청에서 JSON 사용 (POST 요청)
fetch("https://api.example.com/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
username: "admin",
password: "1234"
})
});📌 body에 JSON 데이터를 전달
✔ username과 password가 키, "admin"과 "1234"가 값
✔ JSON은 키-값을 포함하는 중첩 구조도 가능함.
✅ 예제 2: 객체 파라미터 사용
function displayUser(user) {
console.log(`이름: ${user.name}, 나이: ${user.age}`);
}
const userInfo = { name: "Alice", age: 25 };
displayUser(userInfo);📌 객체(userInfo)를 파라미터로 전달
✔ { name: "Alice", age: 25 } → JSON과 유사한 구조
✔ 객체를 통해 다양한 데이터를 한 번에 전달 가능.
✅ 예제 3: 이벤트 객체 (Event Parameter)
document.querySelector("button").addEventListener("click", function(event) {
console.log(event.clientX, event.clientY);
});📌 event 객체 내부에 여러 키-값이 포함되어 있음.
✔ event.clientX와 event.clientY → 클릭된 좌표값을 제공.
3️⃣ 파라미터는 항상 키-값, JSON 구조인가?
아니야! 문자열, 배열, 특정 값만 단독으로 전달할 수도 있어.
✅ (1) 단일 값 (Primitive Type)
function greet(name) { // 단일 값만 받음
console.log("Hello, " + name);
}
greet("Alice");📌 "Alice"는 키 없이 단독 값(Primitive Value)으로 전달됨.
✅ (2) 배열 형태의 파라미터
function sumNumbers(numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sumNumbers([1, 2, 3, 4])); // 10📌 [1, 2, 3, 4]처럼 배열을 파라미터로 전달 가능.
✅ (3) REST API의 가변 파라미터 (REST Parameter)
function sum(...nums) {
return nums.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15📌 ...nums는 여러 개의 값을 받을 수 있도록 함.
📝 정리: 프론트엔드에서 파라미터의 데이터 구조
| 파라미터 형태 | 설명 | 예제 |
|---|---|---|
| 키-값 구조 (Key-Value) | URL 파라미터, API 요청, 컴포넌트 Props에서 사용됨 | ?name=John&age=30 |
| JSON (JavaScript Object Notation) | API 요청, 객체 파라미터, 이벤트 객체 등에서 사용됨 | { "username": "admin", "password": "1234" } |
| 단일 값 (Primitive Value) | 함수 호출 시 단독 값으로 전달 | greet("Alice") |
| 배열 형태 (Array) | 여러 값을 한 번에 전달할 때 사용 | [1, 2, 3, 4] |
| 가변 파라미터 (Rest Parameter) | 여러 개의 값을 받을 수 있도록 설정 | function sum(...nums) { } |
📌 결론
✅ 프론트엔드에서 파라미터는 기본적으로 "키-값" 또는 "JSON" 구조가 많음.
✅ 하지만 경우에 따라 문자열, 숫자, 배열, 객체, 가변 파라미터(Rest Parameter) 등도 사용 가능.
✅ 어떤 방식이든 데이터를 함수, API, URL 등에 전달하는 모든 요소가 "파라미터"라고 볼 수 있음! 🚀
프론트엔드에서 초급 개발자라면, 지금까지 배운 키-값(Key-Value) 구조, JSON, 배열, 객체, 가변(Rest) 파라미터를 이해하는 것이 충분한 기초야.
하지만, 더 발전하기 위해 추가적으로 알아두면 좋은 파라미터 구조가 있어.
1️⃣ FormData 객체 (파일 업로드 & 폼 데이터 전송)
- HTML 폼 데이터를 전송할 때 사용됨.
- 특히 파일 업로드 시
multipart/form-data형식으로 서버에 전달.
✅ 예제: 파일 & 입력 값 전송
const formData = new FormData();
formData.append("username", "Alice");
formData.append("profileImage", fileInput.files[0]); // 파일 업로드
fetch("https://api.example.com/upload", {
method: "POST",
body: formData
});📌 formData.append("key", value); 형태로 데이터를 추가함.
📌 파일 업로드, 이미지 전송, HTML <form> 데이터 처리에 필수.
2️⃣ URL 해시(Hash) 파라미터
- URL의
#뒤에 붙는 값으로, 클라이언트 측에서만 활용 가능하며 서버로 전달되지 않음. - 페이지 내 이동, SPA(Single Page Application)에서 상태 유지 등에 사용됨.
✅ 예제: URL 해시 사용
window.location.hash = "#section2"; // URL이 https://example.com#section2 로 변경📌 https://example.com#section2 → 브라우저는 #section2 부분을 활용할 수 있음.
✔ 단점: 서버에는 전달되지 않으므로 백엔드에서 인식할 수 없음.
3️⃣ Headers (API 요청 헤더)
- HTTP 요청 시, 헤더(Headers)도 파라미터처럼 데이터를 전달하는 역할을 함.
- 토큰 인증, JSON 데이터 명시, CORS 정책 등에 사용됨.
✅ 예제: API 요청 헤더 설정
fetch("https://api.example.com/data", {
method: "GET",
headers: {
"Authorization": "Bearer token_123456",
"Content-Type": "application/json"
}
});📌 headers에 인증 정보(Authorization) 또는 데이터 타입(Content-Type) 지정.
📌 보통 JWT 토큰 인증, 보안 요청 등에 필수.
4️⃣ GraphQL 쿼리 파라미터
- REST API와 달리 GraphQL에서는 요청 데이터를 JSON 형태로 전달함.
- 클라이언트가 원하는 데이터만 요청할 수 있음.
✅ 예제: GraphQL 요청에서의 파라미터
fetch("https://api.example.com/graphql", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
query: `
query getUser($id: ID!) {
user(id: $id) {
name
email
}
}
`,
variables: { id: "123" }
})
});📌 쿼리(Query)와 변수(Variables) 형태로 데이터를 전달함.
📌 REST API와는 다르게, 불필요한 데이터 요청을 줄일 수 있음.
5️⃣ WebSocket 메시지 파라미터 (실시간 데이터)
- 실시간 채팅, 알림(Notification), 주식 데이터 등에서 사용됨.
- REST API와 다르게, 연결을 유지하면서 지속적으로 데이터를 주고받음.
✅ 예제: WebSocket에서 JSON 파라미터 전송
const socket = new WebSocket("wss://example.com/socket");
socket.onopen = function() {
socket.send(JSON.stringify({ type: "join", user: "Alice" }));
};📌 send()를 사용해 JSON 데이터를 파라미터처럼 전송.
📌 웹소켓에서는 메시지 자체가 "파라미터" 역할을 함.
6️⃣ 쿠키(Cookie) & 로컬스토리지(LocalStorage)
- 사용자 로그인 정보, 설정 값, 토큰 등을 저장하는 방법.
- 클라이언트 측에서 저장되지만, 필요 시 서버에도 전달 가능.
✅ (1) 쿠키에 저장된 값 사용
document.cookie = "username=Alice; path=/";
console.log(document.cookie); // "username=Alice"📌 document.cookie에 키-값 형태로 데이터 저장.
📌 쿠키 값은 서버로 자동 전송 가능(보안 이슈 있음).
✅ (2) LocalStorage를 사용한 데이터 저장
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme")); // "dark"📌 localStorage는 브라우저에서만 유지되는 데이터 저장소.
📌 API 요청 시, 토큰 등을 저장하고 사용할 수도 있음.
📝 정리: 프론트엔드에서 추가로 알아두면 좋은 파라미터 구조
| 파라미터 종류 | 설명 | 예제 |
|---|---|---|
| FormData | 파일 업로드 및 폼 데이터 전송 | formData.append("key", value); |
| URL 해시(Hash) | # 뒤에 오는 값, 클라이언트 측에서만 사용 가능 |
window.location.hash = "#section1" |
| Headers (API 요청 헤더) | 인증 정보, 데이터 형식 등 지정 | headers: { "Authorization": "Bearer token" } |
| GraphQL 파라미터 | REST와 달리 JSON 형태로 데이터 요청 | query getUser($id: ID!) { user(id: $id) { name } } |
| WebSocket 메시지 파라미터 | 실시간 데이터 통신에서 JSON 사용 | socket.send(JSON.stringify({ type: "message" })); |
| 쿠키(Cookie) & 로컬스토리지(LocalStorage) | 브라우저에 사용자 데이터 저장 | document.cookie = "username=Alice" |
📌 결론: 초급 개발자가 추가로 알아두면 좋은 파라미터 개념
✅ FormData → 파일 업로드 & 폼 데이터 처리할 때 사용.
✅ URL 해시 → 페이지 이동, SPA 상태 유지에 사용.
✅ API 요청 헤더(Headers) → 인증 토큰 & JSON 데이터 전송할 때 필요.
✅ GraphQL 파라미터 → REST API보다 효율적으로 데이터 요청 가능.
✅ WebSocket 메시지 → 실시간 통신(채팅, 알림)에서 파라미터로 활용.
✅ 쿠키 & 로컬스토리지 → 로그인 상태, 사용자 설정을 저장하는 데 사용.
이제 프론트엔드에서 다양한 방식으로 데이터를 전달하는 방법을 더 잘 이해할 수 있을 거야! 🚀
'웹 개발' 카테고리의 다른 글
| JSP 스코프 (0) | 2025.02.09 |
|---|---|
| HTTP (0) | 2025.02.09 |
| HTML 구조이해1 - DOM(Document Object Model)이란? (0) | 2025.02.09 |
| 보안 차원에서 주소(URL)의 파라미터를 가리는 이유와 방법 (0) | 2025.02.08 |
| 절대 경로와 상대 경로 (0) | 2025.02.07 |