web sprit

[React] 스타일을 적용하는 여러가지 방법 (line 스타일, CSS 모듈, styled-components 등)

커드만 — Tue, 18 Nov 2025 14:16:47 +0900

React 에서 스타일을 적용 종류

인라인 스타일
일반 CSS
CSS Modules ( 예 : Button.module.css )
styled-components (CSS-in-JS)
Tailwind CSS
SCSS(Sass)

React 에서 스타일을 적용 방법

일반 CSS 파일 사용

.css 파일을 만들고 컴포넌트에서 import

Button.css

.button {
  background-color: black;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
}

Button.jsx

import './Button.css';

function Button() {
  return <button className="button">Click</button>;
}

장점

가장 단순함.
기존 HTML/CSS 개발 방식과 동일

단점

클래스 이름 충돌 가능
대규모 프로젝트에서 관리 어려움.

인라인 스타일

style 속성에 JS 객체를 직접 넣음.

function Button() {
  const style = {
    backgroundColor: 'black',
    color: 'white',
    padding: '12px 20px',
    borderRadius: '6px'
  };

  return <button style={style}>Click</button>;
}


// 또는 직접 작성
function Button2() {
  return <button style={{ color: isActive ? 'red' : 'gray' }}>
}

장점

동적 스타일링에 매우 강함
조건부 스타일링 쉬움

단점

hover, media query 사용 불가
코드가 지저분해질 수 있음

CSS Modules (실무 추천)

파일명을 Button.module.css 로 만들기
CSS Modules + SCSS 조합은 지금도 실무에서 꽤 안정적인 선택

CRA, Vite, Next.js 같은 환경이면 기본 지원.
Webpack 같이 직접 설정하는 경우에 CSS Modules 설치 필요.

직접 만든 React 환경
옛날 레거시 Webpack 설정

이 경우엔 css-loader 설정이 필요함.
하지만 요즘은 거의 없음.

환경	CSS Modules 설치 필요?
CRA (Create React App)	❌
Vite	❌
Next.js	❌
SCSS	SASS만 설치
커스텀 Webpack	설정 필요

Button.module.css

.button {
  background: black;
  color: white;
}

Button.jsx

import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click</button>;
}

변환된 모습

<button class="Button_button__3Hjks">

장점

클래스명이 자동으로 해시처리됨
충돌 방지
실무에서 매우 많이 사용

styled-components (CSS-in-JS) - 설치 필요

설치

npm install styled-components

사용예시

import styled from 'styled-components';

const Button = styled.button`
  background: black;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;

  &:hover {
    background: gray;
  }
`;

function App() {
  return <Button>Click</Button>;
}

장점

컴포넌트와 스타일이 완전 결합
hover, media query 가능
props 기반 동적 스타일링 가능

const Button = styled.button`
  background: ${props => props.primary ? 'black' : 'gray'};
`;

단점

런타임 비용 있음
대규모 프로젝트에서는 번들 사이즈 증가 가능

Tailwind CSS (유틸리티 클래스 방식) - 설치 필요

요즘 가장 많이 쓰이는 방식 중 하나. Tailwind가 사실상 SCSS 변수 역할을 디자인 시스템 단위로 대체함.

예시

function Button() {
  return (
    <button className="bg-black text-white px-5 py-3 rounded-md hover:bg-gray-700">
      Click
    </button>
  );
}

장점

빠른개발
클래스 충돌 없음
반응형, hover 매우 편함

단점

HTML이 길어짐
디자인 시스템 이해 필요

CSS 자체가 강해짐

CSS 변수 (--var)
nesting 지원
clamp()
container query

굳이 SCSS 안써도 되는 경우 많음.

조건부 클래스 적용 (실무 필수) - 설치 필요

보통 clsx 또는 classnames 라이브러리 사용

npm install clsx

import clsx from 'clsx';

function Button({ active }) {
  return (
    <button className={clsx('btn', active && 'active')}>
      Click
    </button>
  );
}

SCSS / SASS 사용

CSS Modules + SCSS 조합은 지금도 실무에서 꽤 안정적인 선택

$primary: black;

.button {
  background: $primary;

  &:hover {
    background: gray;
  }
}

장점

변수 사용 가능
중첩 가능
mixin 가능

CSS Modules 에서 SCSS 사용하려면 SASS 설치 필요.

npm install sass

그 다음 아래와 같이 선언하여 사용.

Button.module.scss

실무 트렌드 요약 (2026 기준)

스타트업 / 빠른 개발 → Tailwind
기업형 협업 프로젝트 → CSS Modules
디자인 시스템 강한 팀 → styled-components
Next.js 프로젝트 → CSS Modules + Tailwind 혼용

[React] JSX (JavaScript XML)

