[데브코스]10,11,12일차 교육내용 정리

TIL/교육 내용 정리 2024. 4. 19. 21:38

10일차

CSS (Cascading Style Sheets)

HTML을 꾸며주는 언어, 문서를 통째로 한 번에 꾸며주는 것이 아니라, HTML 태그를 하나하나 꾸며줍니다.

HTML 에 CSS를 적용하는 방법은 다음과 같이 3가지 있습니다.

인라인(inline) : HTML 태그 안에 같이 작성합니다.
내부 스타일 시트(internal style sheet) : HTML 문서 안에 같이 작성합니다.
외부 스타일 시트(external style sheet) : HTML 문서 밖에 작성하고 연결합니다.

*HTML태그 한쌍 (<태그> 텍스트 </태그>) 또는 하나 <태그/>을 우리는 element 라고 부르기도 합니다.

인라인 방법

// 색상 넣기
<h1 style="color: darkred">Login</h1>
// 정렬
<h1 style="color: darkred; text-align: center;">Login</h1>
// font-size
PW : <input type = "password" style="font-size: 25px;">
// 버튼 크기 키우기
<input type="button" value="login" style="font-size: 25px; width: 100px; height: 30px;">

내부 스타일 시트

<head> </head>안에 넣어주는방법

각각 적용하기 위해서 각각 element에 적용해야됨.

가독성이 뛰어나고
협업할 때, 각각 다른 부분에서 작업하면 됨.

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title> LOGIN </title>  
        <style>
            h1 {
                color: darkred; 
                text-align: center;
            }

            .login_inputs{
                font-size: 25px;
            }
            #btn_login{
                font-size: 30px; 
                width: 100px; 
                height: 30px;
            }
        </style>
    </head>
    <body>
        <h1>Login</h1>
        <form>
            ID : <input class="login_inputs" type = "text" >
            <br>
            PW : <input class="login_inputs" type = "password">
            <br>
            <input id = "btn_login" type="button" value="login">
        </form>
    </body>
</html>

h1 처럼 태그를 직접 해서 적용

h1 전체에 다 적용됨

class를 만드는 법

같은 class에 모두 적용

id 만들기

#아이디이름
같은 id 에 모두 적용

외부 스타일 시트

헤드 안에 있던 스타일을 새로운 파일을 만들어서 옮겨준다.
헤드 안에 넣어준다. <link rel="stylesheet" href="login.css">

주석 달기

HTML :<!--외부스타일시트-→

CSS : /* 주석입니다. / JS : // , / /

JavaScript

JS는 특정 HTML요소를 선택하여 제어할 수 있는 스크립트 언어

*스크립트언어란 독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌 “(프로그램 내부의 구성 요소 중 하나로) 프로그램을 제어하는 스크립트 역할을 하는 언어”

글자를 바꿀 수 있습니다.
버튼을 비활성화 할 수 있습니다.
버튼의 색깔을 바꿀 수 있습니다.

HTML에 JS를 적용하는 방법

인라인 : 사용자와의 상호작용이 있을 때만 가능 ex) 버튼을 클릭 했을 때, 키보드를 눌렀을 때
내부 스크립트 : HTML 문서 안에 같이 작성
외부 스크립트 : HTML 문서 밖에 작성하고 연결

인라인 방법

해당 버튼 안에 on~ =”버튼이 눌리면 할일” 여기서는 onclick = “alert( ’클릭되었다!’ )” : 팝업 여기서 alert 는 function(함수)

<input id = "btn_login" type="button" value="login"
            onclick="alert('clicked')">

함수

함수란, 특정 기능을 수행하는 코드 덩어리

function 함수이름(){
	/*
	이 공간에
	함수가 할 일을
	코드로 작성해줍니다.
	*/
}

<body>
<input id = "btn_login" type="button" value="login"
            onclick="myFunction()">
<script>
            /* 나만의 함수 만들고, 버튼 클릭하면 호출하기*/
            function myFunction(){
                alert('1');
                alert('2');
                alert('3');
            }
        </script>
</body>

❓만약에 onclick =”myFunction(여기에)” 여기에 ‘clciked’ 를 넣으면? 함수랑 겹치는 데 어떻게 되려나

❓왜 스크립트는 바디 맨 끝에 쓰나?

내부 스크립트

특정 태그(element)를 찾는 방법

JS에서는 특정 태그를 찾을 때, 다음과 같은 기능을 이용합니다.

