HTTP 웹 캐싱이란?

HTTP 웹 캐싱은 서버가 중복적인 요청을 했을 때 상태값이나 식별이 가능한 유용한 데이터를 저장하여, 또 다시 동일한 데이터의 통신을 하지 않게끔 유도하여, 웹 성능을 최적화하는 기술 중 하나이다. 이를 통해 네트워크 대역폭을 줄이고 웹 페이지 로딩 속도를 향상시키는 데 목적이 있다.

 

 

 

🔹 웹 캐싱의 주요 유형

  1. 브라우저 캐시 (Browser Cache)
    • 사용자의 웹 브라우저가 방문한 페이지의 정적 리소스(이미지, CSS, JavaScript 등)를 저장하여 동일한 요청 시 다시 다운로드하지 않도록 하는 방식으로, 이를 통해 동일한 사이트를 재방문할 때 빠르게 로딩할 수 있다.
  2. 프록시 서버 캐시 (Proxy Server Cache)
    • 중간 서버(프록시 서버)가 서버와 클라이언트 사이에서 데이터를 캐싱하여 여러 사용자가 동일한 요청을 할 때 응답 속도를 개선하는 방식으로, 기업 내부 네트워크 또는 ISP(Internet Service Provider, KT같은 곳)에서 주로 사용된다. AWS 로 치면, LoadBalancer 같은 느낌..
  3. CDN 캐시 (Content Delivery Network Cache)
    • CDN 서버가 전 세계 여러 지역에서 자주 요청되는 콘텐츠를 캐싱하여 사용자에게 더 가까운 서버에서 제공하는 방식으로, 이미지, 동영상, 정적 파일 등을 효율적으로 배포하기 위해 사용된다.

 

 

 

🔹 그러나 주의해야 할 점 (보안 문제)

성능을 향상시킬지 몰라도, 성능보다 더 중요한 사항이 있다. 바로 `보안` !!

예를들어 로그인 정보,  결제 카드 정보와 같은 민감한 데이터가 캐싱돼서는 안될 것이다.

 

이러한 경우를 대비해서 HTTP 에서 제공하는 헤더가 있다.

 

바로 Cache-Control: no-store 헤더이다.

이 헤더를 사용하여 브라우저나 프록시 서버가 특정 응답을 절대 캐싱하지 않도록 설정할 수 있다.

 

 

 

🔹 웹 캐싱 사용 방법 : HTTP Response(응답)의 헤더 활용

웹 캐싱은 HTTP Response 헤더를 활용하여 사용이 가능하다.

다음은 그 헤더의 대표적인 유형이다.

  1. Cache-Control
    • 캐싱 정책을 지정한다.
    • [정책 종류]
      • public → 누구나 캐시 가능
      • private → 브라우저에서만 캐시 가능
      • no-cache → 항상 서버에 검증 요청 필요
      • no-store → 캐싱 금지 (보안 데이터 보호)
      • max-age=3600 → 1시간 동안 캐싱 유지
  2. ETag (Entity Tag)
    • 리소스의 고유한 식별자를 제공하여 변경 여부를 확인하는 역할을 한다. 이때 주어지는 고유한 식별지는 해쉬코드이며, 서버는 (클라이언트의 요청에 의해서) 응답을 보낼 때, ETag 값을 응답 헤더에 포함한다. 이때 ETag 값은 무작위 해쉬코드이다.
    • 이제 클라이언트의 두번 째 요청부터는, 기존 첫 요청때 응답 받았던, ETag 값을 If-None-Match 요청 헤더에 값을 복사해서 보내면, 서버가 ETag를 비교하여 변경되지 않았다면 304 (Not Modified)를 반환하여 불필요한 데이터 전송을 방지한다.
    • If-None-Match 말고도 (조금 더 정밀성이 떨어지긴 하지만) If-Modified-Since 헤더도 있다. 이 헤더에는 마지막 수정 시간을 이용하여 날짜를 기반한 변경 여부 비교를 한다.
  3. Expires
    • 특정 날짜와 시간을 지정하여 캐시 만료 시점을 설정하는 방식이다.
    • 그러나 최신 웹에서는 Cache-Control: max-age가 더 자주 사용된다.

 

 

✅ 결론

HTTP 웹 캐싱은 네트워크 트래픽을 줄이고 웹 성능을 최적화하는 유용한 기술이지만,

 

보안 문제를 고려하여 민감한 데이터는 캐싱되지 않도록 주의해야 하며,

 

