coalacoding 1. Inline Style — 태그 안에 직접 쓰기 1.1 개념 HTML에서 style=”color:red” 처럼 태그 안에 스타일을 직접 쓰는 방식이다. 리액트에서는 문자열이 아닌 객체 형태로 작성한다. 왜 객체로 써야 하나요? 리액트는 JavaScript를 기반으로 동작한다. JSX 안에서 스타일을 표현할 때는 JS 문법을 따르기 때문에, background-color 처럼 하이픈(-)이 들어간 속성은 backgroundColor 처럼 카멜케이스 로 바꿔서 써야 한다. 1.2 … 더 읽기
1. Props (속성) 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법. 1.1. Props의 개념 Props는 Properties(속성)의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 방법이다. None: 컴포넌트를 함수라고 생각하면, Props는 그 함수에 전달하는 매개변수(파라미터)다. // 일반 자바스크립트 함수 function greet(name) { // name은 매개변수 return `안녕, ${name}!`; } greet(“철수”); // “철수”는 인자 // React 컴포넌트 … 더 읽기
React Router 공식사이트 1. 라우터 이해 1.1. 라우터란 네트워크에서 데이터를 목적지까지 연결하는 장치다. 리액트에서는 URL 주소에 따라 다른 컴포넌트를 보여주는 역할을 한다. 1.2. 라우팅이란 데이터의 최단·최적 경로를 찾는 과정이다. 1.3. MPA란 MPA(Multi Page Application) — 여러 HTML 페이지를 각각 만들어 연결하는 방식이다. 페이지 이동 시 전체 페이지가 새로 로드된다. 1.4. SPA란 SPA(Single Page Application) — … 더 읽기
1. 이벤트 처리 사용자의 행동(클릭, 입력, 마우스 이동 등)에 반응하는 인터랙티브한 웹사이트를 만들기 위해 React의 이벤트 시스템을 깊이 있게 학습한다. 1.1. React 이벤트 시스템 이해하기 1.1.1. 이벤트란? 이벤트(Event)는 사용자가 웹페이지에서 취하는 행동을 의미한다. 버튼 클릭, 키보드 입력, 마우스 이동 등 모든 상호작용이 이벤트다. • → 초인종이 울린다(반응) • → TV 채널이 바뀐다(반응) • → 무언가 … 더 읽기
1. 클로드 Docs 1.1. 클로드 모델 비교 1.1.1. 주요 모델 모델 특징 속도 용도 Claude Sonnet 5 최신 모델 빠름 코딩, 분석 Claude Opus 4.8 가장 강력 느림 복잡한 작업 Claude Fable 5 최상위 성능 보통 고난도 창작·추론 Claude Haiku 4.5 가벼움 매우 빠름 간단한 작업 1.1.2. 선택 가이드 코딩: Claude Sonnet 5 복잡한 분석: … 더 읽기
바이브코딩(Vibe Coding)은 자연어로 요구사항을 설명하고 AI 코딩 에이전트가 코드를 생성·수정·실행·검증하도록 협업하는 개발 방식이다. 개발자는 목표와 제약 조건을 명확히 전달하고, 생성된 결과를 확인하면서 반복 수정한다. AI가 코드를 생성하더라도 요구사항 누락, 잘못된 라이브러리 선택, 접근성 문제, 보안 문제가 생길 수 있으므로 최종 검토는 개발자가 수행한다. 1.1. 좋은 프롬프트의 구성 바이브코딩용 프롬프트에는 다음 항목을 포함한다. 구체적인 실습용 프롬프트는 … 더 읽기
이 문서는 웹 사용자 인터페이스(UI, 유아이)를 기획하고 실제 프런트엔드 애플리케이션 코드로 변환하는 전 과정을 설명한다. 텍스트 형태의 지시문인 Prompt(프롬프트)를 입력하여 초기 화면 디자인을 생성하고, 이를 Figma(피그마)와 JSON(제이슨) 데이터로 가공한 뒤 React(리액트) 코드로 변환하는 작업 흐름을 다룬다. 디자인 생성 도구의 활용법과 Tailwind CSS(테일윈드 씨에스에스) 기반 프런트엔드 프로젝트 설정 규칙을 순서대로 살펴본다. 1. 텍스트를 디자인으로 생성하기 텍스트 … 더 읽기
1. Figma MCP 가이드 Figma MCP(Model Context Protocol)를 활용하면 피그마 디자인 파일을 AI가 직접 분석하여 HTML/CSS 코드로 변환할 수 있다. 공식문서 프롬프트안내 1.1. GeminiCli 로 연결하기 1.1.1. Gemini CLI 실행 gemini 1.1.2. 익스텐션 설치 명령 실행 터미널에서 Gemini CLI 세션을 종료한 상태에서 아래 명령을 실행한다. gemini extensions install https://github.com/figma/figma-gemini-cli-extension 코드 설명 gemini extensions install Gemini … 더 읽기
https://huggingface.co/spaces/hkchengrex/MMAudio 텍스트→오디오, 혹은 비디오→오디오(영상 소리 입히기). 이 모델은 텍스트/비디오 입력으로 동기화된 오디오를 생성하도록 학습되었다 Prompt: 원하는 소리 설명. 예) waves, seagulls (Video → Audio만) Video 업로드: 소리를 입힐 영상 파일. Negative prompt: 빼고 싶은 소리. 예) low quality, noise Seed: 결과 고정용 숫자. -1은 무작위. Num steps: 품질/연산 반복 수. 20~30부터 시작 권장. Guidance strength: … 더 읽기
