# 🔐 Next.js + JWT + Axios를 활용한 로그인 및 로그인 유지 기능

## 1. 개요
**JWT 기반의 로그인 및 로그인 유지 기능**을 구현하는 방법을 정리합니다.  

---

## 2. 로그인 시스템 개요
로그인 흐름은 다음과 같습니다.

- 사용자가 ID/PW를 입력하여 로그인 요청을 보냄
- 서버에서 **Access Token + Refresh Token 발급** 후 각각 쿠키, DB에 저장
- 이후 요청에서 **Axios Interceptor를 활용하여 Access Token 검증**
- 만료된 경우 **Refresh Token을 활용하여 Access Token 재발급**
- 서버사이드 렌더링에서 인증이 필요한 경우, `getServerSideProps`에서 토큰을 검증

---

## 3. Axios 설정
📂 **/client/lib/utils/axios.ts**
```typescript
import axios, { AxiosInstance, InternalAxiosRequestConfig } from 'axios';
import { checkToken } from '@utils/auth';

export const instance: AxiosInstance = axios.create({
  baseURL: process.env.REACT_APP_SERVER_URL,
  timeout: 10000,
  withCredentials: true, // CORS 요청 허용
});

// 요청 인터셉터 (토큰 검증)
instance.interceptors.request.use(
  async (config: InternalAxiosRequestConfig) => {
    if (!config.data) return config;

    const isFormData = config.data instanceof FormData;
    const checkTokenVal = isFormData
      ? config.data.get('checkToken') === 'true'
      : config.data.checkToken || false;
    const isCheckToken = config.data.isCheckToken || false;

    // 로그인 검증이 필요한 경우
    if (checkTokenVal && !isCheckToken) {
      try {
        const checkTokenRes = await checkToken();
        if (checkTokenRes) {
          const { userData } = checkTokenRes;

          if (userData) {
            if (isFormData) {
              config.data.append('userData', JSON.stringify(userData));
            } else {
              config.data.userData = userData;
            }
          }
        }
      } catch (err) {
        return Promise.reject(err);
      }
    }

    return config;
  },
);

export default instance;
```

✅ **Interceptor를 활용하여 권한이 필요한 요청을 보낼 때 자동으로 로그인 검증을 수행**합니다.

---

## 4. 토큰 검증 및 로그아웃 처리
📂 **/client/lib/utils/auth.ts**
```typescript
import axios from '@utils/axios';

// 토큰 검증 함수
export async function checkToken(cookie?: string): Promise<{
  userData: UserState;
  accessToken: string;
  refreshTokenHashIdx: string;
} | void> {
  const config: {
    data: { isCheckToken: boolean };
    headers?: { Cookie: string };
  } = { data: { isCheckToken: true } };

  if (typeof cookie === 'string') {
    config.headers = { Cookie: cookie };
  }

  try {
    const {
      data: { userData, accessToken, refreshTokenHashIdx },
    } = await axios.get('/apis/auths/check-token', config);

    return { userData, accessToken, refreshTokenHashIdx };
  } catch (err) {
    removeToken();
    throw err;
  }
}

// 로그아웃 시 토큰 제거
export async function removeToken() {
  try {
    await axios.delete('/apis/auths');
  } catch (err) {
    console.error(err);
  }
}
```

✅ **JWT를 검증하여 만료된 경우 자동으로 로그아웃을 수행**합니다.

---

## 5. SSR에서 로그인 필요 페이지 보호
📂 **/client/lib/utils/ssrRequireAuthentication.ts**
```typescript
import { GetServerSidePropsContext } from 'next';
import { serialize } from 'cookie';
import { checkToken } from '@utils/auth';

const ssrRequireAuthentication =
  (gssp?: (ctx: GetServerSidePropsContext, userData: UserState) => unknown) =>
  async (ctx: GetServerSidePropsContext) => {
    try {
      const checkTokenRes = await checkToken(ctx.req.headers.cookie);

      if (!checkTokenRes?.userData.isLogin) {
        return {
          redirect: {
            destination: '/401',
          },
        };
      }

      return {
        props: { userData: checkTokenRes.userData },
      };
    } catch (err) {
      return {
        redirect: {
          destination: '/401',
        },
      };
    }
  };

export default ssrRequireAuthentication;
```

