jennet1 님의 블로그

React [ 셋팅 ]

jennet1 — Thu, 3 Apr 2025 16:01:37 +0900

1. 프로젝트 기본 스타일 정리

✅ App.css 및 index.css → 기본 스타일 포함, 필요에 따라 수정 또는 삭제

✅ 로고 필요 없으면 삭제

2. Tailwind CSS 설치

아래 명령어를 실행하여 Tailwind CSS 및 관련 패키지 설치

npm install -D tailwindcss@3.4.17 postcss@8.4.31 autoprefixer@10.4.14

설정 파일 생성 (Tailwind 및 PostCSS 초기화)

- tailwind.config.js와 postcss.config.js 파일이 생성

npx tailwindcss init -p

⚙️ 3. Tailwind 설정 파일 수정 (tailwind.config.js)

주요 설정:

content 경로 수정하여 Tailwind가 적용될 파일 지정
theme.extend를 활용하여 추가적인 스타일 확장 가능

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 기본 스타일 적용 (index.css)

Tailwind CSS의 기본 스타일을 불러오기 위해 아래 코드 추가

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind가 정상적으로 적용되었는지 확인하기 위해, App.tsx에서 테스트 코드 추가

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded-lg shadow-md">
        <h1 className="text-2xl font-bold text-gray-800">Hello Tailwind!</h1>
        <p className="mt-2 text-gray-600">Welcome to your new React + Tailwind project</p>
      </div>
    </div>
  )
}

export default App

5. TypeScript 설정 (tsconfig.json 수정)

{
  "compilerOptions": {
    // TypeScript 컴파일러 옵션들
    "target": "ES2020",        // JavaScript 버전을 ES2020으로 지정
    "lib": ["ES2020", "DOM", "DOM.Iterable"],  // 사용할 라이브러리 정의
    "module": "ESNext",        // 모듈 시스템을 ESNext로 지정
    "jsx": "react-jsx",        // React JSX 문법 지원
    "strict": true,            // 엄격한 타입 체크 활성화
    "baseUrl": ".",            // 절대 경로 임포트의 기준점
    "paths": {                 // 경로 별칭 설정
      "@/*": ["src/*"]        // @/로 시작하는 임포트는 src/ 디렉토리에서 찾음
    }
  },
  "include": ["src"],         // TypeScript가 처리할 파일들
  "references": [{ "path": "./tsconfig.node.json" }]  // tsconfig.node.json 참조
}

Node 환경 설정을 위한 tsconfig.node.json 추가

{
  "compilerOptions": {
    "composite": true,         // 프로젝트 참조를 위한 설정
    "module": "ESNext",        // Node.js용 모듈 시스템
    "moduleResolution": "bundler",  // Vite와 같은 번들러 사용을 위한 설정
    "allowSyntheticDefaultImports": true  // default export가 없는 모듈도 import 가능
  },
  "include": ["vite.config.ts"]  // Vite 설정 파일만 포함
}

6. 서버 재시작 및 적용 확인

npm run dev

브랜치 작업하기

jennet1 — Wed, 5 Mar 2025 22:36:59 +0900

1. 브랜치 생성 및 이동

먼저 메인 브랜치에서 새로운 브랜치를 생성하고 그 브랜치로 이동합니다.

bash

복사

git checkout main # 메인 브랜치로 이동 (현재 작업중인 브랜치가 메인이어야 합니다) git pull origin main # 메인 브랜치를 최신 상태로 업데이트 git checkout -b scroll-menu # 새로운 브랜치 생성 후 이동

2. 브랜치에서 개발 후 커밋

새로 생성한 브랜치에서 개발 작업을 하고, 변경 사항을 커밋합니다.

bash

복사

# 변경된 파일을 스테이징 git add . # 모든 파일을 추가 # 또는 특정 파일만 추가 # git add <file-name> # 커밋을 작성 git commit -m "Add scroll menu feature" # 커밋 메시지 작성

3. 로컬 브랜치 푸시

로컬에서 작업한 내용을 원격 저장소에 푸시합니다.

bash

복사

git push origin scroll-menu # scroll-menu 브랜치를 원격 저장소에 푸시

4. 메인 브랜치로 이동 후 머지

브랜치에서 작업이 완료되면 메인 브랜치로 돌아가서 해당 브랜치를 머지합니다.

bash

복사

git checkout main # 메인 브랜치로 이동 git pull origin main # 메인 브랜치를 최신 상태로 업데이트 git merge scroll-menu # scroll-menu 브랜치를 메인 브랜치에 머지

5. 머지 후 메인 브랜치 푸시

메인 브랜치에서 머지 후, 변경 사항을 원격 저장소에 푸시합니다.

bash

복사

git push origin main # 메인 브랜치에 푸시

6. 브랜치 삭제 (로컬과 원격)

작업이 끝난 후, 더 이상 필요하지 않은 브랜치를 삭제합니다.

로컬 브랜치 삭제:

bash

복사

git branch -d scroll-menu # 로컬 브랜치 삭제 (병합된 브랜치만 삭제 가능) # 병합되지 않은 브랜치를 강제로 삭제하려면 아래 명령어 사용 # git branch -D scroll-menu

