서버11 AWS EC2 인스턴스 생성, ssh key.pem으로 서버 접속하기 AWS에 먼저 가입해야 다음 과정을 할 수 있다. ( https://aws.amazon.com/ko/ ) 1) 솔루션 구축 -> 버츄얼머신 런치하기 클릭 2) 인스턴스 시작 - 이름 생성 3) 사용할 어플리케이션 선택 (우분투) 난 우분투환경이 편해서 우분투를 선택했다. AMI는 22.04버젼을 골랐고, 프리 티어 사용 가능한걸 선택하면 된다. 4) 인스턴스 유형 고르기 시간당 요금이 나가므로 잘 보고 선택하자. ( 내가 선택한 요금은 인스턴스 하나당 750시간 무료. ) 보통은 이렇게 2개를 생성해서 필요할때마다 켜서 사용하고 사용하지 않을때는 끈다고 함다. 5) 키페어 선택 원하는 키 페어 이름을 작성하고 생성하기를 누르면 자동적으로 내 서버에 대한 키를 만들어준다 잃어버리면 재생성이나 찾기 기능을 .. 2022. 5. 16. [220317] socket.io 설치 & 세팅 socket.io 설치 $ npm install socket.io socket.io 의 구조 Namespace ㄴ Room ㄴ Socket socket.io는 이런 구조로 이루어져있다. Namespace에 있는 Socket끼리 통신하는 개념이고, default-NameSpace을 따로 지정해주지 않으면 '/'가 된다. socket.io 세팅 원래 html 파일 header에 이 코드를 작성해야하는데, 나는 모든 정적파일을 public에서 찾도록 설정을 해놓은 상태다. 빼내려면 public 폴더를 빠져나가서 찾는 코드를 작성해야하는데 구찮아..... 그래서 CDN 코드를 사용하기로 함. (이게 ES6 모듈이라고한다. 몰랐음) ( socket.io 공식 홈페이지 : https://socket.io/docs/.. 2022. 3. 18. [220317] websocket (웹소켓) 개념 정리 기존 지식 정리 1. HTTP (HyperText Transfer Protocol)란? 인터넷에서 데이터를 주고받을 수 있는 프로토콜(규칙) HTTP 요청 (request) 웹 페이지를 열고 폼에 내용을 입력하면 웹 서버와 웹 브라우저가 데이터를 교환한다. 웹 브라우저는 데이터 헤더를 붙여 오픈할 웹페이지의 주소를 웹 서버에 요구한다. HTTP 응답 (response) 웹 페이지의 요청을 받은 웹 서버는 서버 정보 or 처리 결과를 나타내는 오류 코드와 메시지의 헤더를 웹 페이지 콘텐츠에 붙여 응답한다. 2. AJAX(Asynchronous Javascript And XML)란? 브라우저에서 url의 이동 없이(새로고침 없이) 서버에 요청하는 행위. 페이지 전체를 다시 작성하지 않고도 필요한 데이터만 받.. 2022. 3. 17. [220307] 서로 다른 서버끼리 통신하기(CORS, Access-Control-Allow시리즈) 브라우저의 보안을 지켜주는 동일 출처 정책 SOP 기본적으로는 다른 서버끼리는 서로 통신하지 못한다. 4001번 포트로 연결되어있는 서버에서 3001포트로 연결하려고하면 에러가 뜬다. 같은 출처끼리만 리소스 공유나 접근을 허용해주는 동일 출처 정책 때문이다. //localhost:4001에 연결되어있는 서버 const btn = document.querySelector('#btn') btn.addEventListener('click',async ()=>{ alert('버튼클릭') let response = await axios.get('http://localhost:3001') console.log(response.data) }) 출처(Origin)란? http://127.0.0.1:5500/index... 2022. 3. 14. [220304] 간단히 보는 AJAX 개념 [목록] 1. AJAX란? 2. 비동기통신 코드 만들기 1. AJAX(Asynchronous Javascript And XML)란? 브라우저에서 url의 이동 없이(새로고침 없이) 서버에 요청하는 행위. 페이지 전체를 다시 작성하지 않고도 필요한 데이터만 받아서 일부만 업데이트 되는 비동기 자바스크립트. 간단히, 브라우저에서 돌아가는 자바스크립트가 사용할 수 있는 객체라고 알면 된다. 사용하는 기본 내장 객체로는 XMLHttpRequest이 있다. XML은 데이터 통신을 하는 옛날 형식을 말한다. 요즘은 JSON으로 대체되고 있다. 엘리먼트 형태인 XML보다 객체형태인 JSON으로 작성했을때 코드 길이가 1.5배가 줄어들기 때문. 통신할때 html보다는 데이터만 주고 받음. 그 데이터를 받는 형태가 옛날.. 2022. 3. 10. [220304] AJAX를 응용해서 입력값 받아오기 [목록] 1. ajax를 사용하여 로그인 정보 받아오기 2. 비동기통신 코드 만들기 3. 비동기통신으로 받아온 값을 출력하기 1. submit버튼을 누를때 form이 시작되지 않게 만들고 싶음. = submit을 누를때 액션값으로 이동이 안되게 하고싶음 = 이 곳에서 submit이나 form을 조작할 수 있어야 가능함. = 코드를 언제 실행시킬지 시점을 잡을 수 있어야함. //DomContentLoaded : body영역까지 html 렌더링이 끝난 후에 init이 실행됨. document.addListener('DomContentLoaded',init) function init(){ } 1.1 DomcontentLoaded 이벤트 작성 1.2 form 가져오기 or 조작할 수 있는 환경 만들기 1.3 d.. 2022. 3. 4. [220303] npm과 jwt을 활용해서 로그인 확인 기능 만들기 [목록] 1. npm 명령어로 서버 시작하기 2. 코드를 자동으로 갱신해주는 nodemon 3. 로그인시 jwt 생성하기 4. 로그인 확인을 위해 쿠키에서 jwt 정보 추출하기 5. try/catch문을 통해 응답코드 짜기 1. npm 명령어로 서버 시작하기 서버를 시작하는 node server의 의미 node로 된 명령어를 쓸건데, server.js파일을 실행할거란 명령문. 명령문을 이용하면 다른 명령어를 사용해서 서버를 시작할 수 있다. npm run start npm 스크립트 안에 있는 start 명령어를 run(실행)할게. start 명령어는 node server과 연결되어있기때문에 결과적으로 서버가 시작된다. 2. 서버를 자동적으로 갱신해주는 nodemon 서버를 껐다 켜는 것을 반복하지 않아도.. 2022. 3. 3. [220302] JWT란? JWT 만드는법. JWT(Jason Web Token)란? 1) 토큰이란? 1-1) 일련의 문자열을 구분할 수 있는 단위이자, 시스템에서 보안 객체의 접근 관리에 사용되는 객체 또는 장치다. 1-2) 토큰은 크게 접근(access) 토큰, 보안(security) 토큰, 세션(session) 토큰 등으로 분류할 수 있다. 1-3) 접근 토큰(access token)이 가장 많이 사용되는 토큰 형식으로 시스템이나 소프트웨어에서 어떤 특정한 기능이나 데이터에 접근하는 대상에게 권한을 부여하는 데 사용된다. 2) JWT이란? 사용하고 싶은 정보를 객체에 담아서 해시로 들고, 그 해시값도 같은 객체에 담은 것. 즉, 필요한 정보를 자체적으로 지니고 있어서 자가수용적인 특성을 가졌다. 자가수용적이므로 두 개체에서 전달되기 쉽다. h.. 2022. 3. 2. [220216] DB와 서버를 연결해주는 Connection Pool DB와 연결되어있는지 체크하는 코드 SHOW STATUS LIKE 'Threads_connected'; 너무 연결이 많이 되면 터짐. 그래서 사용하지 않으면 컴퓨터 자원(로직?)을 반환하기 위해 연결을 끊는 종료코드가 존재함. //연결 샘플 코드 const mysql = require('mysql') // 연결 생성 let connection = mysql.createConnection({ host:'127.0.0.1', user:'hancoco', password:'0000', database:'sample' }) // 연결시작 connection.connect((err)=>{ if (err) throw err; // 여기 함수종료 console.log('socket open') // 실행됨. }) .. 2022. 2. 21. [220207] 로그인 페이지 만들기 목록 1. 청사진 그리기 2. login 페이지 3. logout 페이지 4. profile 페이지 청사진 그리기 login페이지 정보를 입력할 창 만들기 & 입력한 정보가 터미널에 찍히도록 만들기. 브라우저에서 입력한 정보와 user라는 객체에 있는 정보가 서로 일치하는지 확인하기 오류해결 [ERR_HTTP_HEADERS_SENT]:Cannot set headers after they are sent to the client at new NodeError 해결하기 코드를 잘못 적어서 에러가 났는데, if문이나 반복문에서 중복된 값이 호출될때 생기는거라고하더라. 보니까 사이트를 2번 호출하게 잘못 적어서 해결함. 로그인이 성공했을때, 쿠키 만들어주기 res.setHeader(`Set-Cookie`,`lo.. 2022. 2. 8. 이전 1 2 다음
