빨간색코딩

1. 들어가며 여기서 말하는 s3 비용절감은 대규모 서비스용도가 아니다. 그런 서비스들은 앞단에 AWS CloudFront 같은 CDN으로 서빙해야하는 게 맞고 그렇게들 하고있을테니, s3와 직접적으로 관련이 없다. 사이드 프로젝트에서 비용을 소소하게 아껴본 경험을 이야기해보고자 한다. 이용자 수가 어느정도 있는 경연, 사이드프로젝트, 데모 등 앞단에 뭔가 대는게 오히려 더 비용이 아까운 상황 2. aws s3 요금 계산식 서울 리전, 20년 6월기준 저장 0.025 USD / GB 전송량 0.126 USD / GB 1 GB 까진 무료 요청량 READ 10000번 당 0.0035 USD WRITE 1000번 당 0.0045 USD 3. 문제발생 s3 를 이미지 스토리지, 서빙 용도로 사용하고 있다. GE..

참조문서https://developer.mozilla.org/ko/docs/Web/API/Storagehttps://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API 1. Web Storage란?Web Storage는 HTML5 에서 추가된 저장소이다. 간단한 키와 값을 저장(key-value Storage)할 수 있다. Web Storage를 상속받아 구현된 localStorage와 sessionStorage가 존재한다.키와 값은 뭐가 들어와도 문자열로 변환되어 저장된다.객체를 읽고쓰려면 JSON.stringify, JSON.parse 를 해야함브라우저별 용량제한이 다르다.origin(도메인)별 Storage는..

참조문서 https://developer.mozilla.org/ko/docs/Web/JavaScript http://www.ecma-international.org/ecma-262/6.0/ https://www.slideshare.net/WooyoungCho/ecmascript-6-64456124 흔히 생각하는 javascript는 2009년에 제정되고 11년에 개정된 ECMAScript 5.1 표준이다. ES6에서는 arrow functions, class, 향상된 객체리터럴, let과 const, iterator, for-of 등이 추가되었다. 좀더 나은 fp와 oop를 가능하게 해준다. 또한 기존 ES5코드와 모두 하위호환이 된다. 여기서는 ES6에 추가된 사항을 중점적으로 정리한다. 또한 몰랐던 ..

참조문서 : https://www.w3schools.com/xml/1. 문서 분류XML 문서에는 정형식 문서(well-formed)와 유효한 문서(valid)가 있다.정형식 문서 : XML 문법과 규칙에 맞게 만들어진 오류가 없는 문서.유효한 문서 : XML 문서를 표준화할 목적으로 문서형태정의(DTD)에 따라 만든 문서2. 문서 구조XML 문서는 아래와 같은 구조로 이루어져 있다.XML 선언부DTD, XML 스키마 선언, 네임스페이스 선언XML 태그와 데이터XML 선언부인코딩과 독립형 여부는 선택 속성이다. 인코딩 기본값은 UTF-8이다. 독립성 여부는 yes가 기본 값이며 해당 문서를 해석할 때 외부 DTD 문서 참조해야하는 지 여부를 XML 파서에게 전달한다는 뜻이다.주석 를 사용한다. 주석은 XM..

참조문서 : https://www.w3.org/TR/REC-xml/json 만세 시대에 XML을 왜 학교에서 가르치는지 의문이 들지만.... 기존 서비스들이 XML로 된 경우도 꽤 있을꺼고.. 그래도 알아야하지 않겠나! 하며 시작해본다ㅋㅋ1. XML 이란?Extensible Markup Language의 약자이다. 웹에서 구조화한 문서를 표현하고 전송하도록 설계한 마크업 언어이다. XML은 문서내용에 대한 구조와 의미를 기술하기 위한 언어이다. W3C에서 개발됐고, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어(메타언어)이기도 하다. 다양한 표현이 가능하고, 확장성이 뛰어나며 간단하다.이러한 XML을 이용해 수학용 마크업 언어인 MathML, 화학용 마크업 언어인..

