EmailJS로 백엔드 없이 문의 폼에서 이메일 보내기

1 – EmailJS 계정과 이메일 서비스 준비 1.1 – EmailJS 계정 만들기 브라우저 주소창에 https://dashboard.emailjs.com/sign-up을 입력하고 Enter를 누릅니다. 가입 화면이 열리면 이메일 주소와 비밀번호를 입력합니다. 구글 계정으로 가입하려면 [Sign up with Google]을 클릭합니다. [Sign Up] 버튼을 클릭합니다. 가입한 이메일로 인증 메일이 오면 메일 안의 확인 링크를 클릭합니다. 로그인하면 대시보드 화면이 열립니다. EmailJS는 브라우저에서 실행되는 자바스크립트만으로 … 더 읽기

15. CRUD7-허깅페이스 연결하기 – Django가 대신 모델을 부르게 하기

1 – 토큰 발급받고 안전하게 두기 1.1 – 허깅페이스 토큰 발급받기 토큰(token)은 내가 누구인지 알려 주는 긴 글자 열쇠입니다. 허깅페이스는 이 열쇠를 확인해 요청을 받아 주고, 쓴 만큼을 그 계정에 기록합니다. 열쇠가 남에게 넘어가면 남이 쓴 양까지 내 계정에 쌓입니다. 복사한 글자는 이 화면을 닫으면 다시 볼 수 없습니다. 잃어버리면 같은 자리에서 새로 만들어야 합니다. … 더 읽기

14. CRUD4-Render에 배포하기 – 만든 것을 인터넷 주소로 열기

1 – 배포 전에 코드 정리하기 1.1 – 비밀값과 설정을 환경변수로 빼기 import os # 배포 서버에서는 환경변수로 넣어 줍니다. 없으면 개발용 값을 씁니다. SECRET_KEY = os.environ.get(“SECRET_KEY”, “dev-only-key”) # 환경변수 DEBUG 가 “True” 일 때만 켭니다. 배포 서버에서는 넣지 않습니다. DEBUG = os.environ.get(“DEBUG”, “True”) == “True” # 어떤 주소로 들어오는 요청을 받을지 정합니다. # Render … 더 읽기

13. CRUD3-React 화면 붙이기 – 대화방 목록을 브라우저에 그리기

1 – React 프로젝트 만들기 1.1 – Node.js가 설치돼 있는지 확인하기 node –version v22.11.0처럼 버전 번호가 나타나면 설치돼 있습니다. React는 자바스크립트로 화면을 만드는 도구이며, 자바스크립트를 컴퓨터에서 실행하려면 Node.js가 있어야 합니다. Node.js는 브라우저 밖에서 자바스크립트를 실행하는 프로그램입니다. 앞의 숫자가 18보다 낮거나 명령을 찾지 못하면 https://nodejs.org/에서 LTS 표시가 붙은 버전을 내려받아 설치합니다. 1.2 – Vite로 프로젝트 만들기 … 더 읽기

12. CRUD2- API 만들기 – 대화방을 JSON으로 주고받기

1 – 데이터를 JSON으로 바꾸기 1.1 – 시리얼라이저 파일 만들기 from rest_framework import serializers from .models import Conversation, Message class MessageSerializer(serializers.ModelSerializer): class Meta: model = Message # JSON에 담을 칸을 고릅니다. fields = [“id”, “role”, “content”, “created_at”] # 서버가 값을 정하는 칸이라 받는 쪽에서 고칠 수 없게 막습니다. read_only_fields = [“id”, “created_at”] class ConversationSerializer(serializers.ModelSerializer): # … 더 읽기

11. CRUD1- Django로 대화방과 메시지 저장하기

1 – Django 프로젝트 세우기 1.1 – 작업 폴더 만들고 도구 설치하기 cd ~ mkdir chatbot-app && cd chatbot-app pip install django djangorestframework Successfully installed로 시작하는 줄이 나타납니다. 설치에는 약 10초에서 1분이 걸립니다. 설치한 두 도구는 하는 일이 다릅니다. Django는 파이썬으로 웹 서버를 만드는 도구이고, Django REST framework는 Django가 HTML 화면 대신 JSON을 돌려주게 해 … 더 읽기

02. 실전-api데이터-연동-공유-관리

🐨 0. 준비 0.1. 시작파일 💡 이전 파일이 없을 경우 아래의 파일을 다운로드 하여 진행한다 파일활용방법안내 다운로드 받은 start.zip 파일의 압축을 푼다 새 리액트 앱을 설치한다. 리액트 앱 설치를 모를경우 아래 링크를 참고한다. 🔗[리액트 설치안내](https://www.notion.so/b2b65b3a6a9743ef84174efb17630e12) 리액트 앱의 설치가 왼료 되었으면 1번의 파일압축을 푼다 압축을 풀게 되면 start/src 폴더가 있다. 2번의 src폴더에 4번의 src 폴더와 package.json … 더 읽기

12. composition

1. 기초영상 2. 심화영상 3. Composition? (컴포지션?) Nested Component 컴포넌트 라고도 하고 중첩 컴포넌트라고도 합니다. 컴포넌트를 중첩하는 것을 말합니다. 리액트 앱은 수많은 컴포넌트를 가지게 됩니다. 컴포넌트간의 주고받는 데이터 뿐만 아니라 박스나 컨테이너에서 사용하는 스타일코드의 중복까지도 최소화 하려면 props 만으로는 한계가 있는데요. 이때 사용할수 있는것이 composition(합성) 입니다. 앱에서 반복 사용되는 UI 디자인 코드를 별도의 컴포넌트로 생성하여 … 더 읽기

02. 리액트소개

1.리액트소개 1.1.리액트란? JavaScript 라이브러리 UI(사용자 인터페이스)를 만들기 위해 Facebook에서 개발. 페이스북과 개발자,기업,단체에 의해 유지보수됨. 리액트는 싱글 페이지 애플리케이션 이나 모바일 애플리케이션 개발에 사용되기도 함. 1.2.리액트의 특징 JSX (javascript extension)라는 자바스크립트 확장문법을 사용한다. 웹브라우저에서는 바로 JSX를 해석할수 없으며 바벨이라는 트랜스컴파일러를 이용해서 자바스크립트로 변환후 웹 브라우저에 적용한다.• https://babeljs.io/repl 에서 변환되는 과정을 볼수있다 SPA (Single Page Application) 이다. 모바일애플리케이션을 개발할 … 더 읽기

01. api활용

1. 시작파일 파일다운로드 파일활용방법 만약 이전 파일이 없을 경우 아래의 파일을 다운로드 하여 진행한다 시작 파일 #2. 연관링크 🔗 연관링크 API란? fetch와 promise 예제 MDN fetch MDN try…catch 문 axios 공식홈 #3. fetch fetch() fetch 함수는 웹에서 데이터를 요청하고 받아오는 자바스크립트 기능이다. 간단하게는 fetch('주소')를 사용해 데이터를 요청하고, .then()을 통해 받은 데이터를 처리한다 우리의 레시피 앱은 … 더 읽기