study

[Photoshop] 01 - 화면구조, 설정, 새파일, 열기, 저장, 확장자

변쌤 (❁´◡`❁) — Thu, 2 Apr 2026 17:00:07 +0900

화면구조, 설정, 새파일, 열기, 저장, 확장자

1. 새파일만들기

1. Create new

01 = Width / Height (가로 / 세로, 문서 크기) - 단위는 Pixels(픽셀) 사용
02 = Resolution (해상도)

03 = Color Mode (색상 모드)
04 = Background Contents (배경 )

1. 인쇄물/웹용 이미지에 적합한 해상도 ( Resolution )

해상도는 이미지의 선명한 정도를 뜻

해상도의 단위인 Pixels/Inch를 보면 알 수 있듯이, 1인치당 픽셀의 개수로 해상도를 설정
일반적으로 해상도가 높을수록 이미지가 더 선명하게 보임

구분별 해상도

구분인쇄물웹

단위	dpi (dots per inch)	ppi (pixels per inch)
적정 해상도	300dpi	72~96ppi

인쇄물 작업은 사진이 깨져 보이지 않도록 300dpi로 설정하는 것이 적절
반면 웹용 이미지 작업은 해상도를 너무 높게 설정하면 파일 용량이 커져 웹사이트 로딩 속도가 느려질 수 있으므로, 72~96ppi 정도로 설정하는 것이 적절
인쇄물: 300dpi
웹: 72~96ppi
웹에서는 해상도보다 이미지의 픽셀 크기와 용량 관리가 더 중요함

2. Color mode (색상 모드)

RGB : 빛으로 표현하는 색상 체계
→ 모니터, 모바일, 웹사이트, 영상 등 디지털 화면용 작업

CMYK : 잉크로 표현하는 색상 체계
→ 전단지, 포스터, 명함, 브로슈어 등 인쇄용 작업

화면에서 보는 것 = RGB
종이에 출력하는 것 = CMYK
화면용 이미지 = RGB + 72~96 ppi
인쇄용 이미지 = CMYK + 300 dpi

# 단위설정

[ Edit ] - [ Preferences ] : Ctrl + K

Rulers/Type : pixels

[Units & Rulers]를 선택하고 Rulers(눈금자)는 [Pixels], Type(글자 크기)는 [Points]

# 탭 파일열기 해제

[Workspace] 에서 [Open Documents as Taps](탭으로 문서 열기)를 체크 해제

# 폰트 한글로 보이게 설정

글꼴 한글로 보이도록 [Type]에서 [Show Font Names in English](글꼴 이름을 영어로 표시)를 체크 해제

2. 저장 : Ctrl + S

3. 확장자

# 이미지 파일 형식 확장자

형식	확장자	특징	주요 용도
PSD	.psd	포토샵 작업 내용을 그대로 보존하는 원본 파일. 레이어 등 모든 편집 정보 유지	포토샵에서 수정·편집할 때
JPEG	.jpg / .jpeg	가장 대중적인 사진 형식. 압축률 조절 가능하나 압축할수록 화질 저하	사진 저장
PNG	.png	투명 배경 지원. 색상·투명·반투명 처리 가능. 용량 가볍고 웹 최적화	웹 이미지, 로고, 아이콘
GIF	.gif	짧은 애니메이션 제작 가능. 투명 지원하나 반투명 불가. 256색 제한으로 화질 한계	움직이는 이미지(움짤)
WebP	.webp	구글이 개발한 차세대 이미지 형식. JPEG보다 화질은 유지하면서 용량은 더 작음. 투명·애니메이션 모두 지원	웹 페이지 로딩 속도 최적화

편집 보존 → .psd
사진 저장 → .jpg
투명 배경 → .png
움짤 → .gif
웹 최적화 (고화질 + 작은 용량) → .webp

4. 열기 : Ctrl + O

5. 단축키

기능	단축키 (Windows)	단축키 (Mac)
확대	Ctrl + [ + ]	Cmd + [ + ]
축소	Ctrl + [ - ]	Cmd + [ - ]
100% 보기	Ctrl + 1	Cmd + 1
화면에 맞게	Ctrl + 0	Cmd + 0
이동 도구 선택	V	V
손 도구 (임시 이동)	Space + 드래그(마우스왼쪽)	Space + 드래그 (마우스왼쪽)
복사	Ctrl + C	Cmd + C
붙여넣기	Ctrl + V	Cmd + V
제자리 붙여넣기	Ctrl + Shift + V	Cmd + Shift + V
잘라내기	Ctrl + X	Cmd + X
레이어 복사 붙여넣기	Ctrl + J	Cmd + J
잘라서 새 레이어로	Ctrl + Shift + J	Cmd + Shift + J

돋보기 도구 없이도 Alt + 스크롤(Win) / Option + 스크롤(Mac)로 빠르게 확대/축소

[ CSS3 ] BEM(Block–Element–Modifier)

변쌤 (❁´◡`❁) — Tue, 10 Feb 2026 02:10:03 +0900

BEM이란?

BEM은 CSS 클래스 네이밍 규칙으로, UI를 독립적인 블록 단위로 분리하고 구조와 상태를 명확히 표현하는 것

유지보수성 ↑
스타일 충돌 ↓
컴포넌트 재사용성 ↑
대규모 프로젝트에 특히 유리

이 요소가 어떤 컴포넌트인지 / 그 안의 어떤 부분인지 / 어떤 상태인지를 이름에 드러내는 방법
BEM은 Block, Element, Modifier의 약자이고, UI를 독립적인 블록 단위로 나눠 재사용성과 유지보수성을 높이려는 네이밍 규칙입니다.

클래스 이름만 봐도 구조와 상태가 보이게 만드는 규칙

구조: Block__Element
상태/변형: --Modifier
CSS를 설계 관점에서 작성하게 만들어줌

Block: 독립적으로 의미 있는 컴포넌트
예: card, button, menu
Element: 블록 안에 속한 구성 요소
예: card__title, card__button
Modifier: 블록이나 요소의 상태/변형
예: card--featured, card__button--disabled

block, block__element, block--modifier, block__element--modifier 형태를 씁니다.
그리고 modifier는 보통 기본 클래스와 함께 붙입니다. 예를 들어 class="card card--featured"처럼 씁니다.

https://getbem.com/naming/

BEM — Naming

Modifier names may consist of lowecase Latin letters, digits, dashes and underscores. CSS class is formed as block’s or element’s name plus two dashes: .block--mod or .block__elem--mod and .block--color-black with .block--color-red. Spaces in complicat

getbem.com

https://en.bem.info/methodology/quick-start/

Quick start / Methodology / BEM

Quick start

en.bem.info

BEM 구성 요소

1. Block

독립적인 UI 컴포넌트의 최상위 단위

단독으로 의미를 가짐
다른 블록에 의존하지 않음

header
card
button
modal


.card {}
.button {}

2. Element

Block 내부에 포함된 구성 요소

반드시 Block에 종속
혼자서는 의미가 없음
__ (언더스코어 2개) 사용

block__element


.card__title {}
.card__image {}
.card__description {}

잘못된 예

.title {}        /* 어떤 블록의 title인지 알 수 없음 */

3. Modifier

Block 또는 Element의 상태 / 변형 / 버전

-- (하이픈 2개) 사용
크기, 색상, 활성화 상태 등 표현

block--modifier
block__element--modifier

.button--primary {}
.button--disabled {}

.card__title--large {}

상태로 분리

.card__title--error {}

역할 기반 네이밍

.card__title {}

기본문법 규칙

✔ 항상 class 하나 = 역할 하나
✔ 태그 이름, 위치, 스타일 의미를 클래스에 섞지 않음

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

예

HTML

<div class="card card--featured">
  <img class="card__image" src="img.jpg" alt="" />
  <h3 class="card__title">Title</h3>
  <p class="card__desc">Description text</p>
  <button class="card__button card__button--primary">
    Read more
  </button>
</div>

CSS

.card {
  padding: 20px;
  border: 1px solid #ddd;
}

.card--featured {
  border-color: gold;
}

.card__image {
  width: 100%;
}

.card__title {
  font-size: 1.2rem;
}

.card__desc {
  color: #666;
}

.card__button {
  padding: 8px 12px;
}

.card__button--primary {
  background: black;
  color: white;
}

예)

<div class="card card--featured">
  <h2 class="card__title">상품 제목</h2>
  <p class="card__desc">상품 설명입니다.</p>
  <button class="card__button card__button--disabled" disabled>
    구매하기
  </button>
</div>

SCSS

.card {
  padding: 16px;
  border: 1px solid #ddd;
}

.card--featured {
  border-width: 2px;
}

.card__title {
  font-size: 20px;
  margin-bottom: 8px;
}

.card__desc {
  font-size: 14px;
  margin-bottom: 12px;
}

.card__button {
  padding: 8px 12px;
}

.card__button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

card → 카드 컴포넌트 자체
card__title → 카드 안의 제목
card__button → 카드 안의 버튼
card--featured → 강조된 카드 상태
card__button--disabled → 비활성화된 버튼 상태

.block {
  &__element {}
  &--modifier {}
}

.button {
  &__icon {}
  &--primary {}
  &--large {}
}

이름만 보고 구조와 역할이 바로 보여야 합니다.

예

<div class="con con1">
                    <div class="inner">
                        <ul>
                            <li>
                                <a href="#">
                                    <div><img src="images/cat-women.jpg" alt="Women" /></div>
                                    <strong>Women</strong>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div><img src="images/cat-men.jpg" alt="Men" /></div>
                                    <strong>Men</strong>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div><img src="images/cat-acc.jpg" alt="Accessories" /></div>
                                    <strong>Accessories</strong>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

변경

<section class="category">
    <div class="category__inner">
        <ul class="category__list">
            <li class="category__item">
                <a href="#" class="category__link">
                    <div class="category__image">
                        <img src="images/cat-women.jpg" alt="Women" />
                    </div>
                    <strong class="category__title">Women</strong>
                </a>
            </li>

            <li class="category__item">
                <a href="#" class="category__link">
                    <div class="category__image">
                        <img src="images/cat-men.jpg" alt="Men" />
                    </div>
                    <strong class="category__title">Men</strong>
                </a>
            </li>

            <li class="category__item">
                <a href="#" class="category__link">
                    <div class="category__image">
                        <img src="images/cat-acc.jpg" alt="Accessories" />
                    </div>
                    <strong class="category__title">Accessories</strong>
                </a>
            </li>
        </ul>
    </div>
