dukDukz

웹팩 webpack 여러개의 js 파일을 하나로 모아준다고 보면 된다. ex) 변수 이름이 겹치는 경우 더보기 let a = 10; let a = 0; console.log(a) 웹펙이 변수가 겹쳐도 둘 다 사용할 수 있게 변환해준다. -> 코드가 꼬이지 않도록 해주고 모든 브라우저에서 사용 가능하도록 해준다. * 여러파일을 쪼개 놓은걸 합쳐준다? - 왜 쪼개지 ? 협업, 코드 재활용 위해서 -> 파일을 엄청 쪼개놓고 웹펙으로 합쳐서 한 파일로 만들어서 퉁치겠다 * 웹팩이 어떻게 구동되는가? node js 환경에서 돌아간다. 코드를 짤 필요는 없지만 설정값이 좀 많다. 웹팩을 사용하기 위해서는 하나의 js 파일만 있으면 됨 환경설정 값만 잘 알고 있으면 된다. CRA create react app? 그 ..

기본 세팅을 마치고 (npm i express) 1. 시퀄라이즈 세팅 npm i sequelize 클래스 사용 위한 패키지 npm i mysql2 DB 접속을 위한 패키지 npm i sequelize-cli npx를 사용하기 위한 패키지 (*폴더 만들어줘야 하니까) npx sequelize init localhost -u "root" -p "port" -x "password" -e "mysql" [순서] 더보기 npm install sequelize-auto sequelize-auto -o "./models" -d class -h "localhost" -u "root" -p "3306" -x "root" -e mysql 이게 안되면 npm install -g sequelize-auto npx sequel..

class 라는 db 안에 있는 테이블들 내가 사용하는건 curriculum skill curr_id = 4 인것만 골라서 그걸 A 라고 부른다. skill_item 얘는 B 라고 부른다 SELECT B.name,B.type FROM (SELECT * FROM skill WHERE curr_id = 4) AS A LEFT JOIN skill_item AS B ON A.item_id = B.id; B의 name 과 type 만 가져오는데 A의 item_id 와 B의 id 가 같은 것만 가져온다. A 옆에 B를 붙여라 결과가 이렇게 나온다.

우선 소켓은 기본적으로 두가지 함수를 가지고 있다. 클라이언트, 서버 둘 다 포함된다. socket.on(); : 데이터를 받는 함수 socket.emit(); : 데이터를 보내는 함수 여기서 저 두개의 함수 안에 쓰이는 'send' , 'call' 은 아무 이름으로나 정해주면 된다. 보내는 부분, 받는 부분이 서로 send / call 로 일치하기만 하면 된다. server.js 기본 설정 부분 part 1 const express = require('express'); const nunjucks = require('nunjucks'); const app = express(); const socket = require('socket.io'); const http = require('http') cons..

전체 코드 더보기 server.js const express = require('express'); const app = express(); const socket = require('socket.io'); const http = require('http') const server = http.createServer(app); const io = socket(server); const nunjucks = require('nunjucks'); app.use(express.static('./node_modules/socket.io/client-dist')) app.set('view engine','html'); nunjucks.configure('views',{ express:app }) app.get('/..

전체 구조 메인페이지에서 로그인 시도 로그인 완료 되면 토큰 생성 - user info 에서 id 확인가능 로그인 실패하면 재시도 요청 로그인 시간 만료되면 쿠키 없어짐 - 로그인 만료처리됨 폴더 트리 auth.js : 로그인 검증할때 토큰이 유효한지 인증하는 파트이다. main.js : html의 동작을 제어한다 .env : 두번째 인자값을 숨긴다. jwt.js : token 을 생성해주는 역할 1. html 과 css 먼저 꾸며주자 더보기 main.html 로그인 회원정보 보기 로그인페이지 로그인 카카오로그인 아직도 회원이 아니세요? 회원가입 main.css *{ margin: 0; padding: 0; } .layerPopup{ display: none; position: fixed; top: 0;..

전체 코드 더보기 createtoken.js const crypto = require('crypto') function createtoken() { let header = { "alg": "HS256", "typ": "JWT" } let encode_header = Buffer.from(JSON.stringify(header)) .toString('base64') .replace("=", ''); let payload = { "sub": "1234567890", "name": "John Doe", "user": "jjun97", "iat": 1516239022 } let encode_payload = Buffer.from(JSON.stringify(payload)) .toString('base64') ...

이 사진을 참고해서 header, payload, verify signature 부분에 어떤걸 넣어야 할지 체크해보자 token 생성의 전체 코드이다. createtoken.js const crypto = require('crypto') function createtoken() { let header = { "alg": "HS256", "typ": "JWT" } let encode_header = Buffer.from(JSON.stringify(header)) .toString('base64') .replace("=", ''); let payload = { "sub": "1234567890", "name": "John Doe", "user": "jjun97", "iat": 1516239022 } let ..