blog

1. 자바 실행 환경의 이해 (JDK, JRE, JVM)

자바를 공부할 때 가장 먼저 접하는 개념입니다. '자동차'에 비유하면 이해가 빠릅니다.

• JVM (Java Virtual Machine): 자바 프로그램이 실행되는 엔진입니다. OS에 상관없이 자바가 실행되게 핵심 역할을 합니다. (자동차의 엔진)
• JRE (Java Runtime Environment): JVM에 표준 라이브러리를 더한 실행 환경입니다. (완성된 자동차)
• JDK (Java Development Kit): JRE에 개발 도구(컴파일러 등)를 더한 것입니다. 우리는 개발자이므로 JDK가 반드시 필요합니다. (자동차를 만드는 공장)

Key Point: 자바의 슬로건은 "Write Once, Run Anywhere"입니다. 코드는 한 번만 짜면, 각 OS에 맞는 JVM이 알아서 실행해 줍니다.

2. 변수와 자료형 (Variable & Data Type)

변수는 데이터를 담는 메모리 안의 상자입니다.

기초 자료형 vs 참조 자료형

자바의 자료형은 크게 두 가지로 나뉩니다.

• Tip: int는 4byte(32비트), double은 8byte(64비트)의 크기를 가집니다.

3. 연산자 (Operators)

연산 시 주의해야 할 '자바만의 규칙'이 있습니다.

• 정수 연산의 함정: 5 / 2는 2.5가 아니라 2입니다. (소수점 버림)
  • 실수 결과를 원한다면 5 / 2.0처럼 한쪽을 실수로 만들어야 합니다.
• 논리 연산과 단락 평가 (Short-circuit):
  • && (AND): 앞이 false면 뒤는 계산도 안 함.
  • || (OR): 앞이 true면 뒤는 계산도 안 함.
• 삼항 연산자: 조건 ? 참일때값 : 거짓일때값
• Java

   

  int score = 85;
  String result = (score >= 60) ? "합격" : "불합격"; // "합격"
  

4. 제어문 (Conditionals & Loops)

프로그램의 흐름을 바꾸는 핵심 도구입니다.

조건문 (if, switch)

• if - else if - else: 순차적으로 조건을 검사하며, 하나라도 참이면 나머지는 건너뜁니다.
• switch: 변수의 값에 따라 실행 위치를 결정합니다. break를 쓰지 않으면 아래 코드까지 다 실행되는 'Fall-through' 현상이 발생하니 주의하세요!

반복문 (for, while, do-while)

Getty Images

• for: 반복 횟수를 정확히 알 때 유리 (예: 1부터 10까지 더하기)
• while: 조건에 따라 반복할 때 유리 (예: 사용자가 종료를 누를 때까지)
• do-while: 조건이 틀리더라도 최소 한 번은 무조건 실행해야 할 때 사용합니다.

5. 기타 꿀팁

• 주석 활용: // (한 줄), /* */ (여러 줄), /** */ (문서화)를 적재적소에 활용해 가독성을 높이세요.
• Naming Convention: 변수와 메서드 명은 camelCase를 사용합니다. (예: myAge, calculateTotal)
• 컴파일 과정: .java(소스코드) -> javac 명령어로 컴파일 -> .class(바이트코드) 생성 -> java 명령어로 JVM 실행.

오늘의 한 줄 평:

"자바는 OS에 구애받지 않는 자유로운 언어지만, 메모리와 자료형에는 아주 깐깐한 친구다!"

* Java -> GC . C언어, C++ -> 포인터

🔹 Java vs C / C++

🧩 포인터(pointer) 기본 구조

📘 예시:

👉 *pa는 “a의 값을 가져와라”는 뜻!

int a = 7  

🔁 swap에서의 포인터 활용

포인터는 값을 직접 교환(swap) 할 때 자주 사용돼요.

📘 예시:

✅ 실행 후
a = 7, b = 3
👉 메모리의 값을 직접 바꿨기 때문에 temp 외의 추가 복사 과정이 없음.

int* pa = &a;

print(*pa) => 7

1️⃣ int a = 7;

• 변수 a에 정수 7을 저장함
• 예를 들어, 메모리 어딘가(예: 주소 0x100)에
•  
  주소: 0x100 값: 7

2️⃣ int* pa = &a;

• int* pa 👉 “정수를 가리키는 포인터 변수 pa를 선언”
• &a 👉 “a의 메모리 주소값을 가져옴”
• 즉, pa는 이제 a가 저장된 주소를 기억함

📘 예시로 보면:

3️⃣ *pa