</section>

[ React ] 카카오 로그인

변쌤 (❁´◡`❁) — Thu, 27 Feb 2025 05:26:28 +0900

카카오 로그인

https://developers.kakao.com/

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

1. 카카오 로그인 > 문서보

2. 내 애플리케이션 > 애플리케이션 추가

3. 앱키

4. 플랫폼 > web 플랫폼 등록

6. : .env

VITE_KAKAO_JAVASCRIPT_KEY=????
VITE_KAKAO_REST_API_KEY=????
VITE_KAKAO_REDIRECT_URI=https://xxx.vercel.app/oauth/

7. config.js

const isLocal = window.location.hostname === 'localhost';
console.log(isLocal);
export const KAKAO_REDIRECT_URI = isLocal
    ? 'http://localhost:5173/oauth/'
    : 'https://xxx.vercel.app/oauth/';

[ React ] TMDB api , spinner

변쌤 (❁´◡`❁) — Thu, 19 Dec 2024 18:44:35 +0900

TMDB API

1. 가입

https://www.themoviedb.org/?language=ko

The Movie Database (TMDB)

찾으시는 영화나 TV 프로그램이 없나요? 로그인 하셔서 직접 만들어주세요.

www.themoviedb.org

2. More > API 또는 프로필 > 설정 > API

3. API > 생성 > Developer

4. 사용약관 스크롤 맨아래 동의

5. 작성

6. API 페이지 이동 ( API, 액세스토큰 사용 )

7. More > API

8. API Reference

9. Movie List > Now Playing > Try it > JSON 생성

10.

11. 이미지 기본 경로

https://developer.themoviedb.org/docs/image-basics

Basics

How to build an image URL.

developer.themoviedb.org

 "backdrop_path": "/zOpe0eHsq0A2NvNyBbtT6sj53qV.jpg",
 
 ///////////////////
 
 https://image.tmdb.org/t/p/w500/
 
 ////////////////////
 
"https://image.tmdb.org/t/p/w500/zOpe0eHsq0A2NvNyBbtT6sj53qV.jpg",
  
  ------------------------------------
  https://image.tmdb.org/t/p/w500/ +  backdrop_path

12. 현재 상영작 axios

https://api.themoviedb.org/3/movie/now_playing

import axios from 'axios';

const apiKey = 'YOUR_API_KEY';  // 본인의 TMDB API 키 입력

axios.get('https://api.themoviedb.org/3/movie/now_playing', {
  params: {
    api_key: apiKey,
    language: 'ko-KR',   // 결과를 한국어로 받기
    region: 'KR'         // 한국에서 상영 중인 영화 필터링
  }
})
.then(response => {
  console.log(response.data.results);  // 현재 상영작 목록 출력
})
.catch(error => {
  console.error('Error movies:', error);
});

영화 장르 ID 목록

장르	ID
액션	28
모험	12
애니메이션	16
코미디	35
범죄	80
다큐멘터리	99
드라마	18
가족	10751
판타지	14
역사	36
공포	27
음악	10402
미스터리	9648
로맨스	10749
SF (공상과학)	878
TV 영화	10770
스릴러	53
전쟁	10752
서부	37

TV 프로그램 장르 ID


장르	ID
액션 & 모험	10759
애니메이션	16
코미디	35
범죄	80
다큐멘터리	99
드라마	18
가족	10751
키즈	10762
미스터리	9648
뉴스	10763
리얼리티	10764
SF & 판타지	10765
토크쇼	10767
스릴러	10766
전쟁 & 정치	10768
서부	37

API 파라미터 설명

파라미터	설명
api_key	TMDB API 키
language=ko-KR	한국어로 결과 반환
region=KR	한국에서 상영 중인 영화만 필터링
page=1	페이지네이션 (결과가 많을 경우 페이지 이동)

예) discover 엔드포인트로 현재 상영 중이면서 액션 장르인 영화만 직접 요청.

now_playing 엔드포인트로 현재 상영작을 가져온 후, 액션 장르(ID: 28)로 필터링.

영화

import axios from 'axios';

const apiKey = 'YOUR_API_KEY';  // 본인의 TMDB API 키 입력

//https://api.themoviedb.org/3/movie/now_playing
axios.get('https://api.themoviedb.org/3/discover/movie', {
  params: {
    api_key: apiKey,
    language: 'ko-KR',   // 한국어로 결과 받기
    with_genres: 28      // 액션 장르 ID
  }
})
.then(response => {
  console.log(response.data.results);  // 액션 영화 목록 출력
})
.catch(error => {
  console.error('Error movies:', error);
});

import axios from 'axios';

const apiKey = 'YOUR_API_KEY';

axios.get('https://api.themoviedb.org/3/discover/tv', {
  params: {
    api_key: apiKey,
    language: 'ko-KR',
    with_genres: 18  // 드라마 장르 ID
  }
})
.then(response => {
  console.log(response.data.results);  // 드라마 목록 출력
})
.catch(error => {
  console.error('Error fetching drama TV shows:', error);
});

코미디(35) + 로맨스(10749) 영화 가져오기

axios.get('https://api.themoviedb.org/3/discover/movie', {
  params: {
    api_key: apiKey,
    language: 'ko-KR',
    with_genres: '35,10749'  // 코미디 + 로맨스
  }
})
.then(response => {
  console.log(response.data.results);  // 코미디 로맨스 영화 목록 출력
})
.catch(error => {
  console.error('Error movies:', error);
});

json 예시

[
  {
    "title": "존 윅 4",
    "overview": "존 윅의 마지막 복수극이 시작된다.",
    "release_date": "2024-01-20",
    "genre_ids": [28, 53],  // 액션, 스릴러
    "poster_path": "/path_to_poster.jpg"
  },
  {
    "title": "분노의 질주 10",
    "overview": "가족과 함께하는 스릴 넘치는 질주.",
    "release_date": "2024-01-05",
    "genre_ids": [28, 80],  // 액션, 범죄
    "poster_path": "/path_to_poster2.jpg"
  }
]

# Spinners

https://www.davidhu.io/react-spinners/

React Spinners

yarn add react-spinners

www.davidhu.io

https://www.davidhu.io/react-spinners/storybook/?path=/docs/barloader--docs

@storybook/cli - Storybook

www.davidhu.io

예)

<PacmanLoader
  color="#ad5555"
  speedMultiplier={1}
/>

https://mhnpd.github.io/react-loader-spinner/

Hello from React Spinners | React Spinners

Description will go into a meta tag in <head />

mhnpd.github.io

[React] react 배포

변쌤 (❁´◡`❁) — Thu, 19 Dec 2024 18:23:25 +0900

vercel 배포

vercel이란?

Vercel은 프론트엔드 개발자를 위한 클라우드 플랫폼으로, 빠르고 간편하게 웹 애플리케이션을 배포할 수 있도록 도와주는 서비스입니다. Next.js의 개발사이기도 하며, Next.js를 최적화하여 지원하지만, React, Vue, Svelte, Angular 등 다양한 프레임워크를 사용할 수 있습니다.

Vercel 공식 사이트

공식 사이트에서 GitHub, GitLab, Bitbucket 계정으로 가입

vs 터미널에서

설치 - 1번만

npm i -g vercel

1. npm run build 또는 yarn build

2. vercel login

>> 로그인 선택

>> 이 메일로 로그인했을경우 이메일 확인

>> 이메일 > 코드 인증

이메일 인증 완료후

3. vercel 입력

? Set up and develop “c:\react\project0”? (Y/n) ( 배포할것이 맞는지 확인 ) y
? Which scope should contain your project? xxx projects => 엔터
? Link to existing project? (y/N) : N 프로젝트에 연결할것인지

What’s your project’s name? 프로젝트 이름 ( 기본 폴더와 같은이름으로 자동생성 )

In which directory is your code located? ./ 위치 - 엔터

Want to modify these settings? 설정변경할것지 N

vercel 사이트 확인

github 설명

github에 올릴경우

1 BrowerRouter 를 HashRouter 로 변경

2. 빌드후

index.html => ./ 상대경로 변경 -> 라이브서버 확인 가능

3. 기존 작업에 -> dist 폴더 넣기

4. 깃이그노 파일에 dist 삭제

5. 깃에 올리고 페이지 연결

import { HashRouter  as Router }   from "react-router-dom";
<>
     <Router>

     </Router>
</>

클라우드(Cloud)란?

클라우드(Cloud)는 인터넷을 통해 제공되는 컴퓨팅 서비스를 의미합니다.
과거에는 소프트웨어와 데이터를 로컬 컴퓨터(PC) 또는 서버에 직접 저장했지만, 이제는 클라우드를 활용하여 온라인에서 저장하고 실행할 수 있습니다.

클라우드의 특징

인터넷 기반 서비스 → 인터넷만 있으면 어디서든 접근 가능
유지보수 불필요 → 사용자는 인프라 관리 없이 서비스 이용 가능
확장성(Scalability) → 사용량에 따라 자동으로 리소스 확장 가능
비용 절감 → 직접 서버를 운영하는 것보다 저렴하게 사용 가능

# 클라우드 서비스

클라우드	특징
Vercel	Next.js 및 React 최적화, 서버리스 API 지원, Git 연동 자동 배포
Netlify	정적 사이트 호스팅 최적화, 서버리스 함수 제공, 간단한 배포
GitHub Pages	React SPA 정적 배포 가능, GitHub에 연동하여 무료 사용 가능
Firebase Hosting	Google 클라우드 기반, 빠른 정적 파일 배포 및 Firebase 백엔드 연동
AWS Amplify	AWS 기반, 백엔드 및 정적 사이트 배포, 강력한 확장성
Cloudflare Pages	글로벌 CDN 최적화, 빠른 정적 사이트 배포

Next.js + React 프로젝트: Vercel
React SPA 배포: Netlify, GitHub Pages
Firebase 연동 필요: Firebase Hosting

에러

Error: Could not retrieve Project Settings. To link your Project, remove the .vercel directory and deploy again.

해결

rm -rf .vercel

.vercel 폴더 삭제

Vercel 다시 연결

vercel link

재배포

vercel

[ CSS3 ] Grid 설명과 예

변쌤 (❁´◡`❁) — Fri, 13 Dec 2024 15:20:01 +0900

