2021-07-06 항해99 TIL

오늘 한일

• Node.js 심화 과제를 진행하면서 많은 의문과 궁금증이 있었습니다. Sequelize 모듈로 MySQL을 조작할 때 assocation을 Models에서 정의하지 않으면 JOIN 문을 사용할 수 없다는 것을 찾지 못해 엄청난 고난의 시간을 겪었습니다. 그리고 아직은 모듈의 사용법을 잘 알지 못하다 보니, SQL문으로 DB를 조작하는 것이 더 편하였습니다. 그래서 일반적인 SELECT 문이 아닌 JOIN 연산자 또는 중첩 쿼리문을 사용해야 할 경우에는 mysql이라는 node.js 모듈을 활용해 문자열을 이용해 DB를 조작할 수 있도록 설정하였습니다.
• Nunjucks 템플릿 엔진을 처음 사용해봤습니다. 이전에 Flask의 Jinja 2 템플릿을 사용했을 때의 문법과 비슷해 사용하는 데 어려움이 없었습니다. 

오늘 배운 것

• Node.js 심화 과제 회원 인증, 게시글 조회 페이지 구현
• path, Sequelize, mysql, NunJucks 모듈

내일 할 것

• Node.js 심화 과제 완료하기 

 

필기노트

-- DB --

mysql > insert into Posts (userId,title,content,createdAt,updatedAt) values (1, "Hello Title! ", "Hello Content = Varchar(3000)! ", Now(), Now());
 - 첫번째 회원가입한 유저의 Key로 테이블을 구성하고, title과, Content를 삽입한다. 
 - createAt, updatedAt은 DB내 시간을 기준으로 설정

mysql > insert into Posts (userId,title,content,createdAt,updatedAt) values (2, "Hello Title! ", "Hello Content = Varchar(3000)! ", Now(), Now());
 - Users 테이블에 userId에서 존재하지 않을 경우 
   - "Cannot add or update a child row: a foreign key constraint fails" 에러가 발생한다.


-- Users에 삽입할 데이터
insert into Users (nickname, password, createdAt, updatedAt) values ("123","1313",NOW(),NOW());
insert into Users (nickname, password, createdAt, updatedAt) values ("124","1414",NOW(),NOW());

-- Posts에 삽입할 데이터
Users테이블에서 1,2번 userId가 존재해야지만 실행가능

insert into Posts (userId,title,content,createdAt,updatedAt) values (1, "Hello Title! One", "Hello Content = Varchar(3000)1 ", Now(), Now());
insert into Posts (userId,title,content,createdAt,updatedAt) values (1, "Hello Title! UserId 1 ", "Hello Content = Varchar(3000)2 ", Now(), Now());
insert into Posts (userId,title,content,createdAt,updatedAt) values (2, "Hello Title! Two", "Hello Content = Varchar(3000)3 ", Now(), Now());
insert into Posts (userId,title,content,createdAt,updatedAt) values (2, "Hello Title! UserId 2 ", "Hello Content = Varchar(3000)4 ", Now(), Now());




-- Sequelize createTable에 옵션을 넣을때 사용
allowNull: false, : NOT NULL
unique:true, : UNIQUE KEY를 True로 설정

references: {
    model: 'Users',
    key: "userId"
},
onDelete: 'cascade'
 - 외래키를 설정하는데, Users 테이블의 userId 컬럼을 참조한다.
 - ON DELETE CASCADE로 설정해 부모 컬럼이 삭제될 경우 해당하는 ROW를 삭제하도록 설정한다.



-- DB의 Nickname 컬럼을 넣어야 될까?
DB에서 게시글을 구현할 때 각 게시글마다 userId는 넣는게 맞다
하지만 Nickname까지 넣어주는게 DB입장에서 불필요한 자료가 들어가는게 아닌가 싶다.
userId를 통해서 Users에 접근해 해당하는 닉네임을 가지고 올 수있지만,
매번 Posts와 Comments 테이블을 가져올때마다 Nickname을 확인하기위해 Users를 접근해야한다.
이것은 DB의 요소는 적어지지만 비효율적인게 아닌가?

우선은 확실한 해답을 찾지 못했기 때문에 Nickname을 Posts, Comments 테이블에 추가하도록하자.
Nickname을 만약에 변경하게 된다면 ON UPDATE CASCADE로 자동변경되도록 설정하자.
 - 외래키는 기본키가 아닌 값에 설정하지 못한다. -실패-


DB를 건들지 않고 Select 구문에서 처리할 수 있는 방법 3가지를 생각해봤다.
1. View를 생성해 userId만으로 nickname을 가지고 올 수 있도록
2. Select를 중첩 쿼리로 처리한다
3. Select에서 Users, Posts테이블을 Join으로 병합하여 출력하도록.


Join을 사용해 NIckname을 추가로 가지고 올 수 있도록 설정해보자

SELECT p.postId, p.userId, u.nickname, p.title, p.content, p.createdAt, p.updatedAt
FROM Posts AS p
JOIN Users AS u
 - INNER JOIN은 모든 데이터가 각 Users의 객체만큼 중복 출력된다. 


SELECT p.postId, p.userId, u.nickname, p.title, p.content, p.createdAt, p.updatedAt
FROM Posts AS p
JOIN Users AS u
ON p.userId = u.userId
Order By p.postId DESC;
 - userId가 일치하는 경우만 출력하도록 설정하니 원하는 결과값을 얻을 수 있었다.

Sequelize에서 JOIN을 사용하는것을 찾지 못해 우선 MySQL 라이브러리로 쿼리문을 작성하여 반환받도록 설정함.



Sequelize.findAll( {offet:10, limit:2})
 - 앞에 데이터 10개는 반환받지않고 넘긴 뒤, 2개의 항목만 반환한다
 - DB가 커져 한번에 데이터를 가지고 오지 않아도 될 때 사용할 수 있다.


localStorage.setItem("token", response.token);
 - 수신 받은 response.token을 token이란 이름으로 localStorage에 설정한다.


대형 라이브러리 일 경우 github에서 Issue를 검색하면 빠르게 문제를 해결할 수 있다.


--
$('#<Tag Id>').hide() : JQuery로 해당하는 타겟을 숨긴다.
$('#<Tag Id>').show() : JQuery로 해당하는 타겟을 보인다.


path.join(__dirname, "/../assets/post.html" : 첫번째 경로가 삭제되고 assets/post.html이 작성된다.
 ex)  < __dirname > === C:\Code_Program\Javascript\node_js\Weekly4_Proejct\routers
 ex)  C:\Code_Program\Javascript\node_js\Weekly4_Proejct\assets\post.html



app.set('view engine', 'html');
nunjucks.configure('views', {
    express: app,
    watch: true,
})
 - Nunjucks 템플릿 언어 설정법


location.pathname.split("/")[2]
 - 현재 URL 주소의 pathname에서 2번째 배열의 값을 가지고 온다.


headers: {
    authorization: `Bearer ${localStorage.getItem('token')}`,
},
 - Headers의 값에 jwt로 암호화한 토큰값을 넣어 같이 전송해준다.