[오늘 할일] 

메인 개발환경 설정→develop→ 이슈생성→각 브랜치

이슈만들기

각자 개발

 

[나의 역할]

배포

메인 페이지와 마이 페이지 프론트엔드

 


[nginex로 서버 배포하기]

 

AWS에서 인스턴스 생성 후 인증키 PPK로 받은 후에 탄력적 IP 연결 

>> putty로 퍼블릭 ip 입력 후 포트 22에 연결 -> SSH의 크리덴션로 들어가 인증키 입력하여 open -> ubuntu 입력하여 연결

 

nginx 설치

sudo apt-get update -> 관리자 업데이트 apt-get 라잌 npm 

sudo apt-get install nginx -> nginx 설치

sudo systemctl start nginx -> 안되면 실행해보기

 

default파일 백업하기
sudo cp -r /etc/nginx/sites-available/ /etc/nginx/sites-available-origin
sudo cp -r /etc/nginx/sites-enabled/ /etc/nginx/sites-enabled-origin
 
 
default파일 삭제하기
sudo rm /etc/nginx/sites-available/default
sudo rm /etc/nginx/sites-enabled/default
 
새로운 conf파일 생성
sudo vi /etc/nginx/sites-available/test.conf
 
conf파일 만들기(백엔드)
server {
          listen 80;
          server_name 아이피주소;
          location / {
                    proxy_pass http://127.0.0.1:포트;
           }
}

 

심볼릭 파일만들기
sudo ln -s /etc/nginx/sites-available/test.conf /etc/nginx/sites-enabled/test.conf
 
설정확인
sudo nginx -t
ok가 떠야함!!
 
nginx 재시작
sudo systemctl restart nginx

 

IP 입력해서 500 뜨면 연결된것

 

Node.js 설치

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash

sudo apt-get install -y nodejs

설치 확인

node -v

npm -v

pm2 설치

sudo npm i -g pm2

 

깃 클론하기

서버에 프로젝트 폴더 생성

mkdir 폴더이름

깃 클론할 레파지토리 만들기

구조 만든 후에 index.js에서 서버 여는 코드 짜기

const express = require('express');
const session = require("express-session");
const app = express();
const PORT = 8000;
app.set('view engine', 'ejs');
app.use('/views', express.static('./views'));
app.use('/static', express.static('./static'));
app.set(express.urlencoded({extended:true}));
app.use(express.json());

app.listen(PORT, ()=>{
    console.log('local 연결 완료');
})

 

깃 클론

cd 폴더이름
git clone git주소 .

깃 명령어를 실행할려면 cd .git으로 한번 더 들어가서 해야한다.

 

적용 확인하는 법 >> [파일질라 사용]

포트는 22로

여기서 적용됐는지 확인하기

 

실행

pm2 start index.js

서버 배포 완료~!!


[하면서 사용한 것]

 

실행한 커밋 및 실행 기록 모두 삭제

git reset --hard HEAD~1

특정 브랜치 pull 하기

git pull origin <branch name>

[메인 페이지 제작 시작]

 

거의 일주일을 집중하지 못했다..다시 하나하나 잡으면서 복습해야겠다..ㅠㅠ 화이팅!


소켓을 알기 전에 알아야할 지식은 TCP/IP이다. 

 

TCP/IP는 컴퓨터 네트워크에서 데이터 통신을 위한 프로토콜 스택으로,

네트워크 간의 데이터 교환을 가능하게 하는 중요한 기술

• 데이터를 분할하여 보냄. • 정확한 전송을 보장하며 데이터의 경로를 지정하는 역할.

 

TCP

데이터를 신뢰성 있게 전송하기 위한 프로토콜이다.

대표적으로 4가지의 특징이 있다

신뢰성 : 데이터의 손실이나 손상을 최소화하고 데이터의 순서를 보장한다.

연결 지향 : 데이터를 주고받기 전에 송신자와 수신자 간의 연결

흐름 제어 : 데이터의 흐름을 제어하여 수신자가 처리할 수 있는 속도에 맞춰 데이터를 전송

혼잡 제어 : 네트워크의 혼잡 상태를 감지하고조절하여 네트워크 성능을 유지

 

