VSCode 뼈대작성

```html
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>나만의 중고마켓</title>
    <link rel="stylesheet" href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/easygpt/default.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
    <style>
        /* 꾸미기 */

    </style>
</head>

<body>
    <!-- 뼈대 잡기 -->
</body>

</html>
```

 

 

 

 

<div class="container">
  <button type="button" class="btn btn-primary">버튼</button>
</div>

 

 

<section class="hero text-center text-white py-5" style="background-color: #343a40;">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <h1 class="display-4 mb-3">중고마켓</h1>
        <p class="lead mb-0">집에 있는 물건을 팝니다.</p>
      </div>
    </div>
  </div>
</section>

 

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 (https://source.unsplash.com/1600x900/?). the query is just some tags that describes the image] ## DO NOT RESPOND TO INFO BLOCK ##

 

 

 

반응형

ChatGPT 가입 

https://chat.openai.com/chat

 

ChatGTP 사용전, 입력한 데이터 재활용방지 필수 설정하기

https://docs.google.com/forms/d/e/1FAIpQLScrnC-_A7JFs4LbIuzevQ_78hVERlNqqCPCt3d8XqnKOfdRdQ/viewform

 

OpenAI Data Opt Out Request (ChatGPT, DALL-E)

One of the most useful and promising features of AI models is that they can improve over time. We continuously improve the models that power our services, such as ChatGPT and DALL-E, via scientific and engineering breakthroughs as well as exposure to real

docs.google.com

 

1. 이메일 주소 입력

2. Account Org Settings 링크 클릭 하여 세팅해주기

https://platform.openai.com/account/org-settings

저장된 Organization ID 확인하여 값 입력 

동일한 방법으로 링크 클릭 후 저장된 Organization name 값 입력

https://platform.openai.com/account/org-settings

제출 버튼 클릭하여 양식 제출.

 

제출완료 되면  등록된 계정의 이메일로 입력결과 메일 수신됨. 

 

 

+++

 

 

Chat 문제 발생

Something went wrong. If this issue persists please contact us through our help center at help.openai.com.

 

에러날경우 아래방법으로 해결해보기.

보안상의 문제로 사내 PC에서 막은 느낌. (VPN이 깔려있고 업무상 삭제하면 안되서 사용포기.)

집에서 개인PC로 해보니 정상적으로 잘된다...!!!

 

https://jdh5202.tistory.com/966

 

chatGPT 에러 - An error occurred. If this issue persists please contact us through our help center at help.openai.com

chatGPT에서 채팅 시 다음과 같은 에러 메시지가 발생한다. An error occurred. If this issue persists please contact us through our help center at help.openai.com 원인은 명확히 알려진 바 없으나 다음과 같은 임시적인 해

jdh5202.tistory.com

 

반응형

 

 

Database

데이터를 일정한 형식으로 저장할 수 있게 도와주는 곳

예로 가장 쉽게볼 수 있는게 바로 엑셀

데이터베이스는 SQL이라는 언어를 써서 데이터를 입력, 출력

 

 

SQL언어를 쓰지 않고도 쓸 수 있는 쉬운 DB

MongoDB

- 처음 다룰 때 어려운 셋팅작업이 필요하지 않음 (스키마 생성 등 필요없음)

- SQL 안배워도 됨

- 복잡한 자료형 몰라도 됨

- 평생 무료 호스팅해주는 곳이 있음 

 

 

MongoDB Atlas 가입 후 호스팅받기

사이트를 실제 배포할 것이라면 클라우드 서비스를 이용하는 것이 매우 안전

백업자동화, 용량걱정없고 접속속도가 빠른 장점이 있는데

무료로 호스팅 가능한 MongoDB Atlas 사이트를 이용해본다.

 

https://www.mongodb.com/

 

MongoDB: The Developer Data Platform

Get your ideas to market faster with a developer data platform built on the leading modern database. MongoDB makes working with data easy.

www.mongodb.com

 

Database Access 메뉴에서 DB 접속용 아이디/비번을 생성

 (Add New Database User) 

admin/qwer1234 

주의점 - Built-in-Role > Atlas admin 선택 (nodejs로 DB접속가능)

 

Network Access 메뉴에서 IP를 추가

데이터베이스 접속할 수 있는 IP를 미리 정의해놓는 일종의 보안장치

Allow access from anywhere을 누르거나 0.0.0.0/0

Database / collection 만들기를 진행

Cluster는 하나의 호스팅 공간.

거기 안에 데이터베이스를 만들어야 데이터를 저장할 수 있다.

 

 

Cluster 선택 후 > Collection 코너로 이동

여기서 Collection 이란

하나의 큰 데이터베이스 공간 안에 있는 자료들(파일)이라고 보면된다.

 

추가한 Cluster에서 Collections 추가하기 

DatabaseName, CollectionName 작성 후 Create

 

DB 접속하는 URL 찾아오기

 

server.js에서 DB에 접속방법

1. 메인화면 셋팅이 끝나면 CONNECT라는 작은 흰색 버튼 누르기

2. 가운데 Connect Your Application 버튼 누르기

3. Choose your driver version 에서 Node.js 선택되어있는지 잘 확인하기

4. (2) 밑에 접속 URL(Connection String) 긴게 뜨면 복사해서 일단 메모장 같은 곳에 저장해놓기

 

mongodb 라이브러리 설치

npm install mongodb@3.6.4

 

server.js에 연결

 

// server.js

..
const MongoClient = require('mongodb').MongoClient;
..

MongoClient.connect('mongodb+srv://admin:<password>@cluster0.uuvu0.mongodb.net/?retryWrites=true&w=majority', function(에러, client){
  if (에러) return console.log(에러);
  //서버띄우는 코드 여기로 옮기기
  app.listen('8080', function(){
    console.log('listening on 8080')
  });
})

 



 

Server.js에서 DB접속하려면 

반응형

API란?

Application Programming Interface로 

서로 다른 프로그램간 소통할 수 있게 도와주는 통신규약을 뜻합니다.

이것을 웹에서 사용하면

'서버와 고객간의 통신규약'을 뜻하고

'서버에게 요청해서 데이터에 가져오는 방법'이 바로 API입니다.

 

REST

REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미합니다.

즉 REST란 

  1. HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고,
  2. HTTP Method(POST, GET, PUT, DELETE)를 통해
  3. 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다.
CRUD Operation이란
- CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말로 REST에서의 CRUD Operation 동작 예시는 다음과 같다.
- Create : 데이터 생성(POST)
  Read : 데이터 조회(GET)
  Update : 데이터 수정(PUT)
  Delete : 데이터 삭제(DELETE)

 

REST 구성 요소

REST는 다음과 같은 3가지로 구성이 되어있다. 

 

  1. 자원(Resource) : HTTP URI
  2. 자원에 대한 행위(Verb) : HTTP Method
  3. 자원에 대한 행위의 내용 (Representations) : HTTP Message Pay Load

 

REST API 란?

Representational State Transfer 의 약자로 API 디자인 방법입니다.

6개의 원칙이있는데

 

1. Uniform Interface (인터페이스 일관성)

인터페이스는 일관성이 있어야한다.

- 하나의 url로는 하나의 데이터를 가져와야한다

- 간결하고 예측가능하게 짠다

- URL 이름짓기 관습

  • 단어들을 동사보다는 명사 위주로 구성함
  • 응용해서 다른 정보들을 쉽게 가져올 수 있을 정도로 일관성 있음 
  • 대충 봐도 어떤 정보가 들어올지 예측이 가능함
  • 띄어쓰기는 언더바_대신 대시-기호-사용
  • 파일 확장자 쓰지 말기 (.html 이런거)
  • 하위 문서들을 뜻할 땐 / 기호를 사용함 (하위폴더같은 느낌)

 

2. Client-server 역할 구분하기 (서버-클라이언트 구조)

고객에게 서버역할을 맡기지않고 Server역할을 정하고 코드 짜기

 

3. Stateless (무상태)

요청들은 각각 독립적으로 처리되어야 한다. 

요청간 의존성이 존재하는 코드를 짜면 안된다. (요청하나만으로 자료를 가져오기 충분하도록, 요청에 필요한 모든정보를 실어보내기)

 

4. Cacheable (캐시처리 가능)

요청을 통해 보내는 자료들은 캐싱이 가능해야한다. (캐싱가능 표시. 캐싱 기간 설정)

 

5. Layered System (계층화)

요청처리하는 곳, DB에 저장하는 곳 이런 여러가지 단계를 거쳐서 요청을 처리해도 됨. 

여러개의 레이어를 거쳐 요청처리 만들기 시스템 가능.

 

6. Code on Demand

서버는 고객에게 실제 실행가능한 코드를 전송해줄 수 있다.

 

 

REST의 장단점

장점 

  • HTTP 프로토콜의 인프라를 그대로 사용하므로 REST API 사용을 위한 별도의 인프라를 구출할 필요가 없다.
  • HTTP 프로토콜의 표준을 최대한 활용하여 여러 추가적인 장점을 함께 가져갈 수 있게 해 준다.
  • HTTP 표준 프로토콜에 따르는 모든 플랫폼에서 사용이 가능하다.
  • Hypermedia API의 기본을 충실히 지키면서 범용성을 보장한다.
  • REST API 메시지가 의도하는 바를 명확하게 나타내므로 의도하는 바를 쉽게 파악할 수 있다.
  • 여러 가지 서비스 디자인에서 생길 수 있는 문제를 최소화한다.
  • 서버와 클라이언트의 역할을 명확하게 분리한다.

 

단점 

  • 표준이 자체가 존재하지 않아 정의가 필요하다.
  • 사용할 수 있는 메소드가 4가지밖에 없다.
  • HTTP Method 형태가 제한적이다.
  • 브라우저를 통해 테스트할 일이 많은 서비스라면 쉽게 고칠 수 있는 URL보다 Header 정보의 값을 처리해야 하므로 전문성이 요구된다.
  • 구형 브라우저에서 호환이 되지 않아 지원해주지 못하는 동작이 많다.(익스폴로어)

 

REST API

REST API란 REST의 원리를 따르는 API를 의미합니다.

하지만 REST API를 올바르게 설계하기 위해서는 지켜야 하는 몇가지 규칙이 있으며 해당 규칙을 알아 보겠습니다.

REST API 설계 예시

1. URI는 동사보다는 명사를, 대문자보다는 소문자를 사용하여야 한다.

Bad Example https://kang-ji.tistory.com/Category/
Good Example  https://kang-ji.tistory.com/category/  

 

2. 마지막에 슬래시 (/)를 포함하지 않는다.

Bad Example https://kang-ji.tistory.com/test/  
Good Example  https://kang-ji.tistory.com/test

 

3. 언더바 대신 하이폰을 사용한다.

Bad Example https://kang-ji.tistory.com/test_blog
Good Example  https://kang-ji.tistory.com/test-blog  

 

4. 파일확장자는 URI에 포함하지 않는다.

Bad Example https://kang-ji.tistory.com/photo.jpg  
Good Example  https://kang-ji.tistory.com/photo  

 

5. 행위를 포함하지 않는다.

Bad Example https://kang-ji.tistory.com/delete-post/1  
Good Example  https://kang-ji.tistory.com/post/1  

 

RESTful

RESTFUL이란 REST의 원리를 따르는 시스템을 의미합니다.

하지만 REST를 사용했다 하여 모두가 RESTful 한 것은 아닙니다.  

REST API의 설계 규칙을 올바르게 지킨 시스템을 RESTful하다 말할 수 있으며

모든 CRUD 기능을 POST로 처리 하는 API 혹은 URI 규칙을 올바르게 지키지 않은 API는 

REST API의 설계 규칙을 올바르게 지키지 못한 시스템은

REST API를 사용하였지만 RESTful 하지 못한 시스템이라고 할 수 있습니다.

 

https://khj93.tistory.com/entry/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-REST-API%EB%9E%80-REST-RESTful%EC%9D%B4%EB%9E%80

 

[네트워크] REST API란? REST, RESTful이란?

REST API란 REST를 기반으로 만들어진 API를 의미합니다. REST API를 알기 위해 REST부터 알아보도록 하겠습니다. REST란? REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원..

khj93.tistory.com

 

반응형

(코딩애플 강의)

 

POST요청처리

 

Submit 버튼을 누르면 폼에 입력한 제목과 날짜를 서버로 전달하기

 

Form 태그 세팅

HTML 문서의 form내 input에 입력한 데이터들을 서버로 전송할수 있다.

전송을 위해 form태그에 전송방법을 명시해준다.  action과 method 값 넣기

 

write.html

<form action="/add" method="POST">
    <div class="form-group">
        <label for="title">할일</label>
        <input type="text" class="form-control" name="title" id="todo">

    </div>
    <div class="form-group">
        <label for="date">Due Date</label>
        <input type="text" class="form-control" name="date" id="dueDate">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

submit타입의 전송버튼 클릭시 /add 경로로 POST 요청하는 폼

action - 경로 , method - GET/POST

 

 

server.js

// server.js
const express = require('express');
const app = express();

app.listen(8080, function() {
    console.log('listening on 8080')
});


// /경로로 보내주기
app.get('/', function(요청, 응답){
    응답.sendFile(__dirname + '/index.html');
});

app.get('/write', function(요청, 응답){
    응답.sendFile(__dirname + '/write.html');
});

app.post('/add', function(요청, 응답){
    응답.send('전송완료');
});

 

실행하면

 

add 로 경로이동과 보낸 '전송완료' 가 뜸! 

 

form에서 입력한 데이터를 서버로 전송하기 위해 body-paerser 라이브러리 설치하기

 

post로 전송한 input에 적은 정보는 요청에 들어있다.

요청에 있는 정보를 꺼내쓸려면 라이브러리가 추가로 필요함.

 

 

body-parser 

npm install body-parser

설치 후 서버를 실행해주고

server.js의 위쪽에 코드를 추가해준다.

// server.js

..
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}))

