클라이밍하는 개발자

1. 문제

Table [테이블명] doesn't exist ??

npx sequelize init

npx sequelize db:create

npx sequelize model:generate --name User --attributes nickname:string,password:string,confirm:string

모두 작성했고, 회원가입 로직까지 만들어서 post를 보내는데 계속 에러가 난다.

근데 로직은 맞는 것 같은데 db도 생성했는데 왜 안될까ㅠㅠㅠㅠ

2. 시도해본 것들

구글에 검색해봤다. 테이블이 없을때 발생하는 에러래요~

뭐야 이 뻔한 얘기는.. 영어로 테이블 없다고 써져있잖......어??

3. 해결과정

npx sequelize db:migrate

생각해보니 이걸 안했네.....

4. 알게 된 점?

npx sequelize init

npx sequelize db:create

npx sequelize model:generate --name User --attributes nickname:string,password:string,confirm:string

3가지를 하고나면 생성된 모델과 마이그레이션을 수정하느라

npx sequelize db:migrate 를 까먹게 된다ㅠㅠ

모델 생성하면 다음것도 꼭 해야하는데생성된걸 수정하다보면 까먹는다..... 다음엔 잊지말아야지!

1) map()이란 무엇인가

모든 배열의 아이템에 function을 실행하는 메서드다.
그리고 함수의 결과 값으로 새로운 배열을 만든다.

const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"];
//함수 자체를 변수에 할당하여 쓰거나
const addNumber = (day, index) => `#${index+1} 😍${day}`;
const smilingDays = days.map(addNumber);

// 또는 함수를 직접 넣어 사용
// const smilingDays = days.map((day, index) => `#${index+1} 😍${day}`);
console.log(smilingDays)

2) 콜백함수란 무엇인가

정의 : 함수에 파라미터로 들어가는 함수
용도 : 순차적으로 실행하고 싶을 때 씀
참고 : 콜백함수가 필요한 함수들에만 콜백함수 사용가능

          잘만들어진 함수를 협업하는 팀원이 가져다 쓰고 싶을 때 사용

          콜백함수로 함수를 디자인하지 말고, Promise도 있고 async, await도 있음.

document.querySelector("button").addEventListener("click", 콜백함수)
// 버튼을 클릭했을 때, 이 함수가 실행되게 해주세요.

function first(파라미터){
    console.log(1)
    파라미터()
}
function seconde(){
    console.log(2)
}

// 순차적으로 실행하기 위해 함수의 파라미터에 다른 함수를 넣음(콜백함수)
first(second)

3) jwt이란 무엇인가? (+ 세션,토큰 차이점)

로그인 기능을 구현할때
1. session : 정보가 간단하게 담김 => db확인하느라 처리시간이 김
2. token(jwt방식) : 정보가 많이 담김 => 정보 보고 바로 통과
둘 중 하나 이용하여 구현함

단점 : 디코딩이 쉬움, 시크릿키를 쉽게하면 털림, 남의 jwt 탈취 => 리프레쉬토크

별일 없으면 역사와 전통의 session 방식이 좋다.
그러나 많은 데이터를 처리해야한다면 jwt를 써야하는데 보안에 신경써야 한다.

쿠키: 서버와 사용자간에 주고 받는 데이터(웹에는 있지만, 앱에는 없음)

세션: 중요한 정보는 모두 서버->DB에 담겨 있음. 유저가 가진 것은 세션ID뿐

토큰: 서버가 기억하는 이상하게 생긴 문자열(ID카드)
JWT:  정보를 갖고 있는 토큰(DB없이 검증가능)
       토큰형식. DB를 생성하지 않음. 토큰을 받으면 '사인된 정보'를 유저에게 보냄
       토큰이 유효한지만 검사하고, 암호화하진 않음(비밀번호를 담으면 안됨)

세션장점 :  모든 정보를 저장. 해당 정보를 이용해 새로운 기능을 추가가능.
               예를 들어 세션을 삭제하고 쫓아낼 수 있음(ex.넷플리스)
JWT장점 :  토큰을 추적하지 않음. 토큰 유효성만 검사함. 하지만 강제로그아웃 등 하지 못함.

=> 규모가 작을때는 JWT를 추천하지만, 규모가 커진다면 세션을 쓰는게 좋은 편

4) 미들웨어란 무엇인가

미들웨어의 정의: 양쪽을 연결해서 데이터를 주고 받을 수 있도록 중간에서 매개 역활을 하는 소프트웨어