IP

인터넷 상에서 데이터를 주고받기 위한 통신 규약

특징

패킷 기반 : 데이터를 작은 패킷 단위로 나누어 전송하고, 각 패킷은 목적지 주소와 출발지 주소 정보를 포함

비연결성 : 패킷은 독립적으로 처리되며, 수신자와의 직접적인 연결이 필요하지 않음

라우팅 : 각 라우터가 패킥의 경로를 결정하여 목적지까지 전달

IP주소 : IP는 각 컴퓨터를 식ㅂㄹ하기 위한 IP 주소를 사용

 

- 네트워크 인터페이스 계층 : 물리계층과 링크계층/ MAC 주소를 관리/ 이더넷이나 와이파이 같은 기술

- 인터넷 계층 : OSI 7계층의 네트워크 계층/ 주소 지정을 담당한다. / IP

- 전송 계층 : TCP, UDP 데이터의 신뢰성과 흐름을 제어

- 응용 계층 : 세션, 표현, 응용 계층/ 최종 사용자에게 서비스 제공하기 위한 응용프로그램과 사용자 인터페이스

 

UDP

신뢰성은 낮지만 속도가 빠름

데이터그램 단위로 데이터를 전송 > 순서와 데이터의 신뢰성이 보장되지 않음

제어 메커니즘이 없기에 오버헤드가 적음

방송이나 온라인 게임에서 많이 사용함

 


소켓

프로세스가 네트워크로 데이터를 내보내거나 데이터를 받기 위한 실제적인 창구 역할을 하는 것

- 서버와 클라이언트를 연결해주는 도구로써 인터페이스 역할을 한다.

- 소켓은 프로토콜, IP 주소, 포트 넘버로 정의된다.

- TCP와 UDP 프로토콜을 사용항 데이터를 전송

소켓 프로그래밍

- 서버 소켓 : 연결 요청을 받아 들임/ 클라이언트의 요청을 받고 통신을 위한 소켓을 생성

- 클라이언트 소켓 : 서버에 연결 요청/ 연결 수락 후 서버와 데이터 주고 받음

- 포트 : 컴퓨터 내에서 소프트웨어 간 통신을 할 때 사용되는 식별자

 

소켓 프로그래밍의 흐름


WebSocket

양방향 소통을 위한 프로토콜(약속)

• HTML5 웹 표준 기술

• 빠르게 작동하며 통신할 때 아주 적은 데이터를 이용

• 이벤트를 단순히 듣고, 보내는 것만 가능

• Handshake(핸드셰이크): 클라이언트가 서버로 웹소켓 연결을 요청할 때, 서버와 클 라이언트 간에 초기 핸드셰이크가 이루어며 이 핸드셰이크 과정을 통해 웹소켓 연결

• 클라이언트 측에서는 브라우저의 WebSocket 객체를 사용하여 웹소켓 연결을 생성하 고 관리

• 브라우저에서만 사용 가능

 

웹소켓 이벤트

- open : 웹소켓 연결이 성공적으로 열렸을 때  발생 

- message: 웹소켓을 통해 데이터를 주고받을 때 발생

- error: 웹소켓 연결 중 오류가 발생했을 때 발생. 연결 실패, 통신 오류 등이 해당

- close: 웹소켓 연결이 종료되었을 때 발생

 

백엔드에서 사용하기 위해선 별도의 라이브러리나 모듈이 필요하다.

 

백엔드에서 사용하기 위해선 ws를 설치해야한다.

npm i ws

ws 모듈 이벤트

• connection: 클라이언트가 웹소켓 서버에 연결되었을 때 발생.

이 이벤트 의 콜백 함수는 새로운 클라이언트 연결마다 실행

• message 이벤트: 클라이언트로부터 메시지를 받았을 때 발생

• error 이벤트: 웹소켓 연결 중 오류가 발생했을 때 발생

• close 이벤트: 클라이언트와의 연결이 종료되었을 때 발생

 

 

실습 >> 채팅창 만들기

bash 창 열어서 설치

npm init -y

npm i express ejs ws

app.js