• *는 간접 참조 연산자(dereference operator) 라고 해요.
• 의미: “pa가 가리키는 주소의 실제 값을 가져와라.”

즉,

• pa 👉 주소값 (예: 0x100)
• *pa 👉 주소 0x100 안에 들어 있는 값 (즉, a의 값 = 7)

4️⃣ printf("%d", *pa);

• *pa는 결국 a의 값(7)을 읽어오는 것
• 출력 결과는 7

int * pa = 0x10F

int * pb = 0x1F7

print(*pa), print(*pb)

가리키는 곳에 숫자(int)가 있다.

temp를 거의 안쓴다.

swap 하려고 쓴다.

직접 메모리를 바꿔준다.

🔡 문자 포인터 (char*)

📘 예시

char str[] = "Hi";
printf("%c", str[0]); // H
printf("%c", str[1]); // i
printf("%c", str[2]); // \0 (NULL)

👉 문자열(char 배열) 은 마지막에 '\0'을 포함해야 완전한 문자열로 인식됨.

-> C에서는 문자열의 길이 정보를 따로 저장하지 않기 때문이다.

C에서는 문자열을 다룰 때 "문자들이 언제 끝나는지"를 알 수 있는 방법이 없다.
왜냐면 C는 문자열의 길이를 자동으로 기억하지 않기 때문..

int는 “하나의 값”
char 문자열은 “여러 개의 문자가 모인 배열” 그래서 null이 필요!

int* x

x = &a

char * 

문자 : 마지막 문자열 null 값을 가질 때까지. char에서만 해당. 문자열에서만...

 ↓

문자배열 -> 문자열 배열 포인터 - 포인터타입 

🧩 기본 포인터 개념

🔹 1️⃣ int* x

• 정수형(int)을 가리키는 포인터 변수
• x에는 “정수 변수의 주소값”이 저장됨

✅ 특징

• int는 크기가 고정(4바이트)
• 그래서 “어디까지 읽을지”를 컴파일러가 이미 알고 있음
• → 끝 표시(\0)가 필요 없음

🔹 2️⃣ char*

• 문자(char)를 가리키는 포인터 변수
• 하지만 문자열을 다룰 때는 특별 규칙이 있음!

✅ 특징

• char 자체는 1바이트 문자
• 하지만 "Hi" 같은 문자열은 “끝을 표시하기 위해” '\0'을 반드시 포함
• 그래서 char*로 문자열을 가리킬 때는,
  널 문자('\0')가 나올 때까지를 “문자열”로 인식함

int **c = &b;

** -> 이중 포인터 더블 포인터

리액트에서 웹 페이지를 만들 때 가장 중요한 개념 중 하나는 컴포넌트(Component)입니다.
컴포넌트는 화면에 보여질 HTML 구조를 함수처럼 재사용 가능한 조각으로 만든 것을 의미합니다.
이 글에서는 컴포넌트의 기본 개념, Props의 활용 방법, 그리고 다양한 Prop 문법까지 정리하겠습니다.

1. 컴포넌트(Component)란?

컴포넌트는 화면을 구성하는 작은 단위입니다.
예를 들어, 웹 페이지의 상단 제목과 이미지를 보여주는 Header, 핵심 개념 하나를 보여주는 CoreConcept,

그리고 전체 화면을 감싸는 App이 모두 컴포넌트입니다.

• Header는 화면의 헤더 부분을 담당합니다.
• App 컴포넌트에서 Header를 호출하면 화면에 해당 내용이 렌더링됩니다.

2. Props란?

Props(속성)은 부모 컴포넌트가 자식 컴포넌트에게 정보를 전달하는 방법입니다.
Props를 통해 자식 컴포넌트는 부모로부터 받은 데이터를 활용하여 화면을 동적으로 구성할 수 있습니다.

예를 들어 CoreConcept 컴포넌트를 사용할 때:

• title, description, image가 모두 Prop입니다.
• CoreConcept 컴포넌트 안에서는 props.title, props.description, props.image로 접근하여 사용할 수 있습니다.

3. 배열과 Props 활용

여러 개의 데이터를 관리할 때는 배열을 활용하면 편리합니다.

export const CORE_CONCEPTS = [ { image: componentsImg, title: 'Components', description: 'The core UI building block.' }, { image: jsxImg, title: 'JSX', description: 'Return HTML(ish) code to define the markup.' }, { image: propsImg, title: 'Props', description: 'Make components configurable by passing input data.' }, { image: stateImg, title: 'State', description: 'React-managed data which triggers UI updates.' }, ];