Grid

CSS Grid는 웹 페이지의 레이아웃을 구성하기 위한 2차원 레이아웃 시스템입니다.
기존의 float, flexbox 등이 1차원(가로 또는 세로) 정렬에 초점을 뒀다면,
CSS Grid는 가로(Row)와 세로(Column)를 동시에 다룰 수 있어 복잡한 레이아웃을 보다 쉽게 구현할 수 있습니다.

특징 설명

2차원 레이아웃	행과 열 모두를 기반으로 배치 가능
레이아웃 정의	부모 요소에서 전체 레이아웃 정의 후 자식 요소 배치
간결한 문법	반복, 영역 지정 등 다양한 기능 제공
반응형 디자인	미디어 쿼리와 함께 유연한 디자인 가능

mdm	바로가기
w3shools	바로가기

출처 : https://www.w3schools.com/css/css_grid_columns_rows.asp

출처:https://www.w3schools.com/css/css_grid_columns_rows.asp

출처 : https://www.w3schools.com/css/css_grid_columns_rows.asp

1. Container 속성

Grid 컨테이너는 부모 요소에 적용되며, 그 내부의 레이아웃을 정의합니다.

속성	설명
display	Grid 레이아웃 활성화 (grid 또는 inline-grid 설정).
grid-template-columns	열의 크기와 개수를 정의.
grid-template-rows	행의 크기와 개수를 정의.
grid-template-areas	Grid의 영역 이름을 정의.
grid-template	grid-template-rows, grid-template-columns, grid-template-areas를 한 번에 설정.
gap (또는 grid-gap)	열과 행 간의 간격 설정.
row-gap	행 간의 간격 설정.
column-gap	열 간의 간격 설정.
justify-items	모든 아이템의 가로 정렬 방식 설정.
align-items	모든 아이템의 세로 정렬 방식 설정.
place-items	justify-items와 align-items를 동시에 설정.
justify-content	Grid 전체의 가로 정렬 방식 설정.
align-content	Grid 전체의 세로 정렬 방식 설정.
place-content	justify-content와 align-content를 동시에 설정.
grid-auto-columns	자동 생성 열의 크기 설정.
grid-auto-rows	자동 생성 행의 크기 설정.
grid-auto-flow	아이템 배치 방향 설정 (row, column, dense).
grid	grid-template, grid-auto-flow, gap 등을 한 번에 설정.

2. Item 속성

Grid 아이템은 컨테이너 내부의 자식 요소에 적용되며, 각 아이템의 위치와 정렬을 정의합니다.

속성	설명
grid-column-start	아이템이 시작할 열 번호를 지정.
grid-column-end	아이템이 끝날 열 번호를 지정.
grid-row-start	아이템이 시작할 행 번호를 지정.
grid-row-end	아이템이 끝날 행 번호를 지정.
grid-column	아이템의 시작 열과 끝 열 번호를 한 번에 설정.
grid-row	아이템의 시작 행과 끝 행 번호를 한 번에 설정.
grid-area	grid-template-areas에서 정의한 영역 이름 또는 위치를 설정.
justify-self	개별 아이템의 가로 정렬 방식 설정.
align-self	개별 아이템의 세로 정렬 방식 설정.
place-self	justify-self와 align-self를 동시에 설정.

# fr

Fractional Unit의 약자로, Grid 레이아웃에서 사용 가능한 공간의 비율을 나눌 때 사용하는 단위입니다.

fr은 유연한 단위로, 고정된 픽셀(px)이나 비율(%)과 달리 남은 공간을 나눠서 배치합니다.
Grid의 여유 공간을 나누는 방식이므로, 다른 고정 크기 요소를 제외하고 남은 공간만 계산합니다.

1. 균등 분할

grid-template-columns: 1fr 1fr 1fr;

3개의 열을 동일한 크기로 나눔.
가용 공간을 3등분하여 각 열이 동일한 비율(1:1:1)로 크기를 가집니다.

2. 비율 기반 분할

grid-template-columns: 2fr 1fr;

첫 번째 열은 두 번째 열보다 2배 넓게 설정.
가용 공간을 3등분하여 2/3은 첫 번째 열, 1/3은 두 번째 열이 차지합니다.

3. 고정 크기와 함께 사용

grid-template-columns: 200px 1fr 2fr;

첫 번째 열은 고정 크기(200px).
두 번째 열과 세 번째 열은 남은 공간을 1:2의 비율로 나눕니다.

4. 반응형 설계

grid-template-columns: repeat(3, 1fr);

3개의 열을 균등하게 배치.
repeat 함수와 fr 단위를 함께 사용하면 가변적인 Grid를 쉽게 설계할 수 있습니다.

원리

전체 크기 계산:
- fr은 고정 크기 요소(픽셀, 퍼센트 등)를 제외한 나머지 가용 공간을 기준으로 계산합니다.
가중치 배분:
- 모든 fr 값의 합을 기준으로 각각의 비율을 계산합니다.

grid-template-columns: 100px 2fr 3fr;

총 너비: 600px (예: 컨테이너의 너비)
남은 공간: 500px (100px 고정 크기를 제외한 나머지)
계산:
- 2fr = (2 / 5) × 500px = 200px
- 3fr = (3 / 5) × 500px = 300px
최종 열 크기:
- 첫 번째 열: 100px (고정 크기)
- 두 번째 열: 200px
- 세 번째 열: 300px

# display

.container {
  display: grid;
  display: grid | inline-grid;
}

1) grid-template-rows / grid-template-columns

행(row)/ 열(column) 의 크기를 정의하는 속성

각 행의 높이를 명시적으로 설정할 수 있으며, 반복적인 행을 생성하거나 반응형 레이아웃을 만들 때 유용합니다.

grid-template-rows: <track-size> ...;
grid-template-columns: <track-size> ...;

<track-size>: 각 행의 크기를 지정합니다. px, %, fr, auto, minmax()와 같은 값들을 사용할 수 있습니다.
여러 값을 공백으로 구분하여 각 행의 높이를 정의합니다.

속성	설명
<track-size>	그리드 트랙(열 또는 행)의 크기를 정의. 고정 크기, 비율(fr), 자동(auto), 또는 유동적 크기(minmax())로 설정.
<line-name>	그리드 라인의 이름을 정의. 특정 라인을 참조하여 그리드 아이템을 배치하거나 스타일을 적용할 때 사용.

<track-size>

<track-size>는 그리드 트랙(열 또는 행)의 크기를 정의합니다. 트랙의 크기는 길이 값, 비율, 또는 가변적인 크기로 지정할 수 있습니다.

값	설명
length	고정된 길이 값 (예: px, em, rem).
percentage	부모 요소 크기의 비율로 설정 (예: 50%).
fr	가용 공간을 비율로 나눔. (fr 단위는 "fraction"을 의미).
auto	콘텐츠 크기에 따라 자동 조정.
minmax()	최소 크기와 최대 크기를 지정하여, 콘텐츠와 가용 공간에 따라 유동적으로 크기 변경.

<line-name>

<line-name>는 그리드 라인의 이름을 정의합니다. 임의의 이름을 지정할 수 있으며, 특정 라인을 참조하여 그리드 아이템을 배치할 때 사용합니다.

<line-name>은 각 그리드 라인(열 또는 행의 경계선)에 적용됩니다.
하나 이상의 이름을 공백으로 구분하여 지정할 수 있습니다.
아이템 배치 시 grid-column 또는 grid-row 속성에서 참조합니다.

grid-template-columns: [line1] 1fr [line2] 2fr [line3];
grid-template-rows: [row1] auto [row2] 200px [row3];

.grid-container {
  display: grid;
  grid-template-columns: [start] 100px [middle] 1fr [end];
  grid-template-rows: [top] auto [bottom];
}

.item {
  grid-column: start / middle; /* 'start'부터 'middle'까지 차지 */
  grid-row: top / bottom; /* 'top'부터 'bottom'까지 차지 */
}

grid-template-columns:
- start → 첫 번째 열의 시작 라인.
- middle → 첫 번째 열의 끝과 두 번째 열의 시작 라인.
- end → 두 번째 열의 끝 라인.
grid-template-rows:
- top → 첫 번째 행의 시작 라인.
- bottom → 두 번째 행의 끝 라인.

1. 고정 크기 행

grid-template-rows: 100px 200px 300px;
grid-template-columns: 100px 200px 300px;

첫 번째 행의 높이: 100px
두 번째 행의 높이: 200px
세 번째 행의 높이: 300px

2. 비율로 설정 (fr 단위)

grid-template-rows: 1fr 2fr 1fr;
grid-template-columns: 1fr 2fr 1fr;

행 간의 높이 비율을 설정:
- 첫 번째 행: 1/4의 높이
- 두 번째 행: 2/4의 높이
- 세 번째 행: 1/4의 높이
fr(fraction) 단위는 가용 공간의 비율로 행 높이를 지정합니다

3. 자동 크기 조정

grid-template-rows: auto auto auto;
grid-template-columns: auto auto auto;

각 행의 높이가 콘텐츠 크기에 따라 자동으로 조정

4. 최소 및 최대 크기

grid-template-rows: minmax(100px, 1fr) 200px;
grid-template-columns: minmax(100px, 1fr) 200px;

첫 번째 행:
- 최소 높이: 100px
- 최대 높이: 가용 공간 중 비율(1fr)
두 번째 행: 고정 높이 200px

5. 반복적인 행 생성

grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);

총 3개의 행을 생성하며, 각 행은 동일한 비율(1fr)로 나눕니다.

grid-template-rows: repeat(2, 100px 1fr);
grid-template-columns: repeat(2, 100px 1fr);

100px 고정 높이와 1fr 비율로 구성된 행을 2번 반복.

# grid-template-areas

