join을 배워보자

 

데이터베이스의 조인은 두 개 이상의 테이블에서 데이터를 결합하여 새로운 결과를 생성

테이블 간의 관계를 통해 의미 있는 정보를 얻어내야 할 때 조인을 사용하 여 관련된 데이터를 결합하고 원하는 정보를 추출

 

조인의 종류

• INNER JOIN: 공통된 값만을 가진 행 반환.

• LEFT JOIN: 왼쪽 테이블 모든 행 포함하며, 오른쪽 테이블과 일치하는 경우 함께 반환.

• RIGHT JOIN: 오른쪽 테이블 모든 행 포함하며, 왼쪽 테이블과 일치하는 경우 함 께 반환.

• FULL JOIN: 양쪽 테이블 모든 행을 포함하며, 일치하는 경우 함께 반환.

• CROSS JOIN: 두 테이블 모든 가능한 조합 반환.

 

조인 명령어

selet 조회할 필드 from 테이블명 inner join 조인할 테이블명 on 일치해야할 필드

ex)

 orders 테이블의 고객아이디와 customers 테이블의 고객아이디가 같은 필드를 order테이블과 customers테이블에서 찾아서 orders 테이블의 아이디와 customers 테이블의 고객 이름을 출력해서 보여준다

 

Relationship (관계 설정)

 ▶ 1:1

 ▶ 1:다

 ▶다:다

관계를 형성해야 무결성 오류가 나지 않는다.

1:1

각 테이블은 서로 한가지 정보를 공유하며 관계되어 있다

ex) 사용자와 프로필, 주문과 송장

MYSQL

id를 공유한다

씨퀄라이즈

- hasOne: 한 모델이 다른 모델을 가리키는 1:1 관계를 설정하는 데 사용

- belongsTo: 다른 모델이 한 모델을 가리키는 1:1(1:다) 관계를 설정하는 데 사용

 

 

1:다 관계

한 쪽 레코드(행)가 다른 쪽 레코드(행)의 여러개와 관련되어 있다.

ex) 부서와 직원, 학교와 학생

MYSQL

씨퀄라이저

다수를 hasMany로 먼저 선언한다.

hasMany: 한 개의 모델(테이블)이 다른 모델과 1:n 관계를 가질 때 사용

belongsTo: 다른 모델이 한 모델을 가리키는 1:1(1:다) 관계를 설정하는 데 사용

 

다:다

실무에서 많이 사용하지는 않는다. 

하나의 레코드가 다른 하나의 레코드와 관련되어 있는 관계를 의미합니다. 이 관계에서 각 레코드는 서로 한 가지 정보만을 공유합니다.

ex) 학생과 과목, 주문과 제품, 배우와 영화

MYSQL

씨퀄라이저

belongsToMany: 다:다 관계를 설정할 때 사용되는 메서드

 

sequelize로 데이터베이스 만드는 법

1. 폴더 생성

2. npm init -y

3. npm i express mysql2 sequelize sequelize-cli(모듈 다운로드)

4. npx sequelize init(씨퀄라이즈 실행)

5. config 제이슨 파일에서 데이터베이스 연결하기

development에서 유저이름과 패스워드 데이터베이스 지정하여 입력하기

(유저 등록법)

위의 명령어를 입력하여 유저를 등록할 수 있다.

유저이름 : user

비밀번호: 1234

select * from mysql.user; // 등록 확인을 할 수 있다.

유저의 plugin에 이렇게 표기되어 있어야한다.

6. models의 index.js에서 fs 지우고,

if 어쩌고의 else문을 const로 선언해준다.

7. 데이터 베이스 만들기

models 폴더에서 만들어줘야한다.

학생

const studentModel = (sequelize) => {
    const Stdent = sequelize.define(
        'student',
        {
            id:{
                type: DataTypes.INTEGER,
                allowNull: false,
                primaryKey: true,
                autoIncreament: true,
            },
            name: {
                type: DataTypes.STRING(15),
                allowNull: false,
            },
            major:{
                type: DataTypes.STRING(31),
                allowNull: false,
            },
            enroll: {
                type: DataTypes.INTEGER,
                allowNull: false,
            }
        });
        return Stdent;
}