✅ **로그인이 필요한 페이지에 접근 시 SSR에서 토큰을 검증하고, 미인증 시 401 페이지로 리다이렉트**합니다.

---

## 6. 로그인, 로그인검증 API 구현
📂 **/server/src/lib/apis/auths.ts**
```typescript
import { Router } from 'express';
import token from '@utils/jwt';
import { asyncErrorHandler } from '@middlewares/errorHandler';

const router = Router();

// 로그인
router.post(
  '/login',
  asyncErrorHandler(async (req, res) => {
    const { id, pw } = req.body;

    // mysql 회원정보 조회 -> 결과값 userRes로 가정

    if (userRes[0].length === 0) {
      return res.status(401).json({ message: '회원정보가 존재하지 않습니다.' });
    }

    const userData = userRes[0][0];
    const accessToken = token.access(userData.idx);
    const refreshToken = token.refresh(userData.idx);

    // refreshTokend의 경우 DB 저장 후 insert id 값을 암호화(refreshTokenHashIdx 변수사용) 하여 cookie에 저장

    res.cookie('accessToken', accessToken, { 
        httpOnly: true, 
        maxAge: 1000 * 60 * 15, // 15분 
    });
    rres.cookie('refreshTokenHashIdx', refreshTokenHashIdx, { 
        httpOnly: true, 
        maxAge: 1000 * 60 * 60 * 24, // 1일 
    });
    res.json({ userData });
  })
);

// 검증
router.get(
  '/check-token',
  asyncErrorHandler(async (req, res) => {
    const accessToken = req.cookies.accessToken;
    const refreshTokenHashIdx = req.cookies.refreshTokenHashIdx;

    if (!accessToken && !refreshTokenHashIdx) {
      return res.json({});
    }

    // accessToken 검증
    let userIdx = 0;
    const verifiedAccessToken = token.check(accessToken, 'access');
    if (verifiedAccessToken) {
      userIdx = verifiedAccessToken.userIdx;
    }

    // accessToken 검증안될경우 refreshToken 검증
    if (!userIdx) {
        // 암호화된 refreshToken PK로 refreshToken 조회 -> 결과값 refreshTokenRes로 가정
      if (refreshTokenRes[0].length === 0) {
        return res.status(401).json({ message: '유효하지 않은 토큰입니다.' });
      }

      const refreshToken = refreshTokenRes[0][0].refreshToken;
      const verifiedRefreshToken = token.check(refreshToken, 'refresh');
      if (!verifiedRefreshToken) {
        return res.status(401).json({ message: '유효하지 않은 토큰입니다.' });
      }
      userIdx = verifiedRefreshToken.userIdx;
    }

    if (!userIdx) {
      return res.status(401).json({ message: '유효하지 않은 사용자입니다.' });
    }

    // 토큰 검증하여 얻은 user PK로 유저 정보 DB 검색 결과값 -> userDataRes로 가정
    if (userDataRes[0].length === 0) {
      return res.status(404).json({ message: '사용자 정보를 찾을 수 없습니다.' });
    }

    // 로그인 되어있는경우 토큰 갱신
    const userData = userDataRes[0][0];
    const newAccessToken = token.access(userIdx);
    const newRefreshToken = token.refresh(userIdx);

    // refreshToken DB UPDATE

    res.cookie('accessToken', newAccessToken, { httpOnly: true, maxAge: 900000 });
    res.cookie('refreshTokenHashIdx', newRefreshTokenHashIdx, {
      maxAge: 1000 * 60 * 60 * 24, // 1일
      httpOnly: true
    });
    res.json({ userData, accessToken: newAccessToken, refreshTokenHashIdx });
  })
);
```