const ws = require('ws');
const express = require('express')
const app = express();
const PORT = 8080;

app.set('view engine', 'ejs');

app.get("/", (req,res)=>{
    res.render('client');
});
 
const server = app.listen(PORT, ()=>{
    console.log('http://localhost:8080');
});


const wss = new ws.Server({server}); //서버 연결

//브라우저(클라이언트)들을 담을 변수 선언
const sockets = [];


//socket 변수는 접속한 브라우저
wss.on('connection', (socket) => {
    
    console.log("클라이언트와 연결 완료");// 주소 복사 후 탭을 한번 더 열면 소켓 하나가 더 생성되는 것이다.

    // sockets 변수에 브라우저 추가
    sockets.push(socket);


    socket.on("message", (message) => {//메세지가 생길떄마다
        console.log(`클라이언트로부터 받은 메세지: ${message}`);
        //클라이언트로 응답 메세지 전송
        // socket.send(`서버메세지: ${message}`);
        sockets.forEach((elem)=>{// 모든 브라우저에 있는 메세지를 반복문으로 전부 다 넣는다
            elem.send(`서버메세지: ${message}`);
        });
    });

    //오류
    socket.on("error", (err) => {
        console.log("에러 발생", err);
    });

    //접속 종료
    socket.on("close", () => {
        console.log("클라이언트와 연결 종료");
    });

});

client.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul></ul>
    <form id="chat">
        <input type="text" id="mess"/><br/>
        <button>채팅</button>
    </form>
    <script>
        const socket = new WebSocket("ws://localhost:8080");

        const chatF = document.querySelector("#chat");
        const ul = document.querySelector('ul');

        //서버에 연결
        socket.addEventListener("open", (event) => {
            // socket.send("헬러")
            console.log('서버에 연결되었다');
        });

        //메세지 주고 받음
        socket.addEventListener("message", (event) => {
            // console.log(event);
            // console.log(`서버로부터 박은 메세지: ${event.data}`);
            const li = document.createElement('li');
            li.textContent = event.data;
            ul.appendChild(li);
        });

        //오류 발생
        socket.addEventListener("error", (event) => {
            console.log('오류 발생', event.error);
        });

        //종료
        socket.addEventListener('close', (event) => {
            console.log("서버와 연결 종료")
        })


        ///////////////////////////////폼 이벤트//////////////////////////////
        chatF.addEventListener('submit', (event) => {
            event.preventDefault();//이벤트가 발생했을때 새로고침이나 창이동이 되지 않도록 막는것
            const msg = chatF.querySelector('#mess');
            socket.send(msg.value);
            
            // 객체로 보낼때 문자열로 바꾸어 주어야한다.
            socket.send(JSON.stringify({name: name.value, msg: msg.value}));
        })
    </script>
</body>
</html>

 

씨퀄라이즈 시작

npm i sequelize sequelize-cli mysql2 

npx sequelize init

Sequelize 모델 정의

mysql에서 정의한 테이블을 sequelize에서도 정의 필요 => mysql 테이블과 sequelize의 모델이 대응!!!!

Sequelize.define(param1, param2, param3);
//param1 모델 이름 설정
//param2 컬럼 정의
//param3 모델 옵션 정의

예를 들어 다음과 같이 쓸 수 있다.

const classModel =(sequelize) => {
    const Classes = sequelize.define(
        'Classes',//모델 이름 설정
        {
            id: {
                type: DataTypes.INTEGER,
                allowNull: false,
                primaryKey: true,
                autoIncrement: true,
            },
            name: {
                type: DataTypes.STRING(31),
                allowNull: false,
            },
            room:{
                type: DataTypes.STRING(7),
            }, 
            code:{
                type: DataTypes.STRING(7),
                allowNull: false,
            }, 
            teacher_name:{
                type: DataTypes.STRING(15),
            },// 컬럼 정의


        });
        return Classes;
};

module.exports = classModel;

컬럼을 정의 할때는 

위를 사용하여 정의할 수 있다.

 

모델에 대한 옵션 정의는 아래를 사용하여 정의할 수 있다.

 

 

