멤버십_2주차_학습정리

esm

단일 책임 원칙

fsd 패턴

Webpack + babel 사용

Babel CLI 설치

$ npm install --save-dev @babel/core @babel/cli

babelrc 설정 파일 작성

# env preset 설치 
$ npm install --save-dev @babel/preset-env

의존성 설치 후 프로젝트 루트에 .babelrc 파일 생성 후 작성

{ "presets": ["@babel/preset-env"] }

위 npm script는 src/js 폴더(타깃 폴더)에 있는 모든 ES6+ 파일들을 트랜스파일링한 후, 그 결과물을 dist/js 폴더에 저장한다. 사용한 옵션의 의미는 아래와 같다.

-w

타깃 폴더에 있는 모든 파일들의 변경을 감지하여 자동으로 트랜스파일한다. (—watch 옵션의 축약형)

-d

트랜스파일링된 결과물이 저장될 폴더를 지정한다. (—out-dir 옵션의 축약형)

Webpack 설치

# Webpack V4는 webpack-cli를 요구한다
$ npm install --save-dev webpack webpack-cli

babel-loader 설치

웹팩이 모듈을 번들링할 때 babel을 사용하여 es6+ 코드를 es5 코드로 트랜스파일링할 수 있도록 babel-loader 설치

오래된 브라우저에서도 ES6+에서 새롭게 추가된 객체나 메소드를 사용하기 위해서는 @babel/polyfill을 설치해야 한다.

$ npm install @babel/polyfill

리눅스 로케일이란

전 세계 나라들은 각각 다른 언어, 날짜, 시간, 화폐 등을 가지고 있기 때문에 내가 실행하는 환경이 우리나라로 설정되어 있는지 환경을 확인할 필요가 있다. 그래서 국제화를 통해 사용자가 어떻게 표시할지 환경을 선택하는 기능을 로케일(Locale)이라고 한다.

Locale 설정 및 사용

localectl 커맨드는 내 로케일 설정을 확인 및 설정이 가능하다

• system Locale : 현재 설정되어 있는 로케일 표시
• VC Keymap : 가상 콘솔에서 사용하는 키맵
• X11 Layout : Xwindows에서 사용되는 키보드 레이아웃
• X11 Model : 키보드 모델

설정 가능한 Locale 확인

localectl list-locales 커맨드를 통해 설정이 가능한 locale을 확인한다.

Locale 설정

Ubuntu를 설치한 후 최초 접속 후에는 우분투 패키지를 업그레이드하고 한글 설정을 해줌으로써 Locale을 우리나라 기준으로 설정할 수 있다.

$ sudo apt update
$ sudo apt upgrade
$ sudo apt install language-pack-ko
$ sudo locale-gen ko_KR.UTF-8
$ sudo update-locale LANG=ko_KR.UTF-8 LC_MESSAGES=POSIX

설정 이후에는 재부팅을 해주어야 한다. 재부팅 이후 다시 locale을 확인하자

잘 변경되었다.

우분투에 MySQL, Workbench 설정 후 nodejs에 연결하기

설치 전 패키지들을 업데이트 해준다

sudo apt update
sudo apt upgrade

패키지 업데이트 이후에는 MySQL을 설치한다

• 22.04 기준으로 auth socket을 이용해서 root 접속을 하게 되었다.

sudo apt install mysql-server

mysql 서버를 실행시키기 위해서는 아래와 같은 커맨드를 입력한다.

• mysql root 사용자로 로컬 로그인시 패스워드가 필요하지 않다.
• mysql root 사용자의 외부 접속은 허용하지 않는다

# root 접속하기
sudo mysql

서버가 정상적으로 실행되었는지 확인하기 위해서는

sudo systemctl status mysql

를 입력한다

db 만들고 권한부여

# db 만들기
create database db이름;
# 유저 생성
create user '유저이름'@'%' identified by db비밀번호;
# 생성한 유저에게 권한 부여
grant all on db이름.* to '유저이름'@'%' with grant option

flush privileges

db를 만들고 권한을 부여했다면 이제는 유저를 통해서 접속할 수 있다.

