오픈 API는 개인 프로젝트나 토이 프로젝트, 테스트용으로 매우 유용하다. 🎬 영화 / 콘텐츠 관련 API이름설명인증여부YTS토렌트 기반 영화 정보 API❌OMDb API영화, 시리즈, 에피소드 정보 (IMDb 기반)🔑 무료 키 필요TMDB포스터, 평점, 줄거리 포함 영화 정보 풍부🔑 API Key 필요 (무료 가입) 📚 책 / 뉴스 / 지식 정보이름설명인증여부Open Library책 검색, 커버, 저자 등 정보❌NewsAPI최신 뉴스 헤드라인, 검색 등🔑Wikipedia API위키백과 검색 및 내용 파싱❌ 📷 이미지 / 사진이름설명인증여부Unsplash API고퀄 사진 검색 및 다운로드 링크🔑Lorem Picsum랜덤 이미지, placeholder 용도❌ 📍 위치 / 날씨 / 지도이름설명..

색맹, 색약, 저시력 등의 시각장애가 있는 사용자를 위한 웹 접근성 향상 1. 색에 의한 정보 표현 방지색맹인 사람들은 어떤게 Dataset1 인지 어떤게 Dataset2 인지 모를 수 있다. 무늬를 이용해서 정보를 제공할 수 있다. 📌 Chart.js 에 패턴 적용 Colors | Chart.jsColors 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 ..

목록나열 태그에 대해서 알아보자 ul (Unordered List)순서가 지정되지 않은 목록 나열할 때 사용 React CRA VITE Next.js TypeScript✅ 예시 React CRA VITE Next.js TypeScript">ReactCRAVITENext.jsTypeScript ✅ 설명ul 바로 하위 자식 요소는 li 태그만 사용가능기본 글머리 기호는 disc (list-style-type: disc)ol (Ordered List)순서가 지정된 목록 나열할 때 사용 React CRA VITE Next.js TypeScript✅ 예시 Reac..

🔧 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/nv..

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

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: "@em..

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()],});..

'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' but required in type 'ElementClass'.ts(2786) react-copy-to-clipboard를 사용하려고 하는데 위와 같은 오류가 발생... yarn add react-copy-to-clipboardyarn add -D @types/react-copy-to-clipboardtype문제인가 싶어서 types도 설치 해줬고 IDE에서 typescript 도 재시작 해줬는데 안된다... ..

HTML 테이블 생성기HTML 테이블 생성기 헤더 행 추가 헤더 열 추가 행 추가 열 추가 셀 병합 셀 분할 HTML 코드 생성 코드 복사yebang97.dothome.co.kr 추가 해야할 부분1. 접근성 고려하기2. Reset 기능3. 헤더 행 / 헤더 열 있을 때 1행 1열에 대각선 그어주는 기능참고https://htmlcss-docs.tistory.com/entry/a11y-tutorials-table