이를 활용하기 위해 Cache-Control, Etag, Expires 등의 HTTP 응답 헤더를 사용할 수 있다. 🚀

'WEB > HTTP' 카테고리의 다른 글

[CSS] 버튼 이쁘게 꾸미는 다양한 방법  (0) 2021.06.15
[CSS] 배경색 그라데이션 넣는 속성  (0) 2021.06.14
[CSS] div 테두리 둥글게 만들기 + 테두리에 그림자 넣기  (0) 2021.06.14

Nodemon ?

노드몬이란 Node.js 기반의 애플리케이션을 개발할 때 도와주는 툴인데, 파일이 변경되었을때 자동으로 애플리케이션을 감지하고 재시작해주는 툴이다. 노드몬은 개발 코드에 변화 없이 적용시킬 수 있으며, 노드를 위한 래퍼 라이브러리의 일종이다. 노드몬을 쓰려면, cli에 스크립트를 실행할때 node라는 단어만 바꾸면 된다.

 

How To Use ?

npm install -g nodemon # or using yarn: yarn global add nodemon

위와 같이 global 하게 설치한 다음에

npm install --save-dev nodemon # or using yarn: yarn add nodemon -D

위와 같이 개발 dependency 로 추가하면 된다. 

'WEB > Node.js' 카테고리의 다른 글

npm 에 대해여  (0) 2021.08.12
★ 노드에서 모듈 사용하기 :: exports.module  (0) 2021.08.11
process 객체 (+OS 객체)  (0) 2021.08.11
console 객체 : console.log 만 있는게 아니었어?  (0) 2021.08.11
node js 의 대표적인 3가지 객체  (0) 2021.08.11

alert

<!DOCTYPE html>
<body>
    <button id="btn" onclick="alertfunc()">button</button>
    <script>
        function alertfunc(){
            alert('hello!');
        }
    </script>
</body>
</html>

 

confirm

<!DOCTYPE html>
<body>
    <button id="btn" onclick="confirm_func()">button</button>
    <script>
        function confirm_func() {
            if(confirm('are you sure?')) {
                alert('yes');
            } else {
                alert('no');
            }
        }
    </script>
</body>
</html>

 

prompt

<!DOCTYPE html>
<body>
    <button id="btn" onclick="prompt_func()">button</button>
    <script>
        function prompt_func() {
            if(prompt('please write what you want to eat') == 'apple') {
                alert('oh here you are');
            } else {
                alert('have to buy other market');
            }
        }
    </script>
</body>
</html>

 

'WEB > Javascript' 카테고리의 다른 글

script.js:2 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')  (0) 2022.07.09
[Javascript] inline방식의 자바스크립트 코드의 문제점  (1) 2022.07.09
Native Script 란?  (0) 2021.08.14
JSON 이란?  (0) 2021.07.18
Promise 사용하기 (프로미스가 뭘까?)  (0) 2021.06.29

이 에러.. 왜 나타나는 걸까?

 

그 이유는 바로 js 코드의 위치 때문이다. html 파일은 위에서부터 순서대로 코드를 로드하기 때문에, 만약에 다음과 같이 코드를 작성한다면 오류가 날 수 밖에 없다.

 

index.html

<!DOCTYPE html>
<head>
    <script src="./script.js"></script>
</head>
<body>
    <button id="btn">button</button>
</body>
</html>

script.js

var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
    alert('hello!');
})

문제는, javascript 코드가 html코드의 button 태그를 호출하고 있다는 점에서부터 시작이된다. 그 이유는 javascript 코드가 html 코드보다 위에 작성되어서 먼저 호출이 되는데, 아직 button 태그가 호출되지 않은 상태에서 button 태그를 가져오고 있기 때문이다.

 

해결법

<!DOCTYPE html>
<head>
    <script>
        window.onload = function() {
            var btn = document.getElementById('btn');
            btn.addEventListener('click', function() {
            	alert('hello!');
        	})
        }
    </script>
</head>
<body>
    <button id="btn">button</button>
</body>
</html>

window 객체의 onload 메소드는, html 코드가 모두 로드된 이후에 javascript 코드를 로드하라는 의미이다.

 

<!DOCTYPE html>
<body>
    <button id="btn">button</button>
    <script src="./script.js"></script>
</body>
</html>

