전체 글
-
Express개발 2020. 6. 25. 03:58
Express는 Node.js의 핵심 모듈로 http와 connect 컴포넌트를 기반으로 하는 웹 프레임워크 입니다. 서버의 페이지 개수가 늘어나고 사이트가 커지면 코드가 복잡해지는데 Express 프레임워크를 사용하게 되면 코드의 양도 줄고 추후 유지보수가 쉽도록 만들어줍니다. http를 통해서 Node.js 만을 사용하여 클라이언트와 통신할 때와 Express를 사용하여 클라이언트와 통신할 때를 비교하면 다음과 같습니다. 클라이언트의 요청을 받아서 처리한 후, 다시 클라이언트에게 응답한다는 점은 같지만 중간에 미들웨어들을 거친다는 점이 다릅니다. Node.js만 사용하여 http서버를 통신하게 되면 Node.js 에 등록된 콜백들을 사용하여 처리하고, Express를 사용하면 Express 내부에 개..
-
Cookie와 Session개발 2020. 6. 18. 00:32
Cookie와 Session을 사용하는 이유 HTTP 프로토콜에는 비연결성과 비상태성 이라는 특성이 있습니다. 클라이언트로부터 오는 요청마다 연결과 해제의 과정을 거치면서 연결 상태를 유지하지 않고 연결 해제 후에도 상태 정보를 저장하지 않기 때문에 서버의 자원을 절약할 수 있습니다. 즉, 클라이언트가 request를 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 response를 보내고 접속을 끊는 비연결성 특성이 있는 것입니다. 하지만 서버의 자원을 절약할 수 있는 장점으로 인해 사용자를 식별할 수 없어서 같은 사용자가 요청을 여러번 하더라도 매번 새로운 사용자로 인식하는 단점이 있습니다. 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나게 되면서 상태 정보는 유지하지 않는 비상태성 특성이 있는 ..
-
Virtual DOM 과 DOM개발 2020. 5. 26. 00:17
리액트의 주요 특징 중 하나는 가상 돔( Virtual DOM ) 을 사용하는 것입니다. 그렇다면 이 가상 돔이 정확이 무엇인지 DOM과 무슨 차이가 있는지 알아보겠습니다. DOM이란? Virtual DOM을 알아보기 전에 먼저 DOM이 무엇인지부터 제대로 짚고 넘어가야할 것 같습니다. DOM은 Document Object Model을 의미하고 이것은 구조화된 텍스트의 개념입니다. 즉, 객체로 문서 구조를 표현하는 방법으로 HTML은 단순 텍스트일지라도 돔은 메모리에 가지고 있는 표현 식입니다. HTML 돔은 노드를 탐색하거나 수정할 수 있는 API를 제공합니다 ( getElementById, removeChild 등등... ) DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에..
-
클래스형 컴포넌트와 함수형 컴포넌트개발 2020. 5. 25. 22:06
컴포넌트를 선언하는 방식은 두 가지 입니다. 하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스형 컴포넌트 입니다. 먼저 클래스형 컴포넌트와 함수형 컴포넌트의 차이점에 대해 설명하기 위해 두 가지 방법의 코드를 보여드리겠습니다. 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = 'react'; return {name}; } export default App; 클래스형 컴포넌트 import React, { Component } from 'react'; class App extends Component { render(){ const name = 'react'; return {name}; } } expor..
-
web security ( XSS, CSRF, CORS와 OPTIONS 메서드 )개발 2020. 5. 20. 23:43
HTTP 요청은 기본적으로 Cross-Site HTTP Request가 가능합니다. 즉, 태그로 다른 도메인의 이미지 파일을 가져오거나, 태그로 다른 도메인의 CSS를 가져오거나 로 둘러 쌓여 있는 스크립트에서 생성된 Cross-Site HTTP Request는 Same Origin Policy를 적용 받기 때문에 Cross-Site HTTP Request가 불가능 합니다. ( Same Origin Policy란 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. ) AJAX가 널리 사용되면서 로 둘러 쌓여 있는 스크립트에서 생성되는 XMLHttpRequest에 대해서도 Cross-Site HTTP Request가 가능해야 한다는 요구..
-
http 개체와 서버구축 (bare code)개발 2020. 5. 20. 21:13
Node.js는 "http" 개체라는 것에서 "http.Server" 개체를 만들어 서버를 구축합니다. 또한 요청과 응답을 다루는 "request" , "response" 개체에서 송수신을 수행합니다. 이런 개체의 사용법에 대해서 설명하겠습니다. 1. http 개체 로드 하기 const http = require('http'); Node.js로 서버를 구축할 때 최초로 해야하는 것은 필요한 라이브러리들을 로드하는 것입니다. require() 함수를 사용하여 인수에 가져올 개체 이름을 지정하여 해당 개체가 로드되어 반환됩니다. 위의 코드에서는 http라는 개체를 로드하여 변수 http 에 할당한 것입니다. 2. Server 개체 생성하기 const server = http.createServer((requ..
-
JavaScript 비동기 처리를 위한 Promise개발 2020. 5. 19. 22:30
비동기 처리를 작성하다 보면 콜백 함수가 중첩되어 알아보기 어려운 코드가 되어버리는 상황이 종종 발생합니다. 이때 Promise를 사용하면 복잡하게 중첩된 코드를 좀 더 알아보기 쉽게 작성할 수 있습니다. Promise의 기본 Promise는 비동기 처리를 실행하고 그 처리가 끝난 후에 다음 처리를 실행하기 위해 사용합니다. Promise를 사용하려면 다음과 같이 Promise 객체를 생성해야 합니다. let promise = new Promise(function(resolve, reject){ ... }); Promise 에는 실행하고자 하는 처리를 작성한 함수를 인수로 넘깁니다. 이 함수는 resolve와 reject라는 인수를 받고 이 인수는 콜백 함수 입니다. resolve 함수 안의 처리가 성공..
-
JavaScript 비동기 처리와 콜백 함수개발 2020. 5. 19. 22:29
자바스크립트 엔진은 싱글 스레드 (Single Thread) 입니다. 그래서 동시에 두 가지 작업을 할 수 없습니다. 그렇기 때문에 여러 작업이 동시에 요청이 될 때 이 전 작업이 마무리 될 때까지 기다려야 하는 상황이 발생합니다. 그래서 자바스크립트 엔진은 비동기 처리가 가능하도록 설계되어있습니다. 비동기 (Asynchronous)란? 자바스크립트의 비동기 처리란 특정 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성입니다. 비동기 처리를 검색하다 보면 이벤트 루프, 콜스택 콜백 큐 등등 가상으로 내 머릿 속에 그려서 이 비동기 처리 작업을 연상해야 하는데 눈으로 직접 보이지 않다보니 이해가 어렵습니다. 이 비동기 처리를 눈으로 쉽게 확인할 수 있는 사이트는 여기를 클릭하시면 조..