Frameworks/Node.js

bcrypt란? hash 함수를 이용해 정보를 암호화 할 수 있도록 해주는 Node.js 패키지 bcrypt의 필요성 MD5 방식의 해시함수는 빠르기는 하나, 보안이 약해 해킹에 취약하다. SHA 방식의 해시함수는 안전하기는 하나, 암호화하는데 시간이 너무 오래 걸린다. 공유 메시지 ( salt )를 입력값에 추가하는 방식은 무차별 대입 공격을 막아주지는 못한다. bcrypt는 사용자가 보안도와 속도를 유동적으로 정할 수 있다. 해시 함수 별 성능 비교 해시 함수 MD5 bcrypt SHA 보안 약함 중간 강함 속도 빠름 중간 느림 bcrypt 설치하기 npm i bcrypt bcrypt 사용법 비밀번호 만들고 암호화 하기 //index.js // bcrypt 불러오기 - commonjs const bc..

styled-reset 이란? styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지 normalize.css와 동일한 역할 styled-reset 설치하기 npm i styled-reset styled-reset 사용하기 //App.js // 글로벌 스타일 만들기 위한 createGlobalStyle 불러오기 import { createGlobalStyle } from "styled-components"; // 스타일 초기화를 위한 reset 불러오기 import reset from "styled-reset"; // 글로벌 스타일 만들기, reset 사용해서 스타일 초기화하기 const GlobalStyles = createGlob..

styled-normalize란? styled-components에서, reset.css, normalized.css의 역할을 해주는 Node.js 패키지 styled-components란? [React] styled-components란? styled-components란? React.js 안에서 스타일(CSS)을 바꿀 수 있게 해주는 Node.js 패키지 React란? [Node.js] React.js 란? / React 사용법 ( create-react-app ) React란? 웹/앱의 사용자 조작환경(UI)를 만들.. defineall.tistory.com normalized.css란? [CSS] reset.css, Nomarlized.css란? / 사용법 reset.css란? 웹브라우저마다 기본..

Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com yarn이란? 다운로드 한 모든 패키지를 캐시하여, 동일한 패키지를 다시 다운로드 받을 필요가 없게 만드는 패키지 관리자 yarn의 필요성 여러 작업을 동시에 수행하여, 설치 속도가 빠르다 여러 설치 환경에서 같은 동작을 수행하여, 안정적이다. yarn 설치 npm i yarn yarn 사용법 패키지 설치하기 yarn add 패키지 삭제하기 yarn remove package.json에 입력된 패키지 설치하기 yarn

Express.js 란? Node.js 웹 프레임워크 중의 하나로, 여러가지 기능을 가지고 있다. ( HTTP 요청에 따른 라우팅 기능이 대표적 ) HTTP 란? [웹/WEB] HTML에서 서버로 데이터 보내기 ( HTTP 요청이란? ) 1. GET방식 "주소?데이터명=데이터" 주소란에 담아서 보냄, 보안에 취약, 즉석으로 보낼때 편함, 데이터 크기 제한 있음 ( URL 끝에 ?과 함께 이름과 값을 보내는 요청 파라미터, 여러개의 데이터를 defineall.tistory.com 라우팅이란? [프로그래밍] 라우팅이란? 라우팅이란? 프로그램의 목적지를 설정해주는 것! // ex naver.com 주소로 접속하면, naver.html을 보여준다. daum.net 주소로 접속하면, daum.html을 보여준다...

morgan 이란? Node.js 웹 서버에 들어오는 요청을, 명령창(shell)에 출력해주는 Node.js 패키지 morgan 설치 npm i morgan morgan 사용해서 express 서버의 로그 출력하기 //index.js ( babel을 사용하지 않는 분은 es5 코드로 바꾸어서 작성하셔야 합니다. ) // express 서버 모듈, morgan 로거 모듈 추가 import express from "express"; import logger from "morgan"; // express 서버 만들기 const app = express(); // express 서버에 "tiny" 로거 추가하기 app.use(logger("tiny")); // 만들어진 서버 실행하기 app.listen(() =..

토큰이란? 서버가, 각각의 클라이언트를 누군지 정확히 구별할 수 있도록, 유니크한 정보를 담은 암호화 데이터. 유저 구별이 가능해야, 유저의 권한에 맞는 정확한 기능을 응답할 수 있다. ( 사용자 구분 및 정보 유출방지 ) 토큰의 특징, 용도 사용자에 대한 정보를 암호화해서 브라우저에 저장하고, 웹페이지 접속시, 저장된 정보를 가져와 사용자마다 다른 화면을 보여주는 용도로 사용할 수 있다. 앱이 서버에 토큰 전송, 서버가 이 토큰을 사용해 토큰 값 응답. 토큰 사용방식 1. 사용자가 서버에 로그인 한다. 2. 서버가 로그인 정보를 받아서 토큰을 만든다. 3. 사용자는 브라우저에서 토큰을 받아 임시저장한다. 4. 사용자가 토큰과 함께 서버에 요청을 보낸다. 5. 서버는 자신이 만든 토큰이 맞는지 확인하고,..

dotenv란? Node.js 서버의 포트, DB 관련정보등 다양한 정보를, .env 파일로 관리할 수 있게 해주는 Node.js 패키지 dotenv의 필요성 Node.js 서버를 만들때, github나, 공유되서는 안되는 중요한 정보들을 사용할 때가 있는데, 이럴때 .env를 사용하면, 기존의 기능을 유지하면서, 정보들을 공유하지 않도록 할 수 있다. dotenv 설치 npm install dotenv dotenv 파일 만들기 // .env PORT=4000 HOST=localhost USER=root PASSWORD=password javascript에서 dotenv 파일 관리하기 1. // index.js /* Node.js 서버의 설정(환경변수)을 받아오기 위한 dotenv 모듈 불러오기 ***꼭..

App.svelte on:keydown={(e) = {e.key === "Enter" && createTodo()}}/> Create Todo {#each $todos as todo} {/each} Todo.svelte {#if isEdit} on:keydown={(e) = {e.key === 'Enter' && updateTodo()}}/> OK Cancle {:else} {todo.title} Edit Delete {/if} 중요한 내용 writable 함수는 호출되자마자, 스토어 공간을 만들고 그곳에 변수를 저장한다. // 함수 호출 let todos = writable([]) // 스토어 공간 let todos = []