id로 찾기 : document.getElementById(’아이디’)

 /* ID 란에 입력된 값을 팝업창에 띄우기*/
            function popID(){
                alert(document.getElementById('txt_id').value);
            }

class 이름으로 찾기 document.getElementByClassName(’클래스이름’)
tag 이름으로 찾기 document.getElementByTagName(’태그 이름’)

조건문

❓ 만약 아이디 칸이 비어 있다면

→ 아이디를 입력해달라고 팝업창을 띄운다.

❓ 아니라면?

→ 입력된 아이디를 팝업창에 띄운다.

if(아이디 칸이 비어 있다면){
아이디를 이볅해달라고 팝업창에 띄운다.
}
else{
입력된 아이디를 팝업창에 띄운다.
}

if문 : 조건에 따라 다른 결과를 선택할 수 있게 해줍니다.

우리는 이걸 조건문이라고 부릅니다.

 function popID(){
									 /*아이디칸이 비어있다*/
                if(document.getElementById('txt_id').value == ""){
                    alert('아이디를 입력해주세요.');
                }
                else{
                    alert(document.getElementById('txt_id').value);
                }

값이 없다는 걸 2가지

document.getElementById('txt_id').value == "”
**!**document.getElementById('txt_id').value

변수

let 상자이름 = 상자에 담을 데이터;
(숫자, 문자, element)

let userId = document.getElementById('txt_id').value;

변수를 선언하는 방법이 여러가지이다.

let - 상자안에 들어가면 값을 계쏙 변경할 수 있음.
var
const - 처음 넣는 값을 그대로 들고 고정

 /* var / let / const */
           function compareVariable(){
            let num1 = 10;
            const num2 = 30;
            num2 = 40
            alert('num1 : ' + num1) // 먼저 들어간 값을 빼고 이 값을 넣는다.
 // 어랏 고정인데 num2 = 40으로 바뀌네 해서 안돌아가는거

원래 var만 존재했음. 나중에 let & const 생김.

let / const

외부 스크립트

.js 파일 따로 만들어주고

11일차

백엔드의 구조

클라이언트
웹 서버 역할 : 정적 페이지에 대응합니다. 동적 페이지에 대한 처리는 직접 처리하지 않고, 웹 어플리케이션 서버에게 전달
웹 어플리케이션 서버 동적 페이지를 처리합니다. 필요한 데이터 연산을 위해 데이터 베이스와 연결되어 있으며 데이터 조회, 수정, 삭제에 대한 처리를 요
데이터베이스

A : 요청

B : 응답

정적 페이지란, 화면의 내용/데이터 등의 변동이 없는 페이지
동적 페이지란, 데이터 처리/연산을 통해 화면의 내용, 데이터가 변하는 지

Node.js의 이해

Node.js는 JS를 스크립트 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼입니다. 즉, 우리는 Node.js를 이용해서 JS로 백엔드를 구현할 수 있습니다.

서버완성 구동

// http 클라이언트와 웹 서버가 사용하는 프로토콜. 그의 약속을 http라고 함.
// http가 제공하는 걸 가져오려고 require
let http = require('http');

// 요청,응답 -> node.js 가 그렇게 만들어줌.
function onRequest(request,response){
    // 웹서버-> 클라이언트한테 응답을 할 때, 헤드를 적는다. 200(정상), 타입은:html이다.
    response.writeHead(200,{'Content-Type':'text/html'});
    // write = write boby에 담을 내용은 hello~ 이다.
    response.write('Hello Node.js');
    // 응답 끗
    response.end();
}

// http 모듈을 이용해서 서버를 만들었는데(안에 있는 함수로 통신을 할거고).주파수는 8888

http.createServer(onRequest).listen(8888);
// <http://localhost:8888/>

포트 번호(port number) 클라이언트와 서버가 대화를 하고 싶다면, 같은 주파수를 맞춰야한다.
우리는 어떻게 웹을 사용하고 있을까 ❓ 인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP(Hyper Text Transfer Protocol)를 사용하여 데이터를 주고 받습니다.
require() : 모듈을 불러오는 수

node 터미널

node -v // 노드 버전확인

node serve.js // node ~.js 돌아가게 함.

HTTP 프로토콜 템플릿

Head와 Body로 이루어져 있음

Body : 웹 페이지 화면에 뿌려질 내용을 담는다.
Head에는

통신 상태가 어떤지 알려줘요. ex) 200 : 정상이다. 400 : 클라이언트가 원하는 걸 못 찾겠다. 500 : 서버가 이상하다. 우리는 이 숫자들을 HTTP(status)code라고 부릅니다.
응답이 어떤 형태인지 적어줘요. ex) html이다.

