node.js환경에서 Javascript를 이용한 웹 만들기(투명 스크롤)

 

node.js 환경에서 Javascript를 이용하여 여행 웹을 만들어 보았습니다.

 

 

만들면서 쓰였던 코드 리뷰를 먼저 작성하고  실행 동영상은 글 마지막에 배치 하였습니다.

 

일단 node.js환경을 구축하여 json파일을 만듭니다.

(트랜스파일러를 하기 위해 browserify를 사용하였습니다.)

 

터미널에서 npm run build 또는 npm run build2로 나누어서 실행시켰습니다.

 

HTML을 만듭니다.

 

browserify를 사용하면 bundle.js가 생성됩니다.

 

그래서 script 경로를 bundle.js로 해줍니다.

 

 

페이지는 main 화면과 클릭되면 들어가지는 detail page들로 나누었기때문에 build와 build2로 나눈것 입니다.

 

 

require();

require("불러올 경로")로 필요한 파일을 불러와서 사용할 수 있습니다.

(React의 import같은 역할을 합니다.)

그렇기 때문에 밑에 함수를 사용 할 수 있는 겁니다.

 

 

window.location.href.include()

 

window : window상 모든 전역을 뜻함

 

location.href : 위치

 

includes : 포함된 문자가 있는것을 찾음

 

 

 

 

 

 

 

 

 

window.location.href.includes(dataModels[i].id)

• 전역에서 dataModels[i].id를 포함한 위치를 찾는다.

 

document.createElement()

Html의 요소를 생성한다.

 

ex) document.createElement("div")

• 실제 html상 <div> </div>가 생성된 것과 같다.

 

 

classList.add()

해당 요소에 class name을 생성한다.

 

 

 

appendChild()

부모 Element에 자식 Element를 추가(삽입)하는 기능

 

ex) app.appendChild(header) : app(부모)에 header(자식)을 추가(삽입)

 

 

module exports = { }

함수를 다른 파일에서 불러올 수 있도록 내보내는 기능

 

 

innerText
src

html 내

•  text를 넣고 싶을때 사용
•  src 이미지 사용

 

 

onclick

마우스로 클릭시 실행되는 이벤트

실제 만든 웹에서는 window.location.href를 이용해 클릭하면 해당 경로로 이동하게 끔 해주었습니다.

 

 

onkeypress

키보드로 Enter시 실행되는 이벤트

 

 

::-webkit-scrollbar

overflow-x: scroll   ->  가로 스크롤 생성 (이것만 사용하면 스크롤이 보인다.)

하지만 ::-webkit-scrollbar 을 이용하여 display:none; 값을 주면 스크롤이 표시 되지않으며,

스크롤 기능을 할 수있다.

 

 

 

node.js환경상에서 Javascript만을 이용하여도 동적인 웹을 만들수 있었다.
하지만 노가다를 엄청 하며 viewport 확인을 무한 반복했던것 같지만,
역시 html의 기초를 잘 다져놨기에 머릿속으로 예상을 하여 조금은 수월했다.
하지만 여기서 React를 사용하면 더욱 편리하고 효율적인 동적 웹을 만들 수 있을것 같아서,
매우 의미있는 작업이었다.