공동 웹페이지 만들기

리팩토링(refactoring)이란 외부 동작 변화 없이 내부 구조(코드)를 더욱 간단하고 효율적으로 개선하는 작업이라고 했으며 저희는 변수와 함수, 객체를 사용해서 리펙토링 처리를 완료 했습니다.

이번 시간에는 다음 사진과 같이 다른 웹페이지로 넘어가는 링크에 대해 알아 볼 것입니다

 

 

WEB 링크를 누르면 WEB에 관한 페이지로, HTML 링크를 누르면 HTML에 대한 페이지로 넘어갈 것입니다.

넘어간 웹 페이지에서도 저희가 설정한 버튼이 작동 하도록 만들 것입니다.

그러기 위해서는 저희가 만든 자바 스크립트를 모든 웹 페이지에 복사 붙여넣기를 해주어야합니다.

 

버튼을 활성화 하기 위해 모든 웹 페이지에 있어야하는 코드

 

이럴 경우 물론 실행은 정상적으로 잘 되지만 단점이 있습니다. 만약 이 코드의 일부분을 수정 하고 싶으면 직접 이 코드를 필요로 하고 있는 웹 페이지에 들어가서 수정을 해줘야 합니다. 이러한 웹 페이지가 적을 경우에는 직접 수정 해줄 수 있지만 만약 수백개, 수천개의 웹 페이지가 있다면 일일히 수정해주는 것은 거의 불가능합니다.

이를 해결 하기 위해 공통된 코드를 보관하는 파일을 만드는 것입니다.

파일에 공통된 코드를 저장한후 이 코드를 필요로 하는 웹 페이지에 다음과 같이 추가해줍니다.

<script src = "파일명.js"></script> 

이제 코드를 수정 하고 싶으면 해당 코드를 저장하고 있는 파일 하나만 수정해주면 수백개, 수천개의 웹페이지에 적용이 되는 것입니다.

 

각 웹 페이지에는 아래 HTML 코드와 각 웹 페이지에 대한 설명만 작성하면 됩니다

물론 위의 HTML 코드도 각 웹페이지에 중복되는 코드이기 때문에 JS 처럼 파일을 생성하여 보관할 수 있습니다. 하지만 이 내용은 HTML 내용이니 제 블로그의 HTML 카테고리에서 공부 하시면 됩니다. HTML(include)

 

아래는 각 링크를 클릭했을시 나오는 웹 페이지들의 모습입니다