목록전체 글 (265)
dukDukz
이전에 세팅 해놓은 Webpack을 재사용 해보자 1. 필요한 파일 복사 pacakge.json webapack.config.js 복사해오기 2. 작업할 폴더 안에 들어가서 npm install npm install 안될때 * 버전 오류일 가능성이 크다 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree 이런 오류가 난다면 npm install --save --legacy-peer-deps 이렇게 하면 된다. 3. index.html 만들기 root div 만들고 4. index.jsx 에서 기본 App Component 만들기 (import로 React 와 ReactDOM 가져오기) 5. npm run dev 하면 바로 ..
npm install -g create-react-app npx create-react-app reactsample [내가생성할폴더명] cd reactsample (폴더안으로 들어가자) npm start 하면 실행되면서 자동으로 페이지가 뜨게 된다 src/App.js 에서 코드 작성하면 된다. src/index.js 에서 쓸데없는 코드를 지워준다.
웹팩 webpack 여러개의 js 파일을 하나로 모아준다고 보면 된다. ex) 변수 이름이 겹치는 경우 더보기 let a = 10; let a = 0; console.log(a) 웹펙이 변수가 겹쳐도 둘 다 사용할 수 있게 변환해준다. -> 코드가 꼬이지 않도록 해주고 모든 브라우저에서 사용 가능하도록 해준다. * 여러파일을 쪼개 놓은걸 합쳐준다? - 왜 쪼개지 ? 협업, 코드 재활용 위해서 -> 파일을 엄청 쪼개놓고 웹펙으로 합쳐서 한 파일로 만들어서 퉁치겠다 * 웹팩이 어떻게 구동되는가? node js 환경에서 돌아간다. 코드를 짤 필요는 없지만 설정값이 좀 많다. 웹팩을 사용하기 위해서는 하나의 js 파일만 있으면 됨 환경설정 값만 잘 알고 있으면 된다. CRA create react app? 그 ..
1. 로컬 로그인 파일 별 설명 jwt.js * 로그인 할 때 AccessToken을 만드는 jwt.js - userid와 username을 담아서 토큰을 생성했다. (후에 userid와 username이 필요하기 때문에) crypto 암호화 하는 패키지를 다운받아야 한다 - npm install crypto env .env : 두번째 인자값을 숨긴다. 토큰 만드는 부분의 상세 설명 참고 2021.05.27 - [수업] - 21.05.27 jwt 토큰 생성하기 (암호화 하기) 21.05.27 jwt 토큰 생성하기 (암호화 하기) 이 사진을 참고해서 header, payload, verify signature 부분에 어떤걸 넣어야 할지 체크해보자 token 생성의 전체 코드이다. createtoken.js..
기본 세팅을 마치고 (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('/..