본문 바로가기
반응형

Welcome !

 (441)
[JavaScript] 이메일 주소 유효성 검사 JavaScript 로 이메일 주소 유효성 검사하기 JavaScript 의 이메일 유효성 검사 두 가지 정규식 표현 방법 - var pattern = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; var pattern = new RegExp(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i); var pattern = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/; var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-..
[JavaScript] IntersectionObserver 편리한 스크롤 이벤트 scroll event 500x 500px 의 4개 div 마지막 div에 fade in scroll event 주기 let winH = window.innerHeight; - 윈도우의 높이 (보여지고 있는 창의 height = ex 500px;) let scrollY = window.scrollY; - 스크롤의 값 (스크롤이 움지이지않은 상태는 0 ) let posFromTop = item4.getBoundingClientRect().top; (상대좌표 값 - 스크롤을 내릴 수록 줄어듬!) - 현재 위치(최상단)에서 적용할div 최상단 까지의 거리 - 현재 창의 최 상단으로부터 내가 스크롤 이벤트 주려는 div의 최상단 = 1500 let absolutePos = scrollY + posFromRop; - item 4의 절대..
[ Google API 최신 ] http://localhost로 구글 로그인 로그아웃 API 사용하기 JavaScript node.js 1. Google Cloud Platform 에 들어간다. https://console.cloud.google.com/apis/dashboard?hl=ko&project=neat-vent-317002&folder=&organizationId= Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 2. New Project 를 만든다 3. 라이브러리 - Google+ API 를 받는다. 4. OAuth consent screen (OAuth 동의화면) 들어가 Application name 지정 --> 바로 Save 확인 누른다. 5. Credentials(사용자 인증 정보) 에..
[JavaScript] scrollHeight, ScrollTop, ClientHeight 차이 JavaScript scrollHeight, ScrollTop, ClientHeight 차이
[JavaScript 채팅창] div 스크롤 자동으로 내려가게 만드는 방법 JavaScript 채팅창 구현 시 필요한 div 스크롤 자동으로 내려가게 만드는 방법 1) 기본 코드 소스 let chat = document.querySelector('#chat'); chat.scrollTop = chat.scrollHeight; ->chat 이라는 div가 채팅 창이 된다. 2) 예시 html JavaScript function send() { const msg = document.querySelector('#msg'); if (msg.value == '') { return; } else { socket.emit('send', msg.value); msgAdd(msg.value, 'me'); msg.value = ''; let chat = document.querySelector(..
[64~68일차] 20210613~17 apple clone 팀프로젝트 6일차 6일차 오늘 작업 1. 채팅 / 관리자 채팅 연결까지 확인 (담주 월) 채팅 길어지면 스크롤 이벤트 ! 채팅value 없으면 alert - 질문 안읽음 표시 엔터치면 채팅이 보내지게 2. join 메일 주소 유효한지 확인하는거 ! + join 시 입력창 모든 제어 추가 3. DB 구조 다시 파악하기 ! - 로그인 시 cookie 값 넣어서 장바구니 기능 추가 4. API 카카오 로그인 추가 / 네이버 로그인 추가 / 질문 1. chat.dataset.value를 변수에 담아서 하면 +=1이 안되는 이유 2. 채팅value 없으면 alert 3. 팝업창에서 다시 redirect to login page 4. join.js DB 첫줄 REST API -> 다시 공부 간략한 약속들... 어떤 형식으로 ..
[59~63일차]20210607-11 팀프로젝트 1주차 팀 이름 : 서영세스메이커 오늘 할일: 1. 웹사이트 정하기 https://www.apple.com/iphone-12/ 2. 할일 나누기 3. DB tables, fields 정하기 database name: teample - users 정보 fields userid , userpw , username, image, mobile , address , email , register_date - items (상품을 뿌리는) item_serial_number, item_name, item_price , item_image, item_size, item_color, item_capacity, - buy (관계형 DB, foreign key 2번 ) - 배송할 때 userid, item_serial_number,..
[58일차 복습] mysql table 을 sequelize auto 사용해서 JavaScript로 자동으로 가져오기 / 데이터베이스 테이블 sequelize로 옮기기 mysql 에 기생성된 database, tables를 sequelize 사용해서 js로 가져오기 1. 기본 server.js 세팅 $npm init $npm i express server.js const express = require('express'); const app = express(); app.get('/',(res,req)=>{ res.send('d'); }) app.listen(3000,()=>{ console.log('server start port : 3000') }) 2. sequelize 다운/ 세팅 / 코드작성 / db연결 확인 $npm i sequelize mysql2 sequelize-cli $npx sequelize init sequelize - > 클래스 사용 패키지 my..
[mysql] Please install mysql2 package manually ERROR 에러처리 방법 sequelize-auto 명령어 실행 오류로 $sequelize-auto -o"./models" -d class -h localhost -u root -p 3306 -x root -e mysql $npm install -g sequelize-auto global로 설치 후 $npx sequelize-auto -o "./models" -d class -h localhost -u root -p 3306 -x [비번] -e mysql 이렇게 명령 실행을 했는데 [ERROR] Please install mysql2 package manually 에러가 났다. mysql2 도 이미 깔아주었는데 수동으로 다시 설치하라니 ??? 오류 해결법 찾아보니 매우 간단했다! 해결법 $npm install -g mysql2 ..
[57일차 복습]mysql foreign key 외래키 설정/ left join / union / 특정 field 값 가져오기 mysql promt 창에서 create database class3; 생성 HeidiSQL 들어가서 비밀번호 입력 / 방금 만든 'class3' 클릭 1을 field로 만들어서 보여줄게 (근데 field명이 없어서 data 값 ==1을 field명으로 만듬) select 1 as 'Number' -> 1이라는 data를 Number라는 field 명으로 보여줄게 테이블 2개 더 만들기 CREATE TABLE skill( curr_id INT NOT NULL, item_id INT NOT NULL )CHARACTER SET UTF8 collate UTF8_GENERAL_CI; CREATE TABLE skill_item( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, NAM..
[58일차]20210604 관리자페이지 / sequelize table JS로 가져오기 / sequelize left join 관리자 페이지 - 보통 url 끝에 adm / admin 을 쳐서 들어감 -> 관리자 로그인 페이지 회원가입할 때 등급을 나눠서 구분 - 게시판 생성관리 / 그룹관리 - 복잡함 - 관리자페이지는 기능만 구현되면 되는 주의 ( 안보이니까) 팝업 리스트까 쭉 있음 - 팝업db fields 메인페이지에있는 이미지도 db에 담아놓고 (사진 이름으로) -> 내용 숨김, 보임, 등으로 구분 게시판 1. 공지사항 2. 게시판 3. 자유게시판 이 있다면 DB에 3개를 만드는 방법이 있고 (사용자가 많지않은 경우 굳이 3개 따로 만드는건 비효율적) board 라는 테이블에 세가지 내용을 다 담기 field값 하나 추가해서 구분하도록 (ex) url) 공지사항 : notice / 게시판 : board / 자유게시판 : f..
[57일차]20210603 MariaDB mysql table3개 만들어서 연결하기 / ㅣleft JOIN 프로젝트 내용 사이트 리뉴얼 로그인 = jwt 활용 카카오 로그인 네이버 로그인 구글 로그인 게시판 기능 DB 채팅 (1:관리자) 관리자페이지 팝업관리 * DB에 내용 넣어서 뿌려주기 (sub 페이지를 하나하나html 으로 하기보단) 반응형 (모바일) 발표 : 어떤 기능을 어떻게 넣었고 작업하는 순서 내가 만드려는 사이트의 페이지가 몇개가 있는지 확인 (페이지 개수) - url port 값들이 얼마나 있는지 디자인 레이아웃 (페이지마다 공통의 레이아웃 부터 ) DB설계 상품등록한 DB 상품 리스트들을 쭉 뿌리기 (게시판과 똑같음) https://gitmind.com/kr/ GitMind - 무료 온라인 마인드 맵 도구 GitMind는 브레인 스토밍, 프로젝트 계획, 개발, 행동 및 기타 창의적인 작업을위..
[56일차 복습] Javascript websocket 채팅 구현하기 / 자바스크립트 웹소켓 node.js express 채팅 / 채팅 안읽음 표시 구현 로그인을 한 사람에게만 채팅 가능하도록 만들기 -> auth.js 미들웨어를 추가 server.js - auth 추가 app.get('/chat', auth, (req, res) => { res.render('chat.html') }) auth.js - res.redirect 를 -> res.json으로 바꾸기 토큰이 없으면 (로그인이 안되었으면 ) -> res 응답을 json 으로 보낸다 {result:false, msg:'로그인이 필요합니다'} 라는 객체를 (요 객체는 express가 자동으로 String으로 변환해서 보내준다.) let {AccessToken} = req.cookies // 클라이언트의 cookie.accesstoken if(AccessToken == undefined){ conso..
[56일차]20210602 Javascript websocket 채팅구현하기 / 자바스크립트 웹소켓 node.js express 채팅 / 채팅 안읽음 표시 구현 로그인을 한 사람에게만 채팅가능하도록 만들기 -> 미들웨어 auth.js - 토큰값없을 경우 저 버튼이 실행되지 않도록 server.js - auth 추가 app.get('/chat',auth, (req,res)=>{ res.render('chat.html') }) server on -> check -> consol -> '로그인을 진행해주세요' auth.js json 타입으로 값을 넘겨주고 싶음/ 어떻게 안되었는지 text를 보내기 if(AccessToken == undefined){ console.log('로그인을 진행해주세요') //res.redirect('/?msg=로그인을 진행해주세요') res.json({result:false, msg:'로그인이 필요합니다'}) return } 저 json은 ..
[55일차]20210601 Fetch new Promise .then.catch 연습 DB port 건드려서 오류남. 같은 port3000번 이란 겹쳐서,, DB 도 포트가잇군.. DB도 server 래 ! ㄷr른 ㅅ ㅓㅓ버 mysql - 기본 port 3306 번 오늘 배운거 저번주말 숙제에 합쳐봐ㅏ = 숙 ㅈ ㅔ index.html 추가 채팅 .. . . . . // 여기에 JS 파일 따로 추가 -> 코드 깔끔하게 server.js app.get('/chat',(req,res)=>{ res.send('hhh') }) send : body 내용을 생성해서 줌 public- js - chat.js 파일 만들기 const chatBtn=document.querySelector('#chatBtn'); const chatRoom = document.querySelector('#chatRoom'..
[54일차 복습] Websocket, 웹소켓 연결하기 + Javascript, Node.js ,express 웹소켓 탄생 이유 및 특징 : https://blckchainetc.tistory.com/206 [http 프로토콜 vs 웹소켓 프로토콜] Websocket, 웹소켓이란? 채팅, 게임, 주식 차트 등의 실시간 통신이 필요한 서비스를 구현하려면 HTTP프로토콜이 아닌 웹소켓 프로토콜을 사용하는 것이 좋다. http는 요청한대로 응답을 보내주는 단순한 프로코톨로 문서 blckchainetc.tistory.com WebSocket , 웹소켓 1. Javascript, node.js, express 기본 세팅 $npm init $npm i express nunjucks server.js 파일, views폴더 - index.html 파일 생성 및 코드 작성 server.js const express = requi..
[54일차]20210531 WebSocket, 웹소켓 연결하기 connection, connect, send, call / Javascript , node.js 지난 주말 과제 코드리뷰 crypto.js 1. createHmac부분 원본 const crypto = require('crypto'); function createPW(userpw){ //createHmac 두번째 인자값 = any String like salt 암호화필요 const cryptoPassword = crypto.createHmac('sha256',Buffer.from(userpw).toString()) .digest('base64') .replace('==','').replace('=',''); return cryptoPassword; } module.exports=createPW; 수정ok const crypto = require('crypto'); function createPW(us..
[JavaScript] Mysql2 로 DB data 비동기로 가져오기 예제 mysql2 가 아닌 mysql 을 쓴 server.js 코드 const express = require('express'); const nunjucks = require('nunjucks'); const bodyParser = require('body-parser'); const tokenKey = require('./JWT'); const cryptoPW=require('./cryptoPW') const auth = require('./middleware/auth'); const mysql = require('mysql') const session=require('express-session'); const app = express(); nunjucks.configure('views', { expre..
[JavaScript] .crypto.createHmac 'sha256' 해시 알고리즘 암호화, 복호화 / 자바스크립트, node.js, JWT 토큰 JavaScript Node.js | crypto.createHmac() crypto.createHmac() 매서드는 Hmac 객체를 생성하는데 사용된다. 기본 구조 crypto.createHmac(algorithm, key, options) 첫 번째 인자값 : 알고리즘 방식 ex) sha256, sha512 두 번째 인자값 : Hmac key값 (암호 HMAC hash 를 만드는데 사용) It returns string, Buffer, TypedArray, DataView or KEyObject. 세 번째 인자값 : (Optional) - stream behavior 를 컨트롤 한다. It returns an object. 예시 const crypto = require('crypto'); functio..
[http 프로토콜 vs 웹소켓 프로토콜] Websocket, 웹소켓이란? 채팅, 게임, 주식 차트 등의 실시간 통신이 필요한 서비스를 구현하려면 HTTP프로토콜이 아닌 웹소켓 프로토콜을 사용하는 것이 좋다. http는 요청한대로 응답을 보내주는 단순한 프로코톨로 문서 전달에 굉장히 효율적이어서 오늘날 가장 많이 사용된다. 하지만 문서 전달 이상의 것 ex. 게임, 채팅 등 실시간 통신이 필요한 것들이 생기게 되었고 http를 사용해서는 계속 메세지를 받기만 하는 상황을 구현하기가 힘들게 되었다. ( 1res => 1req ) 또 http 프로토콜은 매 요청, 응답마다 연결을 수립하고 끊기 때문에 비효율적이었다. ==> 웹소켓 탄생 웹소켓 프로토콜이란? 실시간 양방향 통신을 지원하며 한번 연결이 수립되면 클라이언트와 서버 모두 자유롭게 데이터를 보낼 수 있다. 채팅과 같은 연속..
[JavaScript / Node.js] sha256 해시 알고리즘 암호화, 검증, 복호화 JWT 토큰 사용 정리 SHA256 - 안전한 해시 알고리즘 by NSA - Secure Hash Algorithm 중 하나 - 32 바이트 또는 64 바이트 워드 사용 - 내부 상태 크기 : 256, 블록 크기 : 512, 길이 한계 64, 워드 크기 : 32, 과정수 64, 사용연산 +, and, or, xor, shr, rotr https://ko.wikipedia.org/wiki/SHA SHA - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. SHA(Secure Hash Algorithm, 안전한 해시 알고리즘) 함수들은 서로 관련된 암호학적 해시 함수들의 모음이다. 이들 함수는 미국 국가안보국(NSA)이 1993년에 처음으로 설 ko.wikipedia.org JavaScript, node.js 로 ..
[53일차 복습] JWT 예제 토큰 sha256 암호화, 복호화, 검증하기 with JavaScript, Node.js 처음부터 다시 1. 기본 세팅 $npm init $npm i express nunjucks body-parser cookie cookie-parser (crypto 추후 추가) server.js 와 파일 구조 views = index.html 로그인 로그인 페이지 로그인 카카오로그인 회원가입 css, js 잘 연결되었는지 확인 -> layerPopup 안보이게 하고 또 다른 class 명 추가해서 open .layerPopup{ display:none; position:fixed; top:0; width:100%; height:100%; background:#000000a6; } .layerPopup.open{ display:block; } 2. 처음 load 되었을 때 함수 init 실행되게 하기 ->..
[53일차] 20210528 JWT token 암호화 , 검증 예제 Node.js 어제 만든 토큰을 인증키 검증을 통해 맞다면 json 64비트로 만든걸 글자형으로 다시 만들기 $npm i nunjucks + 코드 작성 const nunjucks=require('nunjucks'); nunjucks.configure('views',{ express:app, }) app.set('view engine', 'html'); app.get('/', (req,res)=>{ res.render('index.html') }) 로그인 버튼 누르면 로그인 팝업 나오게 만들기 (window.open 말고 layer popup 으로!) css,JS 를 사용해보기 static 정적파일 사용할 수 있게 세팅하기 app.use(express.static('public')); 파일 구조 views - index..
[52일차 복습] Javascript node.js [JWT] token 토큰 암호화해서 브라우저 cookie에 저장하기 고객 정보를 저장하는 DB와 연결된 Server. Server 가 여러개가 되면 Client가 매번 각기 다른 Server에 재로그인을 해서 request를 보내야 server가 해당 Client를 식별할 수있다. 이러한 문제 해결 위해 브라우저의 쿠키에 해당 정보를 암호화해서 넣어놓고 Client가 어떤 Server를 사용하더라도 편리하게 JWT 이 생김 JWT (Json Web Token) https://jwt.io/ JWT.IO JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. jwt.io 전체적인 흐름 : 1. Clinet ----- id,..
반응형

티스토리툴바