본문 바로가기

전체 글459

useDropzone, browser-image-compression [image upload 라이브러리] react-dropzone react-dropzone react-dropzone.js.orgbrowser-image-compression GitHub - Donaldcwl/browser-image-compression: Image compression in web browserImage compression in web browser. Contribute to Donaldcwl/browser-image-compression development by creating an account on GitHub.github.com이미지 업로드 전체 흐름[사용자: 이미지 드래그 앤 드롭] │ ▼🧩 useDropzone.onDrop() │ ├─▶ 파일.. 2025. 7. 10.
Tiptap Editor TIPTAP toolkit Tiptap - Dev Toolkit Editor SuiteTiptap is a suite of content editing & real time collaboration tools. Build editor experiences like Notion in weeks, not years.tiptap.dev1단계1-1. 설치npm install @tiptap/react @tiptap/starter-kitStarterKit은 Document, Paragraph, Text, Bold, Italic 등의 기본 Extension을 모두 포함합니다.1-2. 기본 개념1) Editor 인스턴스에디터 상태와 모든 명령(command)을 포함한 핵심 객체리액트에서는 useEditor()로 생성2.. 2025. 6. 26.
제네릭(Generic) 연습하기: https://typescript-exercises.github.io/ TypeScript ExercisesA set of interactive TypeScript exercisestypescript-exercises.github.ioTypeScript의 제네릭(Generic) 타입1. 제네릭이란?"제네릭(Generic)"은 타입을 함수나 클래스, 인터페이스가 사용할 때, 외부에서 타입을 주입받도록 하는 기능입니다.Java의 제네릭, C++의 템플릿 기능과 유사코드 재사용성과 타입 안정성을 동시에 확보 가능함수/클래스를 작성할 때 구체적인 타입을 지정하지 않고, 나중에 사용할 때 지정할 수 있음2. 기본 문법function identity(value: T): T { return value;}.. 2025. 6. 21.
Jsdoc, ts, Typedoc 1단계: JSDoc 기본 이해1. JSDoc이란 무엇인가?정의:JSDoc은 JavaScript/TypeScript 코드에 주석 형태로 문서를 작성할 수 있게 해주는 표준 주석 문법입니다.주요 목적:코드 설명 추가 (함수/변수/클래스/모듈 등)IDE 자동 완성 및 타입 힌트 제공문서 생성 도구 (ex. TypeDoc, JSDoc)에서 HTML API 문서 생성유지보수와 협업에서 커뮤니케이션 비용 절감2. JSDoc 블록 주석 구조형식:주석은 항상 /** */로 감싸며, 각 줄 앞에 *를 붙입니다./** * 사용자 정보를 가져옵니다. * @param userId - 사용자 ID * @returns 사용자 이름 */function getUserName(userId: string): string { retur.. 2025. 6. 21.
Javadoc JavadocJavadoc의 문법과 주요 태그 사용법을 익힌다.실제 클래스/메서드/필드에 주석을 작성할 수 있다.javadoc 명령어를 사용해 HTML API 문서를 생성할 수 있다.팀원과 협업 시 읽기 쉬운 코드 문서를 작성하는 습관을 기른다.습관공개 클래스/메서드에는 반드시 Javadoc 작성@param 순서는 실제 매개변수 순서와 일치팀 표준 정하기 (작성 필수 항목, 표현 방식 등)IntelliJ에서 Javadoc 자동 완성 사용하기: /** + Enter1단계: Javadoc 기본 이해Javadoc이란?Javadoc은 Java 코드에 대한 설명을 문서화하기 위한 표준 주석 형식입니다.이를 통해 자동으로 HTML 형태의 API 문서를 생성할 수 있으며, 대부분의 IDE(IntelliJ, Eclip.. 2025. 6. 21.
파일 네이밍 컨벤션(File Naming Convention) - React Feature Folder 앱 전용 컴포넌트LoginForm.tsx, Dashboard.page.tsxPascalCase재사용 UI 컴포넌트button.tsx, input.tsx소문자 (kebab/camel/pure lowercase)유틸 함수, 상태 관리 등auth.store.ts, format-date.ts소문자 (도구이므로 컴포넌트 아님)React Feature Folder에서의 접미사 네이밍 종류1. 화면/페이지 관련*.page.tsx라우팅 단위 페이지 컴포넌트*.layout.tsx페이지 레이아웃 컴포넌트*.template.tsx여러 페이지에서 공유하는 중간 컴포넌트*.route.tsx라우트 정의 파일 (React Router)2. UI 컴포넌트*.component.tsx단순하고 재사용 가능한 UI 컴포넌트*.present.. 2025. 6. 14.
npm React 라이브러리 배포 TypeScript + React 기반 라이브러리 작성tsup으로 .js + .d.ts 빌드npm publish로 외부 배포실제 사용 시:import { MyButton } from 'your-react-lib'1단계: 프로젝트 초기화mkdir your-react-libcd your-react-libbun init선택 시 안내:entry: src/index.tstype: module2단계: React + 개발 환경 설치bun add react react-dombun add -D typescript @types/react @types/react-dom tsupuseState 등이 필요하면 추가3단계: 파일 구조 생성mkdir srctouch src/index.ts src/MyButton.tsx tsconf.. 2025. 6. 13.
MAC CLI로 7zip 사용하기 먼저 'which 7z'로 설치 되었나 확인찾을 수 없다면, brew로 7zip 설치brew install sevenzipwhich 7z# sevenzip으로 설치했다면 7zz를 검색which 7zz7zz 라면,nano ~/.zshrc# 맨 아래에 다음을 추가alias 7z="7zz"source ~/.zshrc기본 명령어 구조7z [command] [archive name] [file(s)/folder(s)] [options]예:7z a archive.7z my-folder자주 쓰는 7z 명령어압축 생성7z a archive.7z file.txtfile.txt를 archive.7z로 압축폴더 압축7z a archive.7z ./mydir디렉토리 전체 압축압축 해제7z x archive.7z압축 풀기 (x.. 2025. 6. 13.
npm 라이브러리 만들고 사용하기 목표CLI로 실행: memo "메모 내용"실행 시, 현재 날짜 기준으로 memos/YYYY-MM-DD.txt 파일에 메모를 추가TypeScript로 작성bin 설정 포함해서 CLI 명령어처럼 실행 가능프로젝트 구조memo-cli/├── package.json├── tsconfig.json├── src/│ └── cli.ts└── memos/ └── (자동 생성됨)1. package.json{ "name": "memo-cli-test", "version": "1.0.0", "type": "module", "bin": { "memo": "./src/cli.ts" }, "scripts": { "dev": "bun src/cli.ts" }, "dependencies": {}, .. 2025. 6. 13.
template 자동화 bun + Vite 환경 빠르고 깔끔한 템플릿 자동 생성 도구bun run create-feature note명령어 실행 시:src/features/note/├── note.service.ts├── note.types.ts├── note.hooks.ts├── note.schema.ts├── note.constants.ts├── note.utils.ts1단계: 템플릿 파일 만들기먼저 템플릿 파일을 아래 경로에 저장:scripts/templates/feature/├── __name__.service.ts├── __name__.types.ts├── __name__.hooks.ts├── __name__.schema.ts├── __name__.constants.ts├── __name__.utils.ts각 파일에는.. 2025. 6. 12.
SOLID / SOLID 외 꼭 지키면 좋은 프로그래밍 원칙 10가지 SOLID 원칙1. SRP – 단일 책임 원칙 (Single Responsibility Principle)하나의 클래스(또는 컴포넌트)는 하나의 책임만 가져야 한다.Frontend (React) 예시 — ❌ 위반 / ✅ 준수// ❌ 한 컴포넌트가 API 호출, 상태, UI 다 처리함function UserProfile() { const [user, setUser] = useState(null); useEffect(() => { fetch('/api/user').then(res => res.json()).then(setUser); }, []); return {user?.name};}// ✅ 로직 분리function useUser() { /* API 호출만 처리 */ }function UserProfi.. 2025. 6. 11.
다국어 라이브러리 react-i18next Introduction | react-i18next documentationLast updated 2 months agoreact.i18next.com1단계: 기본 설정 및 번역 시스템 이해목표번역 키를 관리하는 JSON 구조를 익히고react-i18next를 사용해 컴포넌트에서 번역하는 흐름을 완전히 이해1. i18n이란?i18n = internationalization의 줄임말 (i와 n 사이에 18글자)앱을 여러 언어로 지원할 수 있도록 구성하는 기술문자열, 날짜, 단위 등을 사용자 언어에 맞게 자동 출력하도록 지원2. i18next와 react-i18nexti18next: 국제화 핵심 엔진 (JS 기반)react-i18next: i18next를 React에서 쉽게 쓰도록 만든 래퍼 라이브러리3. .. 2025. 6. 9.

티스토리툴바