원격 브랜치 삭제:

bash

복사

git push origin --delete scroll-menu # 원격 저장소에서 브랜치 삭제

전체 흐름 요약:

git checkout main
git pull origin main
git checkout -b scroll-menu
개발 작업 후 git add .
git commit -m "Add scroll menu"
git push origin scroll-menu
git checkout main
git pull origin main
git merge scroll-menu
git push origin main
git branch -d scroll-menu (로컬 삭제)
git push origin --delete scroll-menu (원격 삭제)

React [ Vite]

jennet1 — Thu, 6 Feb 2025 14:17:53 +0900

React (CRA) vs. Vite 비교

React를 개발할 때 일반적으로 create-react-app (CRA)과 Vite 두 가지 방식이 많이 사용됨.

두 방법 모두 React 앱을 설정하지만 차이점이 존재

1. 기본 개념

항목	Create React App (CRA)	Vite
개발 서버	Webpack 기반의 개발 서버 사용	ES 모듈을 활용한 빠른 개발 서버
번들러	Webpack 사용	ESBuild (Go로 작성된 초고속 번들러) 사용
핫 리로딩 (HMR)	느림	매우 빠름
빌드 속도	느림	빠름
환경설정	자동 설정 (Webpack)	간단한 설정 (vite.config.js)
SSR 지원	직접 설정 필요	기본적으로 지원
추천 상황	기존 CRA 프로젝트 유지, 익숙한 방식 선호	최신 React 개발, 빠른 빌드 속도 필요

2. 설치방법

(1) CRA로 설치

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

(2) Vite로 설치

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

3. 어떤 방식을 선택할까?

✅ CRA를 선택할 경우

기존 프로젝트가 CRA로 되어 있다면 유지하는 것이 좋음.
Webpack 설정을 커스텀할 필요가 있을 경우.

✅ Vite를 선택할 경우

빠른 개발 속도와 빌드 속도를 원한다면 Vite를 선택하는 것이 유리.
최신 React 프로젝트를 시작한다면 Vite가 훨씬 빠르고 효율적.
서버 사이드 렌더링(SSR) 및 코드 분할을 고려한다면 Vite가 더 유리.

React [ 컴포넌트 ]

jennet1 — Mon, 6 Jan 2025 02:16:18 +0900

리액트 컴포넌트란?

리액트(React)는 사용자 인터페이스(UI)를 구성하기 위해 컴포넌트(Component) 라는 개념을 사용합니다. 컴포넌트는 재사용 가능한 코드 조각으로 UI를 독립적이고 작은 단위로 나누어 관리할 수 있게 합니다. 이로 인해 유지보수성과 가독성이 높아지며 코드 재사용이 용이해집니다.

컴포넌트의 기본 개념

독립성: 컴포넌트는 서로 독립적으로 동작하며 다른 컴포넌트와 결합하여 UI를 구성한다.
재사용성: 한 번 작성한 컴포넌트를 다양한 곳에서 재사용할 수 있다.
구조화: UI를 계층적으로 구조화하여 개발 및 유지보수를 용이하게 한다.

함수형 컴포넌트(Function Component)
클래스형 컴포넌트(Class Component)

리액트 파일 구조

/components: 컴포넌트 파일들을 모아 두는 폴더입니다.
App.js: 애플리케이션의 루트 컴포넌트입니다.
index.js: 리액트 애플리케이션의 진입점(entry point)으로 App 컴포넌트를 브라우저에 렌더링합니다.

/src
  |-- /components
  |     |-- Header.js
  |     |-- Footer.js
  |     |-- World.js
  |
  |-- App.js
  |-- index.js

함수형 컴포넌트 [ 자주씀 ]

더 간결하며 React Hooks를 사용하여 상태(state)와 생명주기(lifecycle)를 관리할 수 있습니다.

단축 : rfc

import React from 'react';

function Header() {
  return (
    <header>
      <h1>Welcome to My Website</h1>
    </header>
  );
}

export default Header;

function 키워드로 컴포넌트를 정의합니다.
return문 안에서 JSX(JavaScript XML)를 사용하여 UI를 정의합니다.
export default를 통해 다른 파일에서 이 컴포넌트를 사용할 수 있습니다

클래스형 컴포넌트

상태(state)와 생명주기 메서드(lifecycle methods)를 기본적으로 포함합니다

단축 : rcc

import React, { Component } from 'react';

class Footer extends Component {
  render() {
    return (
      <footer>
        <p>Copyright 2025, All Rights Reserved</p>
      </footer>
    );
  }
}

export default Footer;

주요 포인트

Component 클래스를 상속받아 정의합니다.
render() 메서드 안에서 JSX를 반환합니다.

컴포넌트 만들기

폴더 구조

/src
  |-- /components
  |     |-- Header.js
  |     |-- Welcome.js
  |     |-- World.js
  |
  |-- App.js
  |-- index.js

App.js

import './App.css';
import Hello from './component/Hello';
import Welcome from './component/Welcome';

function App() {
  return (
    <div className="App">
      <Hello />
      <Welcome />
    </div>
  );
}

export default App;

component/World

export default function world() {
  return <h3>World</h3>
}

component/Welcome