sudo mysql -u 유저이름 -p
비밀번호 입력
~
mysql>

재부팅시 mysql 자동 실행

$ sudo reboot
$ mysql -u root -p 
$ sudo systemctl status mysql
$ sudo systemctl enable mysql
# 자동 실행 취소 명령 (참고용, 타이핑하지 마세요)
# sudo systemctl disable mysql
$ sudo reboot
$ mysql -u root -p

외부에서의 sql 접속 허용

MYSQL은 우분투에서 사용하는 경우 Localhost에서만 접속이 가능하도록 설정되어 있다. 따라서 외부 접속에 대해 가능하게 하려면 기존의 환경 파일을 수정해주어야 한다.

sudo vi /etc/mysql/mysql.conf.d/mysqld.cnf
...
# 주석처리
# bind-address = 127.0.0.1

# 저장 후 재시작
sudo systemctl restart mysql

workbench 설치

workbench를 설치하기 위해서는 이전에 ubuntu의 desktop을 보아야 하는데, 나와 같은 경우 multipass ubuntu 가상머신에서 GUI 데스크탑 환경을 사용하기 때문에 따로 desktop 버전을 설치해주어야 한다.

sudo apt update
sudo apt upgrade
sudo apt install ubuntu-desktop xrdp

$ sudo apt update
$ sudo apt -y install wget
$ wget https://dev.mysql.com/get/mysql-apt-config_0.8.15-1_all.deb

다운로드 확인

$ ls -lh mysql-apt-config_0.8.15-1_all.deb 

설치 스크립트 실행

# apt 
$ sudo apt install ./mysql-apt-config_0.8.15-1_all.deb
 
# dpkg
$ sudo dpkg -i mysql-apt-config_0.8.15-1_all.deb 

ssh 터널링(ssh port forwarding)

ssh는 원격 호스트로의 접속과 더불어 ‘SSH Tunneling’ 또는 ‘ssh port forwarding’이라는 기능을 제공한다.

서버에 접근할 필요성이 생기게 된다면, ssh를 통해서 서버에 접근하게 될 것이다. 하지만 서버에서는 보안상의 문제로 서버에서 리슨하고 있는 포트가 방화벽에 의해 막혀있다. 이 경우, 호스트는 서버에 직접적으로 접근할 수 없다. 위 사진처럼 22포트를 통해서는 접속이 되지만, 6667 서버에 의해서는 방화벽에 의해 접근이 제한된다.

이럴 때 쓰는 것이 ssh 터널링으로, ssh 연결을 통해서 방화벽을 우회하고 업 서버에 접근하여 정보를 안전하게 전달하고 데이터를 받을 수 있다.

ssh 터널링의 종류

• Local Port Forwarding
• Remote Port Forwarding
• Dynamic Port Forwarding

터널링 서버 구성

ssh 서버에서는 보안상에서 허용되어 있지 않기 때문에 ssh 서버의 구성을 바꿔줘야 할 필요성이 있는데, 루트 권한을 통해 기존의 ssh 설절증 바꾸어준다.

# 설정 편집창 열기
$ sudo vi /etc/ssh/sshd_config 

# ssh 설정 변경하기
...
#AllowTcpForwarding yes
#GatewayPorts no -> yes
...

# 설정을 적용하기 위해 sshd 서비스 재시작
$ sudo systemctl restart sshd
# 또는
$ sudo service sshd restart

AllowTcpForwarding과 GatewayPorts 주석을 해제하고 yes로 값을 바꾼다.

터널링 종류별 방식

Local Tunneling

로컬 터널링은 앱 클라이언트가 있는 호스트에서 서버가 구동되어 있는 호스트로 ssh 연결을 맺는다.

$ ssh -L PORT1:HOSTNAME:PORT2 user@hostB

ssh 클라이언트는 port1에 리슨하고, port1로 들어오는 요청에 대해 ssh 클라이언트가 ssh 서버쪽으로 요청을 보내고, 서버로 전송된 요청은 HOSTNAME:PORT2로 전해진다.

참조

https://hbase.tistory.com/328 https://elsainmac.tistory.com/870