[어플리케이션 레벨] app.use(+get post put 등)의 메서드로 미들웨어를 등록할 수 있음.
[라우터 레벨] router.use는 인스턴스에 바인딩된다는 점을 제외하면 어플리케이션의 레벨과 동일하게 작동한다.
[오류처리 미들웨어] (err, req, res, next) 꼭 4개의 인수를 사용해야 한다. 하나라도 생략되면 일반 미들웨어로 인식한다.

[타사 미들웨어] 제 3자가 만든 미들웨어 (body-parser, morgan 등)
[내장 미들웨어] Express가 내장한 미들웨어들을 뜻한다

내장 미들웨어

5)  라우팅이란? (+app.use란 무엇인가)

라우팅은 응용 프로그램이 URI(또는 경로) 및 특정 HTTP 요청 메서드(GET, POST 등)인 특정 끝점에 대한

클라이언트 요청에 응답하는 방법을 결정하는 것을 말합니다.

appHTTP 메서드에 해당하는 Express 개체의 메서드를 사용하여 라우팅을 정의합니다 . 

예를 들어 app.get()GET 요청을 처리하고 app.postPOST 요청을 처리합니다.

app.use()를 사용하여 미들웨어를 콜백 함수로 지정할 수 있습니다

=> 콜백함수 정의 : 함수에 파라미터로 들어가는 함수 / 용도 : 순차적으로 실행하고 싶을 때 씀

응답 방법

1) map()이란 무엇인가

모든 배열의 아이템에 function을 실행하는 메서드다.
그리고 함수의 결과 값으로 새로운 배열을 만든다.

const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"];
//함수 자체를 변수에 할당하여 쓰거나
const addNumber = (day, index) => `#${index+1} 😍${day}`;
const smilingDays = days.map(addNumber);

// 또는 함수를 직접 넣어 사용
// const smilingDays = days.map((day, index) => `#${index+1} 😍${day}`);
console.log(smilingDays)

2) 콜백함수란 무엇인가

정의 : 함수에 파라미터로 들어가는 함수
용도 : 순차적으로 실행하고 싶을 때 씀
참고 : 콜백함수가 필요한 함수들에만 콜백함수 사용가능

          잘만들어진 함수를 협업하는 팀원이 가져다 쓰고 싶을 때 사용

          콜백함수로 함수를 디자인하지 말고, Promise도 있고 async, await도 있음.

document.querySelector("button").addEventListener("click", 콜백함수)
// 버튼을 클릭했을 때, 이 함수가 실행되게 해주세요.

function first(파라미터){
    console.log(1)
    파라미터()
}
function seconde(){
    console.log(2)
}

// 순차적으로 실행하기 위해 함수의 파라미터에 다른 함수를 넣음(콜백함수)
first(second)

3) jwt이란 무엇인가? (+ 세션,토큰 차이점)

로그인 기능을 구현할때
1. session : 정보가 간단하게 담김 => db확인하느라 처리시간이 김
2. token(jwt방식) : 정보가 많이 담김 => 정보 보고 바로 통과
둘 중 하나 이용하여 구현함

단점 : 디코딩이 쉬움, 시크릿키를 쉽게하면 털림, 남의 jwt 탈취 => 리프레쉬토크

별일 없으면 역사와 전통의 session 방식이 좋다.
그러나 많은 데이터를 처리해야한다면 jwt를 써야하는데 보안에 신경써야 한다.

쿠키: 서버와 사용자간에 주고 받는 데이터(웹에는 있지만, 앱에는 없음)

세션: 중요한 정보는 모두 서버->DB에 담겨 있음. 유저가 가진 것은 세션ID뿐

토큰: 서버가 기억하는 이상하게 생긴 문자열(ID카드)
JWT:  정보를 갖고 있는 토큰(DB없이 검증가능)
       토큰형식. DB를 생성하지 않음. 토큰을 받으면 '사인된 정보'를 유저에게 보냄
       토큰이 유효한지만 검사하고, 암호화하진 않음(비밀번호를 담으면 안됨)

세션장점 :  모든 정보를 저장. 해당 정보를 이용해 새로운 기능을 추가가능.
               예를 들어 세션을 삭제하고 쫓아낼 수 있음(ex.넷플리스)
JWT장점 :  토큰을 추적하지 않음. 토큰 유효성만 검사함. 하지만 강제로그아웃 등 하지 못함.

=> 규모가 작을때는 JWT를 추천하지만, 규모가 커진다면 세션을 쓰는게 좋은 편

4) 미들웨어란 무엇인가

미들웨어의 정의: 양쪽을 연결해서 데이터를 주고 받을 수 있도록 중간에서 매개 역활을 하는 소프트웨어

