개발자의 개발 블로그

result : [
  Campain {
    dataValues: { .... },

_previousDataValues: { ... } ,

    _changed: Set(0) {},
    _options: {
      isNewRecord: false,
      _schema: null,
      _schemaDelimiter: '',
      raw: true,
      attributes: [Array]
    },
    isNewRecord: false
  }
]

이렇게 나온다...

나는 dataValues에 든 값만 원하는데... 

접근하기도 어렵고 왜 이런 쓸데없는 것까지 나오는 것일까?

https://stackoverflow.com/questions/46380563/get-only-datavalues-from-sequelize-orm

해결책은 여기.

모델 인스턴스가 아닌,  데이터만 반환하기 위해서는 

raw: true를 

findAll({

시작하자마자 작성해주자. 그러면, 된다. 

dataValues만 나오는 것을 확인하자. 이것이 내가 원하는 데이터이다. 오호~

워크벤치를 설치했습니다.

사용하려고 했는데 글씨가 인간적으로 너무 작았습니다.

 그래서 글자를 키워보려고합니다.

폰트 또는 폰트 크기 변경하려면

1. 상단에 MySQLWorkbench > Preferences를 눌러준다

2.창이 뜨면, 왼쪽 메뉴 중 Font로 이동합니다.

3. 뒷쪽 숫자를 높여준다.

 원하는 폰트 + 띄어쓰기 + 폰트 크기 구조인데, 나는 폰트는 잘 모르므로 크기만 변경하고 한다.

대략 20으로 키워주고 OK를 눌러주면 된다

윗쪽이 SQL Editor

아래쪽이 Result Grid이다.

근데, 컬럼명 부분은 바뀌지 않는다.... 

django나 ruby 언어의 경우, 관리자페이지를 쉽게 세팅할 수 있다.

그런데, 노드의 경우 그런 것을 보지 못했다. 그래서 검색을 한 결과 

Adminbro라는 툴? 

AdminBro는 프레임워크를 이용하여 경로를 랜더링하므로, 설치를 해야한다. 목록은 다음과 같다.

• Express
• Hapi
• Koa.js
• Nest.js

나는 익스프레스를 사용하고 있다.

설치 

1.  npm install admin-bro @admin-bro/express

2. npm install express express-formidable

사용

맨 위에 불러온다. AdminBro관련 코드를...

const AdminBro = require('admin-bro')

const AdminBroExpress = require('@admin-bro/express')

전체 코드는 다음과 같다.

const AdminBro = require("admin-bro");
const AdminBroExpress = require("@admin-bro/express");

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

const adminBro = new AdminBro({
  databases: [],
  rootPath: "/admin",
});

const router = AdminBroExpress.buildRouter(adminBro);
app.use(adminBro.options.rootPath, router);
app.listen(8080, () => console.log("AdminBro is under localhost:8080/admin"));

일단, Adminbro를 띄우는 코드이다. 그런데, 다음과 같은 에러가 발생했다.

Error: Cannot find module 'tslib'

tslib 모듈을 찾을 수 없다. 

찾을 수 없으면? npm으로 설치해주면 된다.

해결 방법 : npm i tslib

후, 실행하니 정상적으로 떴다. 오예...음 이제 시작할 준비는 끝났다. 이제 적용해보자.

GET과 POST의 개념은 알게 되었고, 실습을 해보려고 했다.

그런데, 경로? 엔드 포인트? 가 동일한 경우가 헷갈렸다. 그래서 이것저것 테스트를 해본 결과다

만약 둘 다 동일하게   /posts라는 경로를 갖는다면 

URL에서 접속하는 경우 GET의 라우터에 있던 log가 찍혔다. 그럼 POST는?

1. form 태그를 간단히 만들어서 보내는 방법.

2. POSTMAN을 통한 더미 데이터를 보내는 방법.

POSTMAN을 사용해보았다.

제대로 JSON으로 보냈는데 undefined가 나왔다... 뭐지 이게 아닌가?

아.. 생각났다. express에서 json으로 받으려면 body-parser를 설치하거나 노드 14이상의 버전이면

express.json()을 사용하여 처리를 해줘야 JSON을 읽을 수 있다는 사실...

app.use(express.json());

이렇게 추가를 해주고 난 뒤, 다시 테스트

{ "name":"JANGSU" }를 보내고, 응답을 받았다.

이 보낸것을 보고싶다면, req.body안에 JSON으로 담겨있다.

그리고, 보낼때는 res.json({...})으로 응답할 수 있다.

서버

노드에서 import를 이용해보려고 했다.

여태까지는  

const express = require('express');와 같이 require문을 계속 써왔는데 

import를 사용해도 동일할까? 싶어서 import를 써보려 했다.

ㅡㅡㅡㅡㅡㅡㅡㅡ

기존 방식 = CommonJS

현재 = ES 모듈 사용

원래는 바벨등을 이용해서, 작업을 하였으나 이제는 간단한 방법이 있다.

package.json에다가 

"type": "module",

이거 한 줄만 추가해주면 에러가 사라지는 것을 볼 수 있다.

1. 파이어베이스에 접속 - 로그인 - 새 프로젝트 추가 - 프로젝트를 생성한다. (방법은 생략함...)

2. 왼쪽 메뉴에서 호스팅(Hosting)을 선택한다.

3. 호스팅이 아직 생성되지 않았다면, 다음과 같이 설명 등 첫 화면이 나온다. 상단에 시작하기 버튼을 누른다.

생각보다 자세히 설명되어 있다. 단계도 3단계밖에 되지 않으므로 매우 간단하다는 것을 예상할 수 있다. 그럼 시작해보자.

1) npm install -g firebase-tools

터미널에 입력하여 파이어베이스를 사용하기 위해 설치를 해준다.

2) firebase login