export default function Welcome() {
    return <p>Welcome</p>
}

component/Hello

// const Hello = () => {
//     <p>Hello</p>
// };
import World from './World';

export default function Hello() {
   return (
    <div>
      <h1>hello</h1>
      <World/>
    </div>

   );
}

문자열 다루기

jennet1 — Fri, 3 Jan 2025 12:25:56 +0900

1. 문자열 길이 구하기

package Pool;

public class ch01 {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		
		// 문자열 길이 
		String str = "Hello world";
		System.out.println(str.length());
		
	}

}

출력

2. 문자열 비교 (같은지 다른지)

equals() : 두 문자열이 정확히 동일한지 비교
equalsIgnoreCase() : 대소문자 구분 없이 비교

package Pool;

public class ch01 {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		String str1 = "Hello";
		String str2 = "hello";
		
		System.out.println(str1.equals(str2)); // 두 문자가 정확히 동일한지 
		System.out.println(str1.equalsIgnoreCase(str2)); // 대소문자 없이 비교
		
	}

}

출력

false
true

3. 부분 문자열 추출 (Substring)

package Pool;

public class ch01 {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		// 문자열 추출하기
		String str = "Hello World";
		String subStr = str.substring(7); // 7번째 부터 끝까지
		System.out.println(subStr);
		
		String subStr2 = str.substring(0,5); // 0 부터 5까지
		System.out.println(subStr2);	
	}

}

출력

orld
Hello

4. 문자열 검색 (찾기)

package Pool;

public class ch01 {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		String str = "Hello World";
		
        System.out.println(str.indexOf("o"));      // 4 (첫 번째 o의 위치)
        System.out.println(str.lastIndexOf("o"));  // 8 (마지막 o의 위치)
        System.out.println(str.contains("World")); // true (포함됨)
        System.out.println(str.contains("level"));   // false
	}

}

출력

4
7
true
false

5. 모든 문자열 대소문자로 변환

package Pool;

public class ch01 {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		String str = "Hello World";
		
        System.out.println(str.toLowerCase());  // hello, world!
        System.out.println(str.toUpperCase());  // HELLO, WORLD!
	}

}

출력

hello world
HELLO WORLD

6. 문자열 빈값 확인

package pratic01;

public class Main5 {
	
	public static void main(String[] args) {
		String str = "";
		System.out.println(str.isEmpty());
	}

}

출력

true

6. 특정 인덱스 문자 반환

package pratic01;

public class Main5 {
	
	public static void main(String[] args) {
		String str = "Hello";
		System.out.println(str.charAt(2));
	}

}

출력

7. 문자열 바꾸기

package pratic01;

public class Main5 {
	
	public static void main(String[] args) {
		String str = "Hello, World!";
		System.out.println(str.replace('o', 'a'));  // 출력: "Hella, Warld!"
		System.out.println(str.replace("World", "Java")); // 출력: "Hello, Java!"
	}

}

출력

Hella, Warld!
Hello, Java!

7. 문자열 분리

package pratic01;

public class Main5 {
	
	public static void main(String[] args) {
		String str = "Apple,Banana,Cherry";
		String[] fruits = str.split(",");
		for (String fruit : fruits) {
		    System.out.println(fruit);
		}
	}

}

출력

Apple
Banana
Cherry

8. 문자열 결합

package pratic01;

public class Main5 {

	public static void main(String[] args) {
		String[] fruits = { "Apple", "Banana", "Cherry" };
		String result = String.join(", ", fruits);
		System.out.println(result); // 출력: "Apple, Banana, Cherry"
	}

}

출력

Apple, Banana, Cherry

8. 문자열 배열로 변환

package pratic01;

public class Main5 {

	public static void main(String[] args) {
		String str = "Hello";
		char[] chars = str.toCharArray();
		for (char c : chars) {
		    System.out.print(c + " "); // 출력: H e l l o
		}
	}

}

출력

H e l l o

TeamMatch 프로젝트 문제해결 3[ 세션과 쿠키 ]

jennet1 — Sun, 29 Dec 2024 20:11:42 +0900

1. 문제 상황

배포 환경에서 세션 관리와 쿠키 설정에 대한 문제로 어려움을 겪었습니다. 로컬에서 개발할 때는 같은 도메인에서 HTTP로 통신을 하여 문제가 없었지만 https 배포 후 문제가 발생했습니다. 로그인 후 세션 값이 덮어지는 현상과 쿠키가 제대로 저장되지 않는 문제로 인해 며칠간 고생했습니다. 이 문제를 해결하는 과정에서 세션 관리와 쿠키 설정에 대한 더 깊은 이해를 얻을 수 있었습니다.

서버쪽 use 설정

// 세션 설정
app.use(
  session({
    secret: process.env.SESSION_SECRET, // 세션 암호화 키
    resave: true,
    saveUninitialized: false,
    cookie: {
      httpOnly: true,
      sameSite: "None",
      // secure: true, // 개발 중에는 false로 설정 (HTTPS에서만 true)
      secure: true, // 개발 중에는 false로 설정 (HTTPS에서만 true)
      maxAge: 60 * 60 * 1000, // 세션 만료 1시간
    },
  })
);

2. 배포 과정