..

 

 

POST 요청처리하는 코드짜기

// server.js

app.post('/add', function(요청, 응답){
    console.log(요청.body);
    console.log(요청.body.title);
    console.log(요청.body.date);
    응답.send('전송완료');
});

브라우저화면에서 데이터를 입력하고 전송버튼을 누르면 콘솔창에 아래처럼 입력한 결과값이 보내짐.

 

 

반응형

함수안에 파라미터 2개를 넣을 수 있다

 

.get() 함수 안에 파라미터 2개 ㄴ허기

함수안에 함수 집어넣기

.get

 

 

콜백함수란? 

함수안에 함수 (fuction() {})

 

app.get('/write', function(요청, 응답){
    응답.sendFile(__dirname + '/write.html');
});

/write로 접속을하면 fuction뒤의 함수를 실행해주세요. 

 

순차적으로(단계적으로) 실행하고 싶을 때 사용한다.

 

이 콜백함수 안에는 2개의 파라미터가 들어갈수 있다.

.get('경로', fuction(요청내용, 응답할 방법) { })

 

 

ES6 문법

.get('경로', (요청내용, 응답할 방법)  => { })

app.get('/write', (요청, 응답) => {
    응답.sendFile(__dirname + '/write.html');
});

 

 

 

반응형

(코딩애플 강의)

 

