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

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

Adminbro라는 툴? 

 

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

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

 

설치 

 

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

 

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

 

Posted by sungho88
,

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({...})으로 응답할 수 있다.

 

 

서버

 

Posted by sungho88
,

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

 

여태까지는  

 

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

 

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

ㅡㅡㅡㅡㅡㅡㅡㅡ

 

기존 방식 = CommonJS

현재 = ES 모듈 사용

 

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

 

package.json에다가 

 

"type": "module",

 

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

 

 

Posted by sungho88
,

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

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

 

NAVER Developers

네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음

developers.naver.com

 

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

 

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

 

 

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

Posted by sungho88
,

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

 

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

 

따라서,

 

const User = require('./User);

 

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

 

ReferenceError 자체가 

 

참조에러? 이므로 

 

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

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

Posted by sungho88
,

1. passport-facebook를 설치한다.

 

$ npm i passport-facebook

 

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

 

Facebook Developers

 

Facebook for Developers

Facebook for Developers와 사용자를 연결할 수 있는 코드 인공 지능, 비즈니스 도구, 게임, 오픈 소스, 게시, 소셜 하드웨어, 소셜 통합, 가상 현실 등 다양한 주제를 둘러보세요. 개발자를 교육하고 연

developers.facebook.com

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


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

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

 

 

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

 

 

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

 

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

 

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

 

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

 

 

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

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

 

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

 

 

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

 

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

 

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

 

passport-facebook

Facebook authentication strategy for Passport.

www.npmjs.com

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

 

1.

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

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

 

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

 

2. 

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

 

 

Posted by sungho88
,

1. 카카오 개발자 페이지에 접속후, 로그인한다.

https://developers.kakao.com/

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

2. 새 앱을 하나 생성한다.(기존 앱으로 해도 되고...)

내 애플리케이션 메뉴 -> + 애플리케이션 추가하기 선택..

 

3. 플랫폼 -> Web 플랫폼 등록

localhost로 할꺼니까.. 포트와 함께 적어준다. 나같은 경우,  http://localhost:4000/로 접속할 것이다.

4. 저장하면, 카카오 로그인을 사용하기 위해서는 Redirect URI를 등록해야 한다고 나온다. 옆에 등록하러 가기를 눌러 이동한다.

5. 하단에 Redirect URI 등록 버튼을 눌러 등록한다. 그리고  원하는 URI를 적어준 뒤 저장한다.

http://localhost:4000/auth/kakao/callback 

이런식으로 ...

만약, 잘못 입력하거나 입력하지 않았을 경우 다음과 같은 에러가 발생한다.

아...카카오는 에러페이지도 귀엽네...

어쨋든... 해결방안을 눌러보면, 에러코드들이 줄줄이 명시되어있다.

그 중에서, 검색을 해보면... 자세한 에러에 대한 설명과 함께 해결 방안까지 한국어로 되어있으니 얼마나 편한가! 

 

6. 위에 활성화 설정 -> 상태를 OFF에서 ON으로 바꿔준다. 

7. 동의항목을 설정해줘야, 유저로부터 동의를 얻어 정보를 가져올 수 있다. 

Posted by sungho88
,

시퀄라이즈는 SQL문을 자바스크립트 프로젝트 내에서 자바스크립트 객체로 작성할 수 있습니다. 

그렇지만, 시퀄라이즈 자체의 SQL과 다른 문법이 존재하기 때문에 이것도 익히는데 시간이 걸릴 것 같습니다.

또한, SQL문 데이터베이스를 다룰 백엔드 개발자라면 필수로 배우고 알아둬야하기 때문에 어떤 것을 쓰는게 맞을지 모르겠습니다.

하여튼 Sequelize 문법을 알아보겠습니다. 위에 SQL을 적어 해당 SQL문이 시퀄라이즈로 작성할때 어떻게 바뀌는지 보겠습니다.

 

먼저, 가장 간단한 CRUD부터 익혀보겠습니다. 

 

1) 생성하기(INSERT) 

INSERT INTO users (name,age,married,comment) VALUES ('JANG', 24, 0, '코멘트~');

 

User.create({ // Promise 방식 

name: 'JANG',

age:24,

married: false,

comment: '코멘트~'

});

 

2) 조회하기(SELECT)

// 모든 컬럼을 전부 가지고 오기.

SELECT * FROM users;

 

User.findAll():

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

// 일부 컬럼만 전부 가지고 오기.

SELECT name, married FROM users;

 

User.findAll({

attributes: ['name','married'],

});

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

[WHERE절 추가]

 

SELECT * FROM users WHERE authorId = 2

 

User.findAll({

 where: { authorId: 2 }

});  

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

SELECT * FROM users WHERE authorId = 12 AND status = 'active';

 

User.findAll({

 where: {

  authorId: 12,

  status: 'active'

   }

});

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

Op라는 연산자가 존재한다. 이것으로 조건문등의 조건을 정할 수 있다.

 

Op.eq --> SELECT * FROM users WHERE authorId = 2와 동일하다.

const { Op } = require("sequelize");
User.findAll({
  where: {
    authorId: {
      [Op.eq]: 2
    }
  }
});

Op.and --> 위 SELECT * FROM users WHERE authorId = 12 AND status = 'active'; 와 동일해짐.

const { Op } = require("sequelize");
User.findAll({
  where: {
    [Op.and]: [
      { authorId: 12 },
      { status: 'active' }
    ]
  }
});