파이어베이스를 프로젝트 루트에서 초기화해준다. 

파이어베이스는 구글이므로 구글 로그인이 안되있다면, 이메일과 비밀번호를 물어볼 때도 있다.

이미 크롬을 사용하고, 크롬에 로그인이 되있는 상태라면,

Already logged in as youngsu.gil@gmail.com

이렇게 나올 것이다. 그럼 패스!

3) firebase init

이렇게하면, 호스팅을 하고자하는 프로젝트에 파이어베이스를 초기화하여 설치하는 명령어이다.

몇 가지를 물어본다.

쉽게 설명하면,

파이어베이스의 기능중에 이 폴더(프로젝트 루트경로)에 어떤걸 사용하려고하나? 선택해주라. 선택은 Space를 눌러라.

위아래로 움직이는 것은 키보드 방향키이다. 선택 후 Enter를 입력하면 다음으로 넘어간다.

이 예제의 경우, Hosting만 사용할 것이므로 Hosting에만 체크 후 Enter!

<1>번 질문

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> 
to invert selection)
◯ Database: Configure Firebase Realtime Database and deploy rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯ ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features
 ◯ Remote Config: Get, deploy, and rollback configurations for Remote Config

다음은 기존에 존재하는 프로젝트를 사용할 것이므로, 기본으로 선택된 Use an existing project를 체크하고 Enter를 입력한다.

<2>번 질문 

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project 

<3번 질문>

? Select a default Firebase project for this directory: (Use arrow keys)
❯ coffe-6b8dc (Coffe) 
  hunsu-7b000 (Hunsu) 
  mandu-cbf46 (mandu) 
  mooncoin-bbab1 (MOONCOIN) 

파이어베이스에 있는 프로젝트들 중 어떤 프로젝트 어디에 이 호스팅을 넣을 예정이냐? 

이런 질문이다. 원하는 프로젝트를 선택한 뒤 Enter

계속 물어본다.... 지겹다. 

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public)

--> 요건 public 디렉토리를 어떻게 할꺼냐? 물어보는 건데, 그냥 Enter를 입력하면 기본적으로 public 이름의 폴더로 지정된다.

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 

--> 요건 굳이... 필요없음.  N 입력!

? Set up automatic builds and deploys with GitHub? (y/N) 

--> GitHub로 배포를 자동적으로 할 꺼냐? 이런거 물어보는 것 같음.. 필요없음.  N 입력!

? File public/404.html already exists. Overwrite? (y/N) 

--> 404.html 파일이 이미 존재한다 덮어씌울꺼냐? 몰라. N 입력!

? File public/index.html already exists. Overwrite? (y/N)

--> index.html 파일이 이미 존재한다 덮어씌울꺼냐? 몰라. N 입력!

아 왜 이렇게 많나 생각한 순간

끝났다. 성공적으로 피니시!! 오!

다음과 같이 firebase 어쩌고 파일이 들어갔다면 정상적으로 파이어베이스 세팅 완료!

이제 배포만 남겨둔 상태 두근두근

4) firebase deploy

드디어 마무리 배포 명령어까지 왔다.

짠. 이렇게 complete되었고,

그 바로 밑에

Project Console: https://console.firebase.google.com/project/xxx/overview
Hosting URL: https://appname.web.app

이렇게 나오는데 Hosting URL이 바로 외부에서 접속해서 내 프로젝트를 볼 수 있는 링크이다.

이상으로 파이어베이스를 이용해서 웹 사이트를 호스팅하는 방법을 정리해봤다.

1. 이것도 마찮가지로 개발자 홈페이지에 들어가 앱을 등록해줘야 한다.

https://developers.naver.com/main/