커드만 — Fri, 14 Nov 2025 13:00:14 +0900

JSX 란?

React에서 UI를 만들 때 사용하는 JavaScript + HTML 혼합 문법입다.
겉으로 보기에는 HTML처럼 보이지만, 실제로는 JavaScript 코드이며 React가 이를 화면으로 변환해줍니다.

JSX를 사용하는 이유 (장점)

1. UI 구조가 명확하여 읽기 쉽습니다.
HTML 태그를 그대로 사용하므로 직관적입니다.

2. 에러를 초기에 잡을 수 있습니다.
JSX는 문법이 엄격하여 실수를 빠르게 알려줍니다.

3. 동적 UI를 쉽게 만들 수 있습니다.
변수, 연산, 조건문 등을 {} 안에서 자유롭게 쓸 수 있습니다.

4. 컴포넌트 기반 구조에 최적화되어 있습니다.
UI를 작은 단위로 나누어 관리하기 좋습니다.

JSX 문법 규칙

1. 반드시 하나의 부모로 감싸서 반환해야 합니다.

return (
  <>
    <h1>Hello</h1>
    <p>World</p>
  </>
);

2. HTML과 속성명(camelCase)이 다릅니다.

<div className="box"></div>

자주 사용하는 JSX 속성명

HTML	JSX
class	className
onclick	onClick
tabindex	tabIndex
maxlength	maxLength

3. JavaScript 표현식은 {} 안에서 사용합니다

function Hello() {

    const name = "kcm";
    return <h1>{name}</h1>;

}

{} 안에는 변수, 연산(삼항연산, and조건 등), 함수 호출등이 가능합니다.

if, for 문등은 사용할 수 없습니다.
if문 대체하여 사용할 수 있는 방법은
삼항연산자, and 조건

for문 대체하여 사용할 수 있는 방법은
.map() 을 사용

if나 for 문등을 대체하여 사용하는 법은 나중에 따로 다루도록 하겠습니다.

이렇게 JSX에 대해 알아봤습니다.
그냥 보면 html 문법과 같아 보이지만
JSX로 인해 html문법을 Javascript로 보다 쉽게 작성하고,
속성명을 camelCase로 작성, 표현식 작성법,
작성시 주의해야할 점에 대해 알아봤습니다.

[React] 컴포넌트 개념 (Component)

커드만 — Mon, 8 Sep 2025 23:40:03 +0900

React 컴포넌트란?

**UI의 작은 조각(블록)**이야. HTML의 <div> 같은 요소가 아니라, “화면에서 어떤 역할(버튼, 카드, 리스트, 모달 등)을 하는 코드 단위” 입니다.
레고 블록처럼 조합해서 큰 UI를 만든다고 생각하면 쉽습니다. 각각의 컴포넌트는 **자기 책임(책임 단위: 한 가지 역할)**을 갖는 게 좋습니다.
React에서는 보통 함수형 컴포넌트를 사용합니다. 그냥 함수인데, JSX(HTML처럼 보이는 문법)를 반환하면 그게 컴포넌트가 됩니다.

// hello.js
function Hello() {
  return <h1>안녕!</h1>;
}

export default Hello;

컴포넌트 주의할점

이름은 대문자로 시작
<hello /> → HTML 태그로 인식됨.
<Hello /> → React 컴포넌트로 인식됨.

하나의 컴포넌트는 하나의 JSX 요소만 반환
여러 요소를 쓰고 싶으면 <div>로 감싸거나, <> </> 같은 React Fragment를 사용.

// 잘못된 예시 X
function App() {
  return (
    <h1>안녕</h1>
    <p>반가워</p>
  );
}

// 올바른 예시 O
function App() {
  return (
    <div>
      <h1>안녕</h1>
      <p>반가워</p>
    </div>
  );
}

function App() {
  return (
    <>
      <h1>안녕</h1>
      <p>반가워</p>
    </>
  );
}

컴포넌트는 순수 함수처럼 동작
화면에 직접 DOM을 건드리거나(global 변수를 막 바꾸는 등) 하면 예측하기 힘들짐.

컴포넌트의 종류

함수형 컴포넌트 (Functional Component) — 요즘 표준. Hooks(useState, useEffect 등)로 상태/사이클 제어.

useState Hook 사용
더 간결한 코드

클래스형 컴포넌트 (Class Component) — 예전 방식. 지금도 존재하지만 신규 코드에선 거의 쓰지 않음. 핵심 개념 이해용으로만 알면 됨.

this.state와 this.setState() 사용
constructor에서 상태 초기화
render() 메서드 필요

import React, { useState, Component } from 'react';


// 함수형 컴포넌트
function FunctionComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h3>함수형 컴포넌트</h3>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}