ERD란?

ERD는 E-R 다이어그램의 약자이다. E는 Entity 즉, 개체 속성이고 R은 Relation으로 풀어 말하자면 개체 속성과 개체 간 관계를 다이어그램으로 표현한 것이다.

기본 키(Primary Key)와 외래 키(Foreign key)

기본 키(Primary Key)

데이터베이스 테이블 내의 모든 레코드에서 고유한 아이디

특징

• 모든 레코드가 서로 다른 값을 가지고 있어 각 레코드 식별 가능
• NULL값이 존재할 수 없음
• 레코드의 값은 중복 불가능
• 테이블에는 하나의 기본 키만 가질 수 있지만 경우에 따라 1개 이상의 기본 키를 정의할 수도 있음(다수열 기본 키, 복합 기본 키)

조작

생성

 
CREATE TABLE user {
	id int PRIMARY KEY
   }
   
 
`ALTER TABLE users ADD PRIMARY KEY (name);`
 
 
CREATE TABLE users (
  id INT NOT NULL ,
  name VARCHAR(50),
  email VARCHAR(100),
  password VARCHAR(50),
  PRIMARY KEY (id, name)
);

• PK 사용할 컬럼에 PRIMARY KEY 붙여주기
• 중복값과 NULL값이 없어야 한다는 점을 기억하자
• 중복값을 INSERT할 때 작동하지 않는다.

삭제

ALTER TABLE users DROP PRIMARY KEY;

• 삭제 쿼리를 실행하기 전에 반드시 기본키가 다른 테이블에서 참조되지 않는지 확인해야 함
  • 참조 무결성 제약조건 위배로 데이터베이스가 손상될 수 있음
• 기본 키를 삭제하려ㅑ면 먼저 해당 키가 참조하는 외래 키를 삭제해야 함

AUTO_INCREMENT 의 사용

• PRIMARY KEY의 속성 중 하나
• 삽입되는 레코드에 유니크한 값을 자동적으로 부여한다.
• 일반적으로 1부터 증가하며 값을 부여하지만, 별도의 다른 값을 부여할 수도 있다.

CREATE TABLE user {
	id int PRIMARY KEY AUTO_INCREMENT
   }

foreign key(외래 키)

다른 테이블의 기본 키를 참조하는 컬럼으로, 데이터가 일관(데이터 무결성)될 수 있도록 돕는 역할을 한다. 보통은 두 개의 데이터베이스 테이블을 잇고자 기본 키와 함께 사용된다. 일종의 테이블을 연결하는 가상의 다리 역할을 한다.

FK의 특징

1. 외부 키는 한 테이블의 필드로, 다른 테이블의 기본 키를 나타낸다.
2. 외래 키를 가지고 있는 테이블을 하위 테이블, 기본 키를 가지고 있는 테이블을 참조 이블 또는 상위 테이블이라고 한다.
3. 각 외부 키와 기본 키는 1:1관계로 매칭되어야 하며, 기본 키에 존재하지 않는 값이 외부키에 존재할 수 없다. → 외래 키 제한 표현으로 데이터베이스에게 두 테이블 간의 관계를 알려주어야 한다.

FK의 제한 표현

FK의 제한 표현의 역할

1. 두 테이블 간의 관계를 정의한다.
2. 기본 키의 존재하지 않는 값을 외래 키에 존재하게 되는 일을 막아준다.

CREATE TABLE country (
 country_id integer,
 name varchar(50),
 population integer);
 
CREATE TABLE city (
 city_id integer,
 name varchar(50),
 country_id integer);

💡제한 표현이 없는 상태에서 데이터베이스는 두 테이블간의 관계를 파악하지 못한다. 따라서 우리가 외래키로 설정한 city 테이블의 country_id는 기본 키인 country 테이블의 country_id에 존재하지 않는 값을 입력해도 아무런 문제가 없이 실행된다.
이를 방지하고 데이터베이스에게 두 테이블간의 관계를 알려주기 위해 제한 표현을 사용한다.

💡 외래 키를 생성하기 전, 기본 키를 먼저 정의해야 한다.