module.exports = studentModel;

수업

const classModel =(sequelize) => {
    const Classes = sequelize.define(
        'classes',
        {
            id: {
                type: DataTypes.INTEGER,
                allowNull: false,
                primaryKey: true,
                autoIncreament: true,
            },
            name: {
                type: DataTypes.STRING(31),
                allowNull: false,
            },
            room:{
                type: DataTypes.STRING(7),
            },
            code:{
                type: DataTypes.STRING(7),
                allowNull: false,
            },
            reacher_name:{
                type: DataTypes.STRING(15),
            },


        });
        return Classes;
};

module.exports = classModel;

을 통해 데이터베이스를 만들 수 있다.

8. 서버를 열어줘야지 적용할 수있다.

메인 폴더의 index.js

const express = require('express');
const app = express();
const PORT = 8080;
const db = require('./models');

app.set('view engine', 'ejs');
app.use('/views', express.static('./views'));
app.use('/static', express.static('./static'));
app.use(express.json());
app.use(express.urlencoded({extended : true}));


const router = require('./routes/student');
app.use('/', router);

db.sequelize.sync({force: false}).then(() => {
    app.listen(PORT, () => {
        console.log(`http://localhost:${PORT}`);
    });
});

routes 폴더의 student.js

const express = require('express');
const router = express.Router();
const controller = require('../controller/Cstudent');

router.get('/', controller.index);

module.exports = router;

controller 폴더의 Cstudent.js

exports.index = (req, res) => {
    res.render('index');
}

models 폴더의 index.js

'use strict';

const fs = require('fs');
const path = require('path');
const Sequelize = require('sequelize');
const process = require('process');
const basename = path.basename(__filename);
const env = process.env.NODE_ENV || 'development';
const config = require(__dirname + '/../config/config.json')[env];
const db = {};
const  sequelize = new Sequelize(config.database, config.username, config.password, config);


//모델

db.Student = require('./Students')(sequelize)
db.Classes = require('./Classes')(sequelize)

//관계형성
db.Student.hasMany(db.Classes, {foreignKey: 'student_id'});
db.Classes.belongsTo(db.Student, {foreignKey: 'student_id'});

db.sequelize = sequelize;
db.Sequelize = Sequelize;

module.exports = db;

이렇게 만든 후에 node index.js를 실행시켜주면 테이블이 만들어지는 것을 확인할 수 있다.

 

이는 1:다 관계이다.

한명의 학생이 여러개의 수업을 들을 수 있다.

 

※ 메인 폴더의 index.js

db.sequelize.sync({force: true}).then(() => {//true 값을 넣어야 다시 index.js를 실행할 때 삭제하고 다시만들어준다.
    app.listen(PORT, () => {
        console.log(`http://localhost:${PORT}`);
    });
});

왜래키 지정을 잘못해서 다시 실행시키려고 할때 위와 같이 true값을 넣어줘야 삭제하고 다시 만들어준다.

 

1:다 관계로 테이블을 만들었으니 join을 해보자

as를 사용해서 더 간편하게 사용하는 것도 가능하다

그리고 as를 통해 테이블 헤드의 이름도 바꿀 수 있다

'포스코x코딩온 KDT 8기 풀스택 과정 회고록' 카테고리의 다른 글

[포스코 코딩온 KDT 8기] 웹 풀스택 과정 36일(08.12)차 회고 | 서버구축(aws, npc(네이버 클라우드 플랫폼), 아파치, 파일질라, putty)  (0) 2023.08.12
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 35일(08.11)차 회고 |  (0) 2023.08.12
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 2일(07.04)차 회고 | HTML  (0) 2023.08.10
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 33일(08.09)차 회고 | mvc 만들기...  (0) 2023.08.09
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 29일(08.04)차 회고 | SQL  (0) 2023.08.04

오늘은 html에 대한 전반적인 내용과 자주 사용되는 태그들을 배웠다.

 

그 전에 간단히 HTML, CSS, JS를 비교해봤는데 간단히 말해서

 

HTML : 집의 구조

 

CSS : 인테리어

 

JS : 집의 기능

 

라고 생각하면된다. 부가적으로 <!DOCTYPE html>이라는 명령어는 html5 사용을 위해 작성한다는 것도 알 수 있었다.

 