그러나 window.onload 를 사용하는 것보다 body 태그 마지막부분에 script 태그를 추가하는 것이 더 좋은 방법이다. 그 이유는 onload의 경우 페이지를 로드하다가 중간에 멈추기 때문이다. javascript 코드를 건너뛰고 html 부터 로드하기 때문에 성능면에서 떨어지기 때문이다.

'WEB > Javascript' 카테고리의 다른 글

[javascript] 경고창 띄우기, 대화상자 만들기  (0) 2022.07.09
[Javascript] inline방식의 자바스크립트 코드의 문제점  (1) 2022.07.09
Native Script 란?  (0) 2021.08.14
JSON 이란?  (0) 2021.07.18
Promise 사용하기 (프로미스가 뭘까?)  (0) 2021.06.29

inline code

다음과 같은 코드가 있다고 하자.

<!DOCTYPE html>
<body>
    <button onclick="alert('hello!')">button</button>
</body>
</html>

이 코드에 문제점이 있을까?

이 코드의 장점이자 단점은 바로 html코드가 javascript코드와 함께 공존한다는 것이다. 이것이 좋은 이유는 함께 있기 때문에 제어도 바로바로 할 수 있다는 것이다. 그러나 이 장점에 비해 단점이 크기 때문에 추천하지 않는 방식이다. 만약, 제어의 코드(javascript)가 더 많이 늘어난다면? 변수도 지정하는 등의 복잡한 로직을 처리한다면? 결정적으로, 정보와 제어가 분리되지 않은 것이 가장 큰 문제이다.

 

그렇다면, html 코드와 javascript를 분리하는 방식들을 살펴보자.

script tag

<!DOCTYPE html>
<body>
    <button id="btn">button</button>
    <script>
        var btn = document.getElementById('btn');
        btn.addEventListener('click', function() {
            alert('hello!');
        })
    </script>
</body>
</html>

 

외부파일로 분리

script.js

var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
    alert('hello!');
})

index.html

<!DOCTYPE html>
<body>
    <button id="btn">button</button>
    <script src="./script.js"></script>
</body>
</html>

이러한 방식으로 외부 파일로 분리한다면 "유지보수의 편의성"의 방면에서 용이해진다. 하나의 자바스크립트는 여러 개의 html 파일에서 활용이 될 수도 있기 때문이다. 일반적으로, 코딩에 있어서 응집력은 높히고 결합도는 낮춰야 한다. javascript 파일을 외부 파일로 기능별 분리를 한다면 자연스럽게 코드 간의 결합도는 낮아지고 기능 별 응집도는 높아질 것이다.

'WEB > Javascript' 카테고리의 다른 글

[javascript] 경고창 띄우기, 대화상자 만들기  (0) 2022.07.09
script.js:2 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')  (0) 2022.07.09
Native Script 란?  (0) 2021.08.14
JSON 이란?  (0) 2021.07.18
Promise 사용하기 (프로미스가 뭘까?)  (0) 2021.06.29

>> 이 문서는 다음 글을 번역한 것입니다.
https://www.npmjs.com/package/nativescript#what-is-nativescript

 

네이티브 스크립트란?

네이티브 스크립트는 네이티브 iOS 와 Android 앱을 단 하나의 코드 기반으로 개발하도록 도와주는 cross-platform JavaScript framework 이다. 이 프레임워크는 자바스크립트가 iOS 와 Android 의 네이티브 API, UI 그리고 렌더링 엔진에 접근하도록 도와준다. 자바스크립트(혹은 타입스크립트)를 사용하면 완전히 네이티브 사용자 환경을 가진 iOS 또는 Android 앱으로 만들어진 하나의 프로젝트를 만들 수 있다.

 

 

 

 

 

NativeScript CLI(Command-line interface)가 동작하는 방식

NativeScript CLI는 NativeScript를 동작하기 위한 방법이다. 이는 몇가지 중요한 서비스들을 통합했다.

Commands 명령어를 입력하고 수행한다.
Devices Service NativeScript 와 기기/에뮬레이터/시뮬레이터를 연결시켜준다..
LiveSync Service 개발 중 코드가 변경될 때 응용 프로그램을 재배포해준다.
Hooks Service 개발된 앱에서 사용자 정의 hook를 실행시킴으로써 빌드 프로세스를 수정한다.
Platform Service 앱 빌드 편의기능을 제공하고 Gradle을 사용하여 Android Package나 Xcode를 빌드한다.

 

 

 

 

 

NativeScript CLI 설치방법

node.js의 npm을 이용하여 설치한다.

// NativeScript 설치 명령어
npm install nativescript -g