// 클래스형 컴포넌트
class ClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <h3>클래스형 컴포넌트</h3>
        <p>카운트: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          증가
        </button>
      </div>
    );
  }
}


// 사용 예시
function App() {
  return (
    <div>
      <FunctionComponent />
      <ClassComponent />
    </div>
  );
}
export default App;

둘 다 동일한 기능을 하지만, 현재는 함수형 컴포넌트가 권장됩니다.

useState Hook과 같은 개념은 나중에 배울 개념으로 크게 신경쓰지 마시고, 컴포넌트를 만들때
함수형과, 클래스형이 이런식으로 만들어진다는것에 초점을 두고 보시면 좋을꺼 같습니다.

그리고 현재는 함수형 컴포넌트가 많이 쓰인다는 부분을 인지하시고 클래스형 컴포넌트는 이런식으로 작성해서 사용한다만 알고 있으면 되겠습니다.

웹개발을 위한 웹사이트 제작 아키텍처

커드만 — Fri, 29 Aug 2025 19:09:03 +0900

우리가 웹사이트를 만들려면 프론트, 백앤드, 서버 등... 이런것들이 있어야 웹사이트를 만든다는
어느정도의 개념은 있습니다. 어떻게 보면 지금 설명하려는 전체적인 흐름에서 모든것을 설명할 수 없지만
어떻게 만들어지는가의 개념의 이해를 위해 필요한 내용들을 다루려 합니다.
저 또한 이 개념을 알기위해 정리하는 부분이라 이것에 대해 많은 지식을 가지신 분이라면 댓글로 알려주시면 수정하도록 하겠습니다.

1. 운영체제

데이터, 서버 등을 다루기 위해 일단 하드웨어가 필요합니다.
더 단순히 말하면 컴퓨터가 필요한 거겠죠.
우리가 윈도우를 설치하여 컴퓨터에 사용하듯
웹개발을 위해 운영체제를 정하여 설치 하여야 합니다.

대표적으로 운영체제는

운영체제
Linux	Windows	Unix

Linux, Windows, Unix 등 하드웨어를 직접 관리하는 시스템 소프트웨어가 있어야 합니다.
현재는 리눅스와 Windows가 서버 시장의 대부분을 차지하고 있습니다.

2. 웹서버

클라이언트(브라우저) 요청을 받아 정적 콘텐츠(HTML, CSS, JS, 이미지 등)를 제공, 동적 요청은 애플리케이션 서버에 프록시 전달, SSL 처리, 로드밸런싱
웹서버는 HTTP(S) 프로토콜로 클라이언트와 통신하며, 동적 콘텐츠 요청 시 애플리케이션 서버나 프레임워크로 요청 전달.
대표 제품: Nginx, Apache, IIS(윈도우)

웹서버
Nginx	Apache	IIS(윈도우)

3. 애플리케이션 (Application Layer), 런타임 - 프로그래밍 언어

역할: 실제 동작하는 비즈니스 로직과 서비스 기능(예: 로그인,게시판,결제 처리 등)
프로그래밍 언어: 위 런타임 환경에서 사용하는 Java, Python, JavaScript, C#, PHP 등 다양함
연결: 미들웨어에서 실행, 데이터베이스 및 외부 API와 연동해 실제 서비스 기능 제공.

3-1. 런타임/미들웨어 (Application Server / Runtime Environment) - 서버사이드(백엔드) 환경

웹서버가 전달한 동적 요청을 처리하여 비즈니스 로직 실행, 데이터베이스와 연동, API 제공, 트랜잭션 관리 등을 담당.
서버에서 실행되는 애플리케이션 코드가 돌아가는 실행 환경(런타임)과, 여러 애플리케이션과 시스템을 연결해주는 소프트웨어 계층(미들웨어)을 포함하는 개념입니다.

node.js, Python, Java, .NET, PHP

대표 기술 및 언어별 서버

대표 기술 (개발 플랫)	언어별 서버
Java	Tomcat, Jetty, JBoss, Spring Framework
Node.js (JavaScript 런타임)	Express.js, Koa
Python	Django, Flask, FastAPI (서버는 uWSGI, Gunicorn 등으로 구동)
.NET	IIS + ASP.NET Core
PHP	Apache + PHP 모듈 또는 PHP-FPM

- 대표 기술 및 언어별 서버
Java: Tomcat, Jetty, JBoss, Spring Framework
Node.js (JavaScript 런타임): Express.js, Koa
Python: Django, Flask, FastAPI (서버는 uWSGI, Gunicorn 등으로 구동)
.NET: IIS + ASP.NET Core
PHP: Apache + PHP 모듈 또는 PHP-FPM