사용되는 여러 태그들을 이해하고, 총 4가지의 실습을 하며 수업을 진행했다. 중간중간에 쉬는 시간도 있어서 그때 카페메뉴 웹페이지를 제작한 실습 1에서 각 메뉴의 가격들을 더해주는 기능을 만들어보기도 했다. 교육을 들으며 정리했던 메모를 바탕으로 글을 작성하기 때문에 살짝 어색한 감이 있을수도 있다.

 

 

 

일단 html 구조를 잘 잡아주는 툴을 알려주셨다. prettier라는 툴이고 설치 방법은 다음과 같다

 

세팅의 editor.fomat에서 세이브 포맷 체크 후 디폴트.포맷을 검색하여 프리티어 선택하면 된다.

 

저장할 때, 기본 구조를 유지 시켜주는 장점이 있으나 원하는 공백을 만들 수 없는 단점이 있어서 나는 사용하지 않기로 결정했다.

 

 

 

그리고 간단한 단축키 팁도 알려주셨다.

 

커서 위치한 상태에서 알트키를 누르고 화살표를 누르면 해당 줄이 이동한다.

 

!를 입력한 후에 탭을 누르면 기본 html 구조가 생성된다.

 

 

 

다음은 태그들의 설명이다.

 

본문태그 <p></p>

 

줄 바꿈 태그 <br> //빈요소 break

 

목록 <ul></ul> <ol></ol>

 

<ul type="circle">로 목록 앞의 모양을 지정할 수 있다

 

<ol type="순서 모양 지정" start="시작 숫자 지정" reversed(역순)>

 

 

 

수평 줄 <hr>

 

 

 

Golive 설치

 

 

 

문자열 볼드채 <b></b>

 

 

 

과제 코드

 

위 과제에서 고른 것의 값을 가져와 더해주는 사이트를 만들어 보고자 한다.

 

 

 

 

 

이미지 태그 <img>

 

src 사용

 

alt=“”를 지정하면 이미지가 로드되지 않을 때, 어떤 이미지가 그런지 확인할 수 있다.

 

- 인터넷에서 가져오기

 

파일 내에서 가져오기

 

 

 

하이퍼링크 <a>

 

naver

 

target에 _blank를 지정해줌으로써 네이버를 클릭했을 때, 새로운 탭에서 접속한다.

 

_self는 현재 탭이다

 

 

 

form 태그와 input 태그

 

input

 

여러 타입이 있다.

 

 

 

type=’radio‘ 한가지만 설정 가능함

 

 

 

<select> 태그

 

안에 옵션을 넣을 수 있다.

 

 

 

<table> 태그

 

rowspan과 colspan을 잘 이용해야한다.

 

 

'포스코x코딩온 KDT 8기 풀스택 과정 회고록' 카테고리의 다른 글

[포스코 코딩온 KDT 8기] 웹 풀스택 과정 35일(08.11)차 회고 |  (0) 2023.08.12
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 34일(08.10)차 회고 | 데이터베이스 응용 + sequelize  (0) 2023.08.10
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 33일(08.09)차 회고 | mvc 만들기...  (0) 2023.08.09
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 29일(08.04)차 회고 | SQL  (0) 2023.08.04
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 28일(08.03)차 회고 | 데이터베이스 설정  (0) 2023.08.04

이번주 월요일부터 쭉 mvc 만드는 것에 매달려 있었다. 토요일에 진행한 실습은 월요일에 크루 형의 도움을 받아 해결했고, 새로운 회원가입 mvc 만드는데 한세월이 걸렸다. 실력이 정말정말 부족한 것 같다.. 그래서 오늘 진행한 씨퀄라이저 진도도 따라가지 못했다ㅜㅠ 그리고 정말 블로깅도 정말 많이 밀린 상태이다 이대로 가다간 이도저도 안될 것을 알기에 차근차근 다시 따라가보고자 한다. 처음에 배웠던 html부터 지금까지 한 실습들을 한번 쭉 복습하고, 개인 공부 카테고리에 정리해서 차근차근 올릴 예정이다. 