기존에 만든 서버를 모듈처럼 이용하기

→ 모듈처럼 이용하는 이유? → 서버에 대한 유연성이 떨어진다.

let server = require('./serve.js');
let router = require('./router.js');

server.start(router.route);

원래라면 require‘http’ 를 사용했겠죠
하지만 여기선 기존에 만든 서버를 모듈처럼 이용합니다.
우리가 만든 server도 모듈처럼 다른 js파일에서 사용할 수 있다.
위의 경우 서버 모듈 가져온 이유만으로 켜졌음.
index.js 를 통해 서버가 돌아가고 있다.

// http 클라이언트와 웹 서버가 사용하는 프로토콜. 그의 약속을 http라고 함.
// http가 제공하는 걸 가져오려고 require
let http = require('http');
//const path = require('path');
let url = require('url');

function start(route){
    // 요청,응답 -> node.js 가 그렇게 만들어줌.
    function onRequest(request,response){   
        let pathname = url.parse(request.url).pathname // url를 읽어서(url를 요청).경로가 어떻게 되는지 확인
        route(pathname);
        /* 밑에 있는 얘는 라우터.js 로 이동해버리기 서버는 할 일이 많다
        console.log('pathname : ' + pathname);
*/
        // 웹서버-> 클라이언트한테 응답을 할 때, 헤드를 적는다. 200(정상), 타입은:html이다.
        response.writeHead(200,{'Content-Type':'text/html'});
        // write = write boby에 담을 내용은 hello~ 이다.
        response.write('hello node.js');
        // 응답 끗
        response.end();
    }
    // http 모듈을 이용해서 서버를 만들었는데(안에 있는 함수로 통신을 할거고).주파수는 8888
    http.createServer(onRequest).listen(8888);
    // <http://localhost:8888/>   
}

exports.start = start;

함수는 자기자신 즉 이 파일 안에서만 사용가능
하지만, exports.start = start; 를 넣어줌으로써 가능함.

url 읽어내기 (Uniform Resourse Locator)

인터넷 상에서 웹 페이지가 어디있는 지 ‘위치’를 알려주는 주소

쉽게 말해서, 웹페이지 주소

parse : 문자열을 캐치를 해낸다.

라우터 : 어디로 갈지 경로를 정해

function route(pathname){
    console.log('pathname : ' + pathname);
}

exports.route = route;

Server와 Router의 역할

Server : 클라이언트의 Request를 받습니다. 여기서는 response 까지
Router : Reqeust의 URL에 따라 루트(route)를 정해줍니다. (=어디로 갈지 길만 정해줘요!)

❓각 루트(route)에서 할 일은 그럼 누가 정해주나요

12일차

데이터베이스(DB)

데이터베이스란?

데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체를 데이터베이스 라고 한다. 데이터를 구조화하여 관리함으로써 데이터 중복을 막고, 효율적이고 빠른 데이터 연산을 가능하게 합니다.

즉, DB는 구조화된 데이터의 집합

DBMS

우리는 데이터베이스를 운영하고 관리하기 위한 DBMS(DataBase Management System)를 통해 데이터베이스를 사용합니다.

즉, DBMS를 사용하여 DB를 생성하고 관리

DBMS의 종류

오라클
MySQL
MariaDB

SQL( Structured Query Language)

SQL은 DB에 연산을 요청하기 위해 사용되는 언어로 데이터를 생성, 조회, 수정, 삭제 등과 같은 기능을 수행할 수 있다.
대표적인 SQL은 다음과 같습니다. 데이터 삽입 : INSERT 데이터 조회 : SELECT 데이터 수정 : UPDATE 데이터 삭제 : DELETE

Doker

응용 프로그램들을 격리 하는 기술로 컨테이너를 실행하고 관리하는 오픈소스이다. 도커 컨테이너는 일종의 소프트웨어를 소프트웨어의 실행에 필요한 모든 것을 포함하는 완전한 파일 시스템안에 감싼다.

Docker로 mariaDB 설치하고 실행기

docker pull mariadb

docker run --name mariadb -d -p 3306:3306 --restart=always -e MYSQL_ROOT_PASSWORD=root mariadb

// mariacb가 있는 컨테이너 접속 // 여기부터가 실
docker exec -it mariadb /bin/bash

