예방이의 개발일기

프론트엔드에서 자유롭게 사용할 수 있는 오픈 API

전예방 — Tue, 13 May 2025 20:20:31 +0900

오픈 API는 개인 프로젝트나 토이 프로젝트, 테스트용으로 매우 유용하다.

영화 / 콘텐츠 관련 API

이름	설명	인증여부
YTS	토렌트 기반 영화 정보 API	❌
OMDb API	영화, 시리즈, 에피소드 정보 (IMDb 기반)	무료 키 필요
TMDB	포스터, 평점, 줄거리 포함 영화 정보 풍부	API Key 필요 (무료 가입)

책 / 뉴스 / 지식 정보

이름	설명	인증여부
Open Library	책 검색, 커버, 저자 등 정보	❌
NewsAPI	최신 뉴스 헤드라인, 검색 등
Wikipedia API	위키백과 검색 및 내용 파싱	❌

이미지 / 사진

이름	설명	인증여부
Unsplash API	고퀄 사진 검색 및 다운로드 링크
Lorem Picsum	랜덤 이미지, placeholder 용도	❌

위치 / 날씨 / 지도

이름	설명	인증여부
OpenWeatherMap	날씨 정보, 위치 기반 날씨 등
ipinfo.io	사용자의 IP 기반 위치 정보	(무료 플랜 있음)
GeoNames	위치 기반 정보, 나라/도시 검색	(무료 회원가입)

재미있는 / 실험용 API

이름	설명	인증여부
JokeAPI	프로그래밍 유머, 일반 유머 등	❌
Advice Slip	인생 조언 API	❌
Yes/No API	랜덤 yes/no 대답 + gif	❌
The Cat API	귀여운 고양이 사진 랜덤 제공
Dog API	개 사진 API (랜덤, 품종별 등)	❌

개발자용 / 도구 API

이름	설명	인증여부
GitHub API	GitHub 레포, 유저 정보, 활동 등	(optional)
QR Code API	텍스트 -> QR 코드 이미지	❌
jsonplaceholder	테스트용 더미 데이터 (posts, todos 등)	❌

그외

https://github.com/public-apis/public-apis

[웹접근성] 명료성에 대해서 (명도차, 무늬 활용)

전예방 — Mon, 12 May 2025 22:26:07 +0900

색맹, 색약, 저시력 등의 시각장애가 있는 사용자를 위한 웹 접근성 향상

1. 색에 의한 정보 표현 방지

색맹인 사람들은 어떤게 Dataset1 인지 어떤게 Dataset2 인지 모를 수 있다.

무늬를 이용해서 정보를 제공할 수 있다.

Chart.js 에 패턴 적용

Colors | Chart.js

Colors Charts support three color options: for geometric elements, you can change background and border colors; for textual elements, you can change the font color. Also, you can change the whole canvas background. Default colors If a color is not specifie

www.chartjs.org

GitHub - ashiguruma/patternomaly: Easily generate patterns for use in data graphics

Easily generate patterns for use in data graphics. Contribute to ashiguruma/patternomaly development by creating an account on GitHub.

github.com

2. 명도대비 4.5 : 1 이상

명도차이 계산 TOOL

Colour Contrast Analyser (CCA) - TPGi

TPGi's ADA Color Contrast Checker helps determine the accessibility of the contrast ratio of two colors for WCAG AA and AAA.

www.tpgi.com

텍스트와 배경 간의 명도 대비는 4.5:1 이상이여야 한다.

이미지로 표현된 텍스트 콘텐츠도 포함이다.

❌ 4.5:1 이상 기준 적용 예외

비활성 콘텐츠 (disabled 버튼 같은 경우)
장식 목적의 콘텐츠 (사용자에게 의미 있는 정보를 제공하지 않는 경우)

[웹접근성] 목록 나열 태그 (ul, ol, dl)

전예방 — Mon, 12 May 2025 20:37:11 +0900

목록나열 태그에 대해서 알아보자

ul (Unordered List)

순서가 지정되지 않은 목록 나열할 때 사용

<ul aria-label="프론트엔드 기술 목록">
  <li>
  	React
    <ul>
    	<li>CRA</li>
        <li>VITE</li>
    </ul>
  </li>
  <li>Next.js</li>
  <li>TypeScript</li>
</ul>

✅ 예시

React
- CRA
- VITE
Next.js
TypeScript

✅ 설명

ul 바로 하위 자식 요소는 li 태그만 사용가능
기본 글머리 기호는 disc (list-style-type: disc)