리액트: https://www.netlify.com/에 배포.
노드 서버: AWS EC2 인스턴스에 배포.
두 도메인이 달라서 크로스 도메인 설정과 CORS 설정을 했고 https 통신을 적용하기 위해 SSL 설정을 진행했습니다.
두 클라이언트와 서버 간의 https 통신이 완료되었지만 세션과 관련된 문제는 계속 발생했습니다.

3. 문제 발생

로그인 후 사용자의 세션 값이 계속 덮어지는 문제가 발생했습니다. API 호출이 제대로 처리되지 않았고 쿠키가 저장되지 않는 문제를 발견했습니다. 이를 해결하기 위해 다양한 방법을 시도했습니다.

4. 나의 시도

크로스 도메인 설정: CORS 설정에서 origin 값을 내 클라이언트 도메인으로 수정했지만 문제가 해결되지 않았습니다.
서버와 클라이언트 도메인 차이: 클라이언트와 서버의 도메인이 다르다는 사실이 문제의 원인일 수 있겠다고 생각했지만, 크로스 도메인 설정을 맞춰서 진행한 코드와 동일한 설정을 적용했음에도 불구하고 문제는 지속되었습니다.
EC2 인스턴스에서 리액트와 노드를 같이 배포: 두 도메인이 동일한 인스턴스 내에서 작동하도록 배포를 변경했지만 여전히 문제가 해결되지 않았습니다.

// CORS 설정
app.use(
  cors({
    origin: origin, // 요청을 허용할 클라이언트 도메인
    credentials: true,
    methods: ["GET", "POST", "UPDATE", "PATCH"], // 허용할 HTTP 메서드
  })
);

추가 시도: nginx 설정

nginx 설정: nginx에서 크로스 도메인 관련 헤더 설정을 추가했으나, 여전히 문제가 해결되지 않았습니다. 이를 통해, nginx에서 설정을 변경하는 것만으로는 세션 문제를 해결할 수 없다는 것을 알게 되었습니다.

5. 진행 중 절망적인 상황

배포 후 3일이 지난 시점에서 도메인 설정이나 https 설정 자체가 문제였을까 고민했으며 도메인을 사용한 배포가 잘못된 선택이었을지 의문을 가졌습니다. 결국 배포를 포기할까 생각하였습니다.

6. 해결의 실마리

로컬 환경에서 테스트를 진행하면서 세션과 쿠키가 제대로 작동하는 것을 확인한 후 로컬에서 http 통신 설정을 그대로 서버에 적용해봤습니다. 서버에서 pull을 받고 실행했더니 배포한 서버에서 세션과 쿠키가 정상적으로 작동하는 것을 확인했습니다.

클라이언트 use 설정

// 세션 설정
app.use(
  session({
    secret: process.env.SESSION_SECRET, // 세션 암호화 키
    resave: true,
    saveUninitialized: false,
    cookie: {
      httpOnly: true,
      sameSite: "Lax",
      // secure: true, // 개발 중에는 false로 설정 (HTTPS에서만 true)
      secure: false, // 개발 중에는 false로 설정 (HTTPS에서만 true)
      maxAge: 60 * 60 * 1000, // 세션 만료 1시간
    },
  })
);

7. 설정 차이

배포한 서버는 https 통신을 사용하고 있었기 때문에 secure 옵션을 true로 설정한 상태에서 문제를 해결하고자 했습니다. 그러나 로컬에서는 http 통신을 사용하고 있기 때문에 secure를 false로 설정하고 배포했던 설정이 달랐지만 같은 설정을 통해 문제를 해결하였습니다. 로컬과 배포환경 secure false 로 설정함.

8. 이유 불분명

현재로서는 정확한 이유를 파악하기 어렵습니다. 하지만 이 과정에서 https 설정과 관련된 세션 및 쿠키 관리의 중요성을 다시 한 번 인식하게 되었습니다. secure 값을 false 로 바꾸니 원래 로컬에서 처럼 정확하게 되었던게 세션과 관련된 개발과정이 조금 미숙했던점 그리고 로컬에서도 이점을 신경쓰지않고 개발했던점이 원인이 아닐까 생각합니다.

결론

세션과 쿠키 관리는 http와 https 간의 설정 차이로 인해 문제가 발생할 수 있습니다. 배포 환경에서 https 통신을 사용하고 있을 때, **secure: true**로 설정해주어야 쿠키가 정상적으로 동작합니다.
하지만 제프로젝트에서는 false 로 설정해야 동작합니다. 이거에 대한 원인은 아직까지 파악하지 못함
CORS 설정 및 크로스 도메인 처리는 중요하지만, 이 문제에서처럼 세션 관리와 쿠키 설정이 더 중요한 핵심 요소일 수 있습니다.
향후 로그인 관련 프로젝트에서는 세션과 쿠키 관리 방식을 다양하게 테스트하고 배포 환경에서의 통신 방식에 맞는 설정을 점검할 필요가 있습니다.

교훈

로컬과 배포 환경에서의 설정 차이를 면밀히 확인해야 합니다.
https에서 secure: true 설정을 반드시 적용해야 하며, 로컬에서는 http로 테스트를 진행할 때는 secure: false를 설정해야 합니다.
세션과 쿠키 문제는 단순히 CORS 설정만으로 해결되지 않으며 보안 설정이 중요한 역할을 한다는 점을 배웠습니다.