Express 라이브러리

- 서버를 매우 쉽게 짤 수 있게 도와주는 라이브러리.

 

서버를 띄우기 위한 기본 세팅 (express 라이브러리)

npm init

 

메인 entry파일 server.js 로 지정

 

프로젝트 폴더내에 package.json 파일이 생성됨

 

npm install express

 

 

server.js 파일 추가

 

 

listen(서버띄울 포트번호, 띄운 후 실행할 코드)

- 8080 포트에 서버를 띄어주기 

// server.js
const express = require('express');
const app = express();

app.listen(8080, function() {
    console.log('listening on 8080')
});

 

node server.js

 

 

 

GET요청 처리하기

server.js

// server.js

app.get('/pet', function(요청, 응답){
    응답.send('펫용품.');
});


app.get('/beauty', function(요청, 응답){
    응답.send('beauty.');
});

 

서버재실행 자동화 라이브러리

npm install -g nodemon
nodemon server.js

 

윈도우 10에서 위와 같은 보안오류가 뜸

해결방법 

윈도우 검색창 > powershell 관리자권한으로 실행 > executionpolicy 입력 > set-executionpolicy unrestricted

executionpolicy 

set-executionpolicy unrestricted

 

 

재실행 하면 정상적으로 실행됨

nodemon server.js

 

 