생성하기

# 부모 테이블을 참조하는 외래 키 생성
CREATE TABLE child_table ( #child_table 자식 테이블 
  child_column INT NOT NULL, #자식 테이블에서 외래키로 사용될 필드 
  ...
  FOREIGN KEY (child_column) REFERENCES parent_table(parent_column) # parent_table 부모 테이블
);
 
 
# 기본 키와 외래 키를 정의한 새로운 테이블 생성
DROP TABLE IF EXISTS customers;
CREATE TABLE customers (
  id INT NOT NULL PRIMARY KEY,
  name VARCHAR(50) NOT NULL,
  email VARCHAR(50) UNIQUE
);
 
DROP TABLE IF EXISTS orders;
CREATE TABLE orders (
  order_id INT NOT NULL PRIMARY KEY,
  customer_id INT,
  order_date DATE,
  total DECIMAL(10,2),
  FOREIGN KEY (customer_id) REFERENCES customers(id)
);
 

삭제하기

# 외래키 삭제
`ALTER TABLE orders DROP FOREIGN KEY fk_customer_id;`
 
# 제약조건 이름 확인
`SHOW CREATE TABLE orders`

외래키 제약 조건

외래 키 제약 조건에 의해 참조되는 테이블에서 데이터의 수정이나 삭제가 발생하면, 참조하고 있는 테이블의 데이터도 같이 영향을 받기 때문에 참조하고 있는 테이블의 동작은 키워드를 사용해서 FOREIGN KEY 제약 조건에서 설정할 수 있다.

ON DELETE

외래 키가 참조하는 테이블 행이 삭제될 때 실행되는 동작

• CASCADE: 외래키가 참조하는 모든 행도 함께 삭제
• SET NULL: 외래키 값을 NULL로 설정(자식 외래키가 NOT NULL일 때는 안됨)
• SET DEFAULT : 외래키 값을 기본값으로 설정
• RESTRICT: 외래키가 참조하는 행이 있으면 삭제를 거부

ON UPDATE

외래키가 참조하는 테이블의 행이 업데이트될 때 실행되는 동작

• CASCADE: 외래키가 참조하는 모든 행도 함께 업데이트
• SET NULL: 외래키 값을 NULL로 설정(자식 외래키가 NOT NULL일 때는 안됨)
• SET DEFAULT : 외래키 값을 기본값으로 설정
• RESTRICT: 외래키가 참조하는 행이 있으면 삭제를 거부

제약 조건 설정하기

CREATE TABLE customer (
  id INT PRIMARY KEY,
  name VARCHAR(50)
);
 
CREATE TABLE orders (
  id INT PRIMARY KEY,
  customer_id INT,
  amount DECIMAL(10,2),
  FOREIGN KEY (customer_id) REFERENCES customer(id) ON DELETE CASCADE ON UPDATE CASCADE
);

고유 키(Unique Key)

고유 키는 테이블에서 특정 필드의 값을 고유하게 만들기 위해 사용하는 값이다. 고유 키는 Primary Key와 마찬가지로, 각 레코드를 식별하는데 사용된다. 하지만 기본 키와는 다른 점은 NULL값을 포함할 수 있다는 점이다.

생성하기

# 일반적인 생성방법
CREATE TABLE  users(
  id INT PRIMARY KEY  AUTO_INCREMENT,
  name VARCHAR(50) UNIQUE ,
  email VARCHAR(100),
  password VARCHAR(50)
);
 
CREATE TABLE  users(
  id INT PRIMARY KEY  AUTO_INCREMENT,
  name VARCHAR(50) ,
  email VARCHAR(100),
  password VARCHAR(50),
  UNIQUE(name)
);
 
# 기존 테이블에 고유키 추가
`ALTER TABLE users ADD CONSTRAINT unique_password UNIQUE (password);`
 

삭제하기

`ALTER TABLE users DROP INDEX unique_password;`

MVC 패턴

MVC 패턴이란 Model-View-Controller의 앞글자만 따온 약자로, 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다.

디자인 패턴이란? 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용하여 쓸 수 있는 것을 정리한 규약