추가적으로 nginx나 서버 설정이 아닌 세션 및 쿠키 설정에서의 환경 차이가 문제의 원인이었음을 깨달았습니다.

TeamMatch 프로젝트 문제해결 2[ 소셜로그인 ]

jennet1 — Sun, 29 Dec 2024 19:32:41 +0900

문제 해결 과정: API 토큰을 받아오지 못한 문제

문제 설명

클라이언트에서 카카오 로그인 API 요청을 보냈지만 서버에서 토큰 값을 받아오지 못하는 문제가 발생했습니다.

해결 전:

클라이언트에서 요청한 URI: http://localHost:8000/user/kakao/login

해결 후:

클라이언트에서 요청한 URI를 http://127.0.0.1:8000/user/kakao/login으로 변경

원인 분석

클라이언트와 서버 간의 주소 불일치
localHost와 127.0.0.1은 동일한 주소를 가리키는 것으로 보일 수 있지만 실제론 다른 주소를 가르키는 것이었다.
- localHost: 로컬호스트 주소는 DNS 설정에 따라 다르게 해석될 수 있고 가끔은 크로스 도메인 요청(CORS) 문제나 보안 설정에 영향을 미칠 수 있다.

따라서, 클라이언트와 서버의 요청 주소가 동일하지 않으면 CORS 설정 또는 서버가 잘못된 도메인으로 요청을 처리하려고 할 수 있습니다. 이로 인해 토큰 값을 올바르게 받아오지 못한 것입니다.

해결 방법

클라이언트와 서버의 요청 주소를 일치시켜야 합니다. 이를 통해 서버가 클라이언트의 요청을 정확히 인식하고 올바르게 응답할 수 있도록 합니다.

추가적인 고려 사항:

CORS 설정 확인: 로컬 환경에서 작업 시 클라이언트와 서버의 주소가 다르면 CORS 오류가 발생할 수 있습니다. 127.0.0.1로 설정을 일치시키면 이 문제를 방지할 수 있습니다.
서버와 클라이언트 주소 일치: 프로젝트에서 다른 주소를 사용할 경우, 서버와 클라이언트 모두 동일한 주소를 사용하도록 설정하는 것이 중요합니다. 이를 통해 일관된 환경에서 API 호출을 할 수 있습니다.

결론

클라이언트와 서버의 요청 주소가 일치하지 않으면 토큰 값을 받아올 수 없습니다. 따라서, 클라이언트와 서버에서 동일한 주소를 사용하도록 설정하여 문제를 해결했습니다.

http://127.0.0.1:8000/user/kakao/login

TeamMatch 프로젝트 문제해결 1[ 밸런스 알고리즘 ]

jennet1 — Sun, 29 Dec 2024 19:11:11 +0900

밸런스 알고리즘 구현해보기

해당 프로젝트는 리그 오브 레전드 에서 팀 밸런스를 맞추기 위한 알고리즘을 구현한 것입니다. 이 게임에서는 각 팀에 특정 포지션(탑, 정글, 미드, 원딜, 서폿)이 존재하며 플레이어의 랭크 점수(RankScore) 를 기준으로 두 팀을 최대한 균등하게 나누는 것이 중요합니다.

밸런스를 맞추기 위해 다음 요소들을 고려했습니다:

포지션 균형: 각 팀에 모든 포지션이 골고루 배치되도록 함.
점수 차 최소화: 두 팀 간의 총 점수 차이를 최소화하여 게임 밸런스를 유지.
랜덤성과 공정성: 플레이어를 랜덤으로 섞어 배정 과정에서의 편향성을 줄임

랭크?

해당 게임에는 총 10단계의 랭크 시스템이 존재한다.
각 랭크는 단계별로 구성되며 4단계 부터 1단계 까지 존재한다. 예를들어 아이언1단계에서 특정 LP 조건을 만족하면 다음 단계인 브론즈 4단계 티어로 승급하는 시스템을 갖추고 있다.
팀프로젝트 때 얘기가 나온건 각 랭크별로 우리만의 알고리즘을 통해 랭크별로 점수를 부여하였다.

밸런스 알고리즘을 구현하기 위해 엑셀로 각 티어단계별 점수를 임의적으로 적용

라인?

탑/정글/미드/원딜/서폿 총 5개의 라인이 존재하며 포지션별로 각자의 역할과 수행목표가 존재함
게임에서의 포지션 중요성은 티어가 높은 유저일수록 정글의 실력이 크면 게임이 초반에 무너질 가능성이 존재
해당 포지션별 중요도를 정하고 각 특정 포지션의 경우 가중치 점수를 적용하였습니다.
다이아티어 4단계 유저가 탑일경우 34 + 3 이라는 점수를 부여받아서 총 해당 유저의 점수는 37점이 되게 된다.

데이터 전달

프론트는 포지션과 팀원을 10명을 배치하여 서버쪽으로 다음과 같이 데이터를 넘겨주도록 하였다.

