jennet1 님의 블로그

📌 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 경로 수정하여 Tailw..

1. 브랜치 생성 및 이동먼저 메인 브랜치에서 새로운 브랜치를 생성하고 그 브랜치로 이동합니다.bash복사git checkout main # 메인 브랜치로 이동 (현재 작업중인 브랜치가 메인이어야 합니다) git pull origin main # 메인 브랜치를 최신 상태로 업데이트 git checkout -b scroll-menu # 새로운 브랜치 생성 후 이동 2. 브랜치에서 개발 후 커밋새로 생성한 브랜치에서 개발 작업을 하고, 변경 사항을 커밋합니다.bash복사# 변경된 파일을 스테이징 git add . # 모든 파일을 추가 # 또는 특정 파일만 추가 # git add # 커밋을 작성 git commit -m "Add scroll menu feature" # 커밋 메시지 작성 3. 로컬 브랜치 푸..

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) C..

리액트 컴포넌트란?리액트(React)는 사용자 인터페이스(UI)를 구성하기 위해 컴포넌트(Component) 라는 개념을 사용합니다. 컴포넌트는 재사용 가능한 코드 조각으로 UI를 독립적이고 작은 단위로 나누어 관리할 수 있게 합니다. 이로 인해 유지보수성과 가독성이 높아지며 코드 재사용이 용이해집니다. 컴포넌트의 기본 개념독립성: 컴포넌트는 서로 독립적으로 동작하며 다른 컴포넌트와 결합하여 UI를 구성한다.재사용성: 한 번 작성한 컴포넌트를 다양한 곳에서 재사용할 수 있다.구조화: UI를 계층적으로 구조화하여 개발 및 유지보수를 용이하게 한다.함수형 컴포넌트(Function Component)클래스형 컴포넌트(Class Component)리액트 파일 구조/components: 컴포넌트 파일들을 모아 두..

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()); }} 출력11 2. 문자열 비교 (같은지 다른지)equals() : 두 문자열이 정확히 동일한지 비교equalsIgnoreCase() : 대소문자 구분 없이 비교package Pool;public class ch01 { public static void main(String[] args) { // TODO Auto-generated method..

1. 문제 상황배포 환경에서 세션 관리와 쿠키 설정에 대한 문제로 어려움을 겪었습니다. 로컬에서 개발할 때는 같은 도메인에서 HTTP로 통신을 하여 문제가 없었지만 https 배포 후 문제가 발생했습니다. 로그인 후 세션 값이 덮어지는 현상과 쿠키가 제대로 저장되지 않는 문제로 인해 며칠간 고생했습니다. 이 문제를 해결하는 과정에서 세션 관리와 쿠키 설정에 대한 더 깊은 이해를 얻을 수 있었습니다. 서버쪽 use 설정// 세션 설정app.use( session({ secret: process.env.SESSION_SECRET, // 세션 암호화 키 resave: true, saveUninitialized: false, cookie: { httpOnly: true, ..

문제 해결 과정: 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) 문제나 보안 설정에 영향을 미칠 수 ..

밸런스 알고리즘 구현해보기 해당 프로젝트는 리그 오브 레전드 에서 팀 밸런스를 맞추기 위한 알고리즘을 구현한 것입니다. 이 게임에서는 각 팀에 특정 포지션(탑, 정글, 미드, 원딜, 서폿)이 존재하며 플레이어의 랭크 점수(RankScore) 를 기준으로 두 팀을 최대한 균등하게 나누는 것이 중요합니다.밸런스를 맞추기 위해 다음 요소들을 고려했습니다:포지션 균형: 각 팀에 모든 포지션이 골고루 배치되도록 함.점수 차 최소화: 두 팀 간의 총 점수 차이를 최소화하여 게임 밸런스를 유지.랜덤성과 공정성: 플레이어를 랜덤으로 섞어 배정 과정에서의 편향성을 줄임랭크? 해당 게임에는 총 10단계의 랭크 시스템이 존재한다.각 랭크는 단계별로 구성되며 4단계 부터 1단계 까지 존재한다. 예를들어 아이언1단계에서 특정 ..