✅ **사용자 인증 후 JWT를 발급하고, Access Token과 Refresh Token을 각각 쿠키, DB에 저장**합니다.

---

## 7. JWT 발급 및 검증
📂 **/server/src/lib/utils/jwt.ts**
```typescript
import jwt from 'jsonwebtoken';

const ACCESS_SECRET = process.env.ACCESS_TOKEN_SECRET;
const REFRESH_SECRET = process.env.REFRESH_TOKEN_SECRET;

const token = {
  access: (userIdx: number) => jwt.sign({ userIdx }, ACCESS_SECRET, { expiresIn: '15m' }),
  refresh: (userIdx: number) => jwt.sign({ userIdx }, REFRESH_SECRET, { expiresIn: '1d' }),
  check: (tokenStr: string, type: 'access' | 'refresh') => {
    try {
      const secret = type === 'access' ? ACCESS_SECRET : REFRESH_SECRET;
      return jwt.verify(tokenStr, secret);
    } catch (error) {
      return null;
    }
  }
};

export default token;
```

✅ **JWT를 발급하고 유효성 검사를 수행하는 유틸리티 함수**입니다.


Next.js + JWT + Axios 로그인 및 로그인유지

# Next.js + Redux Toolkit으로 모달 상태 관리하기

Next.js에서 Redux Toolkit을 사용하여 글로벌 모달 상태를 관리하는 방법을 정리합니다. 이번 포스트에서는 **Redux Toolkit을 활용하여 모달을 중앙에서 제어하는 방식**을 구현합니다.

## 프로젝트 구조

```plaintext
/redux
  ├── store.ts
  ├── hooks.ts
  └── slices
      ├── index.ts
      └── modal.ts
/components
  ├── ModalContainer.tsx
  └── modals
      ├── LoginModal.tsx
      ├── SignUpModal.tsx
      └── AddImageModal.tsx
/pages
  └── _app.tsx
@types
  └── index.d.tsx
```
---

## 1. 모달 타입

### `index.d.ts`

```typescript
interface ModalState {
  type: string;
  props?: object;
}
```

---

## 2. `rootReducer` 설정

Redux의 `combineReducers`를 이용해 rootReducer를 생성합니다.

### `index.ts`
```typescript
import { combineReducers, UnknownAction } from '@reduxjs/toolkit';
import modal from '@redux/slices/modal';

export interface CombinedSliceState {
  modal: ModalState;
}

export default function rootReducer(
  state: CombinedSliceState,
  action: UnknownAction,
) {
  switch (action.type) {
    default: {
      const combinedReducer = combineReducers({
        modal,
      });
      return combinedReducer(state, action);
    }
  }
}
```

이제 `modal` 상태가 Redux Store에서 관리됩니다.

---

## 3. Redux Store 설정

Redux Store를 설정하여 전역 상태를 관리할 준비를 합니다.

### `store.ts`
```typescript
import { configureStore, Reducer } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';

import rootReducer, { CombinedSliceState } from '@redux/slices/index';

const createStore = () => {
  return configureStore({
    reducer: rootReducer as Reducer<CombinedSliceState>,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: false, // props로 callback fn을 전달해야 하는경우 대비
      }),
  });
};

const store = createStore();
const wrapper = createWrapper(createStore);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default wrapper;
```

Redux Store를 `configureStore`를 이용해 생성하며, Next.js에서 사용하기 위해 `next-redux-wrapper`를 적용합니다.

---

## 4. Redux Hooks 설정

React에서 Redux 상태를 쉽게 사용할 수 있도록 **커스텀 훅**을 생성합니다.

### `hooks.ts`
```typescript
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';

import type { RootState, AppDispatch } from '@redux/store';

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
```

이렇게 하면 `useAppDispatch`와 `useAppSelector`를 사용하여 타입 안전한 Redux 상태 관리를 할 수 있습니다.

---