언어: Java, JavaScript, Python, C#, PHP 등 서버 사이드 프로그래밍 언어
연결: 웹서버가 HTTP 요청을 전달하면, 미들웨어(런타임)가 이를 해석 후 내부 로직 처리 후 응답 생성.

4. 데이터베이스

회원 정보, 게시글, 설정 값 등 사이트 데이터를 저장합니다.
소규모라면 MySQL, PostgreSQL, SQLite, MongoDB 같은 무료 DB도 충분합니다.

데이터베이스 종류: 계층형, 네트워크형, 관계형(RDB), NoSQL, NewSQL
주요 DBMS: Oracle, MySQL, PostgreSQL, MongoDB, Redis, Cassandra, Neo4j …
DB 언어:

SQL 표준 (DDL, DML, DCL, TCL)
벤더 확장 언어 (PL/SQL, T-SQL …)
NoSQL 언어 (MongoDB JSON Query, Cypher …)

구분	대표 DBMS	특징	주 사용 언어
관계형 DB (RDB)	Oracle, MySQL, PostgreSQL, MariaDB, MS SQL Server	테이블(행/열) 구조, ACID 트랜잭션 지원	SQL (DDL, DML, DCL, TCL) + 확장 언어 (Oracle → PL/SQL, MS SQL → T-SQL, PostgreSQL → PL/pgSQL)
NoSQL - Key-Value	Redis, DynamoDB	단순 Key-Value 저장, 초고속 캐시	명령 기반(GET, SET, EXPIRE …), AWS SDK
NoSQL - Document	MongoDB, CouchDB	JSON 문서 기반	MongoDB Query(find(), aggregation), Mango Query
NoSQL - Column	Cassandra, HBase	대규모 분산 데이터, 컬럼 단위 저장	CQL (Cassandra Query Language)
NoSQL - Graph	Neo4j, Amazon Neptune	노드/간선 기반 관계형 탐색	Cypher Query Language
NewSQL	Google Spanner, CockroachDB, TiDB	RDB + 분산처리 성능	SQL 기반 (확장형)

웹사이트 제작에서 주로 사용하는 데이터베이스(DB)를 종류

관계형 데이터베이스 (RDB), NoSQL 데이터베이스, NewSQL 데이터베이스

일반 웹사이트: MySQL, PostgreSQL, MariaDB → 가장 흔함
실시간/빅데이터 웹사이트: MongoDB, Redis, Cassandra
글로벌 트랜잭션 사이트: NewSQL (Spanner, CockroachDB)

etc. 선택적으로 추가할 요소

캐시: 자주 요청되는 데이터를 임시 저장해 성능 향상(예: Redis).
스토리지/CDN: 이미지나 동영상 같은 큰 파일이 많으면 별도 저장소와 CDN 이용 추천.
도메인/SSL: 도메인 등록과 HTTPS 보안 인증서 적용 필수.

데이터 흐름 예시

사용자가 웹브라우저에서 로그인 요청

요청이 네트워크와 웹서버를 거쳐 애플리케이션 서버에 도착

애플리케이션 서버가 데이터베이스에 사용자 정보 조회

데이터베이스가 사용자 정보를 반환

서버가 로그인 성공 여부를 판단하고 응답 생성

응답이 웹서버→네트워크→클라이언트로 전달

클라이언트가 사용자에게 로그인 결과 표시

간단 아키텍처 예시
사용자 (웹 브라우저) → 웹서버(Nginx) → 애플리케이션 서버(Express.js) → 데이터베이스(MySQL)

웹앱 제작을 위해 기본적으로
운영체제, 웹서버, 애플리케이션서버, 데이터베이스 만으로도 가능하지만
현대적인 웹 개발에서 웹서버의 기능과 애플리케이션의 실행 환경을 같이 제공합니다.

Node.js + Express/Fastify/NestJS
→ Node 프로세스 자체가 HTTP 요청 처리와 비즈니스 로직을 같이 수행

Django + Gunicorn/Uvicorn
→ Gunicorn/Uvicorn이 WSGI/ASGI 서버로 Django 실행 (실제 로직은 Django가 처리)

Spring Boot (Java)
→ 내장 Tomcat/Jetty 서버 안에서 애플리케이션 구동

PHP + PHP-FPM
→ Nginx/Apache가 HTTP 요청을 받아 PHP-FPM으로 넘기고, PHP가 비즈니스 로직 처리

옛날: 웹서버(Apache) + 애플리케이션 서버(WebLogic) + DB
요즘: 리버스 프록시(Nginx/CDN) + 런타임(Node.js, Spring Boot, Django 등) + DB

[React] import 사용법

커드만 — Tue, 26 Aug 2025 17:41:45 +0900

import 방법은 여러가지가 있지만 크게 두가지로 나누면
Named Import, Default Import 방법이 있습니다.