[어플리케이션 레벨] app.use(+get post put 등)의 메서드로 미들웨어를 등록할 수 있음.
[라우터 레벨] router.use는 인스턴스에 바인딩된다는 점을 제외하면 어플리케이션의 레벨과 동일하게 작동한다.
[오류처리 미들웨어] (err, req, res, next) 꼭 4개의 인수를 사용해야 한다. 하나라도 생략되면 일반 미들웨어로 인식한다.

[타사 미들웨어] 제 3자가 만든 미들웨어 (body-parser, morgan 등)
[내장 미들웨어] Express가 내장한 미들웨어들을 뜻한다

5)  라우팅이란? (+app.use란 무엇인가)

라우팅은 응용 프로그램이 URI(또는 경로) 및 특정 HTTP 요청 메서드(GET, POST 등)인 특정 끝점에 대한

클라이언트 요청에 응답하는 방법을 결정하는 것을 말합니다.

appHTTP 메서드에 해당하는 Express 개체의 메서드를 사용하여 라우팅을 정의합니다 . 

예를 들어 app.get()GET 요청을 처리하고 app.postPOST 요청을 처리합니다.

app.use()를 사용하여 미들웨어를 콜백 함수로 지정할 수 있습니다

=> 콜백함수 정의 : 함수에 파라미터로 들어가는 함수 / 용도 : 순차적으로 실행하고 싶을 때 씀

회원가입 프로젝트를 만드는 도중, 

post를 사용시에 해당 에러 발견

테이블이 없다고? 무슨소리지.. Users라는 것을 찾아봐야겠다!

models 폴더에서 tableName을 추가했어야 했다. 추가하니까 성공적으로 정보를 전달할 수 있었다.

post로 아이디, 비밀번호의 데이터 값을 반환했을때, undefined가 반환된다.

이럴때 사용하는 패키지가 body-parser

"클라이언트 POST request data의 body로부터 파라미터를 편리하게 추출합니다."

설치를 한 후,

app.use(bodyParser.json()); //json형태로 변경
app.use(bodyParser.urlencoded({ extended: true })); //한글,공백등 잘못나오는걸 방지

설치하고 미들웨어 등록하니

결과값이 잘 출력되었다.

Uncaught TypeError: Cannot read property 'addEventListener' of null

ejs에서 자바스크립트를 사용할때, 위와 같은 에러문구가 발생

문득 생각나서

<script src="/js/login.js" defer></script>

경로 뒤에 defer를 붙였다.

defer는 <script> 태그의 defer 속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시합니다.

app.set("views", "views");
또는
app.set("views", "./views");

app.set("view engine", "ejs");

이런식으로  사용한후 서버를 가동하였으나

Error: Failed to lookup view "login.ejs" in views directory "views"

Error: Failed to lookup view "login.ejs" in views directory "./views"

이런식으로 에러문구가 떴다.

어? 근데 문구가 계속 변경되네?

강의 또는 다른곳에서 계속 "views", "views"와 같이 사용하니 관례처럼 느껴졌는데

"views"를 고정해주는 역활을 하는 것이기에 뒤에 명확하게 폴더루트를 찾아야 했다.

루트 찾는건 require("./src......") 이런식으로 하다보면 에디터에서 자동으로 찾아주니까

위치를 찾아놓고 다음과 같이 경로 확인해주니 정상작동 되었다.

app.set("views", "./src/views");
app.set("view engine", "ejs");

const mainRoutes = require("./src/routes/main");
app.use("/", mainRoutes);

폴더구조과 다른 프로젝트랑 다르다보니 발생한 문제 같다.

하나 더 깨달음을 얻어서 다행이다.

app.js

const express = require("express");
const app = express();

app.set("views", "views");
app.set("view engine", "ejs");

const mainRoutes = require("./src/routes/main");

app.get("/", mainRoutes);
app.get("/login", mainRoutes);

app.listen(8000, (req, res) => {
  console.log("8000번 서버가동");
});

/routes/main.js

const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
  res.send("메인화면");
});

router.get("/login", (req, res) => {
  res.send("로그인");
});

module.exports = router;

위 상태에서 서버를 실행하면 

Route.get() requires a callback function but got a [object Undefined]

뭐가 문제지? 라우터를 내보냈는데 읽지 못하는 것 같다.

유심히 살펴보니

app.get이 아니라 미들웨어로써 사용하는 것이기 때문에

app.use로 바꿔주니 해결 되었다.

app.get("/", mainRoutes);
app.get("/login", mainRoutes);

이미 라우터에서 "/" , "/login"을 받고 있기 때문에

app.use("/", mainRoutes) 만 등록해주니 해결 완료!