4일차. IT 개념 정리

 

IT 개념 정리 (핵심 개념: HTML, 자바, 자바스크립트, 데이터와 객체)

 

1. Placeholder: 입력 상자의 착한 가이드 🪄

• 뭐야 이게? 입력 상자에 아무것도 안 썼을 때 흐릿하게 보이는 힌트 글자야! 예: <input type="email" id="email" name="email" placeholder="이메일을 입력하세요" required>에서 "이메일을 입력하세요"가 그거야.
• 역할: 뭘 써야 할지 알려주는 친절한 안내원! 입력 시작하면 뿅 하고 사라지는 마법 글자. 🌟
• 예시: 이메일 칸에 "이메일을 입력하세요"가 보이다가, 쓰기 시작하면 사라져!

2. DIV: 웹 페이지의 정리정돈 박스 📦

• 뭐야 이게? HTML에서 내용을 구획(박스)으로 나누는 태그야. 웹 페이지 콘텐츠를 깔끔하게 정리하는 역할!
• 특징: 블록 요소라 한 줄을 통째로 차지하고 아래로 쌓여.
• 용도: CSS로 스타일링, 자바스크립트로 조작, 레이아웃 잡을 때 유용.
• 예시: <div class="box"><h1>제목</h1><p>이건 내용이에요.</p></div> → 박스 안 콘텐츠를 CSS로 한꺼번에 꾸밀 수 있어!

3. ID와 Name: 역할이 달라! 🙅‍♂️