먼저 import 작성을 보면 이런식으로 3가지 방식으로 가져오는걸 본적이 있으실 겁니다.

import 컴포넌트0 from './component.js';
import { 컴포넌트1, 컴포넌트2 } from './component.js';
import 컴포넌트0, { 컴포넌트1, 컴포넌트2 } from './component.js';

왜 다 같은 컴포넌트인데 어떤건 대괄호 안에 넣어서 부르고 어떤건 그냥 써서 불러오고 하는걸까요?
아래의 Named Import, Default Import 보시면 왜 이렇게 불러오시는지 이해가 되실겁니다.
그밖의 나머지 불러오는 형식도 정리해 보았습니다. 참고만해도 좋을꺼 같네요.

1. Named Import (이름을 지정한 가져오기)

// component.js
export function 컴포넌트1(){
	return <button>Hello</button>;
}

export const 컴포넌트2 = () => <button>Hello</button>;

// app.js
import { 컴포넌트1, 컴포넌트2 } from './component.js';

function App() {
	return{
		<div>
			<컴포넌트1 />
			<컴포넌트2 />
		</div>
	};
}

2. Default Import (기본 가져오기)

// component.js
export default function 컴포넌트1(){
	return <button>Hello</button>;
}


or


function 컴포넌트1(){
	return <button>Hello</button>;
}

export default 컴포넌트1;

// app.js
import 컴포1 from './component.js'; // 이름은 마음대로 정할 수 있음

function App() {
	return{
		<div>
			<컴포1 />
		</div>
	};
}

3. Mixed Import (혼합 가져오기 - Named + Default)

// component.js
export default function 컴포넌트1(){
	return <button>Hello</button>;
}

export const 컴포넌트2 = () => <button>Hello</button>;

// app.js
import 컴포1, { 컴포넌트2 } from './component.js'; // 컴포넌트1의 이름은 마음대로 정할 수 있음

function App() {
	return{
		<div>
			<컴포1 />
			<컴포넌트2 />
		</div>
	};
}

이런생각을 가지시는 분들이 있을꺼 같습니다. 한 파일에 export default 가 2개 있으면 어떻게 되는가?? 하지만
하나의 모듈(file)에는 default export가 오직 하나만 가능합니다. 그래서 default 인듯...

4. Namespace Import (네임스페이스 가져오기)

// component.js
export default function 컴포넌트1(){
	return <button>Hello</button>;
}

export const 컴포넌트2 = () => <button>Hello</button>;

export const 컴포넌트3 = () => <button>Hello</button>;

// app.js
import 컴포넌트1, * as Comp from './component.js'; // 컴포넌트1의 이름은 마음대로 정할 수 있음

function App() {
	return{
		<div>
			<컴포넌트1 />
			<Comp.컴포넌트2 />
			<Comp.컴포넌트3 />
		</div>
	};
}

Namespace Import는 ES6 모듈 문법에서 import * as 이름 from '모듈' 형태를 말합니다.
즉, 모듈 안의 모든 export를 한 번에 가져와서 특정 이름(이름) 아래에서 접근할 수 있게 하는 방식입니다.
(* export default는 따로 불러온다)

5. Side Effect Import (부수 효과 가져오기)

import './styles.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import './some-module.js';

모듈에서 export를 가져오는 것이 아니라, 모듈을 불러오는 것 자체로 부수 효과(사이드 이펙트)를 발생시키는 import를 말합니다.
주로 CSS, 폴리필, 전역 설정, 초기화 코드 등을 불러올 때 사용됩니다.
더 단순하게 얘기하면 그냥 필요한 파일을 연결할때 사용합니다.

기타 import 방식입니다. 주로 사용하는 import 방식은 윗부분이겠네요.
아래 내용은 참고 바랍니다.

6. Dynamic Import (동적 가져오기)

// 컴포넌트 지연 로딩
const LazyComponent = React.lazy(() => import('./LazyComponent'));

// 런타임에 동적으로 가져오기
const loadModule = async () => {
  const module = await import('./module');
  return module.default;
};

7. Conditional Import (조건부 가져오기)

// 개발/프로덕션 환경에 따라
if (process.env.NODE_ENV === 'development') {
  import('./devTools').then(devTools => {
    // 개발 도구 사용
  });
}

8. Re-export (재내보내기)

// index.js에서 여러 컴포넌트를 한번에 내보내기
export { default as Component1 } from './Component1';
export { default as Component2 } from './Component2';
export * from './utils';

각 방식은 상황에 따라 적절히 선택해서 사용하면 됩니다. 가장 일반적으로는 1. Named Import 와 2. Default Import 를 조합해서 사용하는 경우가 많습니다.

감사합니다.

[React] 리액트 스터디

커드만 — Mon, 25 Aug 2025 14:25:19 +0900

