코딩 일지

레파지토리에서 clone받아온 파일의 모듈을 깔고, 실행을 해야하는데 npm install 부터 실패했다....... 뭔 짓을 해도 아래의 에러가 계속해서 발생하였다. 미치는 줄 알았다. Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core babel도 지워보고 모듈을 깔았다 지웠다 반복했음에도 해결되지 않았다 --; 별의 별 짓을 다 해보면서 해결하게 됐는데, 안됐던 이유는 package.json에 다운로드한 모듈의 이름은 @babel/cli인데 열심히 npm uninstall babel-cli 를 하고 있었따 ^^; 본인이 설치한 라..

목차 -웹팩이란? -entry -output -loaders -plugins -mode -웹팩 설치 및 사용법 웹팩이란? 웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다. 모듈 번들러는 다음과 같은 장점이 존재한다. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다. 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 준다(예를 들면 typescript). 물론, 수 많은 자바스크립트 파일이 하나의 파일로 묶인다면 초기 로딩 속도가 커질 수 있으나, 웹팩에서는 ..

목차 - 자동로그인이 가능해지는 과정 - JWT 토큰 생성 코드 1. jwt.js 파일 - 토큰생성 2. server.js파일 - 서버 연결 및 토큰으로 로그인 3. auth.js 파일 - 사용자 인증 - JWT 만료 자동로그인이 가능해지는 과정 사용자 회원가입 시, 아이디와 비밀번호, 주소, 번호 등 여러 정보가 생성된다. 이 때 사용자의 비밀번호를 암호화 해서 Database에 저장한다. 나머지 정보도 같이 DB에 저장된다. 사용자가 로그인 시, 아이디와 비밀번호 입력한다. 사용자가 입력한 비밀번호를 암호화 한 후, DB의 암호화된 비밀번호와 비교한다. 일치하면 로그인 성공, 일치하지 않으면 로그인 실패. 로그인에 성공한다면 access_token을 사용자 컴퓨터(클라이언트)에 전송(f12 애플리케이..

목차 - 쿠키(Cookie)란? - 세션(Session)이란? - 쿠키와 세션의 차이 - 미들웨어란? - 라우팅이란? 쿠키란? HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다. HTTP에서 클라이언트의 상태 정보를 클라이언트의 PC에 저장하였다가 필요시 정보를 참조하거나 재사용할 수 있다. 쿠키 특징 이름, 값, 만료일(저장기간), 경로 정보로 구성되어 있다. 클라이언트에 총 300개의 쿠키를 저장할 수 있다. 하나의 도메인 당 20개의 쿠키를 가질 수 있다. 하나의 쿠키는 4KB(=4096byte)까지 저장 가능하다. 쿠키의 동작 순서 클라이언트가 페이지를 요청한다. (사용자가 웹사이트에 접근) 웹 서..

쿠키 https://bitkunst.tistory.com/entry/Nodejs-express-5-%EC%BF%A0%ED%82%A4cookie Node.js - express (5) 쿠키(cookie) 이번 포스팅에서는 쿠키(cookie)의 개념에 대해 알아보고자 한다. 쿠키란? 쿠키 구현 방식 쿠키 속성 쿠키(cookie)란 HTTP의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 bitkunst.tistory.com 오늘 로그인 페이지 만든 과정 아래의 순서대로 전개하겠다. 1. 메인 페이지에서 로그인버튼을 클릭하면, 아이디, 패스워드를 입력하는 로그인 페이지로 이동 2. 아이디, 패스워드를 입력하고 로그인 버튼을 눌러 제출을 하면, 1) "아이디" 님 환영..

send : 텍스트 자체로 응답을 준다.(돌려주는 행위) render : 파일을 가져다가 응답을 준다. 가장 먼저, npm install express nunjucks 해주는 것 잊지말기. 자바스크립트 코드 (HTML 코드는 자바스크립트 코드 끝나고 바로 작성하였다.) const express = require('express') const app = express() const nunjucks = require('nunjucks') app.set('view engine', 'html') nunjucks.configure('views',{ express:app, }) express 와 nunjucks를 외부파일에서 끌어와서 변수에 저장해준다. express 와 nunjucks를 세팅해준다. Node.js..

promise는 비동기 처리를 위해 있는 객체이다. 여기서 동기처리, 비동기처리란? 예를 들어, 집안일을 한다고 가정해보자. 동기식 : 세탁기를 돌리고, 빨래가 종료되면 그제서야 바닥에 청소기를 돌린다. 비동기식 : 세탁기를 돌려놓고, 빨래가 돌아가는 동안, 바닥 청소하고 설거지하다가 세탁기가 종료되면 세탁물을 꺼낸다. 즉, 비동기는 코드의 효율성을 극대화 할 수 있는 처리방식이다! 아래의 코드를 보자. setTimeout은 대표적인 비동기식 함수이다!! (일단, 구동은 하는데 백그라운드에 대기만 시켜놓고 작업이 끝나면 실행을 해준다.) const pr = new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve('hello promise'); },1000)..

nunjucks란? 템플릿 엔진 중 하나이다. 사용하는 이유, 첫번째 HTML 파일을 만들어주기 위해서이다. 예를들어 프로젝트한 내용을 express를 통해 넣으려고한다. send안에 넣어야하는데.. html 그 긴코드를 다 넣을 순 없다. (가독성이 떨어짐.) 즉, HTML이 하는 역할과 express가 하는 역할을 구별하기 위해 템플릿 엔진을 쓴다. 종류는 nunjucks, ejs, pug 등등 템플릿 엔진은 많으나, 지금은 numjucks 사용할 것이다. nunjucks 설치하기 비주얼스튜디오코드에서 사용할 폴더에! npm install nunjucks 를 해주어야한다. 터미널에서 cd로 원하는 폴더로 이동 후 (ls 쳤을 때 node_modules, package.json 등등 외부 라이브러리가 ..

목차 - 구조분해 할당(비구조 할당) - 객체 리터럴 - require - 자바스크립트 구동원리 - 랜덤함수 - promise 구조분해 할당 let obj = { a:10, b:20, c:{ d:30, } } let {a,b,c} = obj //문법이 이럼. //let a, b, c = obj 하면 a:10 b:20 ... 이런식으로 출력됨 console.log(a, b, c) //변수 명을 변경하려면? let {b:result} = obj //이렇게하면 b가 사라집니다. 변수명은 result가 됨. 객체리터럴 let a =10 let b = 20 let c = 30 //이녀석들을 한번에 다 객체에 담으려면? let obj2 = { a, b, c, } // let obj2 = { // a:a, // b:..

목차 - 웹서버 - host - http://localhost:3000 - 프로토콜 - get() - listen() - 포트 서버는 컴퓨터다. -웹서버 브라우저가 필요한 정보만 주면됨. 어디? 네트워크부분 (주소창) -- > 해당 웹서버에게 html css javascript 요청하는 것임. 웹서버( http라는 통신방법, 통신규격이다.) 브라우저 --요청--> 서버 브라우저 { 응답.send('Hello express') }) / host(포트까지포함) 하나는 host 하나만 말한다. 두번째 인자값은 콜백함수 넣는다. 콜백함수에도 인자값이 2개가 존재한다. 요청과 응답 주소창에 http://localhost:3000 치면 Hello express가 출력된다. app.get('/node',(요청, 응답..