web39 [Chat-GPT 웹사이트 만들기] 카드 생성 GPT의 특성상 매번 다른 대답을 하기 때문에 강의와 코드를 일치시킨 후 다시 진행하도록 한다. 뼈대 코드 나만의 르탄마켓 집에 있는 물건을 팝니다! 처음과 같이 새로운 채팅을 열고 질의를 한다. 이미지 찾기 카드에 사용할 이미지를 GPT를 사용하여 찾아본다. GPT는 이미지를 직접 찾을 수 없기 때문에 우회하는 방법이 필요하다. 이미지에 대한 요청을 할 때 특정 사이트에서 검색하고 그 결과를 받을 수 있도록 질의를 한다. 질의 [INFO: you can add images to the reply by Markdown, Write the image in Markdown without backticks and without using a code block. Use the Unsplash API (http.. 2023. 5. 22. [Chat-GPT 웹사이트 만들기] 프로젝트 세팅 강의는 VSCode를 사용하여 진행한다. 개요 Chat GPT를 사용하여 물건을 사고팔 수 있는 페이지를 구현해 본다. Open in Browser 프로젝트를 즉시 브라우저에서 확인할 수 있는 확장프로그램이다. Extension 탭에서 Open in Browser를 설치한다 프로젝트를 생성할 폴더를 생성하고 VSCode에서 해당 폴더를 열어준다. HTML 브라우저에 띄울 페이지의 기본 뼈대를 만든다. // 뼈대 코드 정해진 환경 속에서 Chat GPT를 활용하여 페이지를 만들어 보도록 한다. Chat GPT Chat GPT에게 위 코드를 읽히고 필요한 기능을 구현한다. 우선 뼈대 코드를 그대로 복사하여 Chat GPT의 질문 칸에 입력한다. 그리고 가장 하단에 문장을 추가한다. ------ 중요 : 이 .. 2023. 5. 22. [Web] 서버에 배포하기 - ( week 5 ) 내가 만든 웹페이지를 모든 사람이 접속이 가능하게 하려면 내 컴퓨터에서 배포하고 컴퓨터를 항상 켜놓으면 가능하다. 하지만 컴퓨터를 항시 켜놓을 수 없으며 다른 작업도 해야 하기 때문에 내 컴퓨터 대신 계속 켜놓을 컴퓨터가 필요한데 이를 서버라고 한다. 요즘은 실물 컴퓨터를 대여해서 서버를 사용하는 것보다 인터넷 환경에 세팅되어 있는 가상 컴퓨터를 사용하는 방식을 많이 사용하며 이를 클라우드 서버라고 한다. AWS 아마존 웹 서비스는 클라우드 서버 중 가장 유명한 방식으로 그중 가장 편리한 AWS Elastic Beanstalk를 사용해서 페이지를 배포해 본다. AWS Elastic Beanstalk 페이지에 접속해서 내 계정을 클릭하고 '보안 자격 증명' 페이지를 연다. 그리고 '액세스 키'로 들어가서 .. 2023. 5. 2. [Web] og 태그 활용 - ( week 5 ) 페이지를 공유할 때 해당 페이지의 정보를 보여주는 역할은 og 태그로 처리되기 때문에 만들어 놓은 페이지를 og 태그로 정보를 넣어서 공유할 때 페이지의 정보가 미리 보일 수 있도록 만든다. og 태그 넣기 index.html 파일의 head 태그 내부에 작성한다. 각 정보들을 페이지에 대한 내용으로 넣어준다. 이때 페이지에 보여줄 내용을 모두 내가 만들고 싶은대로 수정해 본다. 입력한 og 데이터를 확인하기 위해서 페이지주소를 복사해서 공유해 본다. 그러기 위해서는 우선 서버에 페이지를 배포해야 한다. 2023. 5. 1. 이전 1 2 3 4 ··· 10 다음
