[6] 코드의 재사용

코드의 재사용

 

하나의 페이지에 적용한 디자인을 다른 페이지에도 동일하게 적용하려고 한다.

style 태그를 ctrl+c, ctrl+v 하고, 요소를 감쌌던 id=grid, article 인 div 태그를 모두 적어주면 된다..

 

하지만, 페이지가 1억개라면...?

 

css 코드가 모든 웹페이지에서 중복해서 등장하고 있다.

코딩을 잘하는 방법 - "중복의 제거"

 

1. style 태그 내에 있는 순수한 css 코드 만을 복사해서 style.css 파일을 생성
2. 기존의 style 태그 삭제
3. link 태그 추가
   해당 위치에 style.css라고 하는 별도의 파일에 저장된 css 파일을 다운받아서 이 위치에 원래 css 코드가 있었던 것 처럼 동작하라고 알려주는 것.
   
   
4. 각 웹페이지에 link 태그를 추가
5. 수정이 필요한 디자인은 style.css 파일에서만 작업해주면 됨

<link rel="stylesheet" href="style.css">

 

style 태그의 내용을 style.css 파일로 만들어서 link로 각 웹페이지에 연결 

 

코드의 효율성으로 얻게 되는 효과

• 효율적

• 경제적 - 웹페이지를 다운 받을 때 인터넷 사용료를 덜 낼 수 있다.

* 개발자 도구 - Network 

 해당 페이지를 Reload 했을 때 내부적으로 웹서버로 부터 어떤 파일을 다운 받는지 보여주는 기능

 

웹브라우저는 사용자는 모르지만 style.css 파일을 다운받아서 웹페이지에 적용한 것

 

하나의 웹페이지에 대해 여러 개의 파일을 별도로 바깥에 두고 다운로드 받는 것과 그냥 웹페이지 안에 CSS 코드를 내장하는 것  중에서 어느 것이 네트워적인 측면에서 더 효율 적일까? 더 적은 트래픽을 사용하는 것일까???

 

웹페이지 안에 직접 넣는 것이 그것 자체로는 효율적이다. 하지만 "캐싱" 이라는 태크닉 때문에 완전히 바뀐다.

캐싱은 "저장하다"는 의미로, 우리가 한 번 CSS파일을 다운 받았다면 해당 파일이 바뀌기 전까지 style.css란 파일을 이 웹브라우저는 클라이언트에 파일을 저장해 놨다가 파일을 요청하면 저장된 결과를 가져와서 속도를 높일 수 있다. (네트워크를 사용하지 않기 때문에)

사업자는 돈을 덜 쓸 수 있다.

 

따라서 훨씬 더 빠르게 보여주면서 네트워크 사용료를 훨씬 더 적게 낼 수 있다.

 

지금까지 우리는 박스모델과 그리드를 통해 CSS 페이지를 보다 직관성있게 만들었습니다. 1.HTML 3.JavaScript 페이지 역시 같은 형태로 만드려면 CSS 페이지의 <style> 내의 코드들을 복사해주면 됩니다.

만일 적용해야하는 페이지가 수천개라면 어떨까요? 수천번 직접 복사하는건 비효율적이고 이를 간단하게 하기위해 다음과 같이 <link> 태그를 이용합니다.

1. style.css 라는 파일을 새로 만들고, <style> 태그 내의 내용들을 전부 복사해 넣습니다. (태그 자체는 복사x)
2. html 페이지 내의 <style> 태그를 이제 지워버리고, <link> 태그를 이용해 <link rel="stylesheet" href="style.css">를 대신 삽입합니다.

이 과정을 통해코 드의 양이 줄어 훨씬 직관적이 되며, 웹페이지를 수정해야 할때도 Style.css 파일만 수정하면 되기때문에 효율성이 폭발적으로 늘어납니다.

이렇게 코딩에서 중요한 중복의 제거를 통해 훨씬 효율적이고 수정이 파격적으로 쉬운 웹페이지를 만들수있습니다. CSS 수업 초기에 언급했던 '정보로써의 html' 의 가치또한 퇴색되지 않습니다.

캐시(Cache)
한번 페이지를 방문해서 Style.css 파일을 다운받았다면, 다음부터 방문할때 웹브라우저는 컴퓨터 내에 저장된 Style.css 파일을 불러와서 빠르게 훨씬 페이지를 읽고 네트워크 트래픽 또한 다시 사용하지 않습니다.