얼음꽃의 일지

Nginx 와 Apache

Apache - HTTP 웹 서버 소프트웨어 - Client 요청당 하나의 스레드가 처리하는 구조 - Client당 요청이기 때문에 고객이 많아지면 그만큼 스레드, 메모리, CPU 낭비가 생김 - 한계가 존재 하기때문에 클라이언트도 제한이 되어버리기에 Keep Alive를 사용할 수 있지만, 이것도 사람이 많아지면 효율이 없음 - 서버가 blocking되어버리면 처리될때까지 대기해야함 - 안정성, 확장성, 호환성으로는 우세 Nginx - Apache의 많은 고객문제를 해결하기 위해 만들어지 웹 서버 소프트웨어 - 한개 혹은 고정된 프로세스만 생성해서, Connection을 다 비동기 방식으로 처리하기에 많은 사람들을 처리하는데 좋음 - 적은 양의 스레드만 사용해서 비용이나 CPU 낭비가 적음 - Apac..

npm(Node Packaged Manager)

npm - Node Packaged Manager의 약자 - 즉, Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램 - 현재는 Node.js 안에 npm이 내장되어 있음 - npm init 혹은 npm install을 통하여 패키지에 다운받은 모듈들을 확인 가능 // package.json { "name": "final", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "axios": ..

Express 얘는 뭐꼬?

Express -> Node.js를 위한 Web FrameWork 중 하나 -> 쉽게 서버를 구성할 수 있게 만든 클래스와 미들웨어, 라이브러리의 집합체 -> 웹 애플리케이션을 만들 수 있음 -> 만약 Express를 대체해야 한다면 Express가 현재 MIT쪽에 팔렸기에 Express를 만든 회사꺼인 Koa를 사용 Express 가 편한 이유 // Node.js 내장된 HTTP로 웹 서버 띄우기 const http = require('http'); http.createServer(request, response) { http.createServer(function(request, response){ response.writeHead(200, {'Content-Type':'text/html'}); re..

화살표 함수

일단 기본적인 함수를 보면 다음과 같습니다. // 함수 선언식 function add(a,b) { return a + b } // 함수 표현식 const sub = function(a,b) { return a - b } 이 함수를 화살표 함수로 바꾸게 되면 다음과 같습니다. // 화살표 함수로 변경 add = (a,b) => { return a + b } sub = (a,b) => { return a - b } 즉, function이라고 적힌 부분이 => 로 화살표로 바뀐 형태입니다. 추가로 매개 변수에 따른 상황을 보면 다음과 같습니다. 그리고 화살표 함수안에는 this가 없기에 this를 쓰면 외부에서 가져오게 됩니다. () => { ...}// 매개 변수 없을 경우 x => {...}// 매개변수가..

async & await

Async & Await -> 요번에 promise, callback을 대체해줄수 있는 비동기 처리 패턴 중 하나 -> 동기식 처리의 단점을 보완 -> 가독성을 높여줌 -> 함수 시작 async 붙이고, 비동기 처리하고 픈 자리에 await을 붙임 -> 대신 await 뒤에 오는 값은 반드시 promise로 반환해줘야함 -> 오류가 발생할 수 있으니 함수 아에 try ~ catch 문으로 예외처리 async function test() { try{ const a = await getSomething(); // 내용 // } catch(err){ // 에러처리 // } } async test() => { try{ const a = await getSomething(); // 내용 // } catch(err..

호이스팅? Hoisting?

호이스팅 -> 함수가 실행되기 전 혹은 전역에서 값을 실행하기 전에 필요한 변수 값들을 모두 모아서 유효 범위의 맨위에 선언하는 것을 의미 -> 호이스팅 가능한 대상 : Var / 호이스팅 불가능한 대상:let, const -> 함수 안에서도 호이스팅이 발생할 수 있음 function result() { var add// 함수 표현식 호이스팅 var result// 함수 선언식 호이스팅 add = function() {// 함수 표현식 할당 retunr 1 + 2; } result = add();// 함수 선언식 할당 console.log(result)// 호출 } result() -> 함수 선언식은 함수 전체를 호이스팅을 하고, 정의된 범위에서 맨 위로 호이스팅 되어서 함수 선언전에 함수를 사용가능 -..

Promise? 약속?

Promise -> 비동기 함수 호출 또는 비동기 연산이 완료되었을때, 그 다음에 와서야 처리할 함수 혹은 에러를 설정하는 모듈 function call(text, timeout) { return new Promise((new_text, reject_time) => { setTimeout(() => { resolve(text); }, timeout) }) } call("여보세요 나야~", 1000).then((text) => call(`${text} 누군가 전화함`, 1000) ).then((text) => { console.log(`전화왔어! ${text}`); }); -> Promise가 없었다면 비동기 시에 그냥 콘솔 값이 막 나와서 아마 콜백 지옥이 실행 될 수있다. promise 세가지 상태 -..

CORS 란?

CORS - Cross-Origin Resource Sharing의 줄임말 - 보통 Access-Control-Allow-Origin을 안해주게 되면 빨간 오류로 막 발생 - 한 웹페이지에서 다른 웹페이지의 소스를 가져오는데 허락이 없어서 불가능 - CORS가 해결되려면 프로토콜(HTTP, HTTPS), 호스트(주소), 포트(포트번호) 3개가 일치해야함 - SOP(Same-Origin-Policy) 이어야지만 동일할 출처에서 리소스 공유가 가능 - 동일해야하는 이유는 모르는 사이트가 맘대로 XSS를 당할 수 있기때문에 방지 - 그렇다고 모르는 링크를 싹다 차단 할수 없기에 필요한 링크 한에서 CORS 열어줌 - Access-Control-Allow-Credentials은 true 설정이 가능하나 그 이외..