프로그래밍233 [220331] multer) 비동기적으로 이미지 1개 업로드하기 [ 원리 이해하기 ] 중요한건 왜 저렇게 주소를 사용하는지 알아야한다!!! 대충 주소를 때려박다보면 뭐라도 나오겠지-하지말고!!! 파일을 올리는 html input 코드 submit을 누르면 form에 적힌 백엔드 서버 4001로 post 요청을 보낸다. 파일 한개 업로드 요청을 하기 전에 거치는 미들웨어 multer 미들웨어를 거치면서 어디에 어떻게 저장할지 같은 옵션들이 결정된다. //미들웨어 multer 설정, 객체로 변환해준다 const upload = multer({ // 저장할 공간을 지정해줌 storage: multer.diskStorage({ // 인자 3가지 : 요청, 저장할 파일명, 콜백함수 destination: (req, file, done) => { // 에러에 대한 처리, 저장할.. 2022. 3. 31. [220322] 자바스크립트로 달력만들기 1. 현재 날짜를 가져오는 함수 new Date() date 객체는 세계표준시(UTC) 1970년 1월 1일 00시 00분 00초를 기준으로 현재와 얼마나 시간 차가 얼마나 되는지 밀리초 단위로 나타낸다. let dateToday = new Date() console.log(dateToday) console.log(typeof(dateToday)) //출력값 //2022-03-22T13:35:12.509Z //object 그 외에도 원하는 시각을 넣어서 객체를 작성할 수 있다. console.log(new Date(2021, 11, 6)); console.log(new Date('2021-12-06T03:24:00')); //결과 //2021-12-05T15:00:00.000Z //2021-12-05T1.. 2022. 3. 23. [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. websocket 사용환경 만들기 2. 요청/응답 코드 작성하기 3. websocket의 이벤트 4. string 형식으로 데이터를 주고받는 websocket 5. 채팅창 완성하기 외부 라이브러리 ws 설치하기 $npm install ws 라이브러리 가져와서 세팅하기 const webSocket = require('ws') 백엔드에서 요청을 받아주는 코드 작성하기 handshake를 만들고 Connection을 이루는곳까지 코드로 구현했다. //socket.js const webSocket = require('ws') module.exports = (server) =>{ // 클래스 문법이니까 new로 선언 const wss = new webSocket.Server({server}) //응답이.. 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. [220317] 티스토리 캘린더 위젯 / 색상, 여백 세부 조정 의도 그간 기록한 결과를 달력별로 깔끔하게 모아보고 싶다. 과정 https://tistory.noo9ya.com/67 Section 23 - 티스토리 반응형 스킨 만들기 - [사이드바] 달력 이번 시간에는 "사이드바 달력" 모듈입니다. 제 경험상 티스토리 블로그에 달력을 노출하는 사람은 많이 못 봤지만 그래도 없는것보단 있는게 낫지 않을까 싶어서 달력도 만들어 보도록하겠습 tistory.noo9ya.com 포스팅한 기록을 날짜별로 볼 수 있는 달력형 위젯을 알게 되어서 적용했다. 내 티스토리 컨셉색에 맞게 색 변경이랑 여백을 세부 조절함. html 코드에서 header 안에 작성할 코드 CALENDAR css 코드 안에 작성할 코드와 세부조정건 * calendar */ //아래에 여백을 46px를 줌 ... 2022. 3. 17. [220314] Error: listen EADDRINUSE: address already in use :::4001 문제해결 / mac, 맥북 해당 :4001라는 포트로 이미 사용중이라고하는데, 프로그램은 이거 하나 돌리고 있는 중인데요. 검색해보니 강제로 종료되거나 알 수 없는 이유로 종료되면 지 혼자 이렇게 오류가 떠돌아다닌다고 한다. 강제로 꺼주자. sudo lsof -i :오류포트 // 오류 포트 찾기 sudo kill -9 [오류코드] //오류 포트 삭제 이 과정을 거치면 문제없이 다시 돌아간다. 2022. 3. 14. [220314] API / 인터페이스 / UI API(Application Programing Interface)란 응용프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스. 사람의 입장에서 사용할 수 있는 인터페이스가 키보드, 마우스라고 한다면 프로그램 입장에서 사용할 수 있는 인터페이스는 함수들인것. (alert(), console.log() 등등...) 인터페이스란? 시스템끼리 정보를 교환하는 공유 수단, 방법. 스마트폰을 조작하기 위해 누르는 터치스크린, 기계를 끄기위한 리모콘을 생각해보자. 리모콘은 기계와 통신할 수 있도록 기계에 정의된 규격에 의해 특정 신호를 보낼 수 있도록 만들어진 장치 이런 신호를 주고받는 방법을 인터페이스라고 한다. UI(User Interface)란? 사용자와 .. 2022. 3. 14. [220314] 미들웨어 body-parser와 cookie-parser body-parser node.js의 모듈 중 하나이며, post request body에서 파라미터를 편리하게 추출해주는 미들웨어다. app.post('/login',(req,res)=>{ console.log(req.body) } 가장 흔하게 쓰는 예시인 req.body는 사실 body-parser를 사용하지 않는다면 디폴트로 설정된 Undefined값이 나온다. 그래서 이 값을 읽어오기 위해 필수적으로 body-parser 라이브러리를 설치해야만한다. 하지만 express에 body-parser가 기본적으로 포함되어있으므로 express만 설치해주면 같이 사용이 가능하다. cookie-parser node.js의 모듈 중 하나이며, request 객체에 cookie 속성을 부여하는 미들웨어다. ke.. 2022. 3. 14. [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. 이전 1 ··· 13 14 15 16 17 18 19 ··· 24 다음
