결과물 미리보기
미리보기 캡쳐
프로젝트 디자인
Figma
https://www.figma.com/file/fRioTFuvoZxHX0mm3OpMIR/[빅데이터]제주관련-데이터-보여주는-홈페이지?type=design&node-id=0:1&mode=design&t=8Okk8shrwP4ZuKTj-1
비밀번호 startupcode0000
프로젝트 준비하기
1. VSCODE 설치
1.
VSCODE 홈페이지 접속 링크
2. 프로젝트 폴더 생성
1.
원하는 위치에 빈 폴더 생성
Window
macOS
2.
폴더 이름 변경
•
앞으로 사용하게 될 프로젝트 폴더
•
프로젝트명과 동일하게 폴더 이름 변경
macOS
3.
새롭게 만든 폴더 안에 images 폴더 생성
macOS
3. 리소스 파일 추가
1.
프로젝트에 필요한 리소스 파일 다운로드
2.
압축 해제 후 모든 파일 images 폴더로 이동
•
옮겨야 될 파일
◦
01_bg.png
◦
01.svg
◦
02_bg.png
◦
02.svg
◦
03_bg.png
◦
03.svg
◦
04_bg.png
◦
04.svg
◦
05_bg.png
◦
05.svg
◦
06_bg.png
◦
06.svg
◦
bg.png
◦
logo.svg
4. VSCODE에서 프로젝트 폴더 열기
1.
VSCODE 실행
2.
상단 메뉴 → 파일 → 폴더 열기
•
프로젝트 폴더 선택
vscode 파일 열기
•
미리 만들어둔 images 파일이 보이는 지 확인
프로젝트 기본 폴더
5. html, css 파일 생성
•
해당 폴더에서 index.html, index.css 파일 생성
파일 생성 방법
index.html, index.css
6. Live Server 설치
•
VSCODE의 확장 탭으로 이동
VSCODE 좌측 네비게이션의 확장 탭
•
Live Server 검색 및 설치 클릭
7. Live Server을 통해 HTML 파일 실행
•
VSCODE 탐색기 탭 이동
•
index.html 우클릭 → Open With Live Server 클릭
•
홈페이지 제작
1. 백엔드 기본 코드 세팅
1-1. 결과물 미리보기
1-2. 폴더구조 미리보기
1-3. .gitignore 파일 생성 및 작성
1.
정의와 사용이유
a.
정의 : .gitignore는 Git에서 특정 파일이나 폴더를 관리하지 않도록 설정하는 파일
b.
사용이유 : 불필요한 파일 제외하기위해서, (계정정보파일제외하면) 보안 및 개인 정보 보호
2.
.gitignore 파일 생성
a.
경로
b.
코드 작성
코드 보기
1-4. .prettierrc 파일 생성 및 작성
1.
정의와 사용이유
a.
정의 : .prettierrc 파일은 코드 포맷터인 Prettier의 설정 파일입니다.
i.
prettier란?
코드 포맷터, 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 자동으로 변환해주는 도구
b.
사용이유 : .prettierrc 파일은 Prettier에게 적용할 설정을 지정하는데 사용됩니다.
Prettier는 코드의 일관성과 가독성을 유지하기 위해 사용되는 도구로, 코드를 자동으로 정리하고 포맷팅해주는 역할을 합니다.
c.
아래와 같은 설정들은 개발자가 작성한 코드를 일관된 형식으로 포맷팅하여 가독성을 향상시키고, 팀 내에서 일관된 스타일을 유지하는 데 도움을 줍니다.
Prettier는 프로젝트 전체에서 동일한 스타일 가이드라인을 적용하기 때문에 개발자들 사이의 혼란도 줄여줍니다.
아래 예시 설정에서는 작은 따옴표, 세미콜론, 탭 너비 등의 선호도가 반영되어 있으며, 한 줄의 최대 길이도 상당히 크게 설정되어 있습니다. 이러한 설정들은 개발 팀 또는 프로젝트 요구사항에 맞게 수정될 수 있습니다.
2.
.prettierrc 파일 생성
a.
경로
/.prettierc (/경로에 /.prettierc파일 생성)
tip / 는 최상위 폴더를 의미합니다
b.
코드 작성
{
"singleQuote": true,
"semi": true,
"tabWidth": 4,
"trailingComma": "none",
"printWidth": 200
}
JSON
복사
•
singleQuote: 문자열을 작은따옴표(')로 표시할지 여부를 설정합니다. true로 설정하면 작은따옴표를 사용하고, false로 설정하면 큰따옴표(")를 사용합니다.
•
semi: 문장의 끝에 세미콜론(;)을 추가할지 여부를 설정합니다. true로 설정하면 세미콜론을 추가하고, false로 설정하면 생략합니다.
•
tabWidth: 탭(tab) 문자의 너비를 지정합니다. 일반적으로 스페이스(space) 대신 탭(tab)을 사용하여 들여쓰기(indentation)를 할 때 사용됩니다.
•
trailingComma: 객체(Object)나 배열(Array)의 마지막 요소 뒤에 쉼표(,)를 추가할지 여부를 설정합니다. "none"으로 설정하면 마지막 요소 뒤에 쉼표가 없습니다.
•
printWidth: 코드 한 줄의 최대 길이를 지정합니다. 코드가 이 길이보다 길어질 경우 줄 바꿈(line break)이 발생하여 가독성을 유지합니다.
1-5. node.js, npm을 이용하여 백엔드 서버 동작하기
1.
node.js 정의와 사용이유
a.
Node.js란?
JavaScript를 사용하여 서버 측 애플리케이션을 개발하기 위한 런타임 환경입니다. V8 JavaScript 엔진으로 구동되며, 비동기적이고 이벤트 기반으로 동작하는 특징을 가지고 있습니다.
> (하루만에 이해하기 어려운 문장이니 쉽게 설명하자면) 번역기, OS가 Javascript를 이해할 수 있도록 번역해주는 프로그램이라고 이해하시면 이해하기 좋을 것 같습니다.
b.
사용이유
서버를 동작시키기 위해서
2.
npm 정의와 사용이유
a.
npm (Node Package Manager)이란?
npm(Node Package Manager)은 Node.js의 기본 패키지 관리 시스템으로, 개발자들이 JavaScript 언어로 작성된 코드를 모듈 형태로 공유하고 재사용할 수 있게 해주는 도구입니다.
npm을 통해 개발자들은 필요한 패키지를 쉽게 설치하고, 프로젝트에 적용하며, 해당 패키지의 버전 관리와 업데이트 등도 손쉽게 처리할 수 있습니다. 또한 npm은 자신이 만든 패키지를 다른 사람들과 공유하는 것도 가능하게 합니다.
> 프로그램 개발에 필요한 패키지를 관리해주는 프로그램
b.
사용이유
패키지를 쉽게 관리하기 위해서
TIP
Package란?
npm에서 패키지(package)는 소프트웨어의 모듈이나 코드 조각을 의미합니다.
이러한 패키지들은 프로젝트에 필요한 다양한 기능들을 제공하며, 개발자가 직접 해당 기능을 구현하는 대신 이미 만들어진 패키지를 사용함으로써 개발 시간과 노력을 줄일 수 있습니다.
> 남들이 사용할 수 있도록 이미 만들어져있는 코드의 묶음
3.
node.js 로 백엔드 동작시키기
node.js를 통해서 웹페이지가 동작할 수 있도록 세팅해보겠습니다.
node를 이용하여 웹페이지가 쉽게 동작할 수 있도록 세팅하기 위해 npm을 통해서 세팅해보도록 하겠습니다.
os에 npm이 설치되어있지 않으니 설치부터 하겠습니다.
3.1. npm설치하기
•
window
1.
2.
LTS 버전 설치 (LTS는 안정화 버전이라는 뜻)
3.
실행 프로그램 동작 (윈도우키 + R] → cmd 입력 후 엔터
4.
node -v 입력하고 버전이 나오면 설치 완료
5.
cmd 프로그램 종료
•
mac
1.
terminal 실행
2.
Homebrew 패키지 관리자 설치
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
JavaScript
복사
3.
Node.js 설치
brew install node
Plain Text
복사
4.
버전 확인
node -v
Plain Text
복사
3.2. npm init
npm init 명령어 후 Is this Ok? 가 나올 때까지 엔터를 치시면 됩니다!
npm init: 이 명령어는 새로운 Node.js 프로젝트를 시작할 때 사용합니다.
이 명령어를 실행하면 package.json 파일을 생성하는 과정이 시작되며, 프로젝트의 이름, 버전, 설명 등의 정보를 입력하게 됩니다.
•
/package.json
TIP
Package.json란?
Node.js 프로젝트의 정보와 의존성 정보를 담고 있는 파일입니다. 이 파일을 통해 프로젝트가 필요로 하는 외부 패키지들과 그 버전 정보를 관리하고 공유합니다.
> 프로젝트를 관리할 수 있도록 정리해놓은 개요정도만 작성해놓은 사용설명서(≒메뉴얼)(≒명세서)
•
npm init을 하면 package.json 파일이 생성되며 기본적으로 작성되는 내용이 있으나 아래의 내용으로 변경해보겠습니다.
{
"name": "hello_jeju_web",
"version": "1.0.0",
"description": "제주 날씨에 따라 이모티콘이 바뀌는 웹페이지입니다",
"main": "server.js",
"scripts": {
"start": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "startupcode",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.18.2",
"request": "^2.88.2"
}
}
JSON
복사
◦
json 파일은 주석을 허용하지 않기에 위 내용을 복붙해주세요. 아래는 package.json에 대한 설명입니다.
{
"name": "hello_jeju_web", // 프로젝트의 이름입니다.
"version": "1.0.0", // 프로젝트의 버전입니다.
"description": "제주 날씨에 따라 이모티콘이 바뀌는 웹페이지입니다", // 프로젝트에 대한 설명을 입력합니다.
"main": "server.js", // 프로젝트의 진입 지점(메인 파일)을 나타냅니다.
"scripts": {
"start": "node server.js", // 'npm start' 명령어를 실행했을 때 수행할 작업입니다. 여기서는 'node server.js'가 실행됩니다.
"test": "echo \"Error: no test specified\" && exit 1" // 'npm test' 명령어를 실행했을 때 수행할 작업입니다. 현재 테스트 스크립트가 정의되지 않았으므로 에러 메시지를 출력하고 종료합니다.
},
"author": "startupcode", // 프로젝트의 저자 정보입니다.
"license": "ISC", // 프로젝트에 적용된 라이센스 정보입니다. 여기서는 ISC 라이센스를 사용하였습니다.
/*
dependencies 섹션은 이 프로젝트가 의존하는 패키지들과 그 버전 정보를 나열합니다.
'^' 기호는 해당 패키지의 최신 마이너 버전까지 자동으로 업데이트 가능함을 의미합니다.
예를 들어, "^2.8.5"는 2.x.x 버전 중 가장 최신인 것까지 업데이트 가능함을 의미하며, 3.x.x 등 새롭게 메이져 버전이 변경되면 업데이트하지 않습니다.
*/
"dependencies": {
/* CORS(Cross-Origin Resource Sharing) 관련 처리를 도와주는 Node.js 패키지 */
"cors": "^2.8.5",
/* Express.js, Node.js 환경에서 웹 서버 개발을 돕는 유명한 웹 프레임워크 */
"express": "^4.18.2",
/* Request, 간단하게 HTTP 요청을 보낼 수 있는 Node.js 라이브러리 */
"request": "^2.88.2"
}
}
JSON
복사
3.3. npm i
npm i: "i"는 "install"의 줄임말입니다. 따라서 는 Node.js 프로젝트에 필요한 패키지를 설치하는 명령어입니다.
패키지 이름을 함께 입력하면(npm i [패키지명]) 해당 패키지가 설치되며, 아무런 패키지 이름 없이 단독으로 사용할 경우 package.json에 명시된 모든 의존성들을 설치합니다.
package-lock.json 과 node_modules 가 자동으로 추가됩니다.
TIP
Package-lock.json란?
프로젝트의 전체 의존성 트리에 대한 상세한 정보를 기록하는 파일입니다. 이 파일을 통해 모든 개발 환경에서 동일한 의존성을 보장하여 일관된 동작을 유지할 수 있습니다.
> 패키지의 버전을 정확하게 명세하는 파일,
사용이유 : 패키지도 결국 프로그램이고 프로그램은 버전이 있습니다. 개정이 되죠. 몇 번째 버전의 패키지를 참조했는지를 나중에도 알 수 있도록 하기위해 필요합니다
TIP
node_modules란?
프로젝트에서 npm을 통해 설치된 모든 패키지들이 저장되는 디렉토리입니다. 이 디렉토리를 통해 프로젝트에 필요한 외부 패키지들을 쉽게 불러와 사용할 수 있습니다.
> 패키지들을 실제로 저장하는 폴더
3.4. server.js 파일 생성
const express = require('express');
const cors = require('cors');
const request = require('request');
const port = process.env.PORT || 3000;
const app = express();
app.use(cors());
app.listen(port, () => console.log(`Server running on port ${port}`));
app.get('/weather', async (req, res) => {
const apiURL = 'https://www.kma.go.kr/XML/weather/sfc_web_map.xml';
request({ uri: apiURL, method: 'GET' }, async (err, _res) => {
const data = await _res.body;
res.send(data);
});
});
JavaScript
복사
3.5. npm start
npm start: 이 명령어는 일반적으로 애플리케이션을 시작하는 데 사용됩니다.
구체적인 동작은 package.json 파일 내의 "scripts" 섹션에서 "start" 항목에 정의된 스크립트가 실행됩니다.
•
2. 페이지 기본 레이아웃만들기
2-1. 페이지 미리보기
•
주 기능
◦
스플래시 화면 조회 기능
◦
메인페이지 조회 기능
2-2. 폴더구조 미리보기
2-1. reset.css 파일 생성 및 작성
1.
정의와 사용이유
a.
정의 : reset.css는 웹 페이지의 기본 스타일을 초기화하고 일관된 표준 스타일을 적용하기 위해 사용되는 CSS 파일입니다.
사용이유 : HTML 요소들이 브라우저마다 기본적으로 가지고 있는 스타일과 차이를 없애기 위해 사용됩니다.
웹 브라우저들은 각자의 기본 스타일 시트를 가지고 있으며, 이로 인해 동일한 HTML 요소도 브라우저마다 다르게 보여질 수 있습니다. 이러한 차이를 보완하고, 개발자가 의도한 스타일을 일관되게 적용하기 위해 reset.css 파일을 사용합니다.
2.
reset.css 파일 생성
a.
경로
/styles/reset.css (/styles/ 경로에 reset.css파일 생성)
b.
코드 작성 (꼭 복사 붙여넣기하세요)
reset.css 코드
2-3. layout.css 파일 생성 및 작성
1.
사용이유
a.
사용이유 : 여러개의 페이지에서 중복적으로 사용할 layout을 설정하기 위함
2.
layout.css 파일 생성
a.
경로
/styles/layout.css (/styles/ 경로에 layout.css파일 생성)
b.
코드 작성
body {
display: flex;
justify-content: center;
align-items: stretch;
background-image: url('../images/bg.png');
background-size: 100vw 100vh;
background-repeat: no-repeat;
}
.wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
width: 100%;
min-width: 320px;
max-width: 390px;
background-color: #fff;
overflow: hidden;
padding: 30px 0 60px 0;
}
CSS
복사
2-4. splash.css 파일 생성 및 작성
1.
정의와 사용이유
a.
유저가 웹페이지에 진입할 때 페이지가 로딩되기까지 일시적으로 보여주는 화면을 말한다.
b.
사용이유 : 데이터를 로딩할 때까지 시간을 벌기 위해 사용한다. 아무래도 빈화면을 보여주는 것보다 데이터를 다 보여줄 수 있는 상황이 유저 경험이 더 좋다고 판단하기 때문이다.
2.
splash.css 파일 생성
a.
경로
/styles/splash.css (/styles/ 경로에 splash.css파일 생성)
b.
코드 작성
.splash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
animation: fadeout 1.5s ease-in-out 1.5s forwards;
z-index: 999;
}
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
display: none;
}
}
CSS
복사
2-5. index.css 파일 생성 및 작성
1.
사용이유
a.
index.html 파일을 꾸미기위해 존재하는 파일입니다.
2.
index.css 파일 생성
a.
경로
/index.css (/ 경로에 index.css파일 생성)
b.
코드 작성
@import url('/styles/reset.css');
@import url('/styles/layout.css');
@import url('/styles/splash.css');
.wrap {
position: relative;
}
.bg {
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.bg img {
z-index: 1;
object-fit: cover;
filter: blur(10px);
opacity: 0.5;
}
.bg img:nth-child(1) {
width: 25vw;
max-width: 200px;
}
.bg img:nth-child(2) {
margin-top: auto;
margin-bottom: 10vh;
margin-left: auto;
width: 40vw;
max-width: 250px;
}
CSS
복사
2-7. index.html 파일 생성 및 작성
1.
정의와 사용이유
a.
정의 : 웹페이지의 처음 로딩되는 페이지
예전부터 목차라는 의미에 index라는 파일을 로딩하다보니, 관습적으로 index.html이 주로 진입점 페이지의 이름이 되었습니다.
꼭 진입점 페이지를 index.html이라고 짓거나 다른 페이지명을 로딩할 수 없는 것은 아닙니다.
2.
index.html 파일 생성
a.
경로
/index.html (/ 경로에 index.html파일 생성)
b.
코드 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link type="text/css" rel="stylesheet" href="index.css" />
</head>
<body>
<section class="wrap">
<article class="splash">
<img src="/images/logo.svg" width="173" height="40" />
</article>
<header>
<img src="/images/logo.svg" width="104" height="24" />
</header>
<div class="bg"></div>
</section>
</body>
</html>
HTML
복사
3. 현재 날씨 조회 페이지 레이아웃만들기
3-1. 현재 날씨 조회 페이지 미리보기
•
주 기능
◦
현 날씨를 기준으로 표정을 보여주는 기능
◦
날씨와 온도를 표시하는 기능
미리보기 캡쳐
2-2. 폴더구조 미리보기
2-3. 이모티콘 조회 기능 만들기
•
index.html, index.css, index.js, weather.js
1.
코드 작성 이유
a.
이모티콘, 날씨(텍스트), 온도를 표시하기 위해 작성합니다.
2.
index.html, index.css, index.js 코드 추가 및 수정
a.
경로
/index.html
/index.css
/index.js
/js/weather.js
b.
코드 작성
•
/index.html
◦
코드위치
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link type="text/css" rel="stylesheet" href="index.css" />
</head>
<body>
<section class="wrap">
<article class="splash">
<img src="/images/logo.svg" width="173" height="40" />
</article>
<header>
<img src="/images/logo.svg" width="104" height="24" />
</header>
<div class="bg"></div>
<!-- 영역1, 이곳에 아래의 코드를 복사 붙여 넣기 하시면 됩니다. -->
</section>
</body>
<!-- 영역2, 이곳에 아래의 코드를 복사 붙여 넣기 하시면 됩니다. -->
</html>
HTML
복사
◦
영역1, 추가할 코드
<div class="icon"></div>
<p class="desc"></p>
<h2 class="temp"></h2>
HTML
복사
◦
영역2, 추가할 코드
<script type="module" src="/index.js"></script>
HTML
복사
•
/index.css
◦
코드 위치
@import url('/styles/reset.css');
@import url('/styles/layout.css');
@import url('/styles/splash.css');
.wrap {
position: relative;
}
.bg {
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.bg img {
z-index: 1;
object-fit: cover;
filter: blur(10px);
opacity: 0.5;
}
.bg img:nth-child(1) {
width: 25vw;
max-width: 200px;
}
.bg img:nth-child(2) {
margin-top: auto;
margin-bottom: 10vh;
margin-left: auto;
width: 40vw;
max-width: 250px;
}
/* 여기에 아래의 코드를 추가합니다*/
CSS
복사
◦
추가할 코드
.icon {
z-index: 2;
width: 258px;
height: 258px;
margin-bottom: 58px;
justify-self: center;
}
.desc {
z-index: 2;
color: #000;
text-align: center;
font-size: 24px;
}
.temp {
z-index: 2;
color: #000;
text-align: center;
font-size: 130px;
font-weight: 300;
}
CSS
복사
•
/index.js
◦
추가할 코드
import { getWeather } from './js/weather.js';
const defType = (type) => {
if (type.includes('번개')) {
return '02';
} else if (type.includes('비') || type.includes('구름') || type.includes('흐림')) {
return '03';
} else if (type.includes('눈')) {
return '04';
} else if (type.includes('바람') || type.includes('풍')) {
return '05';
} else if (type.includes('안개')) {
return '06';
} else {
return '01';
}
};
const createIcon = (type) => {
const img = `${type}.svg`;
const wrap = document.querySelector('.icon');
const icon = document.createElement('img');
icon.src = `/images/${img}`;
wrap.appendChild(icon);
};
const setWeatherKR = (text) => {
const weather = document.querySelector('.desc');
weather.innerText = text;
};
const setTemp = (temp) => {
const tempEl = document.querySelector('.temp');
tempEl.innerText = temp + '°';
};
const setBg = (type) => {
const img = `${type}_bg.svg`;
const wrap = document.querySelector('.bg');
const bg = document.createElement('img');
const bg2 = document.createElement('img');
bg.src = `/images/${img}`;
bg2.src = `/images/${img}`;
wrap.appendChild(bg);
wrap.appendChild(bg2);
};
const init = async () => {
const data = await getWeather();
const type = defType(data.desc);
createIcon(type);
setWeatherKR(data.desc);
setTemp(data.ta);
setBg(type);
console.log(data);
};
init();
JavaScript
복사
•
/js/weather.js
◦
추가할 코드
const getWeatherData = async () => {
// 자체 프록시 서버 구현.
console.log(location.hostname);
const apiUrl =
location.hostname == 'localhost' || location.hostname == '127.0.0.1'
? 'http://' + location.hostname + ':3000/weather'
: 'https://' + location.hostname + '/weather';
const res = await fetch(apiUrl);
const data = await res.text();
return data;
};
const parseXML = (xml) => {
return new DOMParser().parseFromString(xml, 'text/xml');
};
const parseData = (xml) => {
let year, month, day, hour, ta, desc;
const sin_id = 184;
const dateElement = xml.querySelector(`weather`);
if (dateElement) {
year = dateElement.getAttribute('year');
month = dateElement.getAttribute('month');
day = dateElement.getAttribute('day');
hour = dateElement.getAttribute('hour');
}
const jejuElement = xml.querySelector(`local[stn_id="${sin_id}"]`);
if (jejuElement) {
ta = jejuElement.getAttribute('ta');
desc = jejuElement.getAttribute('desc');
}
return {
year,
month,
day,
hour,
ta,
desc,
};
};
export const getWeather = async () => {
const data = await getWeatherData();
const xmlData = parseXML(data);
const parsedData = parseData(xmlData);
return parsedData;
};
JavaScript
복사
3. chatGPT를 이용하여 유저에게 안내해주는 메세지 만들기
3-1. 현재 날씨 조회 페이지 미리보기
•
주 기능
◦
안내메세지 조회 기능
◦
3-2. 폴더구조 미리보기
3-3. chatGPT를 이용해 안내 메세지를 조회하는 만들기
•
js/chatgpt.js
1.
코드 작성 이유
a.
gpt에게 안내 문구를 제공하기 위해서 사용합ㄴ디ㅏ.
2.
chatgpt.js 코드 추가 및 수정
a.
경로
/js/chatgpt.js
3.
코드 작성
const secretKey = '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';
const apiUrl = 'https://api.openai.com/v1/chat/completions';
const fetchHeader = {
method: 'POST',
headers: {
Authorization: `Bearer ${secretKey}`,
'Content-Type': 'application/json',
},
};
const messagePrompt = (message) => {
const { ta, desc } = message;
return `오늘 제주의 날씨는 ${ta}도 , ${desc}인데 관광객에게 필요한 조언을 해줘, 20자 이내로`;
};
export const callChatGPT = async (message) => {
const fetchBody = {
body: JSON.stringify({
model: 'gpt-3.5-turbo',
messages: [{ role: 'user', content: messagePrompt(message) }],
max_tokens: 100, // 자동 완성 생성 시 생성될 최대 단어 수
top_p: 1, // 0.1 ~ 1 사이의 값, 다음 단어를 예측할 때 얼마난 다양한 단어들로 에측할지, 0.3 입력시 상위 30%의 단어들로 예측
temperature: 0.5, // 0.0 ~ 1.0 사이의 값, 자동 완성 생성 시 창의성을 조절하는 값
frequency_penalty: 0, // 자동 완성 생성 시 이전에 생성된 단어와 유사한 단어 생성에 대한 가중치
presence_penalty: 0, // 자동 완성 생성 시 프롬프트에 사용된 단어와 유사한 단어 생성에 대한 가중치,
}),
};
const res = await fetch(apiUrl, { ...fetchHeader, ...fetchBody });
const data = await res.json();
if (res.status == 200) {
// 성공 케이스
return data.choices[0].message.content;
} else {
// 실패 케이스
console.error(data);
}
};
JavaScript
복사
1.
index.html, index.css, index.js 코드 수정
a.
경로
/index.html
/index.css
/index.js
b.
코드 작성
•
/index.html
◦
코드위치
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link type="text/css" rel="stylesheet" href="index.css" />
</head>
<body>
<section class="wrap">
<article class="splash">
<img src="/images/logo.svg" width="173" height="40" />
</article>
<header>
<img src="/images/logo.svg" width="104" height="24" />
</header>
<div class="bg"></div>
<div class="icon"></div>
<p class="desc"></p>
<!-- 이곳에 아래의 코드를 복사 붙여 넣기 하시면 됩니다. -->
<h2 class="temp"></h2>
</section>
</body>
<script type="module" src="/index.js"></script>
</html>
HTML
복사
◦
추가할 코드
<h3 class="chatGPT"></h3>
HTML
복사
•
/index.css
◦
코드 위치
@import url('/styles/reset.css');
@import url('/styles/layout.css');
@import url('/styles/splash.css');
.wrap {
position: relative;
}
.bg {
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.bg img {
z-index: 1;
object-fit: cover;
filter: blur(10px);
opacity: 0.5;
}
.bg img:nth-child(1) {
width: 25vw;
max-width: 200px;
}
.bg img:nth-child(2) {
margin-top: auto;
margin-bottom: 10vh;
margin-left: auto;
width: 40vw;
max-width: 250px;
}
.icon {
z-index: 2;
width: 258px;
height: 258px;
margin-bottom: 58px;
justify-self: center;
}
.desc {
z-index: 2;
color: #000;
text-align: center;
font-size: 24px;
}
.temp {
z-index: 2;
color: #000;
text-align: center;
font-size: 130px;
font-weight: 300;
}
/* 여기에 아래의 코드를 추가합니다*/
CSS
복사
◦
추가할 코드
.chatGPT {
z-index: 2;
color: #525252;
text-align: center;
font-size: 20px;
font-weight: 500;
max-width: 60%;
word-break: keep-all;
}
CSS
복사
•
index.js
◦
코드위치
import { getWeather } from './js/weather.js';
/*영역 1, 여기에 아래의 코드를 추가합니다*/
const defType = (type) => {
if (type.includes('번개')) {
return '02';
} else if (
type.includes('비') ||
type.includes('구름') ||
type.includes('흐림')
) {
return '03';
} else if (type.includes('눈')) {
return '04';
} else if (type.includes('바람') || type.includes('풍')) {
return '05';
} else if (type.includes('안개')) {
return '06';
} else {
return '01';
}
};
const createIcon = (type) => {
const img = `${type}.svg`;
const wrap = document.querySelector('.icon');
const icon = document.createElement('img');
icon.src = `/images/${img}`;
wrap.appendChild(icon);
};
const setWeatherKR = (text) => {
const weather = document.querySelector('.desc');
weather.innerText = text;
};
const setTemp = (temp) => {
const tempEl = document.querySelector('.temp');
tempEl.innerText = temp + '°';
};
const setBg = (type) => {
const img = `${type}_bg.svg`;
const wrap = document.querySelector('.bg');
const bg = document.createElement('img');
const bg2 = document.createElement('img');
bg.src = `/images/${img}`;
bg2.src = `/images/${img}`;
wrap.appendChild(bg);
wrap.appendChild(bg2);
};
/*영역 2, 여기에 아래의 코드를 추가합니다*/
const init = async () => {
const data = await getWeather();
const type = defType(data.desc);
/*영역 3, 여기에 아래의 코드를 추가합니다*/
console.log(chatGPTData);
createIcon(type);
setWeatherKR(data.desc);
setTemp(data.ta);
setBg(type);
console.log(data);
};
init();
JavaScript
복사
◦
영역1, 추가할 코드
import { callChatGPT } from './js/chatgpt.js';
JavaScript
복사
◦
영역2, 추가할 코드
const setChatGPTData = (text) => {
const chat = document.querySelector('.chatGPT');
chat.innerText = text;
};
JavaScript
복사
◦
영역3, 추가할 코드
const chatGPTData = await callChatGPT(data);
console.log(chatGPTData);
setChatGPTData(chatGPTData);
JavaScript
복사