Dev17 17. MongoDB, 사용자 메시지 저장 데이터베이스 생성 이번 과제는 웹사이트에 사용자의 메시지 입력 데이터, AI 응답 내용 등을 저장할 수 있는 데이터베이스까지 생성하여 연동해보고자 함 RDBMS와 NoSQL의 차이Next.js는 프론트엔드뿐 아니라 서버사이드 API도 같이 만들 수 있는 프레임워크 : React 기반 UI + 백엔드 API를 하나의 프로젝트에서 관현대의 데이터베이스는 크게 두 가지로 나뉨 : 관계형 데이터베이스(RDBMS)와 비관계형 데이터베이스(NoSQL) : 저장 방식, 구조, 활용 목적에 있어서 큰 차이를 보임 RDBMS (Relational Database Management System)RDBMS는 흔히 알려진 전통적인 데이터베이스 : MySQL, PostgreSQL, Oracle 등이 대표적인 예 : 데이터를 행과 열이 있는 테.. 2025. 7. 4. 16. Next.js API Route 마이그레이션 현재 상태Flask 백엔드 (Python), EC2에서 /sendMessage 요청 처리, 프론트엔드에서 http://api.도메인.com/sendMessage 요청 중 변경 목표 (EC2 비용 문제 해결 가능)Next.js API Route (JavaScript), Vercel에서 /api/sendMessage 처리, https://도메인.com/api/sendMessage로 변경 예정 Next.js API 기능을 구현하는 방법Next.js API 기능이란Next.js는 프론트엔드뿐 아니라 서버사이드 API도 같이 만들 수 있는 프레임워크 : React 기반 UI + 백엔드 API를 하나의 프로젝트에서 관리할 수 있다는 것 : 즉, Python Flask 같은 서버 없이도 Next.js 프로젝트 내.. 2025. 6. 27. 15. 응답값 JSON 파싱, 추천 메시지 구현 앞으로 출력(GPT 응답)을 JSON 형식으로 받도록 수정할 예정 : GPT에게 프롬프트를 바꾸어 JSON 구조로 응답하라고 지시해야 함 : 그전에 백엔드, 프론트엔드 코드 구조를 다시 살펴보자 프론트엔드(Chat.jsx)사용자의 입력값은 inputMessage 상태로 저장됨const [inputMessage, setInputMessage] = useState(''); 백엔드로 POST 요청 (JSON 형식으로 message + thread_id 전달)const response = await axios.post(`${API_URL}/sendMessage`, { message: inputMessage, thread_id: threadId});여기까지 사용자의 응답값을 JSON으로 보내는 것은 이미 잘.. 2025. 5. 22. 14. 도메인 연동, API 엔드포인트 분리, .env 활용, gitignore 보안, 챗봇 기능 검증 Vercel 프론트엔드 도메인 연동Project 접속 : Settings : Domains : Add DomainSave 클릭시 아래와 같이 Vercel에서 DNS 설정 방식을 제안함A 레코드 방식으로 호스트 이름(Name)은 @(루트 도메인 jysdev.com을 의미) : 값(Value)은 76.76.21.21 : 이 설정을 도메인을 생성했던 가비아에 접속하여 DNS 설정을 추가해야 함 : DNS 레코드가 감지되면 Vercel에서 자동으로 도메인을 확인할 것 근데 대부분의 사용자들이 도메인 주소(jysdev.com) 앞에 www. 을 붙이거나 안 붙이거나 섞어서 입력함 : 서비스의 안정성을 높이기 위해 jysdev.com과 www.jysdev.com 둘다 연결 : 즉, www.jysdev.com도 연결.. 2025. 5. 14. 13. 웹 백엔드 인프라 구축 (EC2 서버 설정, HTTPS 적용, 도메인 연결, 포트포워딩) 백엔드 코드 Github에 업로드이때, OpenAI Key와 같은 민감 정보는 제외하고 업로드 : API Key 재생성해야 함 백엔드 코드(app.py) EC2 인스턴스에서 클론 받기백엔드(Flask) 코드를 GitHub에 올려놓았음 : 그걸 AWS EC2 서버 안으로 복사해 오는 과정 : EC2 서버(Ubuntu)에 SSH 접속 후, git clone 명령어로 GitHub의 코드를 EC2 안에 다운로드해야 함 Git 설치(EC2 서버 SSH 접속한 환경의 홈 디렉토리에서 실행)- sudo apt update- sudo apt install git -y 깃허브에서 백엔드 코드 클론- git clone 깃허브 주소디렉토리 이동, 코드 확인- cd portfolio-backend- ls즉, EC2 서버에서.. 2025. 5. 8. 12. AWS EC2 인스턴스 생성(Ubuntu 서버), Nginx 설치, EC2 IP 접속 AWS(Amazon Web Services)아마존이 제공하는 클라우드 플랫폼 : 서버, 데이터베이스, AI 등 다양한 서비스 제공 EC2 인스턴스 생성 (Ubuntu)EC2(Elastic Compute Cloud)AWS의 가상 서버 서비스 : 컴퓨터 한 대를 클라우드에 띄우는 것과 같음 인스턴스 (Instance)EC2에서 실행 중인 가상 머신(서버 한 대)을 말함AWS 콘솔 : EC2 대시보드 : 인스턴스 시작 인스턴스 이름 설정운영체제 Ubuntu 선택 인스턴스 유형서버의 성능 (CPU, 메모리 등)을 결정하는 사양 : AWS 프리티어(무료 계정)에서 제공하는 t2.micro 인스턴스 선택 : 키 페어 생성 및 저장 네트워크 설정SSH : 내 IP 선택 : 현재 접속 중인 사용자 IP 주소만 허용 :.. 2025. 5. 4. 11. OpenAI Assistant, API 엔드포인트 sendMessage 요청 openAI Assistant가 무엇인지 간단하게 OpenAI에게 역할과 성격을 부여해서 "특정 일을 하는 직원처럼" 일하게 만드는 기능 : 예를 들어, "너는 이제부터 이력서 전문가야"라고 역할을 고정시키는 것임 즉, 기존 ChatGPT 모델을 하나의 "역할을 가진 AI"로 정의하고, 지속적인 대화(thread)를 저장하며, 파일 업로드, 코드 실행 등까지 가능한 GPT 확장 기능 : 단순히 prompt만 보내던 방식에서 벗어나 GPT를 "챗봇 인격 하나"처럼 만들 수 있는 고급 API thread_idAssistant와 사용자 간의 "하나의 대화방 ID"라고 할 수 있음 : 즉, thread_id는 특정 대화 세션을 식별하는 고유 ID : Assistant와의 대화는 thread를 기준으로 저장 : .. 2025. 5. 1. 10. GitHub 배포, Vercel 사용, OpenAI API GitHub에 Frontend 코드 배포해보기1단계 : GitHub 가입 및 저장소(Repository) 만들기로그인 후 우측상단 +버튼 : New repository : 저장소 이름(Repository name)을 입력 : Public(공개) 또는 Private(비공개) 설정 : README 파일은 추후 추가 : Create repository 버튼 클릭 : 저장소 한개 생성된 것2단계 : 로컬에 Git 설치터미널 brew install git 3, 4단계 : 터미널에서 프로젝트 폴더로 이동 후 Git 초기화cd .../portfolio : git init 5단계 : GitHub 저장소와 연결하기git remote add origin repository 주소 : 이를 통해 내 코드 폴더와 GitHub .. 2025. 4. 27. 9. Git, CursorAI, Python flask Git이 무엇인지Git은 코드를 시간별로 저장하고 관리할 수 있게 해주는 프로그램"으로, 내 프로젝트의 모든 변화(수정/추가/삭제)를 기록해준다. 그래서 과거 코드로 되돌리거나, 다른 사람과 동시에 작업해도 충돌 없이 협업할 수 있다는 특징이 존재한다. GitHub가 무엇인지GitHub는 Git으로 만든 프로젝트를 웹에 올려서 다른 사람과 공유하고 협업할 수 있는 공간 및 서비스이다. GitHub 외에도 비슷한 사이트가 존재하는데, GitLab과 같은 기업용으로 자체 서버 설치가 가능한 사이트도 존재한다. 자주쓰는 Git 명령어git add변경할 파일을 저장할 준비를 함git add 파일명git add . # 모든 파일을 준비함 git commit실제로 저장소에 기록을 남김 : 스냅샷 .. 2025. 4. 7. 8. Next.js 저번 글에서 SPA 장점은 웹사이트를 앱처럼 개발한 것이니 아이콘 등을 전부 지원하니 한번 개발하면 끝, HTML 내용을 전체 불러오지 않으니 페이지 이동방식보다 데이터 소모가 적다고 했다 : 하지만, 가장 큰 단점은 검색엔진의 노출이 안되는데, 여기에 SSR이라는 해결방식이 존재한다고 했었다 여기서 SEO(Search Engine Optimization, 검색 엔진 추적)를 알아볼 필요가 있다 : 구글, 네이버 등 다양한 검색 엔진들이 있음 : 이 검색 엔진들은 봇이 존재해서, 매 시간마다 웹사이트 내용을 한 번씩 모두 읽어드린 다음에 그 검색 엔진을 만듦 : 그래서 어떤 키워드하고 매칭되는 게 있으면 해당 페이지 내용을 보여줌 : 그래서 이러한 구글 등이 우리의 웹사이트 내용을 잘 긁어가야 구글 검색.. 2025. 3. 29. 7. React 기초 SPA란 무엇인가?SPA(Single Page Application)란 HTML 페이지에서 동적으로 콘텐츠를 변경하여, 웹 애플리케이션이 앱처럼 동작하도록 하는 개발 방식이다. 먼저 SPA(Single Page Application)를 이해하고 넘어가야함 : 반응형을 저번에 이야기 많이 했음 : 스마트폰 때문에 나왔다고 할 수 있음 : 데이터가 깜빡하면서 바뀌지 않고 자연스럽게 바뀌었음 : 근데 페이지 전체를 로딩할 때, 이동할 때 잠깐 깜빡이는 것을 볼 수 있음 : 웹 개발자는 웹이 앱처럼 작동했으면 좋겠다고 생각함 : 방법? : 백 단의 AJAX 통신으로 데이터 받고 일부분만 바꿔치기 : 앱 같이 보임 : 이러한 일련의 과정을 구현하는 것이 SPA이며, 이 과정에 도움을 주는 Framework에는 .. 2025. 3. 20. 6. JavaScript 기초 (2) 비동기에 대해 배울 것 : 개발 공부 처음 할 때 듣는 언어 절차지향이라는 것이 있을 것 : 한줄한줄 차례대로 해석 : 근데, 게임을 예시로 들면 내가 움직일 때 다른 사람이 못 움직이지 않음 : 이러한 예시를 들었을 때, 소스가 2개 이상 실행될 때를 비동기라고 함 : 이렇게 비동기로 개발을 해야 하는 경우가 생김 : 타자 게임을 제작할 예정인데, 단어 일치 여부를 확인하는 match 소스와 counting 소스 두 가지가 진행될 예정임 h1은 텍스트를 크게 보여줌 : 아래는 초안 DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0">.. 2025. 3. 9. 5. HTML/CSS 소스코드 만들어보기 지금까지 배운 기초 개념들을 실제로 사용해 보면서 다시 한번 스스로 이해하기 위해, 간단하게 오른쪽 google.com 페이지의 첫 화면을 카피해 보았다. HTML Google 정보 스토어 Gmail 이미지 .. 2025. 3. 4. 4. JavaScript 기초 (1) 이제 메뉴바 버튼을 누르면 메뉴1, 2, 3이 펼쳐지는 기능을 구현하자 : 메뉴와 아이콘을 안 보이게 먼저 설정할 것 : display none 근데 이 기능 html으로 구현이 될까? : 안됨 : JavaScript 사용 : JS는 근본적으로 DOM을 '조작'하고 싶어 함 : HTML 소스에 있는 태그에 접근해서 어떤 태그 추가, 없애줘라 등 조작을 하는 것 : 즉, JS는 태그를 바꿔 치는 등 여러 동작이 가능하다 JS를 사용하기 위해서는 html 아래 쪽에 태그를 추가 : 여기 안에는 JS 문법만 작성 가능 메뉴바 클릭을 반복할 때마다 active가 생기고, 사라지고가 반복됨 : JS가 DOM 조작함 이제 그러면 id가 menus, icons이면서 class가 active면 display를 fl.. 2025. 2. 27. 3. CSS 기초 html 꾸미기 : CSS 사용 : 어떻게? : CSS 파일 생성해서 불러오기 or head 태그 안에 style 태그를 만들어서 CSS 문법 입력하기CSS 선택자 이해다양한 html 소스가 있을 것인데 특정 부분만을 바꾸고 싶을 때, 어디 부분을 선택할지에 대한 정의하는 것 선택자란? : 다양한 html 소스가 있을 것인데 특정 부분만을 바꾸고 싶을 때, 어디 부분을 선택할지에 대한 정의하는 것 : p 태그를 꾸미고 싶다면 p 적는 식으로이건 p 태그가 모두 red 색상으로 바뀜 : 근데 특정 p 태그만 바꾸고 싶으면 어떻게? : p 태그에 'id'라는 속성값 부여 : id가 thisis인 태그만 바꾸고 싶다 : thisis는 그냥 지은 id이며, 이걸 제대로 쓰려면 #thisis 사용 : id 'th.. 2025. 2. 24. 2. html 기초 , , 를 보면 꺽쇠 안에 단어가 들어가 있는 것을 볼 수 있다 : 꺽쇠 하나를 '태그' 또는 '요소(element)'라고 부른다 : 이 각각의 태그들은 명확한 기능을 갖고 있음이런 식으로 태그마다 고유의 기능이 있음을 이해 : 근데, input 태그 안에 보면 하늘색으로 type이 있음 : 이러한 것을 '속성값' 또는 'attribute'라고 이야기함 : 즉, input이 태그고, type이 input 태그의 속성값이다 라고 이해 : 해당 코드는 텍스트 박스를 만듦 위는 button 태그를 사용해서 버튼을 만든 예시인데, button 태그는 input 태그와 다르게 이라는 것이 뒤에 또 적혀있음 : 이건 닫는 태그이며 '/'를 붙이는 건데, 무슨 차이? : html 태그는 크게 두가지 종류가 있음 :.. 2025. 2. 23. 1. 기초 중요 키워드 웹브라우저가 무엇인가? 웹은 흔히 얘기하는 인터넷 웹 사이트를 의미하며, 이 웹 사이트를 볼 때 사용하는 크롬, 사파리 등의 소프트웨어를 웹 브라우저라고 한다. 웹이란 : 흔히 얘기하는 인터넷 웹 사이트 : 이 웹 사이트를 볼 때 사용하는 소프트웨어를 웹브라우저(크롬, 사파리 등) : 앞으로 크롬을 기준으로 개발할 예정 : 웹 사이트에서 데이터(텍스트, 링크) 등을 만들 때 사용하는 언어를 HTML이라 함. 초창기 웹브라우저를 만든 netscape라는 회사는 단순한 데이터를 보여주기만 하였는데, 가만히 있는 데이터가 아닌 레이아웃을 바꾸는 등의 부가적 기능을 만들고자 함 : HTML로만은 구현할 수 없어서 또 다른 언어인 JavaScript를 만듦. HTML으로 만든 버튼, 이미지 등을 색깔, 모서리 등.. 2025. 2. 20. 이전 1 다음
