반응형 Clone Coding67 Node.js + React JWT 인증 구현하기 https://www.youtube.com/watch?v=VePjN663uwc 프로젝트 초기 세팅먼저 React 클라이언트를 생성npx create-react-app@latest jwttest 서버 세팅1. 서버 폴더 생성 및 패키지 설치# 1. server 폴더 생성mkdir server# 2. 생성한 폴더로 이동cd server# 3. npm 초기화 (package.json 생성)npm init -y# 4. 필요한 패키지 설치npm i express nodemon dotenv cors jsonwebtoken cookie-parser 각 패키지의 역할express : Node.js 웹 서버 프레임워크nodemon : 파일 변경 시 서버를 자동으로 재시작해주는 개발용 도구dotenv : .env 파일에서.. 2026. 2. 25. AI 코딩 시대, 도구보다 중요한 건 '기본기' (Firebase 활용법) https://www.youtube.com/watch?v=CYVDfZgQKCQ 1. Firebase 프로젝트 설정 1-1. Firebase 프로젝트 생성Firebase 콘솔에 접속하여 가입'vibe-coding-backend' 이름으로 새 프로젝트 생성1-2. 웹 앱 등록프로젝트 설정에서 웹 앱 추가앱 이름을 'vibe-coding-backend'로 등록Firebase SDK 설정 코드 복사 (중요: 이 코드는 반드시 보관!) 2. 프로젝트에 Firebase 연동 2-1. HTML 파일 수정index.html 파일의 script 태그에 type="module" 속성 추가: 2-2. JavaScript 파일 설정script.js 파일 맨 위에 Firebase import 및 설정 코드 추가:import .. 2026. 2. 2. AI 코딩 시대, 도구보다 중요한 건 '기본기' (Cursor AI 활용법) https://www.youtube.com/watch?v=ollMbEOzofc AI 기술이 발전하면서, 코딩은 이제 문법 공부가 아니라'AI와 대화하며 구조를 설계하는 능력'이 더 중요해진 것 같다. "코딩을 몰라도 만들 수 있나요?"하..그렇데. 하지만 어디가 틀렸는지 찾아내는 눈은 여전히 필요하지 않을까? 1. 작업 환경 세팅 (The Setup)Cursor에서 프로젝트를 시작하기 전에 아래 것들을 준비참고: Cursor 자체가 이미 VS Code를 포함하고 있으므로, Cursor만 설치하면 에디터는 해결된다.VS Code기본 코드 에디터 (Cursor도 VS Code 기반)CursorAI assisted 코딩 에디터 — AI에게 프롬프트를 던지고 코드를 생성받는 곳Node.jsJavaScript를.. 2026. 2. 1. *잠시 중단* N8N & Zapier - Editor State https://www.youtube.com/watch?v=ED2H_y6dmC810:40:32 empty onClick handlers → 비어 있는 onClick 핸들러type casts → 타입 캐스팅Add save functionality → 저장 기능 추가Add delete functionality → 삭제 기능 추가Add settings functionality → 설정 기능 추가 1. empty onClick handlers → 비어 있는 onClick 핸들러src/features/editor/components/add-node-button.tsx노드 추가 버튼의 빈 핸들러를 구현(간단하게 클릭 시 노드 선택 다이얼로그를 여는 기능을 추가)onClick={()=>setSelectorOpen(tr.. 2026. 1. 26. N8N & Zapier - Node selector https://www.youtube.com/watch?v=ED2H_y6dmC809:50:42 Add "manual trigger" node → "수동 트리거" 노드 추가Add "http request" node → "HTTP 요청" 노드 추가Create node selector component → 노드 선택기 컴포넌트 생성 1. 데이터베이스 스키마 확장 - 새로운 노드 타입 추가 prisma/schema.prismaPrisma 스키마에 새로운 노드 타입을 추가enum NodeType { INITIAL MANUAL_TRIGGER // 수동 트리거 노드 HTTP_REQUEST // HTTP 요청 노드}변경사항을 데이터베이스에 반영하기 위해 마이그레이션을 실행npx prisma migrate.. 2026. 1. 22. N8N & Zapier - Editor Setup https://www.youtube.com/watch?v=ED2H_y6dmC808:59:36 Create "Editor" component → "Editor" 컴포넌트 생성Add react-flow → react-flow 추가Add initial nodes → 초기 노드 추가 React Flow를 활용한 워크플로우 에디터 구축 란?React Flow는 노드 기반 인터페이스를 구축하기 위한 강력한 라이브러리다. 주요 특징:워크플로우, 다이어그램, 마인드맵 등 시각적 프로그래밍 도구 구현드래그, 줌, 패닝, 노드 연결 등 완전한 인터랙티브 기능노드와 엣지의 스타일 및 동작을 자유롭게 커스터마이징 가능npm install @xyflow/react 1단계: 기본 Editor 컴포넌트 생성 Node (노드).. 2026. 1. 20. 이전 1 2 3 4 ··· 12 다음 반응형