## 5. 모달 상태 Slice 생성

모달 상태를 관리하는 `modalSlice.ts` 파일을 만듭니다.

### `modal.ts`
```typescript
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const initialState: ModalState = {
  type: '',
  props: {},
};

export const modalSlice = createSlice({
  name: 'modal',
  initialState,
  reducers: {
    openModal: (state, action: PayloadAction<ModalState>) => {
      const { type, props } = action.payload;
      state.type = type;
      state.props = props;
    },
    closeModal: (): ModalState => {
      return initialState;
    },
  },
});

export const { openModal, closeModal } = modalSlice.actions;
export default modalSlice.reducer;
```

- `openModal`: 모달을 열고 모달의 타입과 props를 설정
- `closeModal`: 모달을 닫고 초기 상태로 변경

---

## 6. `ModalContainer` 컴포넌트 생성

`ModalContainer`는 전역적으로 모달을 관리하는 역할을 합니다.

### `ModalContainer.tsx`
```typescript
import styled from 'styled-components';
import Image from 'next/image';
import useModal from '@hooks/useModal';
import { useAppSelector } from '@redux/hooks';

import xBtn from '@public/images/x_btn.png'; // x버튼 이미지
import LoginModal from '@components/modals/LoginModal';
import SignUpModal from '@components/modals/SignUpModal';
import AddImageModal from '@components/modals/AddImageModal';

const MODAL_MAP: Record<string, ({ ...props }) => JSX.Element> = {
  login: LoginModal,
  signUp: SignUpModal,
  addImage: AddImageModal,
};

export default function ModalContainer() {
  const { closeModal } = useModal();
  const { type, props } = useAppSelector((store) => store.modal);

  const Modal = MODAL_MAP[type];
  if (!type || !Modal) return null; // 모달정보 없을경우 출력하지 않음

  return (
    <>
      <ModalContainerSt>
        <XBtnSt onClick={closeModal}>
          <Image src={xBtn} alt="close button" />
        </XBtnSt>
        <Modal {...props} />
      </ModalContainerSt>
      <ModalBackgroundSt onClick={closeModal} />
    </>
  );
}
```

---

## 7. `_app.tsx`에서 Redux 적용

Next.js에서 Redux Provider와 ModalContainer를 적용합니다.

### `_app.tsx`
```typescript
import type { AppProps } from 'next/app';
import { Provider } from 'react-redux';
import wrapper from '@redux/store';
import ModalContainer from '@components/ModalContainer';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={wrapper.store}>
      <Component {...pageProps} />
      <ModalContainer />
    </Provider>
  );
}

export default wrapper.withRedux(MyApp);
```

이제 Redux Store가 Next.js 전역에 적용되며, `ModalContainer`가 모든 페이지에서 동작합니다.

---

## 마무리

`openModal({ type: 'login' })` 같은 호출을 통해 쉽게 모달을 띄울 수 있습니다.


Next.js + Redux Toolkit으로 모달 관리하기

# React Hooks 개념 및 활용

React Hooks는 함수형 컴포넌트에서 상태 관리 및 생명주기 기능을 사용할 수 있도록 도와주는 기능입니다. 이번 글에서는 자주 사용하는 React Hooks에 대해 살펴보겠습니다.

---

## 1. React Hooks란?

React 16.8에서 도입된 Hooks는 클래스형 컴포넌트 없이도 상태와 생명주기 기능을 사용할 수 있도록 해줍니다.

### React Hooks의 특징
- **클래스 없이 상태 관리 가능**
- **코드의 가독성과 재사용성이 향상**
- **함수형 컴포넌트에서 로직을 쉽게 공유 가능**

---

## 2. useState: 상태 관리

`useState`는 컴포넌트 내에서 상태를 관리할 때 사용됩니다.

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

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

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

export default Counter;
```

---

## 3. useEffect: 사이드 이펙트 관리

`useEffect`는 컴포넌트가 마운트, 업데이트, 언마운트될 때 특정 로직을 실행할 수 있도록 합니다.

```tsx
import { useState, useEffect } from "react";

