# React 기본 개념

React는 페이스북이 개발한 자바스크립트 라이브러리로, UI를 효율적으로 구축하기 위해 사용됩니다. 이번 글에서는 React의 기본 개념을 살펴보겠습니다.

---

## 1. React란?

React는 컴포넌트 기반의 UI 라이브러리로, **단방향 데이터 흐름**과 **가상 DOM**을 활용하여 성능을 최적화합니다.

### React의 주요 특징
- **컴포넌트 기반**: UI를 작은 단위의 컴포넌트로 분리하여 재사용이 용이합니다.
- **선언형**: 코드가 직관적이며, 상태(state)에 따라 자동으로 UI가 갱신됩니다.
- **가상 DOM**: 변경 사항을 효율적으로 반영하여 렌더링 성능을 향상합니다.
- **단방향 데이터 흐름**: 데이터가 일관되게 관리되어 디버깅이 용이합니다.

---

## 2. React 프로젝트 설정

### 1) Create React App

```sh
npx create-react-app my-app
cd my-app
npm start
```

### 2) Vite

```sh
npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev
```

---

## 3. JSX

React에서는 JSX 문법을 사용하여 HTML과 유사한 코드를 작성할 수 있습니다.

```jsx
const element = <h1>Hello, React!</h1>;
```

JSX는 일반 자바스크립트가 아닌 확장 문법이므로, JSX 코드는 Babel을 통해 변환됩니다.

---

## 4. 컴포넌트(Component)

컴포넌트는 UI의 독립적인 단위로, 재사용이 가능합니다.

### 1) 함수형 컴포넌트
```jsx
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}
```

### 2) 클래스형 컴포넌트
```jsx
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
```

---

## 5. Props와 State

### 1) Props (속성)
- 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용합니다.

```jsx
function Greeting(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

<Greeting name="Alice" />
```

### 2) State (상태)
- 컴포넌트 내부에서 관리하는 동적인 데이터로 값이 setState함수로 값이 변경될 경우 컴포넌트가 리랜더링됩니다.

```jsx
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}
```

---

## 6. 이벤트 핸들링

```jsx
function ButtonClick() {
  function handleClick() {
    alert("버튼이 클릭되었습니다!");
  }

  return <button onClick={handleClick}>클릭하세요</button>;
}
```

---

## 7. 조건부 렌더링

```jsx
function UserGreeting(props) {
  return <h1>{props.isLoggedIn ? "환영합니다!" : "로그인해주세요."}</h1>;
}
```

---

## 8. 리스트 렌더링

배열 데이터를 기반으로 동적으로 UI를 생성할 수 있습니다.

```jsx
function ItemList() {
  const items = ["사과", "바나나", "체리"];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```

---

## 9. Hooks

React에서는 상태 관리와 생명주기 메서드를 쉽게 사용할 수 있도록 **Hooks** 기능을 제공합니다.

### 1) `useState` (상태 관리)
```jsx
const [count, setCount] = useState(0);
```

### 2) `useEffect` (사이드 이펙트 관리)
```jsx
useEffect(() => {
  console.log("컴포넌트가 마운트되었습니다.");
}, []);
```



리액트란?

리액트란 무엇인가

# 자바스크립트 기본 개념

자바스크립트는 웹 개발에서 필수적인 프로그래밍 언어로, 동적인 웹 페이지를 만들기 위해 사용됩니다. 이번 글에서는 자바스크립트의 기본 개념을 살펴보겠습니다.

---

## 1. 자바스크립트란?

자바스크립트는 웹 브라우저에서 실행되는 인터프리터 방식의 프로그래밍 언어입니다. HTML, CSS와 함께 웹을 구성하는 핵심 기술 중 하나로, 웹 페이지의 동적인 요소를 제어하는 데 사용됩니다.

### 자바스크립트의 특징
- **동적 타입**: 변수의 타입이 동적으로 결정됩니다.
- **객체 기반**: 객체를 활용한 프로그래밍이 가능합니다.
- **이벤트 기반**: 사용자의 동작(클릭, 입력 등)에 따라 코드가 실행됩니다.
- **비동기 처리*: 비동기 작업을 지원하여 빠르고 효율적인 실행이 가능합니다.

---

## 2. 변수와 데이터 타입

자바스크립트에서는 `var`, `let`, `const`를 사용하여 변수를 선언할 수 있습니다.

```js
var name = "John";
let age = 30; // 같은 변수명으로 재선언 불가
const pi = 3.14; // 선언하며 값을 대입
```

### 주요 데이터 타입
```js
let number = 10; // 숫자(Number)
let text = "Hello"; // 문자열(String)
let isTrue = true; // 불리언(Boolean)
let value = null; // 널(Null)
let notDefined; // 정의되지 않음(Undefined)
let person = { name: "Alice", age: 25 }; // 객체(Object)
let numbers = [1, 2, 3, 4, 5]; // 배열(Array)
```

---

## 3. 연산자와 조건문