CSS Grid Layout에서 그리드 아이템의 배치 영역(layout area)을 이름으로 정의하는 데 사용됩니다. 이 속성은 텍스트 기반의 그리드 레이아웃을 직관적으로 설계할 수 있게 해줍니다.

grid-template-areas: 
  "<area-name> <area-name> ..."
  "<area-name> <area-name> ..."
  ...

<area-name>: 각 그리드 영역에 이름을 지정.
- 이름은 반드시 따옴표(" ") 안에 작성.
- .: 비어 있는 공간(아이템이 없는 그리드 셀)을 나타냄.
행은 줄바꿈(\n)으로 구분됩니다.

예)

grid-template-areas: 
  "header header header"
  "menu content content"
  "menu footer footer";

첫 번째 행: header가 3칸(전체 열) 차지.
두 번째 행: menu가 첫 번째 열, content가 나머지 2열 차지.
세 번째 행: menu가 첫 번째 열, footer가 나머지 2열 차지.

<div class="grid-container">
  <div class="header">Header</div>
  <div class="menu">Menu</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.grid-container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "menu content content"
    "menu footer footer";
  grid-template-columns: 1fr 2fr 2fr; /* 3개의 열 */
  grid-template-rows: 100px 200px 100px; /* 3개의 행 */
  gap: 10px; /* 셀 간의 간격 */
  height: 100%;
  width: 100%;
}

/* 각 영역의 위치를 정의 */
.header {
  grid-area: header;
  background-color: orange;
}

.menu {
  grid-area: menu;
  background-color: lightblue;
}

.content {
  grid-area: content;
  background-color: lightgreen;
}

.footer {
  grid-area: footer;
  background-color: lightpink;
}

/* 공통 스타일 */
.grid-container > div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  border: 1px solid black;
}

grid layout

header header header
menu   content content
menu   footer  footer

첫 번째 행: header가 3열 전체를 차지.
두 번째 행: menu는 첫 번째 열, content는 두 번째와 세 번째 열을 차지.
세 번째 행: menu는 첫 번째 열, footer는 두 번째와 세 번째 열을 차지.

비어 있는 셀 표현 (.)

비어 있는 셀은 ( . ) 으로 표현할 수 있습니다.

grid-template-areas: 
  "header header ."
  "menu content content"
  "menu footer .";

header | header | (빈 칸)
menu   | content | content
menu   | footer  | (빈 칸)

<div class="grid-container">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.grid-container {
  display: grid;
  grid-template-areas: 
    "header header"
    "content content"
    "footer footer";
  grid-template-columns: repeat(2, 1fr); /* 2개의 동일한 열 */
  grid-template-rows: auto; /* 행 높이는 콘텐츠에 맞게 조정 */
  gap: 10px;
}

row-gap , column-gap , gap

row-gap : 행(row) 간의 간격을 설정하는 속성.
column-gap : 열(column) 간의 간격을 설정하는 속성
gap (단축 속성) : row-gap 과 column-gap을 동시에 설정하는 단축 속성.

row-gap: <length>;

column-gap: <length>;

gap: <row-gap> <column-gap>;

출처 :https://www.w3schools.com/css/css_grid_columns_rows.asp

예1)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="css/reset.css" />
        <style>
            body {
                margin: 30px;
            }
            .container {
                width: 500px;
                display: grid;
                grid-template-columns: auto auto auto;
                background-color: skyblue;
                padding: 20px;
            }
            .item {
                background-color: pink;
                border: 3px solid #fff;
                padding: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">10</div>
        </div>
    </body>
</html>

예2)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="css/reset.css" />
        <style>
            body {
                margin: 30px;
            }
            .container {
                width: 500px;
                display: grid;
                grid-template: 80px 300px / auto auto 190px;
                background-color: blue;
                padding: 10px;
            }
            .item {
                background-color: pink;
                border: 3px solid #fff;
                padding: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>
    </body>
</html>

예3)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="css/reset.css" />
        <style>
            body {
                margin: 30px;
            }
            .container {
                display: grid;
                grid-template-columns: 200px 500px;
                grid-template-rows: 200px 300px 100px;
                grid-gap: 20px;
            }
            .item {
                background: pink;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">10</div>
        </div>
    </body>
</html>

.container {
  display: grid; /* Grid 레이아웃을 활성화 */
  
  grid-template-columns: 200px 500px; /* 열의 크기 정의
                                        - 첫 번째 열: 너비 200px
                                        - 두 번째 열: 너비 500px */
  
  grid-template-rows: 200px 300px 100px; /* 행의 크기 정의
                                           - 첫 번째 행: 높이 200px
                                           - 두 번째 행: 높이 300px
                                           - 세 번째 행: 높이 100px */
  
  grid-gap: 20px; /* 셀 간의 간격 설정
                    - 열과 열 사이의 간격: 20px
                    - 행과 행 사이의 간격: 20px */
}

예4)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="css/reset.css" />
        <style>
            body {
                margin: 30px;
            }
            .container {
                width: 500px;
                display: grid;
                grid-template-columns: auto auto auto;
                background-color: blue;
                padding: 10px;
            }
            .item {
                background-color: pink;
                border: 3px solid #fff;
                padding: 30px;
                text-align: center;
            }
            .item:nth-child(2) {
                grid-row-start: 2;
                background: hotpink;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>
    </body>
</html>

[ figma ] 16. variables prototype 베리어블 프로토타입

변쌤 (❁´◡`❁) — Fri, 22 Nov 2024 08:49:07 +0900

베리어블 프로토타입

# number

# String

[ TypeScript ] 기본 타입

변쌤 (❁´◡`❁) — Thu, 14 Nov 2024 11:34:43 +0900

기본 타입

1. unknown

모든 타입의 슈퍼 타입으로, 모든 값이 할당될 수 있습니다.
타입이 명확하지 않을 때 사용하지만, any와 달리 제한적입니다. 사용하기 전 명확한 타입으로 좁히는 타입 가드가 필요합니다.

2. any

모든 타입을 허용하는 타입으로, 타입 검사를 건너뛰는 역할을 합니다.
타입 안정성을 낮출 수 있으므로 가능한 사용을 자제하는 것이 좋습니다.

3. 기본 타입들

null: null 값만 가질 수 있는 타입입니다.
void: 함수가 값을 반환하지 않을 때 주로 사용되는 타입입니다.
number: 숫자 타입이며, Number Enum을 포함합니다.
bigint: 큰 정수를 표현하는 타입으로, 일반 숫자보다 큰 정수를 다룰 때 사용됩니다.
boolean: true 또는 false의 불리언 값을 가지는 타입입니다.
string: 문자열 타입으로, String Enum을 포함합니다.
symbol: 심볼 타입으로, Unique Symbol을 포함합니다.
object: 객체 타입을 나타내며, Array, Function, Constructor와 같은 구체적인 타입을 포함합니다.

타입	설명	예시
number	숫자형 (정수, 소수 포함)	let age: number = 30;
string	문자열	let name: string = "Alice";
boolean	참/거짓 값	let isStudent: boolean = true;
any	모든 타입 허용 (가능한 한 사용 지양)	let value: any = "hello"; value = 100;
unknown	타입을 확정할 수 없는 경우	let data: unknown;
null	값이 없음 (null 값만 할당 가능)	let empty: null = null;
undefined	정의되지 않음	let notDefined: undefined = undefined;
object	객체 타입	let person: object = { name: "Tom", age: 25 };
array	배열	let numbers: number[] = [1, 2, 3];

4. 유형별 세부 타입

undefined: 정의되지 않은 상태를 나타내며, void나 null 타입과 함께 사용됩니다.
Number Enum / String Enum: 각각 숫자 또는 문자열 열거형을 나타냅니다.
Unique Symbol: 고유한 심볼 값을 나타냅니다.
Array: 배열 타입입니다.
Function: 함수 타입입니다.
Constructor: 생성자 함수 타입을 나타냅니다.

5. never

절대 도달할 수 없는 값을 의미하는 타입입니다. 보통 오류를 발생시키거나 끝없이 실행되는 함수에 사용됩니다.

unknown은 모든 타입의 최상위에 위치하며 모든 값을 포함할 수 있습니다.
any는 unknown 바로 아래에 있으며, 타입 검사를 우회하는 타입입니다.
기본 타입들인 null, void, number, bigint, boolean, string, symbol, object가 각각의 하위 타입을 가집니다.
never는 undefined와 null의 하위 타입으로, 도달할 수 없는 값을 나타냅니다.

# 원시타입과 리터널 타입

원시 타입은 기본적인 데이터 타입으로 number, string, boolean 등 JavaScript와 동일한 타입을 포함합니다.
리터럴 타입은 고정된 값을 가지도록 제한하는 타입으로, 유니온 타입과 결합하여 특정 값들 중 하나만 가질 수 있도록 할 수 있습니다.

1. 원시 타입 (Primitive Type)

원시 타입은 JavaScript와 TypeScript에서 기본적으로 제공하는 가장 작은 단위의 데이터 타입입니다. 원시 타입은 그 자체로 값을 가지며, 주로 불변(immutable)합니다.

number: 숫자 타입을 나타내며, 정수와 소수를 포함합니다.

let age: number = 30;

string: 문자열 타입을 나타냅니다.

let name: string = "John";

boolean: 불리언 타입으로, true 또는 false 값을 가집니다.

let isStudent: boolean = false;

bigint: 매우 큰 정수를 표현할 수 있는 타입입니다. BigInt 객체를 사용하거나 숫자 뒤에 n을 붙여 선언할 수 있습니다. (ES2020부터 지원)

let largeNumber: bigint = 9007199254740991n;

symbol: 고유한 심볼 값을 가지는 타입입니다. 객체의 고유한 속성 키를 만들 때 유용합니다.

let uniqueKey: symbol = Symbol("key");

undefined: 변수는 선언되었으나 값이 할당되지 않았을 때 기본적으로 가지는 타입입니다.

let notAssigned: undefined = undefined;

null: 값이 없음을 명시적으로 나타내는 타입입니다.

let empty: null = null;

void: 주로 함수에서 반환 값이 없음을 나타낼 때 사용합니다.

function logMessage(): void {
    console.log("Hello, TypeScript");
}

never: 절대 도달할 수 없는 값을 나타내는 타입으로, 항상 오류를 발생시키거나 영원히 실행되는 함수에서 사용됩니다.

function throwError(message: string): never {
    throw new Error(message);
}

2. 리터럴 타입 (Literal Type)

리터럴 타입은 변수가 가질 수 있는 고정된 값을 특정할 때 사용됩니다. 예를 들어, 문자열 "hello"를 리터럴 타입으로 지정하면, 그 변수는 "hello" 외의 값으로 변경할 수 없습니다. 리터럴 타입은 주로 문자열, 숫자, 불리언 값으로 사용할 수 있으며, 유니온 타입과 결합하여 여러 개의 고정된 값 중 하나만 허용하는 형태로 활용할 수 있습니다.

문자열 리터럴 타입

let direction: "left" | "right" | "up" | "down";
direction = "left";  // 가능
direction = "right"; // 가능
direction = "forward"; // 오류 발생, 지정된 값이 아님

숫자 리터럴 타입

let statusCode: 200 | 404 | 500;
statusCode = 200; // 가능
statusCode = 300; // 오류 발생, 지정된 값이 아님

불리언 리터럴 타입

let isCompleted: true | false;
isCompleted = true; // 가능
isCompleted = false; // 가능

type TrafficLight = "red" | "yellow" | "green";

function getTrafficLightAction(light: TrafficLight) {
    switch (light) {
        case "red":
            return "stop";
        case "yellow":
            return "slow down";
        case "green":
            return "go";
    }
}

console.log(getTrafficLightAction("red")); // "stop"

# 배열과 튜플

배열(Array): 동일한 타입의 값을 여러 개 가질 수 있는 구조. number[] 또는 Array<number> 형태로 선언.
튜플(Tuple): 고정된 개수와 타입의 값을 가질 수 있는 구조. [string, number] 형태로 선언.

1. 배열 (Array)

배열은 동일한 타입의 값들을 한 변수에 저장할 수 있는 데이터 구조입니다. JavaScript의 배열과 유사하며, TypeScript에서는 배열에 타입을 지정할 수 있습니다.

배열 선언 방법

대괄호([]) 표기법을 사용하여 배열 타입을 지정

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: string[] = ["apple", "banana", "orange"];

Array<> 제네릭 표기법을 사용하여 배열 타입을 지정

let numbers: Array<number> = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["apple", "banana", "orange"];

배열의 타입 검사

TypeScript는 배열 요소의 타입을 체크하기 때문에, 배열에 잘못된 타입의 값을 추가하려고 하면 오류가 발생합니다.

let names: string[] = ["Alice", "Bob"];
names.push("Charlie");  // 가능
names.push(123);        // 오류 발생, 숫자는 허용되지 않음

2. 튜플 (Tuple)

튜플은 배열과 비슷하지만, 요소의 타입과 길이를 고정할 수 있습니다. 즉, 튜플은 각 요소의 타입과 순서가 미리 결정된 배열입니다. 이를 통해 각 위치에 특정 타입의 값만 저장하도록 강제할 수 있습니다.

튜플은 정해진 위치에 정해진 타입의 값이 들어가야 하는 데이터를 표현할 때 유용합니다.

튜플 선언 방법

튜플은 대괄호([]) 안에 각 요소의 타입을 순서대로 나열하여 선언합니다.

let person: [string, number] = ["Alice", 30];

let person: [string, number] = ["Alice", 30];   // 가능
let person2: [string, number] = [30, "Alice"];  // 오류 발생, 순서가 다름
let person3: [string, number] = ["Alice", "30"]; // 오류 발생, 타입이 다름

예)