const Timer: React.FC = () => {
  const [seconds, setSeconds] = useState<number>(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);
    
    return () => clearInterval(interval);
  }, []);

  return <p>경과 시간: {seconds}초</p>;
};

export default Timer;
```

---

## 4. useRef: DOM 요소 접근 및 값 유지

`useRef`는 DOM 요소에 접근하거나 컴포넌트가 리렌더링될 때 값을 유지할 때 사용됩니다.

```tsx
import { useRef, useEffect } from "react";

const InputFocus: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} placeholder="자동 포커스" />;
};

export default InputFocus;
```



React Hooks

자주 사용되는 리액트 훅 정리

# 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. 배열(Array) 관련 메서드

### 1) `push()` & `pop()`
- 배열의 끝에 요소를 추가(`push`)하거나 제거(`pop`)

```js
let fruits = ["Apple", "Banana"];
fruits.push("Cherry"); // ["Apple", "Banana", "Cherry"]
fruits.pop(); // ["Apple", "Banana"]
```

### 2) `shift()` & `unshift()`
- 배열의 앞에서 요소를 제거(`shift`)하거나 추가(`unshift`)

```js
let numbers = [2, 3, 4];
numbers.unshift(1); // [1, 2, 3, 4]
numbers.shift(); // [2, 3, 4]
```

### 3) `map()`
- 배열의 각 요소를 변환하여 새로운 배열 반환

```js
let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]
```

### 4) `filter()`
- 특정 조건을 만족하는 요소만 필터링하여 새로운 배열 반환

```js
let numbers = [10, 20, 30, 40];
let greaterThan20 = numbers.filter(num => num > 20);
console.log(greaterThan20); // [30, 40]
```

### 5) `reduce()`
- 배열을 순회하며 누적 연산 수행

```js
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10
```

### 6) `find()` & `findIndex()`
- 특정 조건을 만족하는 첫 번째 요소 찾기(`find`) 또는 인덱스 반환(`findIndex`)

```js
let users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];
let user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: "Bob" }
```

### 7) `some()` & `every()`
- 배열 요소 중 일부(`some`) 또는 전체(`every`)가 조건을 만족하는지 확인

```js
let numbers = [2, 4, 6, 8];
console.log(numbers.some(num => num > 5)); // true
console.log(numbers.every(num => num > 5)); // false
```

### 8) `sort()` & `reverse()`
- 배열 정렬(`sort`) 및 순서 뒤집기(`reverse`)

```js
let numbers = [4, 2, 8, 1];
numbers.sort((a, b) => a - b); // [1, 2, 4, 8]
numbers.reverse(); // [8, 4, 2, 1]
```

---

## 2. 객체(Object) 관련 메서드

### 1) `Object.keys()` & `Object.values()` & `Object.entries()`
- 객체의 키, 값, 키-값 쌍을 배열로 반환

```js
let person = { name: "Alice", age: 25 };
console.log(Object.keys(person)); // ["name", "age"]
console.log(Object.values(person)); // ["Alice", 25]
console.log(Object.entries(person)); // [["name", "Alice"], ["age", 25]]
```

### 2) `Object.assign()`
- 객체 복사 및 속성 병합

```js
let obj1 = { a: 1, b: 2 };
let obj2 = { b: 3, c: 4 };
let merged = Object.assign({}, obj1, obj2);
console.log(merged); // { a: 1, b: 3, c: 4 }
```

### 3) 객체를 배열화하여 순회하기
객체의 키-값 쌍을 배열로 변환하여 순회하는 방법입니다.

```js
let person = { name: "Alice", age: 25, city: "New York" };

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
```

출력 결과:
```plaintext
name: Alice
age: 25
city: New York
```

### 4) `JSON.stringify()` & `JSON.parse()`
- 객체를 JSON 문자열로 변환(`stringify`), JSON 문자열을 객체로 변환(`parse`)

```js
let person = { name: "Alice", age: 25 };
let jsonString = JSON.stringify(person);
console.log(jsonString); // '{"name":"Alice","age":25}'