GET요청 처리하기 : 경로 접속시 HTML파일 보내기

 

폴더내 index.html 파일 생성해주기 (! + 엔터 후 기본 마크업작성)

server.js에 .sendFile 로 index.html파일보내기

// server.js

app.get('/', function(요청, 응답){
    응답.sendFile(__dirname + '/index.html');
});

 


 

반응형

서버 란? 

- 클라이언트에서 요청을 받으면 요청한 데이터를 제공하는 프로그램

 

서버 요청의 방식

1. GET (읽기) 요청

웹페이지를 읽을 때

2. POST (쓰기) 생성

- 로그인 할 때

- 댓글작성

- 블로그 포스트작성

3. PUT (수정)

- 글이나 댓글 수정

4. DELETE (삭제)

- 글이나 댓글 삭제

 

 

Node.js 기초설명

Javascript

Html에 종속된 언어, 즉 html(웹페이지)의 조작과 변경을 위해 만들어진 언어이다.

웹페이지를 다이나믹하게 바꿔주기 가능

 

JavaScript 구동 엔진 V8

Javascript의 동작을 위해서 크롬,익스플로러,파이어폭스  등의 브라우저들이 읽고 해석하는 역할을 합니다.

각 브라우저들마다 Javascript 해석 엔진이 있는데