//mariadb 실행
mariadb -uroot -p

데이터 저장소 만들기 (CREATE)

데이터를 모으기 위해 데이터 저장소를 들어야 한다.

창고 안에 방(저장소)가 여러 개..

하나하나 방을 DATABASE라고 부름. (none) 아직 아무 방에 들어가깆 않음.

방(DATABASE) 만들기

방 확인 : SHOW DATABASES;
방 만들기 : CREATE DATABASE Tennis;
방 들어가기 : USE Tennis;

방 안에서도 구역이 나뉜다.

구역을 어떤 형태로 저장하고 있을까 ❓

테이블(표) 방식

id Name pwd

kda123	kim dong	aaaaa
khb123	kim hyun	bbbb

CREATE TABLE member
(
id INT,
name VARCHAR(30),
pwd VARCHAR(30)
);

member : 테이블 이름
INT 정수로 저장
VARCHAR 문자열로 저장
(30) : 알파벳으로 30개를 저장할 수 있다.

방 안의 각 구역에 데이터 넣기

우선,

테이블 데이터 조회 : SELECT 컬럼명 FROM 테이블명; 컬럼명 복수개도 가능

// example
SELECET id, name, pwd FROM member;

데이블 데이터 삽입 : INSERT 컬럼명1, 컬럼명2, … FROM 테이블명; VALUES(컬럼1 데이터, 컬럼2 데이터,..);

ex) 조회

SELECT id FROM member;
// id(컬럼명) member(테이블명)
// 즉, member 안에 있는 id 데이터 조회

만약

INSERT INTO member
VALUES ('ssongCoding','kim songa','aaaaa');
// 위와 같이 하게 된다면 1줄이 행으로 들어감

<aside> 💡 TIP) SELECT * FROM member; // *은 모두 다

</aside>

특정 데이터만 출력하고 싶을 때

SELECT 컬럼명 FROM 데이블명
WHERE 조건;

SELECT * FROM member
WHERE id = 'tennisking';

데이터 수정하기

테이블 데이터 수정 : UPDATE 테이블명 SET 컬럼명 = 수정할 값 WHERE조건;

UPDATE member SET pwd ='zzzzz' WHERE id ='tennisking';

만약에 조건을 안 달았다면…

UPDATE member SET pwd ='sssss';

member의 pwd가 바뀌는 것을 볼 수 있다.

데이터 삭제하기

DELETE FROM 테이블명 WHERE 조건;
DELETE FROM member WHERE name = 'park songa';
행이 삭제됨.

‼️여기서, WHERE절을 제외하면 테이블 데이터 전체 삭제가 가능.

 DELETE FROM member;

node.js 랑 mariadb 연동

npm install my sql --save

database(새폴더 생성) → connect(새폴더생성)→mariadb.js(새파일)

저작자표시

'TIL > 교육 내용 정리' 카테고리의 다른 글

[데브코스] 16~18(예비군) 19일차 TIL (0)	2024.04.26
[데브코스] 13,14(주말) 15일차 교육내용 정리 (0)	2024.04.22
[데브코스] 9일차 교육 내용정리 (0)	2024.04.16
[데브코스] 6,7일차(주말) 8일차 교육 내용정리 (0)	2024.04.15
[데브코스] 5일차 교육 내용정리 (1)	2024.04.12

ABOUT ME

10일차

CSS (Cascading Style Sheets)

인라인 방법

내부 스타일 시트

외부 스타일 시트

주석 달기

JavaScript

HTML에 JS를 적용하는 방법

인라인 방법

함수

내부 스크립트

조건문

변수

외부 스크립트

11일차

백엔드의 구조

Node.js의 이해

서버완성 구동

node 터미널

HTTP 프로토콜 템플릿

기존에 만든 서버를 모듈처럼 이용하기

url 읽어내기 (Uniform Resourse Locator)

라우터 : 어디로 갈지 경로를 정해

Server와 Router의 역할

12일차

데이터베이스(DB)

데이터베이스란?

DBMS

DBMS의 종류

SQL( Structured Query Language)

Doker

Docker로 mariaDB 설치하고 실행기

데이터 저장소 만들기 (CREATE)

방(DATABASE) 만들기

방 안에서도 구역이 나뉜다.

방 안의 각 구역에 데이터 넣기

특정 데이터만 출력하고 싶을 때

데이터 수정하기

데이터 삭제하기

node.js 랑 mariadb 연동

'TIL > 교육 내용 정리' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바