{
  "mode": "blance",
  "players": [
    { "id": 1, "gameName": "test1", "RankScore": 10, "position": "top" },
    { "id": 2, "gameName": "test2", "RankScore": 15, "position": "top" },
    { "id": 3, "gameName": "test3", "RankScore": 20, "position": "jug" },
    { "id": 4, "gameName": "test4", "RankScore": 18, "position": "jug" },
    { "id": 5, "gameName": "test5", "RankScore": 12, "position": "mid" },
    { "id": 6, "gameName": "test6", "RankScore": 22, "position": "mid" },
    { "id": 7, "gameName": "test7", "RankScore": 14, "position": "ad" },
    { "id": 8, "gameName": "test8", "RankScore": 17, "position": "ad" },
    { "id": 9, "gameName": "test9", "RankScore": 13, "position": "sup" },
    { "id": 10, "gameName": "test10", "RankScore": 19, "position": "sup" }
  ]
}

문제: 플레이어 데이터를 기반으로 팀을 구성하려 할 때, 각 팀에 동일한 포지션이 2개 이상 들어가면 안 된다.
조건:
- 10명의 플레이어 데이터를 기준으로 팀을 5명씩 나눈다.
- 각 팀에는 탑, 정글, 미드, 원딜, 서폿 포지션이 1개씩만 존재해야 한다.
제약 사항: 포지션이 중복될 경우, 팀의 밸런스가 깨질 수 있다.

해결 방법에 대한 고민

첫 번째 고민: 무작위로 나누는 방식은 포지션 중복을 방지하기 어려움.
두 번째 고민: 데이터를 포지션별로 그룹화하여, 각 팀에 1명씩 배치하면 어떨까?

filter 를 사용해서 해당 포지션값에 해당하는 플레이어들만 묶어서 출력을 해보았다.
이렇게 하면 포지션이 순서대로 넘어오지 않더라도 포지션별로 그룹화를 진행할 수 있어서 좋았던거 같다.

  // 포지션별로 데이터를 그룹화
const groupedPlayers = {
  top: players.filter(player => player.position === "top"),
  jug: players.filter(player => player.position === "jug"),
  mid: players.filter(player => player.position === "mid"),
  ad: players.filter(player => player.position === "ad"),
  sup: players.filter(player => player.position === "sup")
};

console.log(groupedPlayers);

해당 그룹에서 포지션별로 각 팀에서 한명씩 가져가면 해당 배열에서 제거되고 각 팀별로 5명씩 구성이 된다.
read팀에서 먼저 해당 포지션에 있는 유저 한명을 가져가면 그룹에서 두명에서 한명으로 바뀌게 되는 것이다.
블루쪽은 자연스럽게 남은 한명을 가져가게 된다.

// 랜덤으로 팀 구성 함수
function getRandomPlayer(positionGroup) {
  const randomIndex = Math.floor(Math.random() * positionGroup.length);
  return positionGroup.splice(randomIndex, 1)[0]; // 선택된 플레이어 반환 후 배열에서 제거
}

// 팀 구성
const redTeam = [
  getRandomPlayer(groupedPlayers.top),
  getRandomPlayer(groupedPlayers.jug),
  getRandomPlayer(groupedPlayers.mid),
  getRandomPlayer(groupedPlayers.ad),
  getRandomPlayer(groupedPlayers.sup)
];

const blueTeam = [
  getRandomPlayer(groupedPlayers.top),
  getRandomPlayer(groupedPlayers.jug),
  getRandomPlayer(groupedPlayers.mid),
  getRandomPlayer(groupedPlayers.ad),
  getRandomPlayer(groupedPlayers.sup)
];

어려웠던 점

데이터의 랜덤성을 유지하는 것이 어렵다
- 초기엔 포지션을 랜덤으로 배치하려고 했지만, 동일한 포지션이 겹치지 않게 하는 제약 때문에 생각보다 복잡해졌다.

최종 밸런스 매칭 코드