function fetchData(): [boolean, string] {
    return [true, "Data fetched successfully"];
}

let result = fetchData();
console.log(result[0]); // true
console.log(result[1]); // "Data fetched successfully"

튜플과 배열의 차이점

특징배열(Array)튜플(Tuple)

특징	배열(Array)	튜플(Tuple)
타입 일관성	배열의 모든 요소가 동일한 타입이어야 함	요소마다 서로 다른 타입을 가질 수 있음
길이 고정 여부	길이 제한이 없음	길이와 각 요소의 타입이 고정됨
사용 목적	동일한 타입의 값 집합	고정된 구조와 순서가 필요한 데이터 그룹

3. 튜플에 선택적 요소와 나머지 요소 지정

TypeScript에서는 튜플에 선택적 요소(?)나 나머지 요소(...)를 사용할 수도 있습니다.

선택적 요소: 특정 요소가 있어도 되고 없어도 되는 경우

let tupleWithOptional: [string, number?] = ["Alice"];      // 가능
tupleWithOptional = ["Alice", 30]; // 가능

나머지 요소: 나머지 요소를 특정 타입의 배열로 받을 수 있음

let tupleWithRest: [string, ...number[]] = ["Alice", 10, 20, 30];

# 객체

객체 타입: { 속성: 타입; } 형식으로 객체의 속성 타입을 정의합니다.
선택적 속성: 속성 뒤에 ?를 붙여 선택적으로 설정할 수 있습니다.
읽기 전용 속성: readonly 키워드로 설정하여 값을 변경하지 못하게 할 수 있습니다.
인덱스 시그니처: [key: string]: 타입으로 여러 동적 속성을 가질 수 있습니다.
인터페이스: 객체 타입을 정의하고, 확장할 수 있습니다.
타입 별칭: 타입을 정의하고 확장할 수 있습니다.

1. 객체 타입 선언 방법

객체의 타입을 정의할 때는 각 속성의 이름과 타입을 지정합니다.

let person: { name: string; age: number; isStudent: boolean } = {
  name: "Alice",
  age: 30,
  isStudent: true
};

person 객체는 name, age, isStudent라는 속성을 가지며, 각각 string, number, boolean 타입을 가지고 있습니다.

2. 선택적 속성(Optional Properties)

객체의 속성 중 일부는 **선택적(optional)**으로 지정할 수 있습니다. 선택적 속성은 있어도 되고 없어도 되는 속성을 의미하며, 타입 선언에서 속성 이름 뒤에 ?를 붙여서 표시합니다.

let person: { name: string; age?: number } = {
  name: "Alice"
};

age 속성은 선택적이므로 person 객체에 age가 없어도 오류가 발생하지 않습니다.

3. 읽기 전용 속성(Readonly Properties)

객체의 속성에 읽기 전용(readonly) 제약을 추가하여, 초기화 이후에는 속성의 값을 변경할 수 없도록 할 수 있습니다. readonly 키워드를 속성 앞에 붙여서 사용합니다.

let person: { readonly name: string; age: number } = {
  name: "Alice",
  age: 30
};

person.age = 31;      // 가능
person.name = "Bob";  // 오류 발생, name은 읽기 전용 속성

4. 인덱스 시그니처 (Index Signature)

객체가 동적 속성을 가질 수 있도록, 특정 타입의 속성을 임의의 이름으로 지정할 때는 인덱스 시그니처를 사용합니다. 주로 속성 이름을 모르는 경우나, 동일한 타입의 여러 속성을 가질 수 있는 객체에 유용합니다.

let dictionary: { [key: string]: string } = {};
dictionary["hello"] = "안녕하세요";
dictionary["goodbye"] = "안녕히 가세요";

dictionary 객체가 문자열을 키로 하고, 문자열을 값으로 가지는 여러 속성을 가질 수 있음을 나타냅니다.

5. 객체 타입을 위한 인터페이스 (Interface)

객체 타입이 복잡하거나 여러 곳에서 재사용할 때는 **인터페이스(interface)**를 사용하여 타입을 정의할 수 있습니다. 인터페이스는 객체의 구조를 명확하게 정의해주며, 확장이 가능합니다.

interface Person {
  name: string;
  age: number;
  isStudent?: boolean; // 선택적 속성
}

let alice: Person = {
  name: "Alice",
  age: 30
};

6. 객체 타입을 위한 타입 별칭 (Type Alias)

인터페이스와 비슷하게 타입 별칭(type alias)도 객체 타입을 정의하는 데 사용됩니다. 인터페이스와의 차이점은 주로 유니온 타입이나 복합 타입을 정의할 때 유용하다는 점입니다.

type Person = {
  name: string;
  age: number;
  isStudent?: boolean;
};

let bob: Person = {
  name: "Bob",
  age: 25
};

7. 객체 타입을 확장 (Interface & Type Alias Extension)

객체 타입을 확장해서 다른 타입의 기반으로 사용할 수 있습니다.

인터페이스 확장

인터페이스는 상속이 가능하여 다른 인터페이스를 확장할 수 있습니다.

interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  jobTitle: string;
}

let employee: Employee = {
  name: "Charlie",
  age: 40,
  jobTitle: "Developer"
};

타입 별칭 확장

타입 별칭은 & 연산자를 사용하여 여러 타입을 합칠 수 있습니다.

type Person = {
  name: string;
  age: number;
};

type Employee = Person & {
  jobTitle: string;
};

let employee: Employee = {
  name: "Daisy",
  age: 35,
  jobTitle: "Designer"
};

# 열거형

숫자형 열거형: 자동으로 1씩 증가된 숫자 값을 할당받으며, 값과 이름 간 양방향 매핑이 가능합니다.
문자열 열거형: 각 멤버에 명시적으로 문자열 값을 할당해야 하며, 양방향 매핑은 불가능합니다.
이종 열거형: 숫자와 문자열을 혼합하여 사용할 수 있지만, 특별한 경우가 아니면 권장되지 않습니다.
const 열거형: 컴파일 타임에 상수 값으로 대체되며, 성능 최적화를 위해 사용할 수 있습니다.

1. 숫자형 열거형 (Numeric Enum)

숫자형 열거형은 기본적으로 숫자 값을 자동으로 할당하는 열거형입니다. 첫 번째 값에만 숫자를 지정하면, 나머지는 1씩 증가된 값을 자동으로 할당받습니다.

enum Direction {
    Up,       // 0
    Down,     // 1
    Left,     // 2
    Right     // 3
}

let move: Direction = Direction.Up;
console.log(move);  // 0

Direction.Up의 값은 0이고, Down은 1, Left는 2, Right는 3으로 자동 할당