퍼블리셔가 리액트 프록젝트에 참여하기 위해 필수로 알아야하는 스터디 목록을 정리하려 합니다.
순차적으로 진행되는 스터디 목록은 이곳에 정리하여 나중에 확인하고 활용할 수 있도록 하겠습니다.

[React] import 사용법

import 방법은 여러가지가 있지만 크게 두가지로 나누면 Named Import, Default Import 방법이 있습니다. 먼저 import 작성을 보면 이런식으로 3가지 방식으로 가져오는걸 본적이 있으실 겁니다. import 컴포

kcmschool.com

[React] 컴포넌트 개념 (Component)

React 컴포넌트란?**UI의 작은 조각(블록)**이야. HTML의 같은 요소가 아니라, “화면에서 어떤 역할(버튼, 카드, 리스트, 모달 등)을 하는 코드 단위” 입니다.레고 블록처럼 조합해서 큰 UI를 만든다

kcmschool.com

[React] JSX (JavaScript XML)

JSX 란?React에서 UI를 만들 때 사용하는 JavaScript + HTML 혼합 문법입다.겉으로 보기에는 HTML처럼 보이지만, 실제로는 JavaScript 코드이며 React가 이를 화면으로 변환해줍니다.JSX를 사용하는 이유 (장점)

kcmschool.com

[React] 스타일을 적용하는 여러가지 방법 (cin-line 스타일, CSS 모듈, styled-components 등)

[React] Props 개념과 활용방법

[React] React Hook - useState (상태관리)

[React] React Hook - useEffect (부수 효과 처리)

cursor 피그마(Figma) MCP 설치방법

커드만 — Fri, 22 Aug 2025 23:14:15 +0900

피그마 MCP를 설치하는 방법은 몇가지가 있지만,
피그마에서 공식적으로 MCP를 제공해주게 되어 아무래도 이 방법이 좋을꺼 같습니다.
뭐 적용방법이 쉽기도 합니다.

피그마가 설치 되거나 사용한다는 전제하에 설명 드리도록 하겠습니다.

1. bunx 또는 bun 설치 및 실행
터미널에서 아래와 같은 명령어를 실행해 줍니다.

bunx cursor-talk-to-figma-socket

만약 bunx가 설치되어 있지 않다면 위의 명령이 실행되지 않습니다. 그럼 먼저 Bun을 설치합니다.
Bun은 npm or npx로 설치해 줍니다.

npm install -g bun

npx cursor-talk-to-figma-socket

npx cursor-talk-to-figma-socket 명령어를 터미널에 실행하면 막 쌸라쏼라(?) 영어가 나오고 계속 실행되어진 상태로 유지 합니다.

nodeJS가 없으면 안되겠죠??
nodeJS가 설치되어 있지 않다면 npm 명령어를 사용할 수 없기 때문에 혹시 설치가 안되어 있으신 분은 아래글을 참고 바랍니다.

node.js 윈도우에서 설치하기 및 삭제

1. 설치https://nodejs.org/위 url을 클릭하여 node JS 사이트에 접속합니다.아래와 같은 화면을 맞이 하게 될텐데요. 영어라 당황하지 마시고 설명 드리겠습니다.우선 중앙의 다운받을 수 있는 녹색 버

kcmschool.com

2. 플러그인 연결
일단 피그마를 열고 디자인 화면에서 우클릭을 화면 다음과 같은 화면을 확인할 수 있습니다.

플러그인 > Cursor Talk To Figma MCP Plugin 클릭!

이런 화면을 확인하실 수 있을꺼예요.
빨간 부분은 채널이라는 것이고,
파란부분은 cursor에 MCP 설정하는 내용입니다.

파란색 부분의 내용을 모두 복사하세요. 그리고 cursor을 킵니다.

3. Cursor에 피그마 MCP 연결

위 이미지에 나와 있는 순서로 들어가 커서 셋팅에서 MCP & Integrations 에 들어가 줍니다.
이 부분이 MCP 설정하는 부분입니다.

저는 이미 MCP 연결을 해서 TalkToFigma 연결이 잘 된 상태 입니다.
처음 MCP 연결하시는 분은 빨간 영역 (New MCP Server)를 눌러 주세요.

혹시 몰라서 설치한거 지워 봤는데 이렇게 나오네요? 암튼
MCP 추가 버튼을 눌러줍니다.

아까 내용을 붙여 넣어주시면 이렇게 나올꺼예요.
참고로 피그마 MCP 내용은 TalkToFigma 영역 부터 감싸고 있는 부분까지가 필요한 내용이예요.

다른 MCP 를 추가 하신다면 mcpServers 안에 내용을 쉼표 넣어서 추가 해주시면 됩니다.

4. 사용방법