// 밸런스 섞기
const balanceTeams = (players) => {
  // 포지션별 점수 -> 정글-미드-원딜-탑-서폿
  const positionPoints = { jug: 5, mid: 4, ad: 3, top: 2, sup: 1 };

  // 포지션별 그룹화
  const positionPlayers = {
    jug: [],
    mid: [],
    ad: [],
    top: [],
    sup: [],
  };

  // 선수 데이터 새로 복사하고 랜덤 섞기
  const shuffledPlayers = [...players]; // 원본을 변경하지 않기 위해 복사
  shufflePlayers(shuffledPlayers);

  // 복사된 선수들을 포지션별로 분류
  shuffledPlayers.forEach((player) => {
    positionPlayers[player.position].push(player);
  });

  // 각 포지션별로 점수 추가
  for (const position of Object.keys(positionPoints)) {
    const playersInPosition = positionPlayers[position];

    // rankScore가 20 이상인 선수만 점수 추가
    playersInPosition.forEach((player) => {
      if (player.RankScore >= 20) {
        player.RankScore += positionPoints[position];
      }
    });
  }

  // 점수 기준으로 내림차순 정렬
  shuffledPlayers.sort((a, b) => b.RankScore - a.RankScore);

  // 두 팀으로 균등 분배 (각 팀에 5명씩)
  const teams = [
    { players: [], totalRankScore: 0 },
    { players: [], totalRankScore: 0 },
  ];

  // 포지션 순서대로 팀에 분배
  const positionOrder = ["top", "jug", "mid", "ad", "sup"];

  // 각 포지션에서 한 명씩 배정
  positionOrder.forEach((position) => {
    const team1Player = positionPlayers[position].shift();
    const team2Player = positionPlayers[position].shift();

    // 점수가 적은 팀에 배정
    if (team1Player) {
      teams[0].players.push(team1Player);
      teams[0].totalRankScore += team1Player.RankScore;
    }
    if (team2Player) {
      teams[1].players.push(team2Player);
      teams[1].totalRankScore += team2Player.RankScore;
    }
  });

  // 나머지 선수들 균등 배정
  let remainingPlayers = [].concat(...Object.values(positionPlayers));
  remainingPlayers = shufflePlayers(remainingPlayers);

  // 남은 선수들을 순차적으로 팀에 추가
  remainingPlayers.forEach((player) => {
    if (teams[0].players.length < 5) {
      teams[0].players.push(player);
      teams[0].totalRankScore += player.RankScore;
    } else if (teams[1].players.length < 5) {
      teams[1].players.push(player);
      teams[1].totalRankScore += player.RankScore;
    }
  });

  // 클라이언트로 전달할 때 탑 -> 정글 -> 미드 -> 원딜 -> 서폿 순으로 정렬
  const sortPositionClient = (team) => {
    const positionOrder = ["top", "jug", "mid", "ad", "sup"];
    return positionOrder
      .map((position) => {
        return team.players.filter((player) => player.position === position);
      })
      .flat();
  };

  // 각 팀의 포지션 순서대로 정렬 후 전달
  const blueTeam = sortPositionClient(teams[0]);
  const redTeam = sortPositionClient(teams[1]);

  return {
    blueTeam: {
      players: blueTeam,
      totalRankScore: teams[0].totalRankScore,
    },
    redTeam: {
      players: redTeam,
      totalRankScore: teams[1].totalRankScore,
    },
  };
};
// 선수 랜덤 섞기
const shufflePlayers = (arr) => {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]]; // 요소를 교환
  }
  return arr;
};

응답데이터

{
    "message": "밸런스 팀 생성 완료",
    "redTeam": {
        "players": [
            {
                "id": 2,
                "gameName": "test2",
                "RankScore": 15,
                "position": "탑"
            },
            {
                "id": 4,
                "gameName": "test4",
                "RankScore": 18,
                "position": "정글"
            },
            {
                "id": 6,
                "gameName": "test6",
                "RankScore": 26,
                "position": "미드"
            },
            {
                "id": 8,
                "gameName": "test8",
                "RankScore": 17,
                "position": "원딜"
            },
            {
                "id": 10,
                "gameName": "test10",
                "RankScore": 19,
                "position": "서폿"
            }
        ],
        "totalRankScore": 95
    },
    "blueTeam": {
        "players": [
            {
                "id": 1,
                "gameName": "test1",
                "RankScore": 10,
                "position": "탑"
            },
            {
                "id": 3,
                "gameName": "test3",
                "RankScore": 25,
                "position": "정글"
            },
            {
                "id": 5,
                "gameName": "test5",
                "RankScore": 12,
                "position": "미드"
            },
            {
                "id": 7,
                "gameName": "test7",
                "RankScore": 14,
                "position": "원딜"
            },
            {
                "id": 9,
                "gameName": "test9",
                "RankScore": 13,
                "position": "서폿"
            }
        ],
        "totalRankScore": 74
    }
}

단계별 코드 분석

1. 포지션별 점수 가중치 부여

- 이 가중치는 팀 밸런스를 맞추기 위해 RankScore에 추가할 점수

const positionPoints = { jug: 5, mid: 4, ad: 3, top: 2, sup: 1 };

2. 플레이어 섞기 (shufflePlayers)

- 처음엔 팀을 무작위로 섞어주기 순서대로 나누거나 정렬할 경우 한팀에만 잘하는 유저들이 분포될 수 있음

const shuffledPlayers = [...players];
shufflePlayers(shuffledPlayers);

3. 포지션별 그룹화

- 포지션이 겹치지 않게 그룹화하기

shuffledPlayers.forEach((player) => {
  positionPlayers[player.position].push(player);
});

4. 포지션 순서대로 팀 배정

- 점수가 적은 팀에 우선적으로 배정하면서 두팀의 점수 차이를 최소화 하기

positionOrder.forEach((position) => {
  const team1Player = positionPlayers[position].shift();
  const team2Player = positionPlayers[position].shift();

  if (team1Player) {
    teams[0].players.push(team1Player);
    teams[0].totalRankScore += team1Player.RankScore;
  }
  if (team2Player) {
    teams[1].players.push(team2Player);
    teams[1].totalRankScore += team2Player.RankScore;
  }
});

5. 남은 선수 팀 배정

remainingPlayers.forEach((player) => {
  if (teams[0].players.length < 5) {
    teams[0].players.push(player);
    teams[0].totalRankScore += player.RankScore;
  } else if (teams[1].players.length < 5) {
    teams[1].players.push(player);
    teams[1].totalRankScore += player.RankScore;
  }
});