• ID:
  • 페이지에서 유일한 이름표! 한 요소에만 붙여.
  • CSS(#username { border: 1px solid red; })나 자바스크립트(document.getElementById('username'))로 요소를 콕 집을 때 사용.
  • 예: <input type="text" id="username">.
• Name:
  • 폼 데이터를 서버로 보낼 때 쓰는 이름표. 서버가 “이 값이 뭔지” 구분하게 해줘.
  • 같은 name을 여러 요소에 붙일 수도 (예: 체크박스 그룹).
  • 예: <input type="text" name="username"> → 서버로 username=입력값 전송.
• 중요: id와 name은 역할이 다르니까 섞어 쓰지 말자!

4. 자연어와 String: 사람이 말하는 언어를 컴퓨터에 담자! 🗣️

• 자연어: 우리가 매일 쓰는 한국어, 영어 같은 언어야.
• String: 프로그래밍에서 글자나 문장을 담는 상자! 예: 'A'(문자), "Hello"(문자열).
• 쿼리 스트링: URL로 데이터 보낼 때 쓰는 형식. 예: ?email=a&password=b → email과 password는 string이야!
• 비유: "사과"는 자연어로 “apple”일 수도, “apology”일 수도. 컴퓨터는 그냥 string으로 보고, 의미는 우리가 정해줘야 해. 자바가 멋대로 해석하면 안 돼! 😜

5. 자바 vs 자바스크립트: 이름 비슷, 성격 달라! 😎

 

항목자바 (Java)자바스크립트 (JavaScript)

타입	정적 타입 (타입 미리 정해야 해)	동적 타입 (타입 자동으로 결정)
컴파일	필요 (소스 → 바이트코드로 바꿈)	필요 없음, 바로 실행!
객체지향	클래스 기반, 엄격한 구조	프로토타입 기반, 자유로운 구조 (ES6부터 클래스도 지원)

6. RequestParam: 스프링의 데이터 배달부 📬

• 뭐야 이게? 스프링에서 요청값(예: email=a&password=b)을 자바 변수에 쏙 담아주는 마법 어노테이션!
• 예시: @RequestParam("email") String email → URL의 email=a를 email 변수에 저장.
• 코드 예시:
  java

   

  @GetMapping("/login")

  public ResponseEntity<?> login(@RequestParam("email") String email, @RequestParam("password") String password) {

  System.out.println("이메일: " + email);

  System.out.println("비밀번호: " + password);

  return ResponseEntity.ok().body(Map.of("message", "로그인 성공!", "email", email));

  }
• 흐름: HTML(요청) → 자바(@RequestParam) → HTML(응답).

7. System과 입출력: 컴퓨터와의 대화 창구 💻

• System: 컴퓨터 자체야.
• System.in: 키보드로 입력받는 창구 (예: 사용자가 타이핑).
• System.out: 모니터에 출력하는 창구 (예: System.out.println("Hello") → 콘솔에 “Hello” 띄움).
• 비유: 키보드는 입, 모니터는 눈! println은 컴퓨터가 우리한테 말하는 방법이야.

8. 객체 지향 프로그래밍(OOP): 세상을 객체로 만들자! 🌍

• 정의: 현실의 사물(예: 사람, 자동차)을 객체로 만들어 상호작용하게 하는 프로그래밍 방식.
• 객체: 데이터(속성) + 기능(메소드). 예: “자동차” 객체는 속성(색상, 속도) + 기능(달리기, 멈추기).
• 개체: 데이터만 있는 집합 (기능 없음).
• 함수: 기능만 있고 속성은 없어.
• 비유: 객체는 “스마트폰” (화면 크기 + 통화 기능), 개체는 “화면 크기” 데이터, 함수는 “통화 기능”만!

9. 데이터, 상수, 변수: 데이터를 담는 그릇 🥣

• 데이터: 컴퓨터가 다루는 값 자체 (예: 10, "apple", true).
• 상수: 한 번 정하면 못 바꾸는 그릇 (예: final int x = 10;).
• 변수: 값이 바뀔 수 있는 그릇 (예: int y = 10; y = 20;).
• 비유: 데이터는 사과🍎, 상수는 뚜껑 고정된 상자, 변수는 뚜껑 열리는 상자야!
• 예시: 터미널에 출력되는 건 변수(바뀔 수 있음), /로 시작하는 건 상수(고정).

10. 자바(Java): 객체의 세계로! 🧠

• 정의: 객체 지향 프로그래밍(OOP) 언어야. 플랫폼에 상관없이 어디서나 실행 가능!
• 특징: 클래스 기반, 정적 타입, 컴파일 필요.
• 비유: 자바는 객체를 만들어내는 공장! 현실의 사물을 코드로 구현해서 동작하게 해.

 

---

 

 

 

네가 딱 집어서 물어본 placeholder는 말이야, 입력 상자에 아직 아무것도 쓰지 않았을 때 나타나는 힌트 글자라고 생각하면 돼! 🌟

예를 들어, 네가 보여준 코드에서 <input type="email" id="email" name="email" placeholder="이메일을 입력하세요" required> 요 부분이 있잖아?

여기서 placeholder="이메일을 입력하세요" 덕분에 이메일 칸에 아무것도 입력하기 전에는 "이메일을 입력하세요"라는 흐릿한 글씨가 보였다가, 네가 뭔가 쓰기 시작하면 뿅 하고 사라지는 마법의 글자란다! 🪄

무슨 내용을 적어야 하는지 미리 알려주는 착한 가이드 같은 역할

 

---

 

div는 HTML에서 많이 쓰이는 태그 중 하나예요. 쉽게 말하면, 웹 페이지 안에서 내용을 구획(박스)으로 나누는 용도라고 생각하면 돼요.

조금 더 자세히 설명하면:

• 역할: 콘텐츠를 묶어서 그룹화.
• 형식: 블록 요소(block element)라서, 기본적으로 한 줄 전체를 차지하고 아래로 쌓임.
• 용도: 스타일(CSS) 적용, 레이아웃 구성, 자바스크립트로 조작할 영역 지정 등.

예시:

 

<div class="box"> <h1>제목</h1> <p>이건 내용이에요.</p> </div>

위처럼 div 안에 여러 요소를 넣으면, CSS로 한꺼번에 꾸밀 수 있어요.

 

" "=인용하는 것

 

<div class="box"> 

div class는 숫자로 인식함

" "-안에 들어간 내용이 자연어

고유한 2진수가 다르다는 것임, 사과=apology가 될도, apple이 될 수도

내가 뜻은 모르겠는데 이게 사과라면서 주는데?

사과라고 쓰기만 해야지 자바가 해석하면 안됨.

 

 

• 자연어(Natural Language): 사람이 일상에서 사용하는 언어 (한국어, 영어 등)
• 기계어(Machine Language): 컴퓨터가 이해하는 0과 1의 언어

""-더블코트? 

 

email=a&password=b

id와 name은 같으면 안됨

 

항목                               자바(Java)                                               자바스크립트(JavaScript)

타입	정적 타입 (타입 선언 필요)	동적 타입 (자동으로 타입 결정)
컴파일	필요 (소스 → 바이트코드)	필요 없음, 인터프리터 실행
객체지향	클래스 기반	프로토타입 기반, ES6 이후 클래스 지원

 

id와 name은 같으면 안됨

 

1️⃣ id

• 고유 식별자
• 한 페이지에서 하나의 요소에만 사용 가능
• 주로 CSS, 자바스크립트에서 특정 요소를 선택할 때 사용
• 예시:

<input type="text" id="username">

• CSS 예: #username { border: 1px solid red; }
• JS 예: document.getElementById('username')

---

2️⃣ name

• 폼 데이터를 서버로 보낼 때 사용
• 서버가 “이 값이 뭐인지” 구분하는 이름
• 여러 요소에 같은 name을 줄 수도 있음 (예: 체크박스 그룹)
• 예시:

<input type="text" name="username">

• 폼 전송 시: username=입력값

 

? email=a&password=b

? : 쿼리

email=a&password=b : 스트링

 

자연어=스트링 string

 

string은 프로그래밍에서 문자들을 모아놓은 자료형이에요. 쉽게 말하면 글자나 문장을 담는 상자라고 생각하면 돼요.

---

1️⃣ 의미

• 한 글자 → 'A' (문자, char)
• 여러 글자 → "Hello" (문자열, string)

 

a와 b는 string (캐릭터로 구성된 집합체)

 

 

@GetMapping("/login")
    public ResponseEntity<?> login(@RequestParam("email") String email, 
                                   @RequestParam("password") String password) {

 

@RestController

@RequestMapping("/api")

public class LoginController {

   

    @GetMapping("/login")

    public ResponseEntity<?> login(@RequestParam("email") String email,

                                    @RequestParam("password") String password) {

       

        // 콘솔에 로그인 정보 출력

        System.out.println("=== 로그인 요청 정보 ===");

        System.out.println("이메일: " + email);

        System.out.println("비밀번호: " + password);

        System.out.println("========================");

       

        // 응답 반환

        return ResponseEntity.ok().body(Map.of(

            "message", "로그인 정보가 성공적으로 받아졌습니다.",

            "email", email

        ));

    }

 

 

@RequestParam은 **스프링(Spring)**에서 아주 자주 쓰이는 **어노테이션(Annotation)**이에요.
쉽게 말하면 👉 **“사용자가 보낸 요청값을 자바 변수에 담아주는 기능”**

 

Reques-html에서 java로

response-자바에서 html로 가면

 

터미널에 나오는건 변수

/넣는 것은 상수

 

데이터는 변수

 

system: 컴퓨터

system in : 키보드

system out : 모니터

 

println 

---

객체 지향 프로그래밍(OOP, Object-Oriented Programming)

객체(Object) = 현실에 존재하는 사물이나 개념을 프로그램 안에서 표현한 것
→ “사람”, “자동차”, “계좌”, “학생” 이런 걸 전부 객체로 만들어 다룸

그래서 **객체 지향 프로그래밍(OOP)**이란,

“현실 세계의 사물을 객체로 만들어 그들끼리 상호작용하게 하는 방식”이에요.

 

**

개체 : 데이터의 집합 

객체 : 데이터와 메소드의 집합

 

개체: 객체-기능

객체: 속성 + 기능

함수: 객체-속성

 

데이터는 “상수일 수도 있고, 변수일 수도 있어요.”
즉, **데이터 자체가 상수나 변수 중 하나로 “저장되는 것”**이에요.

하나씩 차근히 설명해볼게요 👇

---

🧩 1️⃣ 먼저 개념 정리

구분설명예시

데이터(Data)	컴퓨터가 저장하거나 처리하는 값 자체	10, "Hello", true
상수(Constant)	한번 정하면 바꿀 수 없는 데이터	final int x = 10;
변수(Variable)	값을 저장했다가 바꿀 수 있는 공간	int y = 10; y = 20;

---

💡 쉽게 말하면

• 데이터는 “값” 그 자체예요.
  → 예: 10, "apple", true
• 상수/변수는 그 데이터를 담는 그릇이에요.
  • 상수 = “절대 바뀌지 않는 그릇”
  • 변수 = “안의 데이터를 바꿀 수 있는 그릇”

데이터는 그 자체로 값이고, 상수나 변수는 그 데이터를 저장하는 방법이에요.
즉, “데이터 = 내용물”, “상수/변수 = 그릇”이에요. 🍎➡️🥣

 

 

자바(Java)는 한 줄로 말하면 이렇게 설명할 수 있어요 👇

🧠 자바(Java)는 “객체 지향 프로그래밍(OOP)” 언어이자, 플랫폼에 독립적인 범용 프로그래밍 언어”예요.

 

자바는 객체를 사용하는 언어로써