ol (Ordered List)

순서가 지정된 목록 나열할 때 사용

<ol aria-label="프론트엔드 기술 목록">
  <li>
  	React
    <ul>
    	<li>CRA</li>
        <li>VITE</li>
    </ul>
  </li>
  <li>Next.js</li>
  <li>TypeScript</li>
</ol>

✅ 예시

React
1. CRA
2. VITE
Next.js
TypeScript

✅ 설명

ol 바로 하위 자식 요소는 li 태그만 사용가능
기본 글머리 기호는 decimal 숫자 (list-style-type: decimal)

/* 숫자 (기본값) */
<ol type="1">

/* 소문자 */
<ol type="a">

/* 대문자 */
<ol type="A">

/* 로마숫자(소문자) */
<ol type="i">

/* 로마숫자(대문자) */
<ol type="I">

/* 3부터 시작 */
<ol start="3">

/* 역순 */
<ol reversed>

/* start부터 역순 */
<ol reversed start="5">

dl (Description List)

용어를 정의하거나 key-value 형태의 항목 나열할 때 사용

<dl>
    <dt>감자<dt>
    <dd>10,000원<dd>
    <dt>당근<dt>
    <dd>4,000원<dd>
</dl>

<dl>
    <div>
        <dt>감자<dt>
        <dd>10,000원<dd>
    </div>
    <div>
        <dt>당근<dt>
        <dd>4,000원<dd>
    </div>
</dl>

✅ 설명

dl 자식요소로는 dt, dd 태그만 가능 (key : dt / value : dd)
dt 태그 없이 dd만 사용 ❌, dt 태그를 설명하기 위한 여러 dd 사용가능
연관된 dt, dd 그룹을 묶는 용도의 <div>태그는 허용

[NVM] NVM에 대해서, 기본 명령어

전예방 — Wed, 16 Apr 2025 20:06:17 +0900

nvm이란?

nvm은 Node Version Manager, Node.js의 버전을 관리하는 도구

왜 필요할까?

Node.js는 버전마다 지원하는 기능이나 문법이 다를 수 있다.

근데 Node.js를 한 버전만 설치할 수 있어서 생기는 문제점을 NVM이 해결해준다.

nvm을 쓰면?

여러 Node.js 버전을 설치해 놓고, 필요할 때마다 전환할 수 있다.
프로젝트마다 다른 Node.js 버전으로 맞춰 쓸 수 있다.
기본(default) 버전도 지정할 수 있다.

❗주의사항 (특히 맥북에서는!)

nvm은 그냥 설치해도 안 작동할 수 있어서 아래처럼 .zshrc에 꼭 추가해줘야된다.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

설치 확인

node -v     # 현재 적용된 Node.js 버전 확인
nvm ls      # 설치된 모든 버전 확인

명령어

Node.js 버전을 기본값(default)으로 설정

nvm alias default <버전>

이렇게 설정하면, 터미널을 새로 열었을 때 자동으로 해당 버전으로 설정

현재 설치된 Node.js 버전 확인

nvm ls

사용 가능한 버전 목록 보기

nvm ls-remote

특정 버전 설치

nvm install 18.17.1

기본 버전 확인

nvm alias

추가로, .nvmrc 파일을 프로젝트 루트에 만들어서 프로젝트마다 버전을 명시

echo "18.17.1" > .nvmrc

그리고 프로젝트 들어갔을 때는:

nvm use

[암호화] C# PasswordDeriveBytes 를 JS 코드로 변환하기

전예방 — Tue, 15 Apr 2025 20:01:27 +0900

어쩌다 보니 프론트엔드에서도 백엔드와 동일한 방식으로 암호화를 적용해야 하는 상황이 생겼다.

백엔드가 C#이라서 C# 코드를 JS 코드로 변환하다가 PasswordDeriveBytes 클래스 때문에 진짜 애먹어서 글 남긴다.

일단 제일 중요한 참고 사이트!!

(chatgpt보다 오히려 참고사이트에서 힌트를 많이 얻었다)

왜인지 몰라도 암호화 언어 바꿔서 작성해달라고 하면 chatgpt가 항상 틀리는거같다...

Using node.js to decrypt data encrypted using c#

I'm facing a issue now which need you guys help. I use c# to do some encryption. Then need to use node.js to decry-pt it. But I just found that I can't do it correctly base on my c# encryption alg...

stackoverflow.com

PasswordDeriveBytes of C# to Java (2)

