WEB (28) 썸네일형 리스트형 [JS][Node.js] express로 웹서버 만들기 - 여러가지 middle ware 미들웨어 Middle Ware 애플리케이션과 다른 도구 혹은 데이터베이스 사이를 연결해주는 소프트웨어이다. 운영시스템과 실행되는 앱 사이에 위치해있으며 데이터를 주고 받는 중개와 조정의 역할을 한다. 주고 받아야할 데이터가 이미지 혹은 비디오처럼 간단한 데이터이거나 은행 거래내역과 같이 복잡한 데이터일 수 있다. 또 다양한 방식으로 저장되거나 다양한 양식을 사용할 수 있다. 여기서 미들웨어는 이런 백엔드 자원(데이터)에 접근하거나 접근권한을 지울 수 있다. 간단한 객체 접근 프로토콜(SOAP), 상태변환(REST), 자바스크립트 객체 노트(JSON)과 같이 데이터를 변환을 위한 메세지 서비스를 제공한다. express와 함께 사용하는 미들웨어 미들웨어 함수 : next 요청(req) 응답(res) 주기 .. [JS][복습] 모던 JavaScript 튜토리얼 따라가기 - 코어 자바스크립트편 https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info 위 튜토리얼에서 크게 코어 자바스트립트, 브라우저, 추가주제 이렇게 세가지 장으로 나뉜다. 코어 자바스크립트 프로그래밍 언어로서의 자바스크립트에 대해 학습한다. 호스트 환경에 종속되지 않는 코어 자바스크립트에 집중한다. 호스트 환경이란 자바스크립트가 서버 사이드 환경에서 실행되는 node.js나 구글의 앱에서 동작하는 Google Apps Script와 같이 브라우저가 아닌 다른 환경에서 자바스크립트의 문법을 이용하는 환경을 말한다. 2. 기본 2.1 Hello World 2.1.1. 위와 같이 태그 안에 직접 스크립트를 작성하는 방식은 매우매우 간단한 스크립트일 경우에 사용하는 것이 좋.. [JS][Node.js] http을 이용해 서버 만들기 - 서버만들기 / 쿠키만들기 * 본 게시글은 'Node.js 기본 교과서 ' - 조현영 지음 책을 참조했습니다. 요청 (request) 과 응답 (response) 1. 서버 만들기 1. http 모듈을 불러온다 const http = require('http') 2. 서버를 생성한다. const server = http.createServer((rep,res)=>{ }) server.listen(8080) server.on('listening',()=>{ console.log('waiting in 8080') }) 2-1. 서버내용을 직접 작성 const server = http.createServer((req,res)=>{ res.wirte('Hello!!') res.end('Node,js!') }) server.listen(8.. [JS] webpack - npm - node 다 다른거야? 예$쓰 node.js 은 크롬 V8 자바스크립트 엔진으로 생성된 자바스크립트 런타임이다. npm은 node.js을 기반으로 JS으로 개발된 오픈소스를 모듈로 공유하는 곳이다. (파이썬의 pip과 비슷하다) node.js의 Denpendency 을 살펴보면 도구(npm, gyp, gtest)와 라이브러리(V8,libuv,llhttp,c-ares,OpenSSL,zlib)이 있다. node.js을 설치하면 npm 도 함께 설치된다. webpack 은 자바스크립트 모듈들을 컴파일하는데 사용된다. 한번 설치하면 CLI또는 다른 API로 상호작용할 수 있다. webpack으로 알아보기 (Node.js가 설치됨을 가정) 1.기본설치 우선 폴더하나를 만들고 그안에 npm을 초기화하여 로컬에 webpack과 webpack-cl.. [JS] 기본 데이터 타입 데이터 타입 확인 typeof 데이터 (typeof 연산자)를 통해서 알 수 있으나 typeof null은 object이다. 객체 인스턴스 확인 데이터 instanceof 객체 을 통해서 객체에 의해 생성된 인스턴스인지 아닌지 확인할 수 있다. 데이터타입 변환 : JS은 동적 타입변환이 가능하므로 숫자 타입의 데이터를 가진 변수가 문자열 타입의 데이터로 변환되어도 에러가 없다. 데이터타입(데이터) : boolean string number parseInt(문자열) :정수로 변환 parseFloat(문자열): 부동 소수점으로 변환 [JS] 이벤트 처리 - 드래그 앤 드롭 로그를 통해서 각 이벤트의 시작과 진행중 , 완료 시점을 알 수 잇다. HTML 삽입 미리보기할 수 없는 소스 드래그 시작과 드래그 중은 간격이 너무 짧아서 시작하자마자 드래그 중으로 보이지만 당시 console.log('드래그시작') 을 통해 시작점이 있다는 것을 알 수 있다. 드래그 드롭 같은 경우는 드래그오버를 중지하고( 무효화)하고서 드랍을 사용한다. [JS] 이벤트 발생 / 작동해지 - dispatchEvent( new Event()) / preventDefault() HTML 삽입 미리보기할 수 없는 소스 1. 이벤트 발생 : 이벤트타겟.dispatchEvent(new Event('이벤트타입')); 타겟 : html 요소 객체 : .dispatchEvent() 인자 : Event() 사용자가 이벤트를 발생하지 않아도 저절로 이벤트를 발생시킬수 있다. 이벤트 생성이 먼저고 다음으로 이벤트가 발송되는데 이벤트 성성자인 new Event('타입','{옵션:버블링,캔서블..}') 을 이용한다. const evt = new Event("look", {"bubbles":true, "cancelable":false}); document.dispatchEvent(evt); 아래는 5초뒤에 클릭이벤트를 dispatchEvent()을 이용해 생성한다. const boxGreeting .. [JS] 이벤트 처리 - Viewport 에 따른 사이즈 변경 만일 사용자가 윈도우 창의 크기를 줄이거나 늘리면 (resize)하면 그때마다 그 값을 받아와서 나타낸다. 아래 코드는 직접 codepen에 들어가서 화면 크기를 줄이거나 늘려가면서 비교하는 것이 좋다. HTML 삽입 미리보기할 수 없는 소스 innerWidth()은 window, frame, frameset이나 다른 윈도우들처럼 모든 window 형식의 객체에서 사용할 수 있고 읽어들기만 할 수 있다. // 다음과 같이 뷰포트의 폭을 받아올 수 있습니다. var intFrameWidth = window.innerWidth; // 다음과 같이 frameset 안의 어떤 frame의 뷰포트 폭을 받아올 수 있습니다. var intFrameWidth = self.innerWidth; // 다음과 같이 가장 .. 이전 1 2 3 4 다음
