그럼에도 불구하고

REST API에 대해 알아보자 XMLHttpRequest 참고 :) https://despiteallthat.tistory.com/149 [JavaScript] XMLHttpRequest란? XMLHttpRequest에 대해 알아보자 [ XMLHttpRequest ] 브라우저는 주소창이나 HTML의 form 태그 또는 a 태그를 통해 HTTP 요청 전송 기능을 기본 제공한다. 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHt despiteallthat.tistory.com [ REST API ] REST(REpresentational State Transfer)는 HTTP/1.0과 1.1의 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩(Roy Fielding)..

XMLHttpRequest에 대해 알아보자 [ XMLHttpRequest ] 브라우저는 주소창이나 HTML의 form 태그 또는 a 태그를 통해 HTTP 요청 전송 기능을 기본 제공한다. 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다. Web API인 XMLHttpRequest 객체는 HTTP 요청 전송과 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공한다. [ XMLHttpRequest 객체 생성 ] XMLHttpRequest 객체는 XMLHttpRequest 생성자 함수를 호출하여 생성한다. XMLHttpRequest 객체는 브라우저에서 제공하는 Web API이므로 브라우저 환경에서만 정상적으로 실행된다. // XMLHttpRequest 객체의..

JSON.stringify와 JSON.parse에 대해 알아보자 [ JSON.stringify ] JSON.stringify 메서드 객체를 JSON 포맷의 문자열로 변환한다. 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는데 이를 직렬화(serializing)라 한다. HTML 삽입 미리보기할 수 없는 소스 JSON.stringify 메서드는 객체뿐만 아니라 배열도 JSON 포맷의 문자열로 변환한다. HTML 삽입 미리보기할 수 없는 소스 [ JSON.parse ] JSON.parse 메서드는 JSON 포맷의 문자열을 객체로 변환한다. 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열이다. 이 문자열을 객체로서 사용하려면 JSON 포맷의 문자열을 객체화해야 하는데 이를 역직렬화(de..

HTML 페이지 서비스에 대해 알아보자 예를 들어 위와 같은 경로로 파일이 저장되어 있다고 가정해 보자. node.js를 이용해 HTML 페이지를 서비스하기 위해서는 어떻게 해야 할까? admin.js라는 파일에서 add-product.html을 서비스 해보자 res.sendFile을 사용하면 사용자에게 파일을 회신할 수 있다. 우선, join 메서드를 호출하기 위헤 path라는 코어 모듈을 임포트 해준다. const path = require('path'); path의 경우 Node.js가 기본적으로 제공하는 기능이므로 따로 설치할 필요는 없다. join메서드를 호출함으로서 생성한 경로로 파일을 보낼 수 있다. path.join('첫 번째 세그먼트', '두 번째 세그먼트', '세 번째 세그먼트'... ..

페이지 오류가 났을 때를 대비하여 오류 페이지를 추가하는 방법에 대해 알아보자 URL에 정해놓은 문자열이 아닌 무작위 문자열을 입력하면 오류가 발생한다. 일반적으로는 이런 경우 404 error 페이지가 나타나는데 express가 미들웨어를 사용해 요청을 처리하는 방법을 활용하면 해결할 수 있다. HTML 삽입 미리보기할 수 없는 소스 app.use((req, res, next) => { res.status(404).send("Page not found"); }); 다음과 같이 미들웨어 안에 res.status()를 사용하면 해결할 수 있다. status(??)처럼?? 에는 특정 오류코드가 발생했을 때 내가 처리하고 싶은 오류 코드를 넣으면 된다.

Router를 사용해 보자 기존 소스 코드 HTML 삽입 미리보기할 수 없는 소스 위의 소스 코드의 경우 간단하지만 이렇게 모든 코드를 하나의 app.js 파일에 기록하면 파일의 크기가 계속 커지게 된다. 물론 이 정도 규모의 앱에 대해서는 문제가 되지 않는다. 그러나 일반적으로는 라우팅 코드를 여러 파일로 나누는 것이 좋다. 현재 로직을 여러 파일로 내보내서 이 파일로 임포트 해보자. 내보낼 파일을 직접 만들 수도 있지만 Express.js는 라우팅을 다른 파일에 위탁하는 편리한 방법을 제공한다. routes라는 이름의 새로운 폴더를 만들어 보자 ( 다른 이름으로 만들어도 되지만 보통의 관행이라 한다, :) ) admin.js라는 파일과 shop.js라는 라우팅 파일을 생성했다. admin.js 에서는..

max-( width / height )과 min-( width / height )의 여러 쓰임새에 대해 알아보자 [ max- width / height ] max-width와 max-height는 어떤 요소의 최대 너비와 높이값을 설정하는 속성이다. 반응형 웹 디자인에서 화면에 따라 스타일을 적용할 때 자주 사용한다. ※ max-width 속성 어떤 요소의 최대 너비를 지정하며, 요소의 너비값이 max-width 너비값보다 커지는 것을 방지한다. 즉, max-width는 width 속성값을 무효화시킨다. 예를 들어 이미지 가로 너비가 500px 일 때, max-width: 400px으로 설정하면 400px 이하로만 이미지가 보인다. ※ max-height 속성 요소의 최대 높이를 지정한다. max-he..

data 어트리뷰트와 dataset 프로퍼티에 대해 알아보자 data 어트리뷰트와 dataset 프로퍼티를 사용하면 HTML 요소에 정의한 사용자 정의 어트리뷰트와 자바스크립트 간에 데이터를 교환할 수 있다. data 어트리뷰트는 data-user-id, data-role과 같이 data-접두사 다음에 임의의 이름을 붙여 사용한다. HTML 삽입 미리보기할 수 없는 소스 data 어트리뷰트의 값은 HTMLElement.dataset 프로퍼티로 취득할 수 있다. dataset 프로퍼티는 HTML 요소의 모든 data 어트리뷰트의 정보를 제공하는 DOMStringMap 객체를 반환한다. DOMStringMap 객체는 data 어트리뷰트의 data-접두사 다음에 붙인 임의의 이름을 카멜 케이스로 변환한 프로퍼..

배경색을 랜덤으로 조작할 수 있는 버튼을 만들어 보자 조건 1. 버튼을 누르면 배경색을 두 가지 색이 섞인 색으로 변경시켜 준다. 2. linear-gradient로 지정되는 색깔 두 개는 같을 수 없다. 3. 만약 같은 색깔 두 개가 선정될 경우 두 번째 색상을 임의로 바꿔준다. 소스 코드 HTML 삽입 미리보기할 수 없는 소스 Script HTML 삽입 미리보기할 수 없는 소스 button을 클릭했을 때 변경할 수 있는 color를 배열로 담아놓고 랜덤함수를 통해 random1과 random2에 무작위로 0부터 5까지의 수를 초기화시킨다. 그리고 random1과 random가 같은 숫자일 경우를 검사하기 위해 checkNum 함수를 사용한다. 만약 checkNum 함수에서 확인결과 같을 경우 chan..

[ 애플리케이션 레벨 미들웨어 ] app.use() 및 app.METHOD() 함수(*method: get, post 등등)를 이용해 app 오브젝트의 인스턴스에 바인드 시킨다. 미들웨어를 어플리케이션 영역에서 지정한 path대로 처리 가능하게 하도록 한다. HTML 삽입 미리보기할 수 없는 소스 첫 번째 미들웨어에서 'In the middleware!'를 출력하고 next()를 통해 다음 미들웨어로 넘어간다. 두 번째 미들웨어에서 'In another middleware!'를 출력하고 h1 태그와 그 안에 Hello from Express!를 출력한다. 서버를 생성하기 위해 기존에는 아래와 같이 작성하였다. const http = require('http'); const server = http.cre..

미들웨어 (middleware)에 대해 알아보자 [ 미들웨어 (middleware) ] 미들웨어는 req(요청) 객체, res(응답) 객체, 그리고 애플리케이션 요청-응답 사이클 도중 그다음의 미들웨어 함수에 대한 액세스 권한을 next 인자로 갖는 함수를 말한다. 또한 next 호출을 통해 다음에 있는 미들웨어를 실행하도록 결정할 수도 있다. 즉 미들웨어란 클라이언트에게 요청이 오고, 그 요청을 보내기 위해 응답하려는 중간(미들)에 목적에 맞게 처리하는, 거쳐가는 함수라고 할 수 있다. 다음 미들웨어 함수에 대한 엑세스는 next 함수를 이용해서 다음 미들웨어로 현재 요청을 넘길 수 있다. next라는 말에서 알 수 있듯이 next를 통해 미들웨어는 순차적으로 처리된다. (따라서 작성 순서가 매우 중요..

Express란 무엇인가? [ Express ] Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크이다. Node.js는 표준 웹서버 프레임워크로 불려질 만큼 많은 곳에서 사용하고 있다. Node.js와 Express는 무슨 관계일까? Node.js는 Chrome의 V8엔진을 이용하여 JavaScript로 브라우저가 아니라 서버를 구축하고, 서버에서 JavaScript가 작동되도록 해주는 런타임 환경(플랫폼)이다. Express는 이런 Node.js의 원칙과 방법을 이용하여 웹 애플리케이션을 만들기 위한 프레임 워크이다. 간단하게 말하자면, Express란 Node.js를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래..