// 제대로 설치되었는지 확인하기 위한 명령어
ns doctor

 

 

 

 

 

프로젝트 생성하기

// javaScript로 프로젝트 생성하기
ns create MyApp --js

// typeScript, angular, vue로 프로젝트 생성하기
ns create MyApp --template typescript
ns create MyApp --template angular
ns create MyApp --template vue

// 위 작업은 간단한 옵션으로도 처리 가능하다.
ns create MyApp --tsc
ns create MyApp --ng

 

 

 

 

템플릿 설정하기

ns create MyApp --template <template-package-name>

 

 

 

 

 

템플릿 종류

Blank

ns create MyApp --template @nativescript/template-blank

Drawer

na create MyApp --template @nativescipt/template-drawer-navigation

Tabs

ns create MyApp --template @nativescript/template-tab-navigation

List and Details

ns create MyApp --template @nativescript/template-master-detail

'WEB > Javascript' 카테고리의 다른 글

script.js:2 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')  (0) 2022.07.09
[Javascript] inline방식의 자바스크립트 코드의 문제점  (1) 2022.07.09
JSON 이란?  (0) 2021.07.18
Promise 사용하기 (프로미스가 뭘까?)  (0) 2021.06.29
비동기적 Call Back 함수 이용하기  (1) 2021.06.28

0. npm 이란?

Node Package Manager 의 약자로 node js 에서 제공하는 모듈들을 패키지화해서 사용할 수 있도록 하는 것을 말한다. node 는 모듈로 돌아간다고 했다. 여러 node 개발자들은 개발을 하는 중에 여러 모듈들을 만들게 되었을 것이고, 그 모듈들 중에서는 여러 개발자들이 주로 사용하는 기능들도 포함되어 있을 것이다. 이러한 기능들을 공유하기 위해서 나온 것이라고 이해해도 좋다. npm을 이용하면 패키지화된 다양한 모듈들을 다운받아 사용할 수 있다.

 

1. npm 설치 및 실행

npm install
npm init --yes
npm install some-library

npm init 을 실행하면 package.json 이라는 파일이 만들어지는데, 이 파일안에는 프로젝트의 이름, 정보뿐만이 아니라 모든 라이브러리에 대한 정보를 지니고 있다. npm 을 초기화한 이후에는 npm install (다운받고싶은 라이브러리 이름) 을 이용해서 라이브러리를 가져올 수 있다. 이때 라이브러리를 하나라도 가져오게 되면 node_modules 폴더가 자동으로 생성이 되게 되고, npm repository 에서 해당 라이브러리의 소스코드를 이 node_module 폴더 안에 가져오게 된다. 따라서 협업할 때는 node_module 을 포함하지 않고 서버에 올리는 것이 좋다. 어짜피 다시 npm repository 에서 가져올 수 있기 때문에.

 

2. npx 란?

npm 5.2.0 버전부터 추가된 도구이다. npm과 다른 개념이 아닌, npm 에서 파생된 아이인 것이다. npx는 따로 라이브러리를 저장하지 않는다. 일시적으로 혹은 일부에서만 필요한 라이브러리가 전역적으로 설치되면 메모리의 낭비가 될 수 있다. 이 때 등장한 것이 npx 이다. 일회성으로 원하는 패키지를 npm 레지스트리에 접근해서 실행시키고 설치하는 실행도구이다. npm 과 다르게 굉장히 가벼운 것이 장점인 도구이다.

 

 

3. npm 명령어 설정

먼저 npm 기본 명령어들은 다음과 같다. 만약 위에 있는 명령어 중 하나를 내 입맛대로 사용하고 싶다면 그냥 npm (해당 명령어) 로 입력하면 되지만, 만약 내가 이름을 직접 정하는 명령어라면 npm run (해당 명령어) 로 실행해야 한다.

'WEB > Node.js' 카테고리의 다른 글

Nodemon  (0) 2024.03.22
★ 노드에서 모듈 사용하기 :: exports.module  (0) 2021.08.11
process 객체 (+OS 객체)  (0) 2021.08.11
console 객체 : console.log 만 있는게 아니었어?  (0) 2021.08.11
node js 의 대표적인 3가지 객체  (0) 2021.08.11

★ 모듈에 대하여

/* counter.js 파일 내부 */

let counter = 0;

function increase() {
    counter ++;
}

function decrease() {
    counter --;
}

function getCount() {
    return counter;
}

