웹드루아 - 웹 개발자 드루아

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

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

리액트를 쓰는 이유 

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이 자동으로 랜더링된다.

요즘 감기에 걸려서 몸상태가 좋지가 않아 처음으로 지각을 했다..ㅠㅠ 앞으론 몸관리 잘해야겠다..

일단 오늘 초반에는 테이블 만드는 법을 가르쳐 주신것 같다 일전에 SQL은 배운 경험이 있어 바로 따라가기가 수월했다. 지금까지 한 부분을 정말 간단히 짚고 넘어가고자 한다. 테이블을 만드는 과정이기 때문에 어렵지 않다.

DDL

[명령어 정리]

기능	명령어		사용 예시
시작하기	1. mysql -u 'ID' -p 'DB이름' 2. mysql command line client 접속		1. mysql>mysql -u root -p (DB 최상위단으로 접속시) 후에 비밀번호 입력 후 사용
DB 검색	show databases;		mysql> show databases;
DB 만들기	create database 'DB이름';		mysql> create database Test;
DB 사용	use 'DB이름'		mysql> use Test;
Table 검색	1. 테이블 목록 : show tables; 2. 테이블 내용 조회 : desc 테이블 이름		mysql> show tables;	mysql> desc member;
Table 만들기 + 값 추가	create table '테이블 이름'; 기본값 추가 : default로 넣을 수 있음		mysql> create table member(     -> id varchar(20) NOT NULL PRIMARY KEY,     -> name varchar(5) NOT NULL,     -> age int,     -> gender varchar(20) NOT NULL,     -> email varchar(50),     -> promotion varchar(2) default "dj" );
Table 불러오기	select*from 'table이름';(DML이다)		mysql> select*from member;
Table 수정	alter table 테이블 명 1. 삭제 drop column 컬럼명 2. 추가 add 컬럼명 3. 속성 변경 modify 컬럼명

DML

- 내용 조회

select * from user(테이블 이름)

- 특정 어트리뷰트만 가지고 오기

select name,age from user;

- where로 조건 걸기

- 오름차순 내림차순 정렬

// 나이 오름차순

// 나이 내림차순 

- between과 in 사용

select * from user

where age

between 25 and 30;

//25살과 30살 사이인 사람들 가지고오기

select * from user

where age in (25, 30);

//25살과 30살인 사람들만 가져오기

등 나중에 정리 페이지에서 더 잘 정리해서 올릴 예정이다. 

데이터 베이스

데이터를 저장하는 구조/자료의 모음

데이터의 집합소

중복이 없어야 한다.

데이터 베이스 이전에는 파일시스템(ex 엑셀)을 사용했다.

이러한 파일시스템을 사용하다가 데이터베이스로 변경된 이유는 무엇일까?

> 데이터의 중복 문제

> 데이터의 불일치(개개인의 업데이트가 다름)

DBMS

DataBase Managemant System

파일 시스템이 가진 문제를 해결하기 위해 만들어진 것

데이터베이스에 접근하고 이를 관리하기 위해 존재한다

관계형 데이터베이스 > RDBMS

우리는 My SQL을 사용한다.

오라클이 My SQL을 오라클이 인수하면서 유료화가 됐고,

유료화에 불만을 가진 사람들이 나와서 무료로 만든것이 mariaDB를 만들었다.

용어

열(Column, Attribute, 속성)

행(Record, Tuple, 튜플)

테이블(Table, Relation)

key : 데이터베이스에서 튜플을 착거나 순서대로 정렬할 때 구분하고 정렬의 기준이 되는 속성

기본키(Primary Key) : 특정 튜플을 유일하게 구별할 수 있는 속성/ Null값과 중복이 불가능하다.

외래키(Foreign Key) : 기본키를 참조하는 속성

MySQL

• 가장 널리 사용되고 있는 관계형 데이터베이스 관리 시스템 ( RDBMS )
• 오픈 소스
• 윈도우, Mac, 리눅스 등 다양한 운영체제에서 사용 가능

설치 과정

mysql을 구글에 검색한 후 다운로드로 가서 아래에 있는 위를 클리한다.

여기서 MySQL Community Server를 클리하여 들어간다.

최신 버전 아래의 버전을 다운받는다 안전하게

go to 다운로드 페이지로 넘어가면 두가지가 있다

위에 있는 것은 웹이랑 연결해서 설치 파일을 다운로드 하는 것이고, 아래는 설치파일까지 함께 다운로드 받아 인터넷 연결이 없는 상황에서도 설치가 가능하다.

노땡스를 누르고 설치를 진행한다. 그 후 설치파일 실행하면 된다.