코드의 강점

점수 차이를 최소화: 플레이어 점수를 기준으로 균등 분배를 진행하여, 두 팀 간 점수 차이가 최대한 적도록 설계했습니다.
포지션 겹침 방지: 각 포지션에서 한 명씩 배정하여, 게임 밸런스를 해치지 않도록 했습니다.
확장 가능성: 가중치나 팀 배정 방식을 쉽게 변경할 수 있어, 다른 요구 사항에 맞게 조정하기 용이합니다.
랜덤성과 공정성 보장: 플레이어를 무작위로 섞고, 점수 및 포지션 기준으로 배정하여 편향성을 방지했습니다.

개선 방향 및 목표

사용자 피드백 기반 데이터 수집
- 이 프로그램을 사용하는 유저들에게 추가적인 데이터와 피드백을 받아 현재 점수 시스템의 한계를 보완하고 개선 방향을 찾습니다.
- 다양한 유저의 플레이 스타일과 의견을 반영해 밸런스를 보다 정교하게 조정합니다.
다양한 플레이 스타일 반영
- 현재는 단순히 티어별 점수를 기준으로 밸런스를 평가하고 있지만 유저들의 플레이 스타일에 따라 점수를 조정할 필요가 있습니다.
- 예를 들어:
  - 특정 챔피언 하나만 잘 다루는 유저: 해당 챔피언에 대한 높은 숙련도로 티어를 유지하는 경우
  - 다양한 챔피언을 다루며 지능적으로 플레이하는 유저: 특정 챔피언에 의존하지 않고 전반적으로 실력을 발휘해 티어를 올리는 경우.
지속적인 업데이트
- 수집한 데이터와 유저 피드백을 바탕으로 점수 시스템과 밸런스 알고리즘을 주기적으로 업데이트합니다.
- 이를 통해 유저들이 프로그램을 사용할수록 점점 더 공정하고 만족스러운 결과를 얻을 수 있도록 개선합니다.

기대 효과

다양한 유저의 플레이 스타일을 반영한 맞춤형 밸런스 제공
유저 피드백을 바탕으로 점진적으로 발전하는 시스템 구축
단순한 티어별 점수 배정 방식을 넘어 실제 실력을 보다 정확히 반영

React 앱 생성하기

jennet1 — Tue, 17 Dec 2024 00:08:53 +0900

1. 리액트 소개

리액트란?
- 리액트(React)는 페이스북에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다.
- 컴포넌트 기반 아키텍처를 사용하여 재사용 가능하고 관리하기 쉬운 UI를 만들 수 있습니다.
- 선언형(Declarative) 방식으로 UI를 설계하여, 상태가 변경될 때 자동으로 UI를 갱신합니다.

리액트 프로젝트 시작하기

리액트 환경 설정
- Node.js 설치: 리액트 프로젝트를 시작하려면 Node.js가 필요합니다. Node.js 공식 웹사이트에서 최신 버전을 설치합니다.
- Create React App 사용: create-react-app은 리액트 애플리케이션을 쉽게 시작할 수 있게 해주는 명령어 도구입니다.

[ git bash ]
npx create-react-app my-app
cd my-app
npm start

에러1) npx create-react-app my-app 설치 완료 후 에러 발생 시

npm config set legacy-peer-deps true

에러2) > npm start 실행 후 아래와 같이 에러가 난다면

$ npm install --save-dev ajv@^7

Jquery 기본문법

jennet1 — Tue, 24 Sep 2024 20:26:57 +0900

jQuery란?

- javascript 라이브러리로 더 간편하게 사용하기 위해 만들어졌다. 주로 DOM,이벤트,애니메이션,AJAX 요청 등을 쉽게 할 수 있게 도와준다.

jQuery와 javaScript 의 차이점

1. 코드 간결성 : 일반적인 javascript 복잡한 작업을 간단하게 처리할 수 있다. 즉 짧은 코드로 처리가 가능하다

2. 호환성 : 브라우저 호환성을 처리해주기 때문에, 다양한 브라우저에서 동일하게 작동하는 코드를 쉽게 작성이 가능하다.

javaScript 는 브라우저 별로 코드가 다르게 작동할 수 있어 호환성 문제가 발생할 수 있다.

3. 기능 : ajax,애니메이션,이벤트 핸들링 등을 간단하고 효율적으로 구현이 가능한 함수들이 내장되어있다.

JavaScript:

document.getElementById('myElement').style.color = 'red';

jQuery:

$('#myElement').css('color', 'red');

기본 문법에 대해 알아보자

// ID로 요소 선택
$('#myElement');

// 클래스 이름으로 요소 선택
$('.myClass');

// 태그 이름으로 요소 선택
$('p');

클릭 이벤트 처리

// 클릭 이벤트 처리
$('#myButton').on('click', function() {
  alert('버튼이 클릭되었습니다!');
});

CSS 조작

// 요소의 색상 변경
$('#myElement').css('color', 'blue');

DOM 조작

// 요소의 내용을 변경
$('#myElement').html('<p>새로운 내용</p>');

// 요소에 내용 추가
$('#myElement').append('<p>추가된 내용</p>');