• 배열 안의 각 객체를 하나의 CoreConcept으로 사용할 수 있습니다.
• 화면에 표시할 때는 배열의 각 요소를 Prop으로 전달합니다.

• [0]은 배열의 첫 번째 요소를 의미합니다.
• [1], [2] 등으로 다른 개념들을 순서대로 전달할 수 있습니다.

4. 단일 Prop 객체 전달

여러 Prop을 개별적으로 전달하는 대신 객체 하나로 묶어서 전달할 수도 있습니다.

• CoreConcept 컴포넌트에서는 하나의 Prop만 받습니다.

• 이렇게 하면 코드가 훨씬 깔끔해집니다.

5. Rest Property로 그룹화

여러 Prop을 한 번에 Rest Property 문법으로 객체화할 수도 있습니다.

• 여러 개의 Prop을 ...concept으로 묶어서 처리할 수 있습니다.
• 많은 Prop을 다룰 때 매우 유용합니다.

6. 기본 Prop 값(Default Prop)

선택적 Prop이 있을 때는 기본값을 설정할 수 있습니다.

• type을 전달하지 않아도 기본값 "submit"이 적용됩니다.
• caption은 필수이므로 기본값이 없습니다.

7. 마무리

• 컴포넌트: 화면의 재사용 가능한 조각
• Props: 부모가 자식에게 데이터를 전달하는 방법
• 다양한 문법: 단일 객체 전달, Rest Property, 기본값 등

Props를 잘 활용하면, 컴포넌트 재사용성이 높아지고, 코드가 깔끔하고 효율적이 됩니다.
리액트에서 Props를 이해하는 것은 동적 웹 페이지를 만들 때 가장 중요한 기초입니다.

1️⃣ 자료 구조 발전

2️⃣ 객체지향 핵심

객체 관계

3️⃣ 접근 제어자

• 팝업같이 어디서나 쓰는 클래스 → public
• 내부용 변수 → private

4️⃣ 정적(static) vs 동적(인스턴스)

5️⃣ 메모리 & 참조

6️⃣ 2차원 배열 & 좌표

절대 좌표 (Absolute Coordinates)

상대 좌표 (Relative Coordinates)

• • = 현재 위치 (0,0)
• (dx, dy) = 상대 이동 좌표
• 코드 예시:

7️⃣ 기타 개념

8️⃣ 전체 키워드 정리

• 자료 구조: 배열 → 구조체 → 클래스
• 객체지향 핵심: 클래스/객체, is-a / has-a
• 접근제어: private, default, protected, public
• 메모리: static, final, heap, reference
• static vs non-static: 공용 vs 객체별
• 2차원 배열: 절대좌표 / 상대좌표
• 참조: 주소값 공유 → call by reference

🧠 메모리 공간 핵심 정리: 컴퓨터의 '기억 장소'

메모리는 컴퓨터가 데이터를 저장하고 처리하는 데 사용하는 가장 중요한 '기억 장소'입니다.

1. 🗺️ 메모리의 기본 구조 및 주소 체계

메모리는 데이터를 보관하는 저장 공간이며, 효율적인 관리를 위해 다음과 같은 구조를 가집니다.

• 주소가 있는 저장 공간입니다: 메모리는 수많은 작은 칸으로 나뉘어 있으며, 이 칸들에는 우편번호와 같은 고유한 주소가 부여됩니다.
• 주소의 최소 단위는 1 Byte입니다. 하나의 메모리 주소는 기본적으로 1 Byte의 데이터를 저장합니다.
• 주소는 16진수로 표현됩니다: 메모리 주소는 가독성을 높이기 위해 보통 16진수(0x000D, 0xFF05 등)로 나타냅니다.
• 운영체제에 따라 주소 개수가 결정됩니다.
  • 32비트 (x32) 운영체제는 $2^{32}$개의 주소까지 접근 가능하여, 최대 약 4GB의 메모리를 관리할 수 있습니다.
  • 64비트 (x64) 운영체제는 $2^{64}$개의 주소를 다룰 수 있어 훨씬 광범위한 메모리 공간을 활용합니다.
• 메모리 할당은 주소값 부여입니다: 프로그램에서 변수를 선언할 때, 해당 변수가 사용할 메모리 공간에 주소값을 지정하는 과정을 메모리 할당이라고 합니다.

2. 🏠 메모리의 주요 3가지 영역 (Stack, Heap, OS)

메모리 공간은 데이터의 수명과 사용 목적에 따라 세 가지 구역으로 분리되어 관리됩니다.

1) 스택 (Stack) 영역