일단은 HTML부터 하나하나 복습하면서 정리하는 것이라 포스코X코딩온 KDT에서 배웠던 핵심 개념만 짚고 넘어가면서 쭉 정리해보고자 한다. 추후에 책과 자료들을 읽으며 내용을 더 보충할 예정이다. 그때 사용할 자료를 미리 올려놓자면,

HTML : https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics 

 

HTML 기본 - Web 개발 학습하기 | MDN

HTML (Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 콘텐츠는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수

developer.mozilla.org

CSS : https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics

 

CSS 기초 - Web 개발 학습하기 | MDN

CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. CSS 기초 에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답을 드리겠

developer.mozilla.org

이들을 사용할 것이다. 지금은 강의에서 사용한 자료를 기반으로 정리와 지금까지 해왔던 실습을 정리해본다.


HTML이란?

Hypertext Markup Language를 축약해서 적은 것이며, 마크업 언어는 태그를 이용하여 구조화 하는 언어를 말한다.

기본적으로 웹페이지를 제작하기 위해서 HTML, CSS, JS를 필수적으로 알고 써야하며 이를 집을 짓는 과정에 빗대어 설명하자면, 아래와 같이 설명할 수 있다.

HTML : 집의 구조 

CSS : 인테리어

JS : 집의 기능

<기본요소 privew>

 

<!DOCTYPE html> 선언

 HTML5의 문서는 반드시 맨 처음에  <!DOCTYPE html>를 선언하고 시작을 해야한다. 이는 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문으로, 대소문자를 구분하지 않는다. 이를 선언하는 이유는 HTML의 버전별로 사용되는 태그와 사용되지 않는 태그가 있다. 구버전에서 신버전의 HTML 태그를 사용한다면, 문법오류가 나기 때문에 위의 선언을 통해 웹이 각 버전에 맞게 문법을 검사할 수 있도록 알려주는 것이다.

 

HTML의 구조와 기본 문법

실질적인 HTML 문서는 두 번째 행부터 시작된다고 할 수 있다. HTML의 구조는 모두를 포함하는 <html> 태그 안의 두 구조로 나눌 수 있는데, 문서의 정보와 메타데이터(제목, 저장 방식, 브라우저의 크기 등)를 정의하는 <head></head>태그와 웹 브라우저에 출력되는 모든 요소를 다루는 <body></body>로 나눌 수 있다.

 

▶ <head> 태그

HTML 문서의 메타데이터(데이터에 대한 정보를 저장하고 알려주는 데이터)와 정보를 저장

아래의 데이터를 다루고 화면에 표시되지 않는다.

• title : HTML 문서의 제목

• style : HTML 문서의 Style 정보 정의

• link : 외부 리소스와의 연결 정보를 정의(CSS 파일 연계에 사용)

• script : Javascript 를 정의

• meta : 페이지 설명, 키워드, 저자, 화면 크기 등의 정보. 주로 브라우저 또는 검색 엔 진에서 사용 

 

▶<body> 태그

HTML 문서의 실제 콘텐츠를 정의하는 데 사용되고, 다양한 태그를 통해 웹페이지의 구조를 설계할 수 있다.

 

- 요소(Element)와 중첩

HTML의 기본 구조는 시작태그와 종료태그가 있고 그 사이의 내용으로 구성된다. 이렇게 태그로 만들어진 구성을 요소(Element)라고 한다. 이들은 중첩을 통해 부모요소와 자식요소, 상위요소와 하위요소로 나눌 수 있다.

 

- 빈요소(Empty)

내용이 없고 속성만 있는 요소이다.

<br> : 줄바꿈

<hr> : 구분선

<img> : 이미지 불러오기

<input> : 타입 지정을 통해 다양한 기능으로 사용가능(input 속성 설명 페이지 따로 작성할 예정)

<link> : css 연결이나 리소스 연결

<meta> : HTML 문서에 대한 정보

 EX) <meta charset="utf-8">
 : 웹 페이지의 문자 인코딩 방식을 utf-8로 지정해라.

등이 존재한다.

 

 - 속성(Attribute)

요소의 성질과 특성을 정의하고, 추가적인 정보(예를 들어 이미지 파일의 경로, 크기 등)를 제공 한다.

 

 