아까 확인했던 화면에서 빨간 영역있죠 이 부분이 피그마 채널이라고 하는 부분입니다. 저 안의 내용은 어딜 선택하냐에 따라 바뀔수 있습니다.
저 채널명을 통해 cursor에서 html,css 로 디자인을 만들수 있고
또한 cursor에서 피그마에게 디자인을 요청할 수도 있어요.

단순한 예로 사용법을 알려드릴꼐요

피그마 디자인에서 마크업이 필요한 부분을 마우스로 저렇게 파란색 영역으로 선택해 줍니다.
그 영역에서 마우스 우클릭해서
플러그인 > Cursor Talk To Figma MCP Plugin 클릭!
그럼 위 화면 채널명 보이시죠? 안보인다고 하지 말아줘 녹색 부분 말하는겁니다.
저 부분 긁어서 cursor 프롬프트를 작성해 보겠습니다.

엔터 땅 치면!!!

이렇게 만들어준다~ 근데 알고 봤더니 아까 선택한 부분은 디자인이 아니라 이미지 부분이여서
차마 화면은 보여드릴꼐...

아무튼 이렇게 사용하시면 될꺼 같습니다.

기타 궁금하시거나 보완해야할 부분은 언제나 환영합니다?!
감사합니다. ^^

Open Weather 회원가입 방법 및 API Key 발급 방법

커드만 — Sat, 26 Jul 2025 16:07:43 +0900

Current weather and forecast - OpenWeatherMap

OpenWeather Weather forecasts, nowcasts and history in a fast and elegant way

openweathermap.org

위 사이트에 접속하면 아래와 같은 화면이 나옵니다. 표시된 부분을 클릭하여 이동해 주세요.

회원가입을 위해 아래 내용을 작성후 아래처럼 차례대로 진행해 주세요

Create Account 버튼을 누르면 아래와 같이 alert 팝업이 뜨는데 내용은
API를 어떻게 어디에 사용할건지 물어보는 부분 입니다. 저는 그냥 취소 누르겠습니다.

이렇게 가입하면 아까 적은 메일주소로 메일이 와있을 겁니다. 메일 확인 하는 버튼이 있는데 아래와 같이 눌러줍니다.

그러면 다시 메일이 또 옵니다. 메일을 확인하면
OpenWeatherMap API 지침 이라고 하면서 API KEY가 온것을 확인할 수 있수 있습니다.
아래 화면은 크롬으로 한국번역한 내용입니다.

사이트 내에서 API Key를 다시 확인 하려면 로그인 후
우측 상단에 나의 닉네임 클릭하면 My API keys 를 클릭하면 아래와 같이 확인하실 수 있습니다.

다음시간은 API Key를 활용하여 화면에 적용 및 확인하는 방법에 대해 알아 보겠습니다.

cursor 단축키 설정 및 나만의 단축키 모음

커드만 — Thu, 24 Jul 2025 17:12:19 +0900

단축키 설정

위 이미지 처럼 File > Preferences > Keyboard Shortcuts 으로 클릭하여 들어가 줍니다.
또는 단축키 Ctrl + M 을 누르고 다시 Ctrl + S 를 누르면 화면을 확인할 수 있습니다.

이곳에서 단축키 변경을 할 수 있는데 너무 많아서 찾기 힘들면 상단에 검색영역(Type to search in keybindings)에서 검색하여 찾을 수 있습니다.

단축키를 변경할 부분을 더블클릭하면
키 설정하라고 팝업이 뜨는데 바로 원하는 키를 누르고 엔터를 누르면 저장 됩니다.
혹시 누르다 잘못 키를 눌렀다면 ESC를 누르면 다시 취소되니 걱정하실 필요 없겠죠?

기본 단축키 모음