이거 외에도 아직 못적은 것들이 너무 많다.. 진짜 차근차근 잘 나누어서 다 적을 것이다. 그리고 산업체 리스트도 뽑아 놓고, 잠을 좀 줄여서라도 해야겠다. 내가 정말 취업이 가능할만큼 실력을 끌어올릴 수 있을지에 대한 걱정도 들지만 하나하나 꼼꼼히 하다보면 가능할 것이라 믿는다. 다시 열심히 해보자 

 

'포스코x코딩온 KDT 8기 풀스택 과정 회고록' 카테고리의 다른 글

[포스코 코딩온 KDT 8기] 웹 풀스택 과정 34일(08.10)차 회고 | 데이터베이스 응용 + sequelize  (0) 2023.08.10
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 2일(07.04)차 회고 | HTML  (0) 2023.08.10
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 29일(08.04)차 회고 | SQL  (0) 2023.08.04
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 28일(08.03)차 회고 | 데이터베이스 설정  (0) 2023.08.04
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 25일(07.31)차 회고 | 자바스크립트 고급 + Node.js  (0) 2023.07.31

리액트를 쓰는 이유 

1. 싱글 페이지 어플리케이션을 만들려고 만든다 : 앱처럼 부드럽게 동작하는 웹페이지

2. 제일 오래됐고 유저가 많다

3. html 재사용이 편리하다

4. 리액트를 통해 앱개발도 가능하다

5. 요즘 대부분의 회사는 리액트를 사용한다.

 

개발 환경 셋팅

1. Node.js 설치

2. vscode 설치

 

리액트 프로젝트 실행하기

리액트를 사용할 폴더를 하나 만들어주고,

시프트 우클릭을 한 후 여기에 powershell열기를 클릭

뜬 창에 위 명령어를 입력한다 이후에 vscode에서 오픈폴더를 눌러 폴더를 연후에 app.js(메인페이지)에서 코드를 짜면 된다. 이는 create-reacte-app 라이브러리를 이용하여 필요한 파일들을 한번에 설치해주는 것인데 이는 Node.js를 설치할때 같이 설치된다.

 

App.js의 코드는 index.js가 index.html로 연결시켜주기 때문에 바로바로 적용이 된다.

 

npm start를 터미널에 입력하여 미리보기를 볼 수 있다.

 

js 내에서도 div, p 태그등을 사용할 수 있다.

 

이는 리액트에서 사용하는 언어가 JSX라는 언어를 사용하기 때문에 사용 가능하다.

CSS를 연결할때 VUSGKRP import를 사용하여 불러올 수 있다.

 

- 레이아웃을 만들 때 쓰는 JSX 문법 3개

 

1. 클래스를 넣을땐 class를 사용하지 않고, className을 사용한다.

왜냐하면 js에서 클래스를 만들 때 사용하는 class와 겹치기 때문이다.

 

2. 데이터바인딩 : 리액트에서 변수를 html 구조 사이에 넣을때 {}를 사용하여 넣을 수 있다.

3. jsx 상에서 스타일 속성을 사용할려면 ""가 아니라 {}를 사용하고 객체형으로 값을 넣어줘야 한다.

- 기호는 사용하지 못한다.

 

- 중요한 데이터는 state에..!

자료를 잠깐 보관할때는 state를 사용할 수 있다.

import  {useState} from 'react'; 

로 불러와 사용한다. 그 후에 아래와 같이 사용한다.

a : state에 보관한 자료

b : state 변경을 도와주는 함수

 

일반 변수의 내용이 갑자기 변경되면 html에 자동으로 반영되지 않는다.

> state는 자동으로 html의 내용이 변경이 된다. 즉, html이 자동으로 랜더링된다.

 

 

 

'웹 풀스택 공부 과정 정리 > React.js' 카테고리의 다른 글

React를 이용해 블로그를 만들어보자(0) - 백엔드 setting  (0) 2024.02.04
리액트 전체적으로 훑어보기 + 이모저모 정리(feat. TypeScript)  (2) 2023.10.19
웹개발 배워보자! - 리액트(3) | Component, map, props  (0) 2023.08.20
웹개발 배워보자! - 리액트(2) | state 변경하는 법  (0) 2023.08.13

+ Recent posts

티스토리툴바