enum Status {
    Success = 1,
    InProgress,    // 2
    Failed         // 3
}

console.log(Status.Success);     // 1
console.log(Status.InProgress);  // 2
console.log(Status.Failed);      // 3

숫자형 열거형의 양방향 매핑

숫자형 열거형은 값과 이름 모두로 접근할 수 있어 양방향 매핑이 가능

enum Status {
    Success = 1,
    InProgress,
    Failed
}

console.log(Status.Success);       // 1
console.log(Status[1]);            // Success

2. 문자열 열거형 (String Enum)

문자열 열거형은 각 열거형 멤버에 문자열 값을 명시적으로 지정할 수 있는 열거형입니다. 문자열 열거형은 숫자형 열거형과 달리 자동 증분되지 않으며, 항상 지정된 문자열 값만 가집니다.

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT"
}

let move: Direction = Direction.Up;
console.log(move);  // "UP"

문자열 열거형은 특정 문자열 값만 가질 수 있으므로, 값과 이름 간의 양방향 매핑이 불가능합니다. 즉, Direction["UP"]처럼 값을 통해 열거형 이름을 가져올 수 없습니다.

3. 이종 열거형 (Heterogeneous Enum)

숫자형과 문자열형을 혼합하여 사용할 수도 있습니다. 이를 이종 열거형(Heterogeneous Enum)이라고 합니다. 그러나 실제로 이종 열거형은 특수한 경우가 아니면 잘 사용되지 않습니다. 타입 안전성을 저해할 수 있기 때문입니다.

enum Result {
    Success = 1,
    Failure = "FAILURE"
}

console.log(Result.Success);  // 1
console.log(Result.Failure);  // "FAILURE"

4. 열거형의 활용 예시

열거형은 코드의 가독성을 높이고, 고정된 값 집합을 관리하는 데 유용합니다. 주로 상태, 방향, 색상 등 유한한 값들을 표현할 때 많이 사용됩니다.

enum HttpStatus {
    OK = 200,
    BadRequest = 400,
    Unauthorized = 401,
    NotFound = 404,
    InternalServerError = 500
}

function handleRequest(status: HttpStatus) {
    switch (status) {
        case HttpStatus.OK:
            console.log("Request was successful.");
            break;
        case HttpStatus.NotFound:
            console.log("Resource not found.");
            break;
        case HttpStatus.InternalServerError:
            console.log("Server encountered an error.");
            break;
        default:
            console.log("Unhandled status code:", status);
    }
}

handleRequest(HttpStatus.OK);            // "Request was successful."
handleRequest(HttpStatus.NotFound);       // "Resource not found."
handleRequest(HttpStatus.InternalServerError); // "Server encountered an error."

5. const 열거형 (Const Enum)

const 열거형은 컴파일 타임에 인라인 처리되는 열거형입니다. 즉, 자바스크립트 코드로 컴파일될 때 실제 열거형 객체를 생성하지 않고 상수 값으로 대체됩니다. 성능 최적화가 필요할 때 사용됩니다.

const enum Direction {
    Up,
    Down,
    Left,
    Right
}

let move = Direction.Up;
console.log(move);  // 0 (컴파일된 JavaScript에서는 단순히 상수 값으로 대체)

const enum은 TypeScript에서만 인식 가능하며, 열거형 값이 자바스크립트 코드에서 직접 상수 값으로 변환되어 성능을 최적화할 수 있습니다.

[ TypeScript ] 개념 , 컴파일 옵션 설정

