Teddy's Teddy's

Tailwind + Vite + React에서 CSS 적용 안 되는 에러, 실전 해결법 총정리 실무에서 Vite + React + Tailwind CSS로 개발할 때, 분명 공식문서대로 했는데도 "아무리 해도 CSS가 안 먹는다"는 경험을 누구나 하게 됩니다.이 글은 실제 개발 과정에서 직접 경험한 “적용 안 되는” 원인과 케이스별 해결법을 한 번에 정리한 진짜 실전 레퍼런스입니다.(2024년 Tailwind/PostCSS 최신 버전 이슈 포함)1. 프로젝트 세팅/개발 과정 요약Vite + React + TypeScript 프로젝트 생성Tailwind CSS, postcss, autoprefixer 설치필수 설정 파일(tailwind.config.js, postcss.config.js) 생성index.c..

🚀 Microsoft Build 2025 요약 – Copilot AI 에이전트 시대 본격 개막 2025년 5월에 열린 Microsoft Build 2025에서는 개발자, 기업, AI 스타트업을 위한 최신 기술이 대거 공개되었습니다. 특히, Copilot, 에이전트 플랫폼, Windows AI Foundry 등 AI 기반 생태계 구축에 집중한 모습이 인상적이었습니다. 🤖 GitHub Copilot의 진화: 코딩 에이전트로 기존의 단순 보조 역할을 넘어, GitHub Copilot은 이제 자율적 코딩 에이전트로 발전했습니다. 디버깅, 리팩토링, 문서화까지 자동으로 처리하며 MCP(Model Context Protocol)을 통해 외부 도구와도 연동 가능합니다. ..

Day 6 – React로 우승자 파악하기 (calculateWinner 함수)틱택토 게임이 진짜 게임이 되려면, 누가 이겼는지를 판단할 수 있어야 하죠. 이번 글에서는 승리 조건을 계산하는 calculateWinner 함수의 원리와 코드를 차근차근 알아보겠습니다.---1. 승리 조건이란?3x3 보드에서 승리하는 조건은 다음과 같습니다:가로줄 3칸이 모두 같은 값 (X 또는 O)세로줄 3칸이 모두 같은 값대각선 3칸이 모두 같은 값이를 코드로 표현하면 다음과 같이 8가지 승리 조합이 생깁니다:const lines = [ [0, 1, 2], // 첫 번째 가로줄 [3, 4, 5], // 두 번째 가로줄 [6, 7, 8], // 세 번째 가로줄 [0, 3, 6], // 첫 번째 세로줄 [1, 4, ..

React – Lifting State Up (상태 끌어올리기) 완전 이해하기React에서 여러 컴포넌트가 함께 어떤 데이터를 공유하고 싶을 때는 어떻게 해야 할까요? 그럴 때 사용하는 가장 중요한 기술이 바로 "Lifting State Up (상태 끌어올리기)"입니다.이번 글에서는 Tic Tac Toe 예제를 통해 useState를 컴포넌트 구조에서 어떻게 끌어올리는지를 코드와 함께 살펴봅니다.---1. 초기 구조: Square가 상태를 가질 경우아래와 같이 Square가 자체적으로 상태를 갖고 있을 경우를 보겠습니다.function Square() { const [value, setValue] = useState(null); return ( setValue("X")}> {value..

Day 3 - 클릭하면 X가 표시되게 만들기 (useState로 상태 관리)이전까지는 버튼이 항상 하드코딩된 X를 보여주기만 했습니다. 이제 사용자가 버튼을 클릭할 때마다 내용이 바뀌도록 상태를 넣어볼 거예요.React의 useState란? useState는 React에서 컴포넌트 내부에 상태(state)를 저장하고, 그 값을 바꾸면 자동으로 화면을 다시 렌더링해주는 마법 같은 도구입니다. ✅ React에서 상태란, 시간이 지나거나 사용자와의 상호작용으로 바뀌는 값을 말해요.---1. Square 컴포넌트에 상태 추가`App.js` 파일의 `Square` 함수를 아래와 같이 수정하세요:import { useState } from 'react';function Square() { const [val..

React로 Tic Tac Toe 만들기 - Day 1~2 (CodeSandbox로 시작)이 글은 React 공식 홈페이지의 틱택토 튜토리얼을 기반으로, 초보자도 쉽게 따라할 수 있도록 CodeSandbox 환경에서 실습하는 방식으로 구성했습니다.⚡ 준비물: 아무것도 필요 없어요! 웹브라우저 + 인터넷 + Chrome이면 됩니다.1단계. CodeSandbox로 React 프로젝트 시작하기아래 링크를 클릭해 CodeSandbox 새 React 프로젝트를 엽니다:▶ https://codesandbox.io/s/newTemplate에서 React 선택`App.js`, `index.js`, `styles.css` 파일이 자동 생성된 상태를 확인하세요.2단계. 버튼 하나 출력해보기 (컴포넌트 기초)이제 `App...

🔍 React data.js + CSS 완전 정리 (핵심 위주)이 글은 React 앱을 구성하는 data.js와 CSS 파일을 초보자 기준으로 가장 중요한 핵심 개념만 정리한 글입니다.1️⃣ data.js – 화면에 보여줄 콘텐츠 데이터 저장소1.1. CORE_CONCEPTS – 핵심 개념 리스트export const CORE_CONCEPTS = [ { image, title, description }, ...];✅ 핵심 설명:React 핵심 개념 4개를 배열로 저장각 항목은 CoreConcept 컴포넌트로 반복 출력App.js에서 CORE_CONCEPTS.map()을 사용하여 리스트 형태 UI 자동 렌더링1.2. EXAMPLES – 탭 클릭 시 출력할 예제export const EXAMPLES =..

React 컴포넌트 완전 분석 – TabButton.js, CoreConcept.js, Header.js이 글에서는 React 앱에서 자주 사용되는 세 가지 기본 컴포넌트 TabButton, CoreConcept, Header를 한 줄 한 줄 설명하며 완벽하게 해석합니다.📌 1. TabButton.js – 선택 탭 버튼을 만드는 컴포넌트export default function TabButton({ children, onSelect, isSelected }) {export default: 이 컴포넌트를 외부 파일에서 불러올 수 있도록 내보냅니다.function TabButton(): 함수형 컴포넌트 정의입니다.props 구조 분해: props를 분해해서 children, onSelect, isSelec..