let parsedObject = JSON.parse(jsonString);
console.log(parsedObject); // { name: "Alice", age: 25 }
```



배열, 객체관련 메서드

배열, 객체관련 자주사용하는 메서드 정리

# 자바스크립트 기본 개념

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

---

## 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("버튼 클릭됨!");
});
```



자바스크립트란?

자바스크립트란 무엇인가

# 자주 사용하는 `tsconfig.json` 속성 정리

타입스크립트 프로젝트에서 `tsconfig.json` 파일은 컴파일러의 동작을 정의하는 중요한 설정 파일입니다. 이 글에서는 `tsconfig.json`에서 자주 사용하는 속성들을 설명하고, 각각의 역할을 알아보겠습니다.

---

## 1. `compilerOptions`
`compilerOptions`는 타입스크립트의 컴파일러 설정을 정의하는 가장 중요한 속성입니다.

### 필수적으로 알아야 할 주요 옵션

#### 1) `target`
컴파일된 자바스크립트 코드가 어떤 ECMAScript 버전을 따를지 설정합니다.
```json
"target": "ES6"
```
- `ES5`, `ES6`(ES2015), `ES2017`, `ES2020` 등의 값을 가질 수 있으며, 최신 기능을 사용하고 싶다면 `ESNext`를 설정할 수도 있습니다.

#### 2) `module`
모듈 시스템을 지정합니다.
```json
"module": "CommonJS"
```
- 브라우저 환경에서는 `ESNext`, `ES6`
- Node.js 환경에서는 `CommonJS`를 주로 사용합니다.

#### 3) `strict`
타입스크립트의 엄격한 타입 체크 기능을 활성화합니다.
```json
"strict": true
```
- `true`로 설정하면 `noImplicitAny`, `strictNullChecks` 등 다양한 엄격한 타입 검사를 적용합니다.

#### 4) `allowJs`
자바스크립트 파일(`.js`)도 타입스크립트 프로젝트에서 사용할 수 있도록 허용합니다.
```json
"allowJs": true
```

#### 5) `outDir`
컴파일된 자바스크립트 파일을 저장할 디렉토리를 지정합니다.
```json
"outDir": "./dist"
```

#### 6) `rootDir`
컴파일할 소스 코드의 루트 디렉토리를 지정합니다.
```json
"rootDir": "./src"
```

#### 7) `noImplicitAny`
암시적으로 `any` 타입이 사용되는 것을 방지합니다.
```json
"noImplicitAny": true
```
- 미리 타입을 명확하게 지정하도록 강제하여 버그를 줄일 수 있습니다.

#### 8) `strictNullChecks`
`null`과 `undefined`를 엄격하게 체크합니다.
```json
"strictNullChecks": true
```

#### 9) `noUnusedLocals`, `noUnusedParameters`
사용하지 않는 변수나 매개변수가 있을 경우 경고를 발생시킵니다.
```json
"noUnusedLocals": true,
"noUnusedParameters": true
```

---

## 2. `include`와 `exclude`
### 1) `include`
컴파일할 파일 또는 디렉토리를 지정합니다.
```json
"include": ["src"]
```

### 2) `exclude`
컴파일에서 제외할 파일 또는 디렉토리를 지정합니다.
```json
"exclude": ["node_modules", "dist"]
```

---

## 3. `extends`
기본 `tsconfig.json`을 확장하여 사용합니다.
```json
"extends": "@tsconfig/recommended"
```

---

## 4. 예제 `tsconfig.json`
일반적인 타입스크립트 프로젝트에서 사용할 수 있는 `tsconfig.json` 예제입니다.

```json
{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "allowJs": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}
```


타입스크립트 설정

tsconfig.json에 대하여

# 타입스크립트

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

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



게시글 리스트