본문 바로가기

블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기

(184)

[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..

[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 / 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,..

[52일차]20210527 JWT token 토큰 만들어 브라우저 cookie에 저장하기 server1이 꽉차면 server2로 가게됨 (여기서 client는 재로그인을 해야함 ) 문제 해결 위해 : 브라우저가 내용을 가지고 있게됨 => 보안취약 -> data 암호화해서 token 보내줌 위의 흐름 중 5번 중요 ! 6. server는 middleware를 통해 token 쳌 * 토큰의 생성 google jwt (json web token) -> application, webside 등등 모두 사용 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 token = 문자로 표현되어 있음..

[51일차 복습] 카카오 API / 주소, 우편번호 요청 및 가져오기 API란? https://blckchainetc.tistory.com/199 API란? REST / REST API / RESTful 이란? API란? [Application Programming Interface] 응용 프로그램 프로그래밍 인터페이스 - 애플리케이션과 기기가 데이터를 원활히 주고받을 수 있도록 중간 매개체 역할 - 애플리케이션들이 서로 소통할 때 blckchainetc.tistory.com Kakao Developers 로그인 -> 제품 -> 지도/로컬 클릭 -> 개발가이드 -> 주소검색, 좌표로 주소 변환하기 내용 준비 어떻게 API 써야하는지 요청을 어떻게 보내야하는지, 응답을 어떻게 줄건지 친절하게 다 나와있다. https://developers.kakao.com/docs/late..

[51일차]20210526 API 카카오 주소 가져오기 오전 : 수업 오후 : 자습 주소 : 국가 것, 우체국, 카카오 주소 등등API 가 있음 오늘 : API , 카카오 주소 가져오기 카카오 주소 API https://developers.kakao.com/docs/latest/ko/local/dev-guide Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com API란? [ application programming interface ] Interface: 무언가 실행하기위한 보조 장치 ex.마우스or키보드 , 특정 url, .. - 운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식 -..

[50일차 복습] HTTP protocol 구조 개요와 예제 이번 포스팅 내용 : http protocol 의 요청 Request / 응답 Response이 어떤 구조로, 어떻게 주고 받아지는지, 이론 공부, 그리고 직접 server 만들어서 요청, 응답을 분석해보기 HTTP [ Hypertext Transfer Protocol ] 인터넷에서 가장 많이 사용되는 프로토콜 (통신 규약) - Http 는 http Client 가 http server로 요청을 보내고 요청을 받은 server는 client에게 응답을 보내는 형태로 이루어져 있다. http 통신 흐름 1. User가 브라우저에서 URL을 issues. 2. 브라우저가 Request 요청 메세지를 서버에게 보낸다. 3. 서버가 받은 URL을 document directory로 파일 or 프로그램으로 만든다..

[50일차] 20210525 HTTP post, get 공부 http 메시지 형식 공부하기 server.js 가 읽어들이는 것은 text file / text file 을 읽는 원리를 알면 session 등 이동하는 흐름을 알게 됨 API 통신 - http 통신 기반으로 만들어진 API통신 http 형식 - 3가지 그 중 headers 를 언제 쓰는지 배우는 것 / 통신이 정확하게 어떻게 이루어져 있는지.. 통신을 할 때 어떻게 쓰면 통신이 잘 되는지 공부하는 것 (라이브러리 없이도 가능하게) - post로 보낼 때 fetch를 쓰면 꼭 content-type을 써줘야함. - 모든 데이터는 body에 들어간다. 들어가는 형태는 ? network 아래 쪽처럼 ↓↓ - post로 값을 보낼 때 userid = ㅁㄴㅇㄹ & userpw = asdfasdf 이런 형태 /..

[49일차 복습] JavaScript & Oauth 기능으로 kakao login 연결하기 지난 금요일까지 만든 kakao login은 session에 카카오만 들어가 있는 상태↓ req.session.kakao=user.data; kakao, naver, google, local server 등등.. 많은 로그인 기능을 연결하려면 각각 사이트마다 주는 결과도 다르기 때문에 하나에 모아서 처리할 예정 1. session에 웹사이트별 구분 속성값 만들어 넣기 server.js const authData = { //authData 변수에 token.data, user.data 값을 객체로 담음 ...token.data, ...user.data, } req.session.authData = { //session 안에 kakao라는 속성에 authData의 객체값들을 넣음 ["kakao"]:authD..

[49일차] 20210524 javaScript 카카오 oauth 로그인 kakao login session 추가 공부 / 비구조할당문 /switch문 / session 담는 부분 req.session.kakao=user.data; 구글,네이버,깃헙, 자체 로그인 등등..로그인이 4가지 방식 이상으로 되고 각각 사이트마다 주는 결과도 다르기 때문에 잘 모아서 처리해야함. // req.session.kakao=user.data; const authData = { ...token.data, ...user.data, } res.redirect('/'); }) 새로 배우는 문법 비구조 할당문 * 비구조 할당문이란,, 배열, 객체 모두 사용 가능 좋은 점. 객체를 내 마음대로 바꿔서 저장 가능 복사할 때 장점이 많음. 굳이 비구조 할당문 쓰는 이유? -> 깊은 복사를 위해 사용한다. (값을 가져오지만, 원..

[48일차 복습] JavaScript, node.js, Oauth 로 카카오 로그인 연결해보기 kakao login Oauth 용어 사용자(user): 서비스 제공자와 소비자를 사용하는 계정을 가지고 있는 개인 소비자(consumer): Open API를 이용하여 개발된 OAuth를 사용하여 서비스 제공자에게 접근하는 웹사이트 또는 애플리케이션 서비스 제공자(service provider): OAuth를 통해 접근을 지원하는 웹 애플리케이션(Open API를 제공하는 서비스) 소비자 비밀번호(consumer secret) : 서비스 제공자에서 소비자가 자신임을 인증하기 위한 키 요청 토큰(request token) : 소비자가 사용자에게 접근권한을 인증받기 위해 필요한 정보가 담겨있으며 후에 접근 토큰으로 변환된다. 접근 토큰(access token) : 인증 후에 사용자가 서비스 제공자가 아닌 소비자를 통해서 보호된..

[48일차] 20210521 KAKAO Login Javascript node.js express 카카오 로그인 연결하기 로그인 구현을 위해 알아야할 개념 Session Cookie Oauth - http 보안 프로토콜 / server, client 간의 key 를 가지고 연결 Authentication 인증 Authorization 허가 1. 카카오Developers 접속 -> 로그인 -> 내 어플리케이션 -> 추가 (to get REST API ) REST API 키만 사용할거야 ! 2. Visual Studio 새 폴더 -> server.js 파일 생성 -> 위의 REST API 키 주석으로 적어놓기 3. kakao Developers 로그인 -> 활성화 설정 상태 on -> Refirect URI http://localhost:8000/auth/kakao/callback 으로 설정 rest API를 개발하는 경우 필..

이전 1 2 3 4 5 6 7 8 다음

티스토리툴바