변쌤 (❁´◡`❁) — Thu, 14 Nov 2024 10:46:43 +0900

TypeScript란?

TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 상위 집합(Superset) 입니다. TypeScript는 JavaScript의 모든 기능을 포함하며, 여기에 정적 타입 지정(Static Typing)과 향상된 도구 지원 등의 기능을 추가하여 더 강력하고 안전한 코드 작성이 가능하게 합니다.

타입스크립트를 배워야 하는 이유

타입 안정성 → 버그 감소
- JS의 동적 타입 특성으로 생기는 예기치 못한 에러 방지
- 타입이 명확하니 주니어 개발자의 실수도 줄어듦
- 안정된 코드 작성이 가능 → 생산성 향상
협업에 유리
- 자동 완성, 타입 추론, 문서화 없이도 코드 이해 가능
- VSCode에서 호버만 해도 함수/컴포넌트 정보 확인
- 팀 작업 시 커뮤니케이션 비용 감소 → 개발 속도 향상
JS와 100% 호환 + 점진적 도입 가능
- 기존 JS 프로젝트에 점진적으로 도입 가능
- 기존 문법 그대로 사용하면서 타입만 추가하면 됨
- JS를 알면 TS는 ‘확장팩’처럼 접근 가능
범용성 (프론트/백엔드/크로스 플랫폼)
- React(웹), Node.js(백엔드), React Native(모바일), Electron(PC 앱) 등 전방위 호환
- 하나의 언어 체계로 다양한 플랫폼 개발 가능
- 코드 재사용성과 유지보수 용이
NestJS 완벽 호환 (백엔드 개발에 강력함)
- NestJS는 TypeScript를 전제로 설계된 백엔드 프레임워크
- 데코레이터 기반 구조, 의존성 주입(DI), 모듈 시스템 등 Java/Spring과 유사
- DTO, 인터페이스, 커스텀 타입 정의로 API 개발 시 타입 안정성과 개발 효율이 뛰어남
- React, Next.js와 함께 사용하면 프론트-백엔드 타입 통합도 가능
미래 대비
- 많은 오픈소스, 기업 프로젝트가 TS로 전환 중
- 최신 웹 기술(ES6+ 등)과도 자연스럽게 연결됨
- 유지보수, 리팩토링, 확장성 면에서 훨씬 유리

TypeScript의 특징

정적 타입 지정 (Static Typing)

TypeScript의 가장 큰 특징은 정적 타입을 지원한다는 것입니다. 변수, 함수의 매개변수, 반환 값 등에 타입을 명시하여 컴파일 시점에 타입 오류를 확인할 수 있습니다.
예를 들어, 숫자만 받아야 하는 함수에 문자열을 전달하는 실수를 컴파일러가 미리 잡아주기 때문에 런타임 오류를 줄일 수 있습니다.

function add(a: number, b: number): number {
    return a + b;
}

add(10, 20); // 정상 작동
add("10", 20); // 컴파일 오류 발생

인터페이스와 클래스

TypeScript는 객체지향 프로그래밍을 지원하며, 클래스, 인터페이스, 상속 등의 개념을 제공합니다. 이를 통해 객체지향 설계 원칙을 준수하며 코드의 구조를 더욱 견고하게 만들 수 있습니다.
JavaScript ES6에서 도입된 클래스 문법을 확장하여 더 다양한 객체지향 프로그래밍을 가능하게 합니다.

interface Person {
    name: string;
    age: number;
}

class Employee implements Person {
    constructor(public name: string, public age: number, public position: string) {}
}

const emp = new Employee("Alice", 25, "Developer");

더 나은 개발 도구 지원

TypeScript는 코드 작성 중에 자동 완성, 타입 검사, 리팩토링 도구의 도움을 받아 생산성을 높일 수 있습니다.
Visual Studio Code와 같은 에디터에서 TypeScript의 기능을 사용하면, 코드 작성 중에 오류를 실시간으로 확인할 수 있고 자동 완성도 훨씬 정확합니다.

최신 JavaScript 기능 지원

TypeScript는 최신 ECMAScript(ES) 표준을 빠르게 반영하고 있으며, ES6 이상의 문법도 TypeScript에서 사용할 수 있습니다.
TypeScript 컴파일러는 최신 문법을 구형 브라우저에서도 호환되는 ES5나 ES3로 변환할 수 있습니다.

컴파일러를 통한 오류 방지

TypeScript는 작성된 코드를 JavaScript로 컴파일합니다. 컴파일 과정에서 타입 오류나 문법 오류를 미리 감지하여 런타임 오류를 줄일 수 있습니다.

대규모 프로젝트에 적합

TypeScript는 코드의 가독성과 유지보수성을 높여주기 때문에, 대규모 프로젝트에서 특히 유리합니다. 타입 정보를 통해 협업 시 더 명확한 의사소통이 가능하고, 리팩토링 시에도 안정적인 작업이 가능합니다.

TypeScript와 JavaScript의 차이

기능	JavaScript
타입 지정	동적(Dynamic) 타입	정적(Static) 타입, 명시적 타입 지정 가능
인터페이스 지원	없음	있음
컴파일	필요 없음	TypeScript → JavaScript 컴파일 필요
오류 감지	런타임 오류	컴파일 시점에 오류 감지
최신 ES 기능 지원	최신 ES 표준에 따라 다름	최신 ES 기능을 바로 사용 가능, 하위 호환성 유지

TypeScript의 장단점

장점
- 코드의 안정성과 가독성 증가
- 협업 시 의사소통이 쉬워짐
- 오류를 컴파일 단계에서 미리 발견하여 런타임 오류 감소
- 대규모 프로젝트에 적합
단점
- 컴파일 단계가 추가되어 빌드 시간이 늘어날 수 있음
- 타입 지정으로 코드 작성이 다소 번거로울 수 있음
- 학습 곡선이 존재하며, 특히 JavaScript에 익숙하지 않은 경우 적응이 필요함

TypeScript 설치

TypeScript는 전역(global) 설치와 프로젝트 단위(local) 설치가 가능합니다.

전역 설치: 모든 프로젝트에서 TypeScript를 사용하고 싶을 때

npm install -g typescript

로컬 설치: 특정 프로젝트에서만 TypeScript를 사용할 때

npm install --save-dev typescript

VSCode에서 TypeScript 설정

(1) 프로젝트에 TypeScript 설정 파일(tsconfig.json) 생성

TypeScript를 제대로 사용하기 위해서는 tsconfig.json 파일이 필요합니다. 이 파일은 TypeScript 컴파일러의 설정을 정의합니다.

프로젝트 루트에서 아래 명령어를 실행하여 tsconfig.json 파일을 생성합니다.

npx tsc --init

(2) tsconfig.json 기본 설정

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "outDir": "dist",
        "moduleDetection": "force"
    },
    "ts-node": {
        "esm": true
    },
    "include": ["src"]
}

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "none",
    "outDir": "dist",
    "strict": true
  },
  "include": ["src"]
}

compilerOptions

target: "ESNext"
- 컴파일된 JavaScript 코드의 타겟 버전을 설정합니다. 여기서 ESNext로 설정하여 최신 ECMAScript 기능을 포함하여 JavaScript 코드로 변환합니다.
- 이 설정을 통해 최신 기능을 그대로 유지하여, 최신 브라우저 또는 Node.js 환경에서 최신 문법을 사용할 수 있습니다.
module: "ESNext"
- JavaScript 모듈 시스템을 설정합니다. ESNext로 설정하여 ECMAScript 모듈 표준(ESM)을 사용하도록 지정합니다.
- 브라우저와 최신 Node.js 버전에서 호환되는 모듈 형식을 제공합니다.
outDir: "dist"
- 컴파일된 JavaScript 파일의 출력 폴더를 지정합니다. 여기서는 dist 폴더로 설정되어 있으며, TypeScript 파일을 컴파일할 때 모든 출력 파일이 이 폴더에 생성됩니다.
moduleDetection: "force"
- 모든 파일을 강제로 모듈로 인식합니다. 모듈로 감지하지 않을 파일들도 모듈로 간주하여 컴파일러가 모듈 방식으로 컴파일하도록 합니다.

ts-node

ts-node는 TypeScript 코드를 즉시 실행할 수 있는 도구로, 이 프로젝트에서는 ts-node 설정이 포함되어 있습니다.

esm: true
- ts-node에서 ES 모듈 지원을 활성화합니다. 이를 통해 TypeScript 코드를 실행할 때 ECMAScript 모듈로 실행되도록 합니다.
- Node.js 환경에서 ts-node가 ESM 모듈 형식을 사용할 수 있도록 설정하여, import/export 구문을 그대로 사용할 수 있습니다.

include

include: ["src"]
- 컴파일에 포함할 파일 및 폴더를 지정합니다. src 폴더 아래의 모든 파일이 컴파일에 포함됩니다.
- 이를 통해 src 폴더 외의 다른 파일들은 컴파일에서 제외되어, 컴파일 범위를 제한하고 필요한 파일만 컴파일합니다.

(3) TypeScript 구문 오류 표시 및 자동 컴파일

VSCode는 기본적으로 TypeScript 오류를 실시간으로 보여줍니다. tsconfig.json 설정 후 TypeScript 파일을 작성하면, 컴파일 오류가 있는 경우 VSCode 에디터에서 바로 확인할 수 있습니다.

자동 컴파일: TypeScript 파일을 변경할 때마다 자동으로 컴파일하려면 터미널에서 다음 명령어를 실행하여 watch 모드를 사용할 수 있습니다.

npx tsc -w

3. VSCode 확장 기능 설치 (Optional)

ESLint나 Prettier와 같은 확장 기능을 추가 설치하여 코드 품질과 포맷팅을 자동화하면 더 깔끔하게 코드를 관리할 수 있습니다.

ESLint: TypeScript 코드에서 린트 검사를 통해 코드 스타일 유지
Prettier: 코드 자동 포맷팅

4. 실행 확인

VSCode에서 .ts 파일을 생성하고 간단한 코드를 작성한 뒤, 터미널에서 npx tsc를 실행하여 tsconfig.json 설정대로 컴파일되는지 확인합니다.

프로젝트 루트
├── src                    // TypeScript 소스 파일을 포함하는 폴더
│   ├── components         // React 컴포넌트나 일반 모듈을 위한 폴더 (선택 사항)
│   ├── models             // 데이터 모델 정의 파일을 위한 폴더 (선택 사항)
│   ├── services           // API 호출 등 서비스 관련 파일을 위한 폴더 (선택 사항)
│   ├── utils              // 유틸리티 함수 등을 위한 폴더 (선택 사항)
│   └── index.ts           // 프로젝트의 진입점 파일
├── dist                   // 컴파일된 JavaScript 파일이 저장되는 폴더 (컴파일 시 자동 생성)
├── tsconfig.json          // TypeScript 설정 파일
└── package.json           // 프로젝트의 패키지 및 스크립트 정보

src/: TypeScript 소스 파일이 위치하는 메인 폴더입니다. 모든 .ts 파일이 이곳에 들어가며, tsconfig.json의 설정에 따라 dist 폴더로 컴파일됩니다.
- components/: React 컴포넌트나 재사용 가능한 모듈을 추가할 수 있습니다.
- models/: 인터페이스나 타입 정의 등 데이터 모델 파일을 저장합니다.
- services/: API 호출 등 서비스 관련 로직을 모아 관리할 수 있습니다.
- utils/: 유틸리티 함수와 같은 공통 코드를 저장합니다.
- index.ts: 프로젝트의 진입점 파일로, 가장 기본적인 실행 파일입니다.
dist/: TypeScript 파일이 컴파일되면서 JavaScript 파일이 이 폴더에 저장됩니다. TypeScript 설정에 따라 outDir 옵션으로 이 폴더에 지정되었습니다.

예)

Projects 관련 옵션

incremental: 증분 컴파일을 활성화하여, 컴파일이 완료된 .tsbuildinfo 파일을 저장하고 이후 변경된 부분만 컴파일하여 속도를 높입니다.
composite: 프로젝트 참조 기능을 활성화하여, 다른 TypeScript 프로젝트 간의 참조를 가능하게 합니다.
tsBuildInfoFile: 증분 컴파일 정보를 저장할 파일의 경로를 지정합니다.
disableSourceOfProjectReferenceRedirect: 프로젝트 참조 시 선언 파일이 아닌 소스 파일을 선호하지 않도록 설정합니다.
disableSolutionSearching: 다중 프로젝트 참조 확인을 비활성화합니다.
disableReferencedProjectLoad: TypeScript가 자동으로 로드하는 프로젝트 수를 줄입니다.

Language and Environment (언어 및 환경) 관련 옵션

target: 컴파일된 JavaScript의 버전을 지정합니다. 예: es2016.
lib: 타겟 런타임 환경에 포함할 라이브러리 선언 파일들을 지정합니다.
jsx: JSX 코드를 어떻게 생성할지 설정합니다.
experimentalDecorators: 데코레이터를 지원합니다.
emitDecoratorMetadata: 데코레이터에 대해 타입 메타데이터를 생성합니다.
jsxFactory, jsxFragmentFactory, jsxImportSource: React JSX 생성을 위해 필요한 JSX 함수 또는 프래그먼트 설정을 지정합니다.
noLib: 기본 라이브러리 파일을 포함하지 않도록 설정합니다.
useDefineForClassFields: ECMAScript 표준에 따라 클래스 필드를 생성합니다.
moduleDetection: 모듈 형식을 자동으로 감지하도록 설정합니다.

Modules (모듈) 관련 옵션

module: 컴파일된 코드의 모듈 형식을 지정합니다. 예: commonjs.
rootDir: 소스 파일의 루트 폴더를 지정합니다.
moduleResolution: 모듈을 검색하는 방식을 설정합니다.
baseUrl: 상대가 아닌 모듈 경로의 기준 디렉터리를 지정합니다.
paths: 특정 경로에서 모듈을 찾도록 재매핑합니다.
resolveJsonModule: JSON 파일을 모듈로 가져오는 기능을 활성화합니다.

JavaScript 지원 옵션

allowJs: JavaScript 파일을 프로그램에 포함할 수 있게 합니다.
checkJs: 타입 체크된 JavaScript 파일에 오류 보고를 활성화합니다.

Emit (출력) 관련 옵션

declaration: .d.ts 파일을 생성합니다.
sourceMap: 디버깅을 위해 JavaScript 파일의 소스 맵 파일을 생성합니다.
noEmit: 파일 생성을 비활성화합니다.
outDir: 생성된 파일의 출력 폴더를 지정합니다.
removeComments: 주석을 제거하고 파일을 생성합니다.
inlineSourceMap: 생성된 JavaScript 내에 소스 맵을 포함합니다.

Interop Constraints (상호 운용성 제약 조건) 관련 옵션

esModuleInterop: CommonJS 모듈을 쉽게 가져올 수 있도록 JavaScript 코드를 추가로 생성합니다. allowSyntheticDefaultImports도 활성화됩니다.
forceConsistentCasingInFileNames: 파일 이름 대소문자가 일치하도록 강제합니다.

Type Checking (타입 검사) 관련 옵션

strict: 모든 엄격한 타입 검사 옵션을 활성화합니다.
noImplicitAny: 암시적 any 타입을 허용하지 않습니다.
strictNullChecks: null과 undefined를 타입 검사에 포함합니다.
noUnusedLocals: 읽지 않는 지역 변수에 대해 오류를 보고합니다.
noImplicitReturns: 모든 코드 경로에서 반환을 명시적으로 하도록 설정합니다.

Completeness (완전성) 관련 옵션

skipLibCheck: .d.ts 파일의 타입 검사를 생략하여 컴파일 속도를 높입니다.

# 구조

1. 폴더 만들기

2. 설치

npm install -g typescript
npx tsc --init
npx tsc -w

3. tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "outDir": "./src/dist",
        "moduleDetection": "force"
    },
    "ts-node": {
        "esm": true
    },
    "include": ["src"]
}

  ts-study
├──   dist              # TypeScript 컴파일 후 생성된 JS 파일 저장소
│   ├── ch01_1.js
│   ├── ch01_2.js
├──   src               # TypeScript 소스 코드 폴더
│   ├──   asset/images  # 이미지 파일 저장소
│   │   ├── img1.png
│   │   ├── img2.jpg
│   │   ├── img3.jpg
│   ├──   basics        # 기본 문법 학습 코드
│   │   ├── ch01_1.ts
│   │   ├── ch01_2.ts
├──   view              # 정적 파일 저장소 (HTML 파일 등)
│   ├── index.html
├── tsconfig.json        # TypeScript 설정 파일

구조 분석

✔ src/basics/ → 기본적인 TypeScript 문법을 학습하는 코드 저장
✔ src/asset/images/ → 학습 중 필요한 이미지 파일 저장
✔ view/index.html → HTML을 활용한 TypeScript 실행 테스트 (웹 브라우저에서 실행 가능)
✔ dist/ → TypeScript가 컴파일한 JavaScript 코드 저장 (실행용)

4. js => ctrl + alt + n

[ React ] mbti 유형검사

변쌤 (❁´◡`❁) — Mon, 14 Oct 2024 22:31:27 +0900