HTML 태그의 종류

기본적으로 사용하는 태그를 알아보자

태그 이름 기능 및 특징
제목 태그, <h1~6></h1~6> - heading의 약자
- 자동 줄바꿈
- 하나의 HTML 문서에는 하나의 h1 태그를 권장
- 웹 엔진이 제일 먼저 검색함
본문 태그, <p></p> - paragraph의 약자
줄바꿈 태그, <br> / 수평 줄, <hr> - 줄을 바꿔줌
- 수평줄을 만들어준다.
목록 태그, <ul></ul> or <ol></ol> - ul : 순서가 없는 목록
앞에 표시되는 ● 없애는 법 > list-style: none;

- ol : 순서가 있는 목록
<ol type= '지정 숫자로 순서 표시'> 
1: 숫자
a/ A : 영어 소문자/ 대문자
i/ I : 로마숫자 소문자/ 대문자
<ol start ="시작할 숫자 지정">
<ol reveresd> 역순으로 표시
리스트, <li> <ul>과<ol>의 각 항목을 나열할 때, 사용한다.

내부에서 중첩도 가능하다.

이미지 태그,
<img src = "이미지 경로" alt="사진 출력 안될시 텍스트 표시">
거의 동일하게 오디오 파일을 첨부하는 audio 태그도 있음.
<audio src = "이미지 경로" alt = "위와 동일">
- 이미지 주소를 가져와 웹사이트에서 불러오거나 파일에 넣은 후 이미지를 표시한다.
- inline 태그이다.
하이퍼링크, <a href='연결할 링크의 경로'> 내용 </a> - 웹 페이지를 연결하거나 외부 사이트에 연결을 해준다.
- 폴더 내에서 웹페이지를 이동할 때에도 사용할 수 있다.

href (이동하고자 하는 파일의 경로를 받는다.)

target(새창이나 새탭에서 연결을할 때 사용한다.)

title (커서를 올렸을때 나오는 설명을 적을 수 있다.)
id (같은 페이지 안에서 이동할 때 사용 각 div의 id를 이용)
<=> href = "#아이디이름"
입력값 받기!, <input> - 속성을 통해 다양한 방식으로 입력값을 받을 수 있다.
type 종류 [ • button(버튼 생성)/ • text(텍스트 값 입력)/
• password(입력값 안보이게 변경)/ • checkbox(여러개 체크 가능 name으로 묶을 수 있다.)/ • radio(하나만 선택 가능)/ • date/ • color/ • range/ • file]
\선택 메뉴 만들기, <select> <select> : select 폼 생성

<option> : select 폼의 옵션 값 생성 
- value : 실제적으로 전달 되는 값
- selected : 최초에 선택 된 값으로 설정

<optgroup>: option 을 그룹화
label : optgroup 이름 설정
disabled : 옵션은 보이지만 선택을 못하도록 설정



table 태그


table 속성
• border : 테두리 두께
• cellspacing : 테두리 간격 사이의 너비
• cellpadding : 셀 내부의 간격
• align : 테이블 정렬 속성
• width 와 height : 테이블의 너비와 높이
• bgcolor 와 bordercolor : 테이블 배경색과, 테두리 색

공간은 점유하는 colspan(행)과 rowspan(열)

테이블의 각 영역(header, body, footer)을 명시하는
thead / tbody / tfoot 요소 
웹에 직접 표시되는 것은 아니지만 영역을 나누어 구분해준다.

    <table border="1px">
        <thead>
            <tr>
                <th>분식 메뉴</th>
                <th>금액</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>떡볶이</td>
                <td>4500</td>
            </tr>
            <tr>
                <td>순대</td>
                <td>4500</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>총 합계</td>
                <td>9000</td>
            </tr>
        </tfoot>
    </table>




form 태그 form 전송을 다룰 때 더 자세히 설명 
<추후 링크 추가>


▶ html 실습

1. 설문 조사 폼 만들기

 

 

2. colspan과 rowspan을 이용하여 아래와 같은 표 만들기

 

3. 아래 표 만들기

 

+ Recent posts