참조문서 : https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution웹어플리케이션 분석할 때 쓰지만, V8_inspector을 이용하여 노드에서도 쓸 수 있다.1. CPU ProfileCPU 사용량을 기록한다.Self Time : 함수의 현재 호출을 완료하는 데 얼마나 걸린 시간Total Time : 이 함수와 해당 함수가 호출한 모든 함수의 현재 호출을 완료하는 데 걸린 시간2. Heap Snapshot클릭시점에서 스냅샷 기록Shallow Size : array string과 같이 직접적으로 메모리를 점유하고 있는 js 객체들의 크기, 실제 데이터가 있는 영역Retained Size : GC 이후 남겨진 메모..

참조문서 : https://stackoverflow.com/questions/12296910/so-jsonp-or-cors 해당 참조문서는 12년도 글이라서 최신 브라우저일 경우 CORS를, 아니라면 JSONP를 사용하라고 권장하고 있지만, 이제는 대부분 CORS를 지원한다. ※ 브라우저 호환성표 CORS는 웹 표준 CORS는 크로스도메인을 해결하는 웹 표준이고, 보안상 권장되고 있다. JSONP는 script injection으로, GET밖에 지원안한다. CORS는 이와 대비되게 다양한 메소드를 허용하고 있다. 또한 JSONP는 http에서 https는 호출가능하지만, https에서 http는 호출이 불가능하다. This request has been blocked; the content must be..

참조문서 : https://blog.seotory.com/post/2016/04/understand-jsonp JSONP는 json with padding의 약자이다. 태그는 SOP 정책에 속하지 않는다는 점을 이용해, 서로 다른 도메인간의 javascript 호출을 위하여 jsonp가 사용되었다. 1. 원리 API서버에 데이터를 요청할 페이지에서 서버의 데이터를 받아 처리할 콜백 함수를 준비한다. 그 후에 script 태그를 생성하고 API서버에 request한다. 데이터 요청을 받은 서버에서는 콜백 함수를 실행하는 스크립트를 출력한다. 이 때 callback 함수의 인자에는 요청받은 데이터(기존 JSON)가 들어간다. 즉, 기존에 서버에서 {"key1" : "value1", "key2" : "valu..

참조문서 https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy https://developer.mozilla.org/ko/docs/Web/HTTP/Access\_control_CORS https://www.w3.org/Security/wiki/Same\_Origin_Policy 클라이언트단에서 해결 브라우저에서 옵션 변경 크롬 확장프로그램 플러그인 JSONP 서버단에서 해결 CORS 이외에도 document.domain 속성을 사용하는 방법, Cross-document messaging 등이 있다. 1. 동일 출처 정책(SOP) 만약 나의 API서버를 외부 웹 서비스에서 막 접근해서 가져다 쓴다면 문제가 있다. 따라서 이런 행위를 차..

참조문서https://www.html5rocks.com/ko/tutorials/speed/v8/https://github.com/v8/v8/wiki 자바스크립트 엔진은 javascript로 작성된 코드를 해석하고 실행하는 인터프리터다. js엔진은 브라우저 벤더별로 다양하다. Mozilla의 Monkey시리즈, 자바의 바이트코드로 컴파일해주는 Rhino, 구글 크롬의 V8, Safari의 JavascriptCore, Explorer의 Chakra 등이 있다. 여기서 nodejs는 구글의 V8 JavaScript 엔진을 기반으로 동작한다. 우리가 자주쓰는 크롬브라우저도 V8엔진을 쓴다. 성능좋은 코드를 위해 V8을 알아보자 1. Hidden Class로 빠른 프로퍼티 접근과 정적 룩업 다른 JavaScrip..

