대기업을 향한 디벨롭 블로그

passport를 사용하여 세션 , 쿠키 같은 로그인했을때의 정보를 가지고 클라이언트에서 자동으로 로그인되는 그런 기능들을 해줄 수 있다. 그냥 여권을 가지고있다고 생각하면된다. 손쉽게 처리를 할 수 있으니 편리하고 좋다. 그리고 다양한 SNS의 계정으로 로그인 해주는 좋은 모듈이다. 일단 공식사이트를 올려주겠다. https://www.passportjs.org/ Passport.js Simple, unobtrusive authentication for Node.js www.passportjs.org 우리는 local방식으로 로그인을 하는걸 구현할거다. local이란 DB에서 대조하여 로그인을 시켜주는 방식이다. 다른 방식으론 Social Authentication가 있다. 이것은 소셜 넷웤 인증방식이다..

bcrypt 공식 사이트는 여기서 볼 수 있다. https://www.npmjs.com/package/bcrypt bcrypt A bcrypt library for NodeJS.. Latest version: 5.0.1, last published: 2 years ago. Start using bcrypt in your project by running `npm i bcrypt`. There are 3480 other projects in the npm registry using bcrypt. www.npmjs.com bcrypt는 암호를 해시하는데 사용하는 라이브러리다. bcrypt는 강력하고 여러곳에서 사용되고있다. 코드를 통해 사용법을 익혀보자. 먼저 bcrypt를 다운로드 해주어야된다 . npm ..

nodemailer 모듈을 이용하여 이메일을 보내볼거다. https://nodemailer.com/about/ Nodemailer :: Nodemailer Nodemailer Nodemailer is a module for Node.js applications to allow easy as cake email sending. The project got started back in 2010 when there was no sane option to send email messages, today it is the solution most Node.js users turn to by default. npm i nodemailer.com nodemailer공식 사이트이다. 이 문서를 참고하여 포스팅한다. 일..

concurrently라이브러리를 사용하여 따로따로 실행하던 서버와 클라이언트를 동시에 실행할 수 있게 만들어볼거다. 사용해보니 굉장히 편하다. 먼저 나의 폴더구조이다. 한폴더에 클라이언트폴더가 안에있고 겉에는 서버실행파일인 server.js가 있다. npm install concurrently npm을 사용하여 concurrently를 다운받아주자. (맨 상단 폴더에서 해주어야된다) 그런다음 상위폴더에있는 package.json에 들어가서 스크립트를 추가해주어야된다. "backend" : "nodemon server.js", "frontend" : "npm run start --prefix client", "dev": "concurrently \"npm run backend\" \"npm run sta..

nodejs로 서버를 만들면서 DB가 아닌 JSON파일에 데이터를 저장해볼거다. 일단 기본적인 셋팅을 해주겠다. // index.js const express = require('express'); const app = express(); app.listen(5001 , ()=>{ console.log('sercer oON '); }) 정말 간단하게 fs를 테스트 해볼거라 express를 가져와 서버를 5001번 포트에 열어준다. 그리고 const fs = require('fs'); fs를 불러와준다. fs는 FileSystem의 약자이다. File의 관련된 모듈이라고 생각하면된다. 그리고 data.json파일을 폴더에 추가해주자. //data.json { "name" : "mang", "age" : "..

react-query라는 좋은 기술이 있다. react-query는 쉽게말해보겠다. 일단 리액트의 좋은장점인 데이터와 UI의 일치가 편리하다는점이있다. 데이터는 업데이트가이미 되었지만 UI에서는 업데이트되기전의 데이터가 나와있다는거다(새로고침하기전에). 서버와 클라이언트에서도 이런일이 번번히있다. 서버에서의 데이터와 클라이언트에서의 보이는 데이터가 다를거다. react-query는 그런문제점을 해결해준다. 예시) 암호화폐거래소가있다고 치자 , 이 암호화폐는 쉬도없이 값이바뀐다. 그럼 서버에서 그 바뀐값이 클라이언트에게 뿌려지는데 클라이언트는 쉴새없이 새로고침을 하여 서버에게 요청하기는 어렵다. react-query는 실시간으로 바뀌는 서버의값을 위해 알아서 요청을 보내고 , 클라이언트의 UI도 바꿔준다...

FileReader를 사용하여 이미지를 읽어와 미리보기를 띄어보겠다. https://mhypro.tistory.com/64 이미지 미리보기 - FileReader 객체 사용하기(공식문서 파헤치기) FileReader 객체는 파일을 읽어들어와주는 API이며 , 읽어드린파일 데이터는 개발자가 사용할 수 있다. 일단 공식문서를 토대로 정리할거니 공식문서를 올리겠다. https://developer.mozilla.org/ko/docs/Web/API mhypro.tistory.com 이 포스팅을 이어서 시작하겠다. 일단 전체소스코드 import React, { useState } from 'react'; function App() { let [newfile , setNewfile] = useState([]) co..

FileReader 객체는 파일을 읽어들어와주는 API이며 , 읽어드린파일 데이터는 개발자가 사용할 수 있다. 일단 공식문서를 토대로 정리할거니 공식문서를 올리겠다. https://developer.mozilla.org/ko/docs/Web/API/FileReader FileReader - Web API | MDN FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 developer.mozilla.org 일단 파일을 넣어야되기때문에 웹에 input태그를 이용해서 띄어보겠다. {fileOn(e)}}/> input태그의 속성은 type은file , m..

참고용사이트 https://ko.javascript.info/localstorage localStorage와 sessionStorage ko.javascript.info 브라우저에 데이터를 저장할 수 있는 LocalStorage를 알아보겠습니다. 브라우저에 데이터를 저장할 수 있는 객체는 2가지가있는데 하나는 sessionStorage와 우리가 배워볼 localStorage가 있다. 이 두가지를 웹 스토리지 객체라고 부른다. 먼저 localStorae의 특징을 알아보자. 데이터를 저장할때의 자료형은 '문자열'데이터만 저장할 수 있다. 데이터를 새로고침하여도 데이터가 남아있다. (브라우저를 닫았다 열어도 없어지지않음) 웹 스토리지객체는 네트워크 요청시 서버로 전송되지않는다. 최소 2MB이상의 객체를 저장할..

Redux Toolkit 저번 1,2에서 slice만들고 state변경함수 만들어보고 해보았다. 이번에는 state변경함수에 파라미터를 전달하는걸 해보겠다. 일단 예제를 만들것이기때문에 셋팅해주겠다. //store.js import { configureStore, createSlice } from "@reduxjs/toolkit"; let todo = createSlice({ name : 'todo', initialState : [{id : 0 , title : '할일이없습니다', complete : false}] }) export default configureStore({ reducer:{ todo : todo.reducer } }) store.js를 만들어주고 todo라는 slice를 하나 만들어 ..