Op.or --> SELECT * FROM users WHERE authorId = 12 OR authorId = 13; 을 표현할 수 있다.

const { Op } = require("sequelize");
User.findAll({
  where: {
    [Op.or]: [
      { authorId: 12 },
      { authorId: 13 }
    ]
  }
});

위와 같이 동일한 필드를 조건문으로 찾을 경우, 구조를 바꿔서 좀 더 읽기 쉽게 바꿀 수 있다.

 

DELETE FROM post WHERE authorId = 12 OR authorId = 13;

const { Op } = require("sequelize");
Post.destroy({
  where: {
    authorId: {
      [Op.or]: [12, 13]
    }
  }
});

그 외 엄청나게 많은 종류의 연산자를 제공한다.

너무 많고해서 복붙해 넣었다. 이런게 있구나만 보고 넘어가자.

const { Op } = require("sequelize");
User.findAll({
  where: {
    [Op.and]: [{ a: 5 }, { b: 6 }],            // (a = 5) AND (b = 6)
    [Op.or]: [{ a: 5 }, { b: 6 }],             // (a = 5) OR (b = 6)
    someAttribute: {
      // Basics
      [Op.eq]: 3,                              // = 3
      [Op.ne]: 20,                             // != 20
      [Op.is]: null,                           // IS NULL
      [Op.not]: true,                          // IS NOT TRUE
      [Op.or]: [5, 6],                         // (someAttribute = 5) OR (someAttribute = 6)

      // Using dialect specific column identifiers (PG in the following example):
      [Op.col]: 'user.organization_id',        // = "user"."organization_id"

      // Number comparisons
      [Op.gt]: 6,                              // > 6
      [Op.gte]: 6,                             // >= 6
      [Op.lt]: 10,                             // < 10
      [Op.lte]: 10,                            // <= 10
      [Op.between]: [6, 10],                   // BETWEEN 6 AND 10
      [Op.notBetween]: [11, 15],               // NOT BETWEEN 11 AND 15

      // Other operators

      [Op.all]: sequelize.literal('SELECT 1'), // > ALL (SELECT 1)

      [Op.in]: [1, 2],                         // IN [1, 2]
      [Op.notIn]: [1, 2],                      // NOT IN [1, 2]

      [Op.like]: '%hat',                       // LIKE '%hat'
      [Op.notLike]: '%hat',                    // NOT LIKE '%hat'
      [Op.startsWith]: 'hat',                  // LIKE 'hat%'
      [Op.endsWith]: 'hat',                    // LIKE '%hat'
      [Op.substring]: 'hat',                   // LIKE '%hat%'
      [Op.iLike]: '%hat',                      // ILIKE '%hat' (case insensitive) (PG only)
      [Op.notILike]: '%hat',                   // NOT ILIKE '%hat'  (PG only)
      [Op.regexp]: '^[h|a|t]',                 // REGEXP/~ '^[h|a|t]' (MySQL/PG only)
      [Op.notRegexp]: '^[h|a|t]',              // NOT REGEXP/!~ '^[h|a|t]' (MySQL/PG only)
      [Op.iRegexp]: '^[h|a|t]',                // ~* '^[h|a|t]' (PG only)
      [Op.notIRegexp]: '^[h|a|t]',             // !~* '^[h|a|t]' (PG only)

      [Op.any]: [2, 3],                        // ANY ARRAY[2, 3]::INTEGER (PG only)

      // In Postgres, Op.like/Op.iLike/Op.notLike can be combined to Op.any:
      [Op.like]: { [Op.any]: ['cat', 'hat'] }  // LIKE ANY ARRAY['cat', 'hat']

      // There are more postgres-only range operators, see below
    }
  }
});

 

Posted by sungho88
,

router.get('/', (req,res,next)=> {

try {

const user = await User.findOne({

...

});

res.render('login', {

user

})

} catch (error) {

console.error(error);

next(error);

}

})

 

이와 같은 데이터베이스에 접속하는 코드를 실행하였는데, 에러가 발생했다.

너무나 많이 발생하는 에러라 이젠 외워지기 시작했다.

이참에 블로그에 정리해두려고 글을 작성한다.

 

이것은 await를 사용하기 위해서는 async를 반드시 함수 앞에 붙여줘야 한다. 바늘과 실처럼...

 

router.get('/', async (req,res,next)=> {

try {

const user = await User.findOne({

...

});

res.render('login', {

user

})

} catch (error) {

console.error(error);

next(error);

}

})

Posted by sungho88
,

app.js에서 라우터를 사용하는데, 이러한 에러가 발생했다.

 

 

const pageRouter = require("./routes/page");  

 

app.use("/", pageRouter);

 

이렇게 단순한 두 줄에서 에러가 났다. 

 

처음에는 오타인 줄 알고 유심히 봤지만 너무 단순한 문장이라 에러날 곳이 없었다.

 

검색했다. 문제는 page.js 파일 안에 있었다.

 

바로~ router를 모듈로 export해주지 않아서 난 에러였다. 이런이런~

 

module.exports를 통해서 router를 등록해줘야 다른 모듈에서 사용이 가능하기 때문에 꼭 붙여줘야한다.

 

참고로 꼭 맨 밑에 작성하지는 않아도 된다. 하지만 꼭 있어야한다.

 

이번 에러로 하나 배웠다. 실수하지 말고 module.exports는 잊지말자!! 

 

 

 

Posted by sungho88
,