웹 앱 만들기-[#생활코딩] 2.Express 이 포스트는 생활코딩 페이지의 강좌를 바탕으로 작성되었습니다. Express 설치하기 Expressjs.com 에 설치하기 페이지를 보면 다음과 같은 사진과 안내 문구가 있다. 그대로 입력해 설치해준다. 디렉토리로 이동했다는 가정 하에 해당 디렉터리로 이동 후 npm init 명령을 치고 기본 값을 설정해준다. 그 후 나는 의존성 목록에 추가할 것이니( json 파일에 내용 추가 ) npm install express --save 명령으로 express를 설치한다. Express 사용법 app.js 파일을 만든다 내용은 다음을 입력한다. 1. 미들웨어 express를 호출한다. 2. express를 app이라는 인스턴스에 담는다. 3. app의 listen ..

웹 앱 만들기-[# 생활코딩] 1.Node.js 이 포스트는 생활코딩 페이지의 강좌를 바탕으로 작성되었습니다. Node.js 설치 및 실행 설치 nodejs 홈페이지에 접속한다. Node.js홈페이지 운영체제에 맞는 파일을 다운로드한 후 실행해 설치한다. node --version으로 설치를 확인한다. 실행 디렉토리를 만들고 hello.js의 js 확장자를 가진 도큐먼트를 작성한다. 다음 내용을 작성한 후 저장한다. cmd 창을 열어 해당 디렉터리로 이동한 후 $node hello.js 명령으로 실행시킨다. ($는 콘솔명령어의 시작 부분이라는 알림) cmd 창에 hello 라는 문구가 나타나면 잘 작동하는 것이다.

외부 파일로 분리 (Separate into external file) JS를 별도의 파일로 분리할 수도 있다. 장점을 보다 엄격하게 정보와 제어를 분리할 수 있다는 점이다. 하나의 JS파일을 여러 웹 페이지에서 로드함으로 JS의 재활용률을 높일 수 있다. 캐쉬를 통해 속도의 향상, 전송량의 경량화를 도모할 수 있다. html 파일 예제코드 1 2 3 4 5 6 7 8 9 Colored by Color Scripter cs 분리된 script.js 파일 예제코드 1 2 var hw = document.getElementById('hw'); hw.addEventListener('click',function(){alert('hello World')}); cs

Inline 방식의 JavaScript HTML태그에 직접 JavaScript를 기술하는 방법이다. 장점은 태그에 연관된 스크립트 관계가 명확하게 보인다는 점이 있지만 정보인 HTML과 제어의 역할을 하는 JavaScript코드가 같이 사용됨으로 코드가 정보로서의 가치가 줄어든다. 예제코드 1 2 3 4 5 6 Colored by Color Scripter cs Script 방식의 JavaScript 스크립트와 HTML을 분리해서 코딩하는 방식 스크립트 태그에 태그을 이용해 JavsScript 코딩을 하는 방법이다. 예제코드 1 2 3 4 5 6 7 Colored by Color Scripter cs