PasswordDeriveBytes from C# to Java (1) 에서 계속... 2016. 04.18 업데이트) 아래 소스를 정리한 GitHub 저장소를 만들었습니다.C#에 있는 PasswordDeriveBytes 클래스를 Java 로 구현해야 했던 나는 해당 클래스에 버

gilchris.tistory.com

stackoverflow에서 PasswordDeriveBytes 클래스를 JS로 바꾸는 코드를 얻었고

티스토리 블로그에서는 GetBytes 의 원리에 대해서 알았다. GetBytes ... 진짜 골 때린다.

// password = "password"

byte[] salt = Encoding.ASCII.GetBytes(Convert.ToString(password.Length));
Console.WriteLine("Salt (ASCII of length): " + BitConverter.ToString(salt));

PasswordDeriveBytes secretKey = new PasswordDeriveBytes(password, salt);

byte[] keyBytes = secretKey.GetBytes(32);
byte[] ivBytes = secretKey.GetBytes(16);

Console.WriteLine("Key (32 bytes): " + BitConverter.ToString(keyBytes));
Console.WriteLine("IV (16 bytes): " + BitConverter.ToString(ivBytes));

이 C# 코드를 아래와 같이 JS로 바꿨다.

import CryptoJS from "crypto-js";
import crypto from "crypto";

export function deriveBytesFromPassword(
  password,
  salt,
  iterations,
  hashAlgorithm,
  keyLength,
) {
  if (keyLength < 1) throw new Error("keyLength must be greater than 1");
  if (iterations < 2) throw new Error("iterations must be greater than 2");

  console.log("  password:", password);
  console.log("  salt (hex):", salt.toString("hex"));
  console.log("  iterations:", iterations);
  console.log("  hashAlgorithm:", hashAlgorithm);

  const passwordWithSalt = Buffer.concat([
    Buffer.from(password, "utf-8"),
    salt,
  ]);
  console.log("  password + salt (hex):", passwordWithSalt.toString("hex"));

  const hashMissingLastIteration = hashKeyNTimes(
    passwordWithSalt,
    iterations - 1,
    hashAlgorithm,
  );
  console.log(
    "  hashMissingLastIteration:",
    hashMissingLastIteration.toString("hex"),
  );

  let result = hashKeyNTimes(hashMissingLastIteration, 1, hashAlgorithm);
  console.log("  Final 1x Hash:", result.toString("hex"));

  result = extendResultIfNeeded(
    result,
    keyLength,
    hashMissingLastIteration,
    hashAlgorithm,
  );
  console.log(
    "✅ Extended Key (before slice):",
    keyLength,
    result.toString("hex"),
  );

  return result.slice(0, keyLength);
}

function hashKeyNTimes(key, times, hashAlgorithm) {
  let result = key;
  for (let i = 0; i < times; i++) {
    result = crypto.createHash(hashAlgorithm).update(result).digest();
    console.log(`     hash round ${i + 1}:`, result.toString("hex"));
  }
  return result;
}

function extendResultIfNeeded(
  result,
  keyLength,
  hashMissingLastIteration,
  hashAlgorithm,
) {
  let counter = 1;
  while (result.length < keyLength) {
    const extension = calculateSpecialMicrosoftHash(
      hashMissingLastIteration,
      counter,
      hashAlgorithm,
    );
    console.log(
      `➕ Extending with counter=${counter}:`,
      extension.toString("hex"),
    );
    result = Buffer.concat([result, extension]);
    counter++;
  }
  return result;
}

function calculateSpecialMicrosoftHash(
  hashMissingLastIteration,
  counter,
  hashAlgorithm,
) {
  const prefixCalculatedByCounter = Buffer.from(counter.toString(), "utf-8");
  const inputForAdditionalHashIteration = Buffer.concat([
    prefixCalculatedByCounter,
    hashMissingLastIteration,
  ]);
  console.log(
    `     Additional input for counter=${counter}:`,
    inputForAdditionalHashIteration.toString("hex"),
  );
  return crypto
    .createHash(hashAlgorithm)
    .update(inputForAdditionalHashIteration)
    .digest();
}

const password = "password";
const salt = Buffer.from(password.length.toString(), "ascii"); // C#의 Encoding.ASCII.GetBytes(Convert.ToString(password.Length)); 동일
const iterations = 100;
const hashAlgorithm = "sha1";
const keyLength = 100;

const derived = deriveBytesFromPassword(
  password,
  salt,
  iterations,
  hashAlgorithm,
  keyLength,
);