• 특징: 데이터 접근 속도가 매우 빠르고, 데이터가 쌓였다가 사라지는(LIFO: 후입선출) 구조입니다.
• 할당 시점: 프로그램 컴파일 시점에 이미 크기와 주소값이 결정됩니다.
• 저장 대상: 함수 내에서 사용되는 지역 변수 (예: int value), 함수 호출 시의 정보 등이 여기에 저장됩니다. ($\text{int value}$는 스택 공간에 주소값이 이미 결정됩니다.)

2)  힙 (Heap) 영역

• 특징: 프로그램 실행 중(런타임)에 크기가 자유롭게 변하는 동적 메모리 영역입니다. 메모리 관리가 필요합니다.
• 할당 시점: 프로그램 실행 중(런타임)에 요청에 따라 메모리가 할당됩니다.
• 저장 대상: 자바 등의 객체 지향 언어에서 생성하는 객체나 배열의 실제 데이터가 이곳에 저장됩니다.

3) OS 영역 (커널)

• 특징: 운영체제의 핵심 기능인 커널이 상주하며 사용하는 공간입니다.
• 보호: 시스템의 안정성을 위해 일반 프로그램의 접근으로부터 철저히 보호됩니다.

3. 📝 자바에서의 메모리 예시

자바(Java) 언어 환경을 예시로 들면, 변수와 객체가 메모리에 다음과 같이 저장됩니다.

• 기본형 변수: int numberPuppy = 7;과 같은 기본형 변수는 스택 영역의 주소 0x000D에 저장됩니다.
• 배열 및 객체: int[] scores와 같은 배열이나 객체는 힙 영역 0x10000에 실제 값이 저장되며, 이 힙의 주소를 가리키는 참조 변수만 스택 (0x1000)에 저장됩니다.

map() → 배열 각 요소를 변형해서 새 배열을 만든다.

find() → 조건에 맞는 첫 번째 요소를 반환한다.

findIndex() → 조건에 맞는 첫 번째 요소의 인덱스를 반환한다.

filter() → 조건에 맞는 모든 요소를 새 배열로 반환한다.

reduce() → 배열을 하나의 값으로 합치거나 계산한다.

concat() → 배열을 합쳐서 새 배열을 만든다.

slice() → 배열의 일부를 잘라 새 배열로 만든다 (원본 유지).

splice() → 배열을 직접 수정해서 요소를 삭제/추가한다.

🧩 1. map()

배열의 각 요소를 변형해서 새로운 배열을 만듭니다.
원본 배열은 변경되지 않아요.

📘 형식 : arr.map((요소, 인덱스, 배열) => { ... })

📗 예시 : const nums = [1, 2, 3]; const doubled = nums.map(num => num * 2); console.log(doubled); // [2, 4, 6]

💡 포인트: React에서 map()은 거의 필수예요. {items.map(item => <li>{item}</li>)}

🔍 2. find()

조건을 만족하는 첫 번째 요소를 찾아 반환합니다.
못 찾으면 undefined.

📘 형식: arr.find(el => 조건)

📗 예시: const users = [{id: 1}, {id: 2}, {id: 3}]; const user = users.find(u => u.id === 2); console.log(user); // {id: 2}

🔢 3. findIndex()

조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다.
못 찾으면 -1.

📗 예시: const nums = [10, 20, 30]; const index = nums.findIndex(n => n === 20); console.log(index); // 1

💡 find()는 값, findIndex()는 위치를 찾습니다.

🧹 4. filter()

조건을 만족하는 모든 요소만 골라서 새로운 배열로 반환합니다.
원본 배열은 그대로.

📘 형식: arr.filter(el => 조건)

📗 예시: const nums = [1, 2, 3, 4]; const even = nums.filter(n => n % 2 === 0); console.log(even); // [2, 4]

💡 map()은 변형, filter()는 선별이에요.

⚙️ 5. reduce()

배열의 값을 하나로 합쳐줍니다.
누적 계산할 때 유용해요.

📘 형식: arr.reduce((누적값, 현재값) => 새로운누적값, 초기값)

📗 예시: const nums = [1, 2, 3, 4]; const sum = nums.reduce((acc, cur) => acc + cur, 0); console.log(sum); // 10

💡 sum, 평균, 객체로 묶기 등 복잡한 계산에 자주 써요.

🔗 6. concat()

배열을 합쳐서 새 배열을 만듭니다.
원본 배열은 그대로.

📘 형식: arr1.concat(arr2)

📗 예시: const a = [1, 2]; const b = [3, 4]; const merged = a.concat(b); console.log(merged); // [1, 2, 3, 4]

💡 React에서 state 배열을 업데이트할 때도 자주 써요.

