본문 바로가기

프로그래밍/nodejs41

adminJS 기초 - 리소스 (공식 사이트 번역) 자원 리소스는 AdminJS에서 관리할 수 있는 항목이며 즉시 제공되는 CRUD 작업(만들기, 읽기, 업데이트, 삭제)과 함께 제공됩니다. 소개 리소스는 AdminJS에서 관리할 수 있는 항목이며 즉시 제공되는 CRUD 작업 (만들기, 읽기, 업데이트, 삭제) 과 함께 제공됩니다. 대부분의 경우 ORM 또는 ODM의 모델입니다.AdminJS의 아이디어는 어댑터를 생성하기로 결정한 경우 ORM/ODM 모델 또는 사용자 지정 REST API 엔드 포인트 등 모든 종류의 리소스를 관리할 수 있도록 하는 것입니다. 어댑터 AdminJS를 사용하면 어댑터를 통해 리소스를 정의할 수 있습니다. 어댑터는 ORM, ODM 또는 선택한 다른 종류의 스토리지 또는 API와 통신하기 위해 API를 제공하는 AdminJS 확.. 2022. 11. 15.
AdminJS란? / AdminJS 설치하기 (공식사이트 번역) AdminJS란? AdminJS는 Node.js 애플리케이션을 위한 오픈 소스 관리자 패널입니다. 응용 프로그램에 데이터베이스 스키마를 강제하지 않습니다. 대신 사용 중인 Node.js 서버 및 ORM/ODM과 통합됩니다. UI 구성 요소는 React로 작성되었으며 관리자 패널을 완전히 사용자 지정할 수 있습니다. AdminJS는 또한 관리자 패널 외부에서 사용하거나 다른 애플리케이션과 통합하는 데 사용할 수 있는 자체 REST API를 생성합니다. 지원되는 프레임워크가 많기 때문에 AdminJS 패널을 기존 Node.js 애플리케이션과 쉽게 통합할 수 있습니다. Express.js (@adminjs/express) Nest.js (@adminjs/nestjs) Hapi.js (@adminjs/hapi).. 2022. 11. 15.
FileReader) 파일 프리뷰 만들기 여러 파일을 올리는 글은 여기에 https://hancoco.tistory.com/155?category=1035202 [220331] multer) 비동기적으로 이미지 여러개 업로드하기 파일을 올리는 html input 코드 요청을 하기 전에 거치는 미들웨어 multer 미들웨어를 거치면서 어디에 어떻게 저장할지 같은 옵션들이 결정된다. //미들웨어 multer 설정, 객체로 변환해준다 const upload hancoco.tistory.com FileReader가 뭔지는 mdn에서는 이렇게 설명하는데 솔직히 뭐라고하는지 모르겠다. 대충 실질적으로 저장하지 않고 임시저장했다 치고 거기서 정보를 뽑아올 수 있게 만드는 용도인가봄. ( https://developer.mozilla.org/ko/docs/W.. 2022. 8. 15.
프로세스간 통신 프로세스 통신 개념 정리 네트워크에 연결된 모든 장치를 노드(Node)라고 한다. 이 중에서 네트워크 주소(IP주소)가 할당되어 있는 노드들을 호스트라고 한다. 한 호스트 내에는 여러 프로세스들이 존재한다. (앱, 프로그램, 어플리케이션, 소프트웨어들) 프로세스를 구별하기 위해 호스트 내부적으로 할당받은 번호를 포트(port)라고 한다. 호스트 내부에 있는 포트끼리 서로 데이터를 주고받음으로 데이터 교환이 일어난다. 이 프로세스간의 통신을 IPC라고 한다. 내부적으로 이루어지는 프로세스간 통신 외부 프로세스와 이루어지는 프로세스간 통신 = RPC 2022. 7. 7.
[220619] jsonwebtoken 라이브러리 사용방법 설치 & 세팅 $ npm install jsonwebtoken const jwt = require('jsonwebtoken'); jwt.sign = 토큰 생성 jwt.sign(payload, secretOrPrivateKey, [options, callback]) payload : 페이로드 값 secretOrPrivateKey : 시크릿키 또는 프라이빗키 = salt [options, callback] : 필요한 나머지 정보들을 모아서 만든 객체 (예 : 알고리즘, 유효시간, 발급자 정보...) 토큰 생성 : 실사용 예 const jwt = require('jsonwebtoken'); const secreatkey = 'saltRole'; const option = { algorithm: 'HS256',.. 2022. 6. 19.
[220331] multer) 비동기적으로 이미지 여러개 업로드하기 파일을 올리는 html input 코드 요청을 하기 전에 거치는 미들웨어 multer 미들웨어를 거치면서 어디에 어떻게 저장할지 같은 옵션들이 결정된다. //미들웨어 multer 설정, 객체로 변환해준다 const upload = multer({ // 저장할 공간을 지정해줌 storage: multer.diskStorage({ // 인자 3가지 : 요청, 저장할 파일명, 콜백함수 destination: (req, file, done) => { // 에러에 대한 처리, 저장할 디렉토리 지정 done(null, "public/img"); }, filename: (req, file, done) => { //파일명을 그냥 적용하면 무조건 그 파일명으로 저장됨 //= 덮어쓰기 저장될 위험성이 있음. 그래서 새로운.. 2022. 3. 31.
[220331] multer) 비동기적으로 이미지 1개 업로드하기 [ 원리 이해하기 ] 중요한건 왜 저렇게 주소를 사용하는지 알아야한다!!! 대충 주소를 때려박다보면 뭐라도 나오겠지-하지말고!!! 파일을 올리는 html input 코드 submit을 누르면 form에 적힌 백엔드 서버 4001로 post 요청을 보낸다. 파일 한개 업로드 요청을 하기 전에 거치는 미들웨어 multer 미들웨어를 거치면서 어디에 어떻게 저장할지 같은 옵션들이 결정된다. //미들웨어 multer 설정, 객체로 변환해준다 const upload = multer({ // 저장할 공간을 지정해줌 storage: multer.diskStorage({ // 인자 3가지 : 요청, 저장할 파일명, 콜백함수 destination: (req, file, done) => { // 에러에 대한 처리, 저장할.. 2022. 3. 31.
[220317] socket.io 설치 & 세팅 socket.io 설치 $ npm install socket.io socket.io 의 구조 Namespace ㄴ Room ㄴ Socket socket.io는 이런 구조로 이루어져있다. Namespace에 있는 Socket끼리 통신하는 개념이고, default-NameSpace을 따로 지정해주지 않으면 '/'가 된다. socket.io 세팅 원래 html 파일 header에 이 코드를 작성해야하는데, 나는 모든 정적파일을 public에서 찾도록 설정을 해놓은 상태다. 빼내려면 public 폴더를 빠져나가서 찾는 코드를 작성해야하는데 구찮아..... 그래서 CDN 코드를 사용하기로 함. (이게 ES6 모듈이라고한다. 몰랐음) ( socket.io 공식 홈페이지 : https://socket.io/docs/.. 2022. 3. 18.
[220317] websocket (웹소켓) 구현하기 / 채팅창 만들기 목록 1. websocket 사용환경 만들기 2. 요청/응답 코드 작성하기 3. websocket의 이벤트 4. string 형식으로 데이터를 주고받는 websocket 5. 채팅창 완성하기 외부 라이브러리 ws 설치하기 $npm install ws 라이브러리 가져와서 세팅하기 const webSocket = require('ws') 백엔드에서 요청을 받아주는 코드 작성하기 handshake를 만들고 Connection을 이루는곳까지 코드로 구현했다. //socket.js const webSocket = require('ws') module.exports = (server) =>{ // 클래스 문법이니까 new로 선언 const wss = new webSocket.Server({server}) //응답이.. 2022. 3. 18.
[220317] websocket (웹소켓) 개념 정리 기존 지식 정리 1. HTTP (HyperText Transfer Protocol)란? 인터넷에서 데이터를 주고받을 수 있는 프로토콜(규칙) HTTP 요청 (request) 웹 페이지를 열고 폼에 내용을 입력하면 웹 서버와 웹 브라우저가 데이터를 교환한다. 웹 브라우저는 데이터 헤더를 붙여 오픈할 웹페이지의 주소를 웹 서버에 요구한다. HTTP 응답 (response) 웹 페이지의 요청을 받은 웹 서버는 서버 정보 or 처리 결과를 나타내는 오류 코드와 메시지의 헤더를 웹 페이지 콘텐츠에 붙여 응답한다. 2. AJAX(Asynchronous Javascript And XML)란? 브라우저에서 url의 이동 없이(새로고침 없이) 서버에 요청하는 행위. 페이지 전체를 다시 작성하지 않고도 필요한 데이터만 받.. 2022. 3. 17.