// 2) 앞쪽 16바이트 => IV
const keyBytes = derived.slice(0, 32);

// 3) 그 다음 32바이트 => Key
const ivBytes = derived.slice(8, 16);
const ivBytes2 = derived.slice(40, 48);

const ivBytes3 = Buffer.concat([
  ivBytes, // 8바이트
  ivBytes2, // 8바이트
]);

function encryptAesCbc(plainText, keyBytes, ivBytes) {
  const keyWordArray = CryptoJS.enc.Hex.parse(keyBytes.toString("hex"));
  const ivWordArray = CryptoJS.enc.Hex.parse(ivBytes.toString("hex"));
  const plaintextUtf16LE = CryptoJS.enc.Utf16LE.parse(plainText); // C#에서 `Encoding.Unicode`는 UTF-16LE

  const encrypted = CryptoJS.AES.encrypt(plaintextUtf16LE, keyWordArray, {
    iv: ivWordArray,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  });

  return encrypted.ciphertext.toString(CryptoJS.enc.Base64); // C#의 Convert.ToBase64String 대응
}

const encryptedBase64 = encryptAesCbc("1111", keyBytes, ivBytes3);
console.log("  Encrypted Base64:", encryptedBase64);

전체적인 JS 코드이다.

PasswordDeriveBytes 는 GetBytes를 16 바이트 먼저 호출하냐, 32 바이트 먼저 호출하냐에 따라서 값이 바뀐다.

도대체 무슨 원리로 그러는거지...? 뭔가 도출된 값을 보면 연관성은 무조건 있었다.

저 위에 블로거 분이 정리해 놓으신거 보니까

첫 번째 GetBytes의 전달인자 (A)	두 번째 GetBytes의 결과값 두 번째 GetBytes의 전달인자 (B)
1 ~ 9	Runtime Error
10 ~ 19	전체 key stream에서 (20 - A) 만큼 건너뛰고 (20 - A) 만큼을 읽어서 결과값의 앞부분으로 이용 & 20바이트 부터 20바이트 + (B - (20 - A)) 까지의 결과값을 뒷부분으로 이용
21 ~ 39	전체 key stream에서 (40 - A) 만큼 건너뛰고 (40 - A) 만큼을 읽어서 결과값의 앞부분으로 이용 & 40바이트 부터 40바이트 + (B - (40 - A)) 까지의 결과값을 뒷부분으로 이용
40 ~	전체 key stream에서 첫 번째 GetBytes를 읽은 뒷부분부터 그대로 읽어서 돌려줌

byte[] keyBytes = secretKey.GetBytes(32);
byte[] ivBytes = secretKey.GetBytes(16);

ex1)

32를 먼저 호출하면 결과값에 0 ~ 32까지가 keyBytes가 되는거고

그다음 16을 호출하면 A가 21 ~ 39에 속하니까

ivBytes는 8부터 8만큼이니까 8 ~ 16을 앞부분으로 사용하고, 40 ~ 48을 뒷부분으로 사용하는거다.

ex2)

16을 먼저 호출하면 결과값에 0 ~ 16까지가 keyBytes가 되고,

ivBytes는 B가 32니까 10~19 구간을 보면 4 ~ 8 까지가 앞부분, 20 ~ 48까지가 뒷부분이 되는거다.

Vite기반 React 프로젝트에서 emotion 설정하기

전예방 — Wed, 26 Mar 2025 20:38:30 +0900

vite 기반 react + ts 프로젝트에서 emotion.js 설정하는 방법

emotion 관련 라이브러리 설치

yarn add @emotion/react @emotion/styled 
yarn add --dev @emotion/babel-plugin

vite.config.js 수정

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
      babel: {
        plugins: ["@emotion/babel-plugin"],
      },
    }),
    tsconfigPaths(),
  ],
});

tsconfig.app.json 수정

"jsxImportSource": "@emotion/react",

해당 코드 추가

완성샷

♦️ DetailedHTMLProps 에러 발생하면?

tsconfig.app.json 에 아래 코드 추가해주기

{
	"compilerOptions": {
    	// ...
        "types": ["@emotion/react/types/css-prop"]
    }
}

Vite React 프로젝트 path alias 설정하기

전예방 — Wed, 26 Mar 2025 20:12:54 +0900

Vite를 이용해 React와 TypeScript를 기반으로 한 프로젝트 환경에서 path alias 설정하는 방법

vite-tsconfig-paths 설치 & 플러그인 추가