✂️ 7. slice()

배열의 일부를 잘라서 새로운 배열로 반환.
원본은 안 바뀜.

📘 형식: arr.slice(시작인덱스, 끝인덱스)

(끝 인덱스는 포함 안 됨)

📗 예시: const arr = [10, 20, 30, 40]; const part = arr.slice(1, 3); console.log(part); // [20, 30]

🪓 8. splice()

배열의 내용을 직접 변경(수정, 삭제, 추가) 합니다.
원본 배열이 바뀌는 게 특징이에요.

📘 형식: arr.splice(시작인덱스, 삭제개수, 추가요소1, 추가요소2, ...)

📗 예시: const arr = [10, 20, 30]; arr.splice(1, 1, 25); // 인덱스 1에서 1개 지우고 25 추가 console.log(arr); // [10, 25, 30]

💡 React에서는 splice는 잘 안 써요.
(불변성을 지켜야 하니까 — 대신 slice나 filter로 대체)

🌱 1. let & const

변수를 만드는 방법이에요.

예시 👇

💡 정리:
이제 var는 거의 안 써요.
👉 값을 바꿀 거면 let, 안 바꿀 거면 const!

⚡ 2. Arrow Function (화살표 함수)

함수를 짧게 쓰는 방법이에요.

기존 함수 👇

같은 기능을 화살표 함수로 👇

줄일 수도 있어요 👇

👉 화살표 함수는 문법이 짧고,
this라는 키워드의 동작이 더 예측 가능해서 리액트에서 진짜 자주 써요!

📦 3. Export & Import

파일을 나누어 쓸 때 “가져오고 내보내기” 하는 문법이에요.

예시 1️⃣ (내보내기)

예시 2️⃣ (가져오기)

💡 정리:

• export default → 한 파일에 1개만 가능
• export const → 여러 개 가능
• import * as something → 전부 가져올 때

🧱 4. Class (클래스)

객체를 만드는 “틀”이에요.

예시 👇

💡 정리:

• class는 객체를 쉽게 만드는 방법
• extends를 쓰면 상속도 가능 (다른 클래스 기능 물려받기)

🌈 5. Spread & Rest Operator (...)

점 세 개로 배열이나 객체를 “펼치거나 묶는” 문법이에요.

📤 Spread (펼치기)

📥 Rest (묶기)

💡 정리:

• Spread → 복사하거나 추가할 때
• Rest → 여러 개를 한 번에 받거나 묶을 때

🎁 6. Destructuring (구조 분해)

객체나 배열에서 필요한 값만 꺼내 쓰는 방법이에요.

배열

객체

💡 함수에서 자주 써요!

✨ 한 줄 요약

1. 기본 export / import

📂 util.js

let apiKey = 'abc123'; export { apiKey };

📂 app.js

import { apiKey } from './util.js'; console.log(apiKey);

• export { 변수 } → 공개하기
• import { 변수 } from 경로 → 가져오기
• 이름과 대소문자 맞춰야 함

2. default export

📂 util.js

export default 'abc123';

📂 app.js

import key from './util.js'; console.log(key);

• 파일당 하나만 가능
• 가져올 때는 중괄호 ❌, 이름 마음대로 지정 가능
• 리액트 컴포넌트에서 제일 많이 씀 (파일당 컴포넌트 하나 → default export 적합)

3. 여러 개 export

📂 util.js

export const apiKey = 'abc123'; export const abc = 'hello';

📂 app.js

import { apiKey, abc } from './util.js'; console.log(apiKey, abc);

• 여러 개는 ,로 묶어서 가져오기 가능

4. 한 번에 가져오기

📂 app.js

import * as util from './util.js'; console.log(util.apiKey); console.log(util.abc);

• 모든 export를 객체(util)에 모아서 가져오기

5. 이름 바꾸기 (별칭)

📂 app.js

import { abc as content } from './util.js'; console.log(content);

• as 써서 별칭 붙일 수 있음

6. type="module"

• 바닐라 JS → <script type="module" src="app.js"></script> 필요
• 리액트 → 빌드 프로세스가 알아서 처리 → 안 써도 됨

내가 이해한 핵심

• 기본 export: {}로 가져옴
• default export: 하나만, 중괄호 없이 이름 마음대로
• 여러 개 export: ,로 가져오거나 * as로 묶기
• as로 별칭 가능
• 리액트는 대부분 default export 방식 사용

👉 결국 import/export는 파일 간 코드 공유를 위한 도구
앞으로 컴포넌트 만들 때 계속 쓰게 될 거라 익숙해져야 한다.