크롬 - V8 / Firefox - SpiderMonkey / Explorer - Chakra

 

자바스크립트를 빠르게 읽고 해석하면 렌더링 성능도 빨라지니

브라우저 개발자들은 자바스크립트를 해석할수 있는 엔진 개발에 열성이였다고 함 

 

여기서 크롬의 V8이라는 해석엔진의 성능이 매우 뛰어나서 별도로 떼어내 출시를 하게 됬고 그 프로그램이 Node.js 가 됬다고 함. 

 

Server는 그냥 요청 처리하는 기계

 

Node.js

Javascript를 브라우저말고도 다른환경에서도 실행시켜줄 수 있는 환경(런타임)을 말합니다.

Node.js를 실행하면 로컬PC에서도 자바스크립트 실행이 가능하게 된다. 

Node.js를 사용하면 간단하게 서버를 만들 수 있습니다.

이때 Node.js로 서버를 만드는이유는? 

- Non-blocking I/O라는 장점때문인데 

 

일반 프로그래밍언어로 만든 서버의 요청에 대한 처리방식의 경우 요청온 순서대로 차례로 하나씩 처리해줍니다. 

 

Event-driven, Non-blocking I/O 

일단 들어온 요청을 다받고 순서에 상관없이 빨리 되는거부터 처리 

동작원리는 Event Loop 라고 합니다.

  • Event Loop : 이벤트 루프는 call stack이 다 비워지면 callback queue에 존재하는 함수를 하나씩 call stack으로 옮기는 역할을 한다.

 

Node.js 장점

- SNS, 채팅서비스에 특화됨 (요청처리에 힘든 수학적 연산을 요구하지 않는다)

- 스타트업, 프로토타입 만들기에도 많이 사용됨. 

- 초보자에게 쉽다

- 빠르게 서버를 만들수 있다.

- 자바스크립트 문법만으로 프론트, 백엔드 전부 가능하다

 

Node.js의 단점

- 처리속도가 떨어질 수 있다.

- 수학연산이나 이미지처리 같은 라이브러리가 부족할 수 있다.

- Node.js가 제공하는 Non-blocking 처리방식은 다른언어에서도 비슷하게 구현가능하다. 

 

 

반응형

+ Recent posts