애플리케이션 등록 >> 입력 후 등록하기

2. npm을 이용하여 passport-naver 설치

무슨 문제가 있어서 이렇게 나온 것일까?

노드 개발을 하다보면, 참 많이 나는 에러다.

쉽게 말하면, 모듈화를 해놓고 해당 모듈을 불러오지 않아서(import // require) 발생하는 문제이다.

따라서,

const User = require('./User);

이런식으로 해당 모듈을 불러와야 에러가 발생하지 않는다.

ReferenceError 자체가 

참조에러? 이므로 

참조하지 않아 에러가 발생했음을 추측할 수 있다. 너무나 당연하고 쉽지만 빠트려서 빈번히 발생하는 에러이므로,

코드 작성 전 미리 선언해놓는것이 좋다.

1. passport-facebook를 설치한다.

$ npm i passport-facebook

2. 페이스북 개발자 페이지에 들어간다.

Facebook Developers

3. 로그인 한 뒤, 상단 메뉴   내 앱 >> 앱 만들기 버튼을 선택 >> 소비자 선택

그 다음 원하는 앱 이름을 작성하고 앱 연락처 이메일을 작성한다.

비즈니스 관리자 계정은 선택사항이므로 반드시 할 필요는 없다.  패스 후 , 앱 만들기 누르면 앱이 생성된다.

4. 앱이 생성되면 대시보드 창이 나오는데, 왼쪽 메뉴에서 설정 >> 기본설정을 보면 

앱 ID가 적혀있고,  앱 시크릿 코드가 *****로 적혀있는데. 

passport-facebook를 사용하기 위해서는 이 두 개가 필수!! 반드시 필요하므로 여기 이게 필요하다는 걸 기억하자!!

참고로, 앱 시크릿 코드가 더욱 중요하므로 ****를 보이게 하기 위해서는 현 Facebook 비밀번호를 한 번 더 요구한다.

또한, 웹페이지로 사용할 것이므로, 맨 밑으로 스크롤을 하게 되면 + 플랫폼 추가  가 존재한다. 이것을 클릭. 

아래와 같이 나온다. 신기하다.. 플스까지? 

하지만... 웹사이트를 선택한 뒤, 원하는 URL을 입력해주면 

이렇게  되면 이 URL에서 페이스북 로그인 요청 시에  NO하지 않고, OK를 하겠다고 설정을 한 것이다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ페이스북 개발자 페이지 설정 완료 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

이제 원하는 에디터에서 passport-facebook를 구현하면된다. 

https://www.npmjs.com/package/passport-facebook

위 진행 방법을 번역한 것을 정리하면,

1.

passport-facebook을 사용하기 전에 facebook에 애플리케이션을 등록해야합니다. 아직 그렇게하지 않았다면 Facebook 개발자에서 새 애플리케이션을 만들 수 있습니다. 애플리케이션은 전략에 제공해야하는 앱 ID 및 앱 시크릿을 발급받습니다.

또한 애플리케이션의 경로와 일치하는 리디렉션 URI를 구성해야합니다.

이것이 위에서 진행한 것이다...

2. 

Facebook 인증 전략은 Facebook 계정과 OAuth 2.0 토큰을 사용하여 사용자를 인증합니다. 애플리케이션 생성시 획득 한 앱 ID 및 시크릿은 전략 생성시 옵션으로 제공됩니다. 이 전략에는 인증 된 사용자의 Facebook 프로필이 포함 된 프로필뿐만 아니라 액세스 토큰 및 선택적 새로 고침 토큰을 수신하는 확인 콜백도 필요합니다. 확인 콜백은 인증을 완료하기 위해 사용자를 제공하는 cb를 호출해야합니다.

시퀄라이즈를 사용하다보니 모델에서 수정을 해도 변경이 되지 않는 것을 확인할 수 있었다.

서버를 껐다가 켜봐도 ...

난 분명히 allowNull을 false에서 true로 변경했는데, 위와 같이 null이 불가능하다는 에러를 계속 내보내고 있었다.

당황스럽다. 아무리 고치고 껐다가 켜봐도 안되서...

SQL문을 사용해보기로 했다.

alter table users modify column confirm_password varchar(255);  // null 허용

alter table users modify column confirm_password varchar(255) not null;  // null 비허용

이렇게 하면, users 테이블에서 confirm_password 컬럼을 수정하겠다는 의미이다.

not null을 명시해서 쓰면 null을 허용하지 않겠다는 의미이며, 생략하게 되면 기본적으로 null을 허용한다는 의미가 된다.

이렇게 입력한 뒤, 다시해보니까 해결되었다. 이런 에러가 가장 싫다. 

에러가 아니라 버그?

버그 하나 발견한 하루였다.