JavaScript75 email.js로 backend 없이 메시지 전달 받기 email js 사용하기 Send email directly from your code | EmailJSNo server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier!www.emailjs.com접속 후 회원가입 Add New Service 선택원하는 이메일 선택 후 작성.Service ID 메모장에 복사 후,Connect Account 하면, 연결됨. (연결이 안 되면 다시 시도하면 됨.)연결 후 연결한 이메일에서 인증.사이드 탭에서 Templates 선택 후 Create New TemplateTo Email에 자신의 이메일 적고 .. 2025. 9. 9. Node.js 입력/출력 정리 1. 입력 방식(A) readline 모듈 (줄 단위 이벤트 방식)표준 입력을 줄 단위로 처리할 수 있음한 줄씩 들어오는 입력을 배열에 모아 두고, close 이벤트에서 처리const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout,});let input = [];rl.on('line', function (line) { // 한 줄 입력 처리 input.push(line.trim());}).on('close', function () { // 입력이 끝났을 때 실행 console.log(input); process.exit(0); // 종료.. 2025. 8. 24. forwardRef forwardRef 한줄 개념문제: 함수형 컴포넌트는 기본적으로 ref를 받을 수 없어요(호스트 요소인 div, input 등만 기본 ref 지원).해결: React.forwardRef는 부모가 만든 ref를 자식 컴포넌트 내부의 특정 노드/인스턴스에 “전달”(forward)할 수 있게 해주는 고차 컴포넌트(HOC) 입니다.언제 필요한가?부모가 자식 안쪽의 “실제 노드/인스턴스”를 만지기 위해 사용스타일/레이아웃 래퍼 등 중간 껍데기 컴포넌트를 씌웠는데, 부모가 실제 DOM 노드(또는 R3F의 THREE.Mesh)에 접근해야 할 때외부에서 focus(), scrollIntoView(), play() 같은 명령형(Imperative) 호출을 하고 싶은 컴포넌트R3F에서 부모가 자식 mesh의 positio.. 2025. 8. 18. 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. 파일 네이밍 컨벤션(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. 이전 1 2 3 4 ··· 9 다음