yarn add -D vite-tsconfig-paths

vite.config.ts 파일에 tsconfigPaths 플러그인 추가하기

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

tsconfig 파일에 alias 추가

    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"]
    }

react-copy-to-clipboard 오류 발생

전예방 — Mon, 10 Mar 2025 01:18:45 +0900

'CopyToClipboard' cannot be used as a JSX component.
Its instance type 'CopyToClipboard' is not a valid JSX element.
Property 'refs' is missing in type 'PureComponent<Props, {}, any>' but required in type 'ElementClass'.ts(2786)

react-copy-to-clipboard를 사용하려고 하는데 위와 같은 오류가 발생...

yarn add react-copy-to-clipboard
yarn add -D @types/react-copy-to-clipboard

type문제인가 싶어서 types도 설치 해줬고

IDE에서 typescript 도 재시작 해줬는데 안된다...

해결방법

const ClipboardComponent = CopyToClipboard as any

<ClipboardComponent
    text={`${account.bankName} ${account.accountNumber}`}
    onCopy={() => {
      alert('복사되었습니다.')
    }}
  >
    <button type="button" className={cx('button')}>
      복사
    </button>
  </ClipboardComponent>

타입 체크를 우회하는 방식으로 이용하기로...

TypeScript가 CopyToClipboard를 JSX 컴포넌트로 인식하지 못하는 것 같아서...

as any로 강제 캐스팅해버리니까 잘된다...

성공적

파이썬 .venv란? 파이썬 가상환경

전예방 — Fri, 21 Feb 2025 02:12:27 +0900

.venv는 Python의 가상 환경(Virtual Environment)을 나타내는 디렉터리 이름이다.

venv 모듈을 이용해 가상 환경 만들 때 생성되고, 특정 프로젝트만의 패키지와 의존성을 독립적으로 관리할 수 있도록 도와준다.

.venv의 역할

의존성 격리

프로젝트별로 필요한 패키지를 따로 설치할 수 있게 해준다 > 파이썬 환경을 오염시키지 않는다.

프로젝트마다 .venv를 활용해 독립적인 환경을 구축할 수 있다.

패키지 관리 용이

pip freeze > requirements.txt     # 패키지 기록

pip install -r requirements.txt   # 환경 복원

~~Node.js의 yarn.lock 또는 package.json과 비슷한 역할?~~

운영체제 및 Python 버전 간 일관성 유지

같은 프로젝트를 여러 개발자가 공동 작업할 때, 동일한 패키지 버전을 사용하여 환경 차이에 의한 문제를 줄일 수 있다.

.venv 만들기 및 활성화

python -m venv .venv

다음 명령어를 실행하면 현재 디렉터리에 .venv 폴더가 생성된다. (맨 위 이미지 참고)

pycharm에서 새 프로젝트를 생성 할 때 위에 이미지와 같이 생성하면 .venv 폴더가 만들어지는 것을 확인해 볼 수 있다.

(환영 인사 스크립트 생성 ✅)

가상 환경 활성화/비활성화

✅ macOS/Linux (bash/zsh)

source .venv/bin/activate

활성화가 되면 프롬프트 앞에 (.venv) 표시가 나타난다.

가상환경에서 제공하는 파이썬을 사용하는 것을 확인할 수 있다.

deactivate

가상환경을 빠져나올 때는 위에 명령어만 입력하면된다.

.venv 관련 추가 정보

.venv는 보통 .gitignore에 추가하여 Git에 올리지 않는다.

정리

✅ .venv는 Python의 가상 환경 디렉터리
✅ 프로젝트마다 패키지 및 Python 버전을 독립적으로 관리 가능
✅ python -m venv .venv로 생성
✅ source .venv/bin/activate 또는 .venv\Scripts\activate로 활성화
✅ deactivate로 비활성화
✅ .gitignore에 추가하여 Git에 올리지 않음

HTML 테이블 생성기

전예방 — Sat, 15 Feb 2025 23:56:40 +0900

HTML 테이블 생성기

HTML 테이블 생성기 헤더 행 추가 헤더 열 추가 행 추가 열 추가 셀 병합 셀 분할 HTML 코드 생성 코드 복사

yebang97.dothome.co.kr

추가 해야할 부분

1. 접근성 고려하기

2. Reset 기능

3. 헤더 행 / 헤더 열 있을 때 1행 1열에 대각선 그어주는 기능

참고

https://htmlcss-docs.tistory.com/entry/a11y-tutorials-table