해당 패턴은 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있다. 즉, 하나의 애플리케이션을 설계함에 있어서 구성 요소를 세 가지 역할로 나누어 구분한 것이다. 세 가지 역할은

• 모델(Model) : 데이터와 비즈니스 로직 관리
• 뷰(View) : 레이아웃과 화면 처리
• 컨트롤러(Controller) : 모델과 뷰로 명령을 전달 로 구분된다

위의 그림처럼 서로의 관계가 정의되어 있다. 각각의 요소에 대해서 자세히 알아보자

모델(Model)

애플리케이션의 정보, 데이터를 나타낸다. 데이터베이스, 상수, 초기화값, 변수 등을 뜻하며, 이러한 정보들을 가공하는 역할을 한다.

규칙

• 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 함
• 뷰나 컨트롤러에 대해서 어떤 정보도 알지 말아야 함
  • 뷰를 참조하는 내부 속성값을 지니면 안됨
• 변경이 일어나면, 변경 통지에 대한 처리방법을 구현
  • 정보 변경이 일어나면, 이벤트를 발생시켜 전달하고, 이를 뷰에서 수신하여 처리하거나 하는 처리 방법이 따로 있어야 함
  • 모델은 재사용가능해야 하며 다른 인터페이스에서도 변하지 않아야 함

뷰(View)

사용자 ui를 담당하는 요소이다. 데이터 및 객체의 입력, 출력을 담당한다. 데이터를 기반으로 사용자들이 볼 수 있는 화면이다. 즉, 표시할 데이터를 모델로부터 받아 출력한다.

규칙

• 모델이 가지고 있는 정보를 따로 저장해서는 안됨
  • 임의의 뷰 내부에 저장 금지
• 모델이나 컨트롤러와 같이 다른 구성요소들을 몰라야 함
  • 모델과 같은 자기 자신을 제외하고 다른 요소들의 참조나 동작을 모름
  • 데이터를 받으면 단순히 화면에 표시만 함
• 변경이 일어나면 변경 통지에 대한 처리 방법 구현
  • 모델과 같이 변경이 일어났을 때 변경을 알려줘야 하는 방법 구현
  • 재사용가능하게끔 설계

컨트롤러(Controller)

컨트롤러는 데이터와 ui(사용자 인터페이스) 요소들을 잇는 다리 역할이다. 사용자가 데이터를 클릭하면 수정하는 것에 대한 이벤트들을 처리한다

규칙

• 모델이나 뷰에 대해서 알고 있어야 함
  • 모델이나 뷰는 서로 모르즈만 컨트롤러는 그 사이에 둘을 모두 알고 있는 상태에서 변경을 외부로 알리거나 수신할 수 있어야 함
• 모델이나 뷰의 변경을 모니터링 해야함

장점

이러한 3개의 구성 요소로 나누어 동작하는 웹 서버의 구조를 활용하면 가지는 장점들이 뚜렷하다.

• 유지보수성 향상
  • 모델, 뷰, 컨트롤러가 명확하게 나누어져 있어 코드의 수정이나 확장이 용이하다
  • 유지보수가 필요한 부분을 집어 해당 부분만 수정하면 됨
• 개발의 병렬성 증가
  • 따로따로 개발이 가능해서 협업을 할 경우 개발의 분업화가 잘 이루어질 수 있음
• 유연성과 확장성
  • 애플리케이션의 기능을 쉽게 추가 및 확장 가능하다
  • 각각의 요소에 맞추어 추가하기만 하면 된다
• 테스트 용이성
  • mvc 패턴은 각 컴포넌트가 독립적으로 동작하도록 설계되었기 때문에 단위 테스트를 수행하기 쉬움
• 코드의 명확한 구조
  • 코드의 구조가 명확해짐
  • 코드의 가독성을 높임
• 중복 코드 감소
  • 중복 코드를 하나로 묶음으로써 재사용이 용이하고 코드의 중복이 사라짐

참조

https://developer.mozilla.org/ko/docs/Glossary/MVC https://m.blog.naver.com/jhc9639/220967034588