name	단축키	비고
오른쪽 사이드 바 (Secondary Side Bar	Ctrl + L or Ctrl + Alt + B	ai 검색영역
왼쪽 사이드 바 (Primary Side Bar)	Ctrl + B	파일 목록 & 검색 & 익스텐션 등...
Cursor: Open Edit (Command K)	Ctrl + K	파일을 열고 고치고 싶은영역에 커서 위치나 드래그하여 단축키를 누르면 ai 에게 요청할 수 있는 창이 열린다.
Terminal	Ctrl + `	터미널 창을 하단에 연다.
Toggle Background Agents Sidebar (왼쪽 사이드바 열고 닫기)	Ctrl + Shift + S	GPT와의 이전 대화 기록, 실행했던 Background Agent 요청들 (예: 코드 리팩터링, 설명 요청 등)을 모아 보여주는 사이드바입니다.

나만의 단축키 모음

name	단축키	비고
Delete Line	Ctrl + Shift + K	기본적으로 vscode와 연동 되지만 기존에 cursor에 설정과 중복되면서 작동하지 않으니 단축키 한번 확인후 cursor에서 재설정 해준다.
Join Lines	Ctrl + J	내린글자 한줄로 만들기
Emmet: Balance (outward)	Ctrl + Shift + A	태그 안에 내용 선택

cursor 유용한 단축키 모음

커드만 — Sun, 13 Jul 2025 14:17:51 +0900

Ctrl + K
도움이 필요한 영역에 커서를 표시하고 단축키를 누르면 설명부분에 원하는 내용을 기입하면
AI가 코드를 작성해 줍니다.

Ctrl + L
화면 좌측에 위치해 있으며 선택된 파일 또는 폴더로 선택하여 선택된 영역의 설명이나
코드 관련 내용에 대하여 AI에게 질문이나 도움을 받을 수 있습니다.

또한 위 @(골뱅이) 부분을 누르면 열려있는 파일이나 폴더를 선택하여 같이 묶어서 AI에게 질문할 수 있습니다.

기타 단축키

Ctrl + P	파일 탐색
Ctrl + Shift + P	명령 팔레트
Ctrl + Shift + X	확장 프로그램

web sprit

[React] 스타일을 적용하는 여러가지 방법 (line 스타일, CSS 모듈, styled-components 등)

React 에서 스타일을 적용 종류

React 에서 스타일을 적용 방법

일반 CSS 파일 사용

인라인 스타일

CSS Modules (실무 추천)

styled-components (CSS-in-JS) - 설치 필요

Tailwind CSS (유틸리티 클래스 방식) - 설치 필요

조건부 클래스 적용 (실무 필수) - 설치 필요

SCSS / SASS 사용

실무 트렌드 요약 (2026 기준)

추천 조합

[React] JSX (JavaScript XML)

JSX 란?

JSX를 사용하는 이유 (장점)

JSX 문법 규칙

1. 반드시 하나의 부모로 감싸서 반환해야 합니다.

2. HTML과 속성명(camelCase)이 다릅니다.

3. JavaScript 표현식은 {} 안에서 사용합니다

[React] 컴포넌트 개념 (Component)

React 컴포넌트란?

컴포넌트 주의할점

컴포넌트의 종류

함수형 컴포넌트 (Functional Component) — 요즘 표준. Hooks(useState, useEffect 등)로 상태/사이클 제어.

클래스형 컴포넌트 (Class Component) — 예전 방식. 지금도 존재하지만 신규 코드에선 거의 쓰지 않음. 핵심 개념 이해용으로만 알면 됨.

웹개발을 위한 웹사이트 제작 아키텍처

1. 운영체제

2. 웹서버

3. 애플리케이션 (Application Layer), 런타임 - 프로그래밍 언어

3-1. 런타임/미들웨어 (Application Server / Runtime Environment) - 서버사이드(백엔드) 환경

대표 기술 및 언어별 서버

4. 데이터베이스

웹사이트 제작에서 주로 사용하는 데이터베이스(DB)를 종류

etc. 선택적으로 추가할 요소

데이터 흐름 예시

[React] import 사용법

1. Named Import (이름을 지정한 가져오기)

2. Default Import (기본 가져오기)

3. Mixed Import (혼합 가져오기 - Named + Default)

4. Namespace Import (네임스페이스 가져오기)

5. Side Effect Import (부수 효과 가져오기)

기타 import 방식입니다. 주로 사용하는 import 방식은 윗부분이겠네요.아래 내용은 참고 바랍니다.6. Dynamic Import (동적 가져오기)

7. Conditional Import (조건부 가져오기)

8. Re-export (재내보내기)

[React] 리액트 스터디

cursor 피그마(Figma) MCP 설치방법

1. bunx 또는 bun 설치 및 실행터미널에서 아래와 같은 명령어를 실행해 줍니다.

2. 플러그인 연결일단 피그마를 열고 디자인 화면에서 우클릭을 화면 다음과 같은 화면을 확인할 수 있습니다.

3. Cursor에 피그마 MCP 연결

4. 사용방법

Open Weather 회원가입 방법 및 API Key 발급 방법

cursor 단축키 설정 및 나만의 단축키 모음

단축키 설정

기본 단축키 모음

나만의 단축키 모음

cursor 유용한 단축키 모음

기타 import 방식입니다. 주로 사용하는 import 방식은 윗부분이겠네요.
아래 내용은 참고 바랍니다.

6. Dynamic Import (동적 가져오기)

1. bunx 또는 bun 설치 및 실행
터미널에서 아래와 같은 명령어를 실행해 줍니다.

2. 플러그인 연결
일단 피그마를 열고 디자인 화면에서 우클릭을 화면 다음과 같은 화면을 확인할 수 있습니다.