mbti 유형검사

MBTI(Myers-Briggs Type Indicator)는 심리 유형 이론을 기반으로 사람들의 성격을 16가지 유형으로 분류하는 성격 유형 검사입니다.

MBTI의 16가지 성격 유형

MBTI 성격 유형은 4개의 차원에서 각 성향을 조합하여 총 16가지로 나눌 수 있습니다:

E (외향) vs. I (내향)
S (감각) vs. N (직관)
T (사고) vs. F (감정)
J (판단) vs. P (인식)

각 MBTI 유형의 의미

E (Extraversion, 외향): 외부 세계와의 상호작용을 중시하고 사람들과 교류하는 것을 좋아합니다.
I (Introversion, 내향): 내면 세계에 집중하며 혼자만의 시간을 중요시합니다.
S (Sensing, 감각): 현실적이고 사실적인 정보를 중시하며, 경험과 실제적인 감각을 통해 세상을 봅니다.
N (Intuition, 직관): 추상적인 아이디어나 가능성에 관심을 가지며, 직관을 통해 세상을 해석합니다.
T (Thinking, 사고): 논리적이고 객관적인 분석을 통해 결정을 내립니다.
F (Feeling, 감정): 감정과 가치, 타인의 감정을 고려하여 결정을 내립니다.
J (Judging, 판단): 계획적이고 체계적인 방식을 선호하며, 일정을 중요시합니다.
P (Perceiving, 인식): 유연하고 즉흥적인 방식을 선호하며, 상황에 맞춰 대처하는 것을 좋아합니다.

1. 외향성(E) vs. 내향성(I)

이 차원은 에너지를 얻는 방식과 상호작용하는 방식을 나타냅니다.

외향성(E): 외부 세계와의 상호작용을 통해 에너지를 얻습니다. 사람들과 함께 활동하거나 소통하는 것을 즐기며, 사교적이고 활발한 성격입니다. 새로운 경험을 통해 에너지를 얻고, 사람들과의 관계에 중점을 둡니다.
내향성(I): 내면 세계에서 에너지를 얻습니다. 혼자만의 시간을 통해 재충전하며, 깊은 생각이나 개인적인 활동을 선호합니다. 사람들과의 상호작용보다는 혼자서 집중하는 것을 더 좋아합니다.

2. 감각(S) vs. 직관(N)

이 차원은 정보를 받아들이는 방식과 그에 대한 해석 방식을 나타냅니다.

감각(S): 현실적이고 구체적인 정보를 중요시합니다. 오감으로 얻는 정보에 의존하며, 실제적이고 실용적인 해결책을 찾습니다. 현재에 집중하며, 과거의 경험을 통해 결정을 내립니다.
직관(N): 직관적이고 미래지향적인 정보를 중요시합니다. 사실보다는 가능성과 패턴을 중시하며, 큰 그림을 보려고 합니다. 창의적이고, 상상력을 사용해 아이디어를 발전시킵니다.

3. 사고(T) vs. 감정(F)

이 차원은 결정을 내리는 방식에 대한 선호를 나타냅니다.

사고(T): 논리적이고 객관적인 방식으로 결정을 내립니다. 사실과 분석을 바탕으로 판단하며, 감정보다는 원리와 규칙을 중시합니다. 효율적이고 공정한 결정을 내리는 것을 선호합니다.
감정(F): 감정과 타인의 감정을 고려하여 결정을 내립니다. 사람들의 관계와 조화를 중시하며, 공감을 바탕으로 한 결정을 내립니다. 상황의 감정적 측면을 고려해 갈등을 해결하려고 합니다.

4. 판단(J) vs. 인식(P)

이 차원은 삶을 조직하는 방식과 접근 방식에 대한 선호를 나타냅니다.

판단(J): 계획적이고 조직적인 방식을 선호합니다. 미리 계획을 세우고, 그 계획에 따라 체계적으로 일을 처리하는 것을 좋아합니다. 결정을 신속하게 내리고, 일관성 있는 방식을 선호합니다.
인식(P): 융통성 있고 즉흥적인 방식을 선호합니다. 상황에 따라 유연하게 대응하며, 미리 결정을 내리기보다는 열린 선택지를 유지하려고 합니다. 자유롭게 일을 처리하며, 즉흥적인 결정을 즐깁니다.

MBTI 16가지 성격 유형 설명

1. ESTJ (외향-감각-사고-판단)

설명: ESTJ는 현실적이고 실용적인 성향을 가지고 있으며, 조직적으로 일을 처리하는 것을 좋아합니다. 책임감이 강하고, 목표를 설정하여 이를 성취하는 데 집중합니다.
대표적 성향: 리더십, 목표 지향적, 체계적

2. ISTJ (내향-감각-사고-판단)

설명: ISTJ는 신뢰할 수 있고 책임감 있는 성향을 가지고 있습니다. 체계적이고 계획적으로 일을 처리하며, 논리적이고 실용적인 사고를 바탕으로 문제를 해결합니다.
대표적 성향: 신중함, 체계적, 실용적

3. ESTP (외향-감각-사고-인식)

설명: ESTP는 현실적인 문제 해결 능력을 가지고 있으며, 빠르게 결정을 내리고 행동하는 것을 선호합니다. 모험심이 강하고 새로운 경험을 즐깁니다.
대표적 성향: 현실적, 모험적, 즉각적

4. ISTP (내향-감각-사고-인식)

설명: ISTP는 독립적이고 실용적인 성향을 지니고 있습니다. 문제를 논리적으로 분석하고 해결책을 찾는 데 능숙하며, 도전적이고 분석적인 성격을 가지고 있습니다.
대표적 성향: 독립적, 분석적, 도전적

5. ENFP (외향-직관-감정-인식)

설명: ENFP는 창의적이고 열정적인 성향을 가지고 있으며, 사람들과의 관계에서 에너지를 얻습니다. 이상적이고 상상력이 풍부하며, 다양한 가능성을 탐구하는 것을 즐깁니다.
대표적 성향: 창의적, 열정적, 사교적

6. INFP (내향-직관-감정-인식)

설명: INFP는 이상적이고 내면적인 가치를 중시하며, 타인의 감정을 깊이 이해하고 공감합니다. 창의적이며 예술적 성향이 강하고, 자신의 가치와 일치하는 일을 중요시합니다.
대표적 성향: 이상적, 창의적, 공감력

7. ENTJ (외향-직관-사고-판단)

설명: ENTJ는 전략적이고 결단력 있는 성향을 가지고 있으며, 리더십을 발휘하는 것을 즐깁니다. 목표 달성을 위해 체계적으로 계획을 세우고 실행하는 것을 선호합니다.
대표적 성향: 리더십, 전략적, 논리적

8. INTJ (내향-직관-사고-판단)

설명: INTJ는 분석적이고 계획적인 성향을 가지고 있으며, 복잡한 문제를 해결하는 데 뛰어납니다. 미래 지향적인 사고를 하고, 체계적으로 계획을 세우는 것을 좋아합니다.
대표적 성향: 분석적, 계획적, 독립적

9. ESFJ (외향-감각-감정-판단)

설명: ESFJ는 타인을 돌보는 것을 즐기며, 사람들과의 관계에서 에너지를 얻습니다. 사회적 규범을 중시하고, 사람들에게 도움을 주는 것을 좋아합니다.
대표적 성향: 사교적, 친절함, 규범적

10. ISFJ (내향-감각-감정-판단)

설명: ISFJ는 세심하고 책임감 있는 성향을 가지고 있으며, 타인을 돕는 것을 중요시합니다. 세부 사항에 신경을 쓰며, 실용적이고 계획적으로 일을 처리합니다.
대표적 성향: 세심함, 책임감, 보호자적

11. ESFP (외향-감각-감정-인식)

설명: ESFP는 활발하고 외향적인 성향을 가지고 있으며, 사람들과 함께 즐거운 시간을 보내는 것을 좋아합니다. 즉흥적이고 현실적인 성향을 가지고 있으며, 지금 이 순간을 즐기는 경향이 있습니다.
대표적 성향: 즉흥적, 활발함, 사교적

12. ISFP (내향-감각-감정-인식)

설명: ISFP는 조용하고 겸손한 성향을 가지고 있으며, 현재의 감각적 경험을 중요시합니다. 예술적이고 창의적인 활동을 선호하며, 타인의 감정을 잘 이해합니다.
대표적 성향: 예술적, 겸손함, 감정적

13. ENTP (외향-직관-사고-인식)

설명: ENTP는 창의적이고 논쟁을 즐기며, 새로운 아이디어를 탐구하는 것을 좋아합니다. 빠르게 생각하고 문제를 해결하는 데 능숙하며, 변화와 혁신을 추구합니다.
대표적 성향: 혁신적, 논리적, 빠른 사고

14. INTP (내향-직관-사고-인식)

설명: INTP는 지적이고 분석적인 성향을 가지고 있으며, 복잡한 이론과 아이디어를 탐구하는 것을 좋아합니다. 창의적이고 논리적인 사고를 하며, 문제를 깊이 분석하는 것을 선호합니다.
대표적 성향: 분석적, 논리적, 창의적

15. ENFJ (외향-직관-감정-판단)

설명: ENFJ는 타인을 돕고 영감을 주는 것을 즐깁니다. 사교적이고 친절하며, 다른 사람을 이끄는 리더십을 발휘하는 성향이 강합니다.
대표적 성향: 리더십, 영감을 주는, 사교적

16. INFJ (내향-직관-감정-판단)

설명: INFJ는 깊이 있는 감정과 직관적인 사고를 가지고 있으며, 사람들을 돕고자 하는 강한 의지를 가지고 있습니다. 이상주의적이며, 타인을 이해하고 공감하는 능력이 뛰어납니다.
대표적 성향: 공감력, 이상적, 직관적

결과