참조문서 : http://api.jquery.com/ 제이쿼리는 DOM을 조작하거나 Ajax 요청을 할 때 널리 쓰이는 라이브러리다. 제이쿼리로 할 수 있는 건 모두 DOM API로도 할 수 있다. 하지만 제이쿼리를 쓰면 다음과 같은 장점이 있다. 브라우저 호환성을 걱정안해도 된다. Ajax 관련 API가 무척 단순하다. 내장된 DOM API를 더 유용하고 단순하게 바꾼 메소드를 제공한다. 주로 달러기호($)로 표현하며, 제이쿼리를 불러올 때는 이런식으로 CDN을 이용하면 된다. 1. DOM 기다리기 제이쿼리에서는 브라우저가 페이지를 완전히 읽고 DOM을 구축한 다음에만 호출되는 콜백함수가 있다.$(document).ready(function () {} // 단축표기 $(function() {}); 2...

참조문서 : https://developer.mozilla.org/en-US/docs/web/api 1. 문서 객체 모델(Document Object Model) 문서객체모델(DOM)은 HTML문서의 구조를 나타내는 표기법이며 브라우저가 HTML문서를 조작하는 핵심이다. DOM은 트리 구조로 표현하며 노드로 구성된다. root 노드를 document라고 부른다. DOM 트리의 모든 노드는 Node 클래스의 인스턴스이다. Node 객체에는 트리구조를 나타내는 parentNode와 childNodes 속성, 자신에 대한 속성인 nodeName과 nodeType이 있다. 2. get 메소드 DOM에는 원하는 HTML 요소를 빨리 찾을 수 있는 메소드들이 있다. DOM 메소드들이 반환하는 컬렉션은 JS배열같은 ..

Representational State Transfer의 약자로, 로이 필딩(HTTP 프로토콜 주요 저자)이 제창했다. 1. REST 아키텍처의 조건 클라이언트/서버 : 클라이언트의 요청과 서버의 응답 기반 상태 없음 : 클라이언트의 상태(다른 URL에 있다던지)와 관계없이 요청으로만 응답 캐시 : 클라이언트는 서버의 응답을 캐시한다. 같은 요청마다 계속 다운로드받을 수는 없으므로.. 네트워크 비용 절감 계층화 시스템 : 서버는 다양한 형태의 중간 계층을 이용해서 확장할 수 있다. 클라이언트는 서버의 계층에 무관하게 통신할 수 있다. Code on Demand : 리소스를 다룰 수 있는 코드 전송(JS 등) 인터페이스 일관성 : 시스템 구조를 단순화시키고 작은 단위로 분리해서 독립적으로 개선하고 확장할..

함수는 1급 객체(대입, 파라미터, 반환, 연산 등 제약 없음)이고 람다 언어(익명 함수나 클로저 등을 정의하기 위한 표현식)이다. 모듈화의 근간이다. 함수 객체는 Function.prototype에 연결되고, Function은 Object.prototype에 연결된다. 1. 함수 생성 함수는 함수 리터럴로 생성할 수 있다. 함수리터럴은 function 이라는 필수 예약어, 선택사항인 함수명, 매개변수의 집합(일반 변수는 undefined으로 초기화하지만, 매개변수는 넘겨진 인수로 초기화된다), 코드집합으로 구성된다. 함수문장 VS 함수 표현식 함수문장은 hoisting의 대상이 된다. 함수가 위치한 곳에 관계없이 유효범위의 가장 상위로 이동된다. 그렇기때문에 함수 호출이 함수를 정의하는 문장보다 앞에 ..

참조문서 : https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript 참고서적 : 자바스크립트 핵심가이드(더글라스 크락포드) JS는 매우 경량화되어있고 표현적이다. 함수형 프로그래밍도 가능하다. 장점 : 함수, 느슨한 타입체크, 동적 객체, 강력한 객체 리터럴 표기법 단점 : 프로그래밍 모델이 전역변수에 근간(최상위 레벨의 변수들은 모두 전역객체라 불리는 namespace에 위치함) 자바스크립트는 문장 끝에 세미콜론이 없어도 행을 바꾸면 실행에 지장이 없다. 그러나 관례상 세미콜론을 붙인다. 1. 식별자 키워드를 사용하면 안된다 특수문자는 _ , $ 만 가능 숫자로 시작하면 안됨 공백안됨 2. 명명관례 낙타표기법 사용, 생성자 함수의 이..