### 연산자
```js
let sum = 10 + 5; // 산술 연산자 (+, -, *, /, %)
let isEqual = (10 === "10"); // 비교 연산자 (===, !==, <, >, <=, >=)
let andCheck = (true && false); // 논리 연산자 (&&, ||, !)
```

### 조건문
```js
let score = 85;
if (score >= 90) {
  console.log("A 학점");
} else if (score >= 80) {
  console.log("B 학점");
} else {
  console.log("C 학점");
}
```

---

## 4. 함수

### 함수 선언 방식
```js
function greet(name) {
  return "Hello, " + name;
}
console.log(greet("Alice"));
```

### 화살표 함수 (ES6+)
```js
const greet = (name) => `Hello, ${name}`;
console.log(greet("Alice"));
```

---

## 5. 객체와 배열

### 객체
```js
let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello!");
  }
};
console.log(person.name); // John
person.greet(); // Hello!
```

### 배열
```js
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // Banana
fruits.push("Mango");
console.log(fruits); // ["Apple", "Banana", "Cherry", "Mango"]
```

---

## 6. 반복문

### for 문
```js
for (let i = 0; i < 5; i++) {
  console.log(i);
}
```

### while 문
```js
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}
```

---

## 7. 비동기 처리

### 콜백 함수
```js
function fetchData(callback) {
  setTimeout(() => {
    callback("데이터 로드 완료");
  }, 2000);
}
fetchData(console.log);
```

### 프로미스 (Promise)
```js
let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("성공"), 2000);
});
promise.then(console.log);
```

### async/await
```js
async function fetchData() {
  let data = await new Promise(resolve => setTimeout(() => resolve("완료"), 2000));
  console.log(data);
}
fetchData();
```

---

## 8. 이벤트 핸들링

```js
document.getElementById("myButton").addEventListener("click", function() {
  alert("버튼 클릭됨!");
});
```



자바스크립트란?

자바스크립트란 무엇인가

# 타입스크립트

타입스크립트는  자바스크립트의 슈퍼셋으로 정적 타입 시스템을 추가하여 코드의 안정성과 유지보수성을 높이는 언어입니다. 이번 글에서는 타입스크립트의 기본 개념을 알아보겠습니다.

## 1. 타입스크립트란?

### 타입스크립트의 특징
- **정적 타입 시스템**: 트랜스파일 단계에서 타입을 체크하여 런타임 오류를 사전에 방지할 수 있습니다.
- **ES6+ 지원**: 최신 자바스크립트 문법을 지원하며, 브라우저 호환성을 위해 ES5로 트랜스파일 가능합니다.
- **인터페이스와 제네릭**: 대규모 프로젝트에서도 유지보수성을 높일 수 있는 강력한 기능을 제공합니다.
- **OOP 지원**: 클래스, 인터페이스, 상속 등 객체지향 프로그래밍 개념을 활용할 수 있습니다.

## 2. 타입스크립트 설치 및 설정

### 타입스크립트 설치
```sh
npm install -g typescript
```

### 타입스크립트 컴파일
```sh
tsc filename.ts
```

### `tsconfig.json` 설정
타입스크립트 프로젝트에서는 `tsconfig.json` 파일을 생성하여 설정을 관리할 수 있습니다.
```json
{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true
  }
}
```

## 3. 기본 타입
타입스크립트는 다양한 기본 타입을 제공합니다.

```ts
let isDone: boolean = false;
let age: number = 30;
let firstName: string = "John";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 10];
```

## 4. 함수와 인터페이스

### 함수의 타입 지정
```ts
function add(a: number, b: number): number {
  return a + b;
}
```

### 인터페이스
인터페이스를 사용하면 객체의 구조를 정의할 수 있습니다.
```ts
interface Person {
  name: string;
  age: number;
}

let user: Person = {
  name: "Alice",
  age: 25
};
```

## 5. 클래스와 상속
타입스크립트는 ES6의 클래스 문법을 기반으로 하며, 추가적인 기능을 제공합니다.

```ts
class Animal {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }

  makeSound(): void {
    console.log("Some sound");
  }
}

class Dog extends Animal {
  bark(): void {
    console.log("Woof! Woof!");
  }
}

let dog = new Dog("Buddy");
dog.makeSound(); // Some sound
dog.bark(); // Woof! Woof!
```

## 6. 제네릭
제네릭을 사용하면 코드의 재사용성을 높일 수 있습니다.

```ts
function identity<T>(arg: T): T {
  return arg;
}

console.log(identity<number>(10)); // 10
console.log(identity<string>("Hello")); // Hello
```

## 7. 타입스크립트의 장점
- 코드의 **가독성**과 **유지보수성** 향상
- 정적 타입 체크로 **버그 예방**
- **대규모 프로젝트**에서 생산성 향상

## 8. 결론
타입스크립트는 자바스크립트의 강력한 기능을 유지하면서도 정적 타입 시스템을 제공하여 개발 생산성을 높여줍니다.



게시글 리스트

리액트란?

자바스크립트란?

타입스크립트란?