module.exports.increase = increase;
module.exports.decrease = decrease;
module.exports.getCount = getCount;

console.log(module);

 

 

/* exports.js 파일 내부 */

const counter = require('./counter.js');

counter.increase();
counter.increase();
counter.increase();
console.log(counter.getCount());

'WEB > Node.js' 카테고리의 다른 글

Nodemon  (0) 2024.03.22
npm 에 대해여  (0) 2021.08.12
process 객체 (+OS 객체)  (0) 2021.08.11
console 객체 : console.log 만 있는게 아니었어?  (0) 2021.08.11
node js 의 대표적인 3가지 객체  (0) 2021.08.11

process 객체에 대하여

>> 공식문서
https://nodejs.org/dist/latest-v14.x/docs/api/process.html		 
console.log("argv 속성의 파라미터 수 : " + process.argv.length);
console.log(process.argv);

if (process.argv.length > 2) {
    console.log('세 번째 파라미터 값 : ' + process.argv[2]);
}

process.argv.forEach((item, index) => {
    console.log(index + " : " + item);
});

console.log('OS 환경 변수의 값 : ' + process.env['OS']);

 

 

 

 

 

setTimeout(() => {
    console.log('setTimeout');
}, 0);

process.nextTick(() => {
    console.log('nextTick');
});

for (let i=0; i<5; i++) {
    console.log('for loop');
}

nextTick 이란 콜스택에서 가장 먼저 실행되도록 하는 메소드이다.

 

 

 

 

 

const os = require('os');

console.log(os.EOL === '\n');
console.log('if true, you are mac');
console.log(os.EOL === '\r\n');
console.log('if true, you are window');

console.log(os.totalmem());
console.log(os.freemem());
console.log(os.type());
console.log(os.userInfo());
console.log(os.homedir());
console.log(os.hostname());

'WEB > Node.js' 카테고리의 다른 글

npm 에 대해여  (0) 2021.08.12
★ 노드에서 모듈 사용하기 :: exports.module  (0) 2021.08.11
console 객체 : console.log 만 있는게 아니었어?  (0) 2021.08.11
node js 의 대표적인 3가지 객체  (0) 2021.08.11
Node.js 의 4가지 매력 포인트!  (0) 2021.07.01

console 객체에 대하여

>> console 에 관한 공식문서이다. 다음을 참고하는 것이 더 자세하고 정확하다.
https://nodejs.org/dist/latest-v14.x/docs/api/console.html#console_console_assert_value_message

먼저 console 에 결과를 띄우는 것에 대해서 console.log 만 알고 있었다면 다음을 보길 바란다.

console.log("console log");
console.info("console info");
console.warn("console warning");
console.error("console error");

log 말고도 다양한 메소드들이 존재한다.

 

 

 

 

 

console.assert(2 === 3, 'not same!');
console.assert(2 === 2, 'same!');

assert 같은 경우 false 일 때만 출력한다.

 

 

 

 

 

const student = { name: 'right', age: 26, club: {name : 'yacht', count: {count: 2}} }
console.log(student);
console.table(student);
console.dir(student);
console.dir(student, {showHidden: true, colors: false, depth: 0});
console.dir(student, {showHidden: true, colors: true, depth: 1});
console.dir(student, {showHidden: true, colors: true, depth: 2});

객체일 시에 로그를 보여주는 형식도 지정할 수 있다.

 

 

 

 

 

/* measuring time */
console.time('for loop');
for (let i=0; i<100; i++) { }
console.timeEnd('for loop');

시간도 잴 수 있다.

 

 

 

 

 

/* counting */
function a() {
    console.count('a function');
}
a();
a();
a();
console.countReset('a function');
console.log('count reset...');
a();

함수가 몇 번 호출되었는지도 알 수 있다.

 

 

 

 

 

    function f1() {
        f2();
    }
    function f2() {
        f3();
    }
    function f3() {
        console.log('f3');
        console.trace();
    }
    f1();

해당 함수를 누가 출력했는지에 대한 발자취 등도 알 수 있다.

'WEB > Node.js' 카테고리의 다른 글

npm 에 대해여  (0) 2021.08.12
★ 노드에서 모듈 사용하기 :: exports.module  (0) 2021.08.11
process 객체 (+OS 객체)  (0) 2021.08.11
node js 의 대표적인 3가지 객체  (0) 2021.08.11
Node.js 의 4가지 매력 포인트!  (0) 2021.07.01

+ Recent posts

티스토리툴바