반응형
반응형
Overivew 이번 포스팅에서는 간단한 사이드바의 기능을 하는 HTML을 구현합니다. 기능 구현에만 중점을 두었기 때문에 디자인은 개인이 알아서! jQuery 호출 HTML 구성 설계 사이드바는 왼쪽 영역에 위치함 사이드바 보이기/감추기 버튼을 통해 사이드바를 보이게하고 감추게 하여야 함 본문은 사이드바의 오른쪽에 위치하여야 함 사이드바의 보이기/감추기에 따라 본문의 내용의 위치도 그에 맞게 변경되어야 함 Sidebar Content Hide Sidebar Show Sidebar A CSS 설정 /* 사이드바 영역에 따른 본문 여백 설정 */ .container { margin-left: 200px; } /* 본문에 보여질 예시를 위한 박스 설정 */ .box { position:absolute; di..
이미지 준비 이미지를 테스트하기 위한 파일 및 위치 (http://localhost:3000/img/img.jpg) 위치는 개인에 맞게 설정 기본 구성 html 파일 생성 후 이미지 태그로 이미지 출력 img id : 자바스크립트로 해당 요소 선택을 위함 style : 절대적 X, Y값을 확인하기 위함 + 커서는 손가락 모양으로 변경 draggable : 드래그로 이미지가 파란색 영역으로 선택되지 않기 위함 (전체선택하면 나오는 영역) 마우스 드래그 이벤트 코드 인터넷 검색으로 많은 코드들을 찾았는데 너무 복잡하게 되어있거나, 너무 오래된 레거시 문법들이 많아서 가능한 지식선에서... 최대한 쉽게 정리해보았다. 실행 전체 소스 코드 참고 Mozilla.org - Event.preventDefault() ..
구문 $() : 제이쿼리 객체 생성 $() 제이쿼리 객체 생성하는 구문 반드시 쌍따옴표(")를 사용한 문자열 형태여야 함 $("") : css 선택자 사용 $("p") css 선택자를 사용하여 html 요소 선택하는 구문 자바스크립트의 'getElementByTagName' 메소드와 동일 위의 예시 구문에서는 p태그를 선택한다는 의미를 가짐 $("#") : id 사용 $("#pId") id를 사용하여 html 요소 선택하는 구문 자바스크립트의 'getElementById' 메소드와 동일 위의 예시 구문에서는 'pId' 라는 ID를 가진 요소를 선택한다는 의미를 가짐 $(".") : 클래스 사용 $(".pClass") 클래스를 사용하여 html 요소 선택하는 구문 자바스크립트의 'getElementByCl..
본 포스팅은 node.js와 express 패키지가 설치되어있다는 가정하에 진행합니다. 정적 파일이란? (static file) 동적으로 변경되지 않는 파일 명시적으로 수정하지 않는 한 내용이 동일하게 유지 되는 것을 의미 이미지, CSS 파일, HTML 파일, JavaScript 파일 등 웹 서버(express)에 적용해서 말하자면 서버에서 처리하지 않고 클라이언트측에서 처리하여 보다 빠른 처리 속도 제공 기본 구성 /* index.js */ // express 프레임워크 객체 생성 const express = require('express'); // express의 새 인스턴스 할당 const app = express(); // path 사용 const path = require('path'); ap..
본 포스팅은 node.js와 express 패키지가 설치되어있다는 가정하에 진행합니다. 기본 구성 express로 웹 서버 구축 /* index.js */ // express 프레임워크 객체 생성 const express = require('express'); // express의 새 인스턴스 할당 const app = express(); // path 사용 const path = require('path'); app.get('/', function (req, res) { // code }); // 해당 포트로 서버를 시작하고 들어오는 요청 수신 app.listen(3000, () => { console.log('Server listening on port 3000'); }); 보여줄 html 페이지 H..
노드몬(Nodemon) 이란? 디렉토리의 파일 변경이 이루어졌을 때 노드 어플리케이션을 자동으로 재시작해주는 모듈 쉽게 말하면 개발 시 소스 코드 내용 변경으로 인해 서버를 종료하였다가 재시작하는 번거로운 작업 없이 자동으로 변경된 소스 파일로 적용되게 해주는 모듈 스트립트 실행 시, node 명령어 대신 nodemon 명령어 사용 Nodemon 패키지 설치하기 Visual Studio Code 에서 터미널 실행 Terminal - New Terminal 터미널에 아래의 설치 명령어 입력 -g 명령어를 사용하여 글로벌 설치 권장 (공식 가이드에서 추천하는 방법) -g 명령어란? 로컬 디렉토리가 아닌 시스템 전체에서 설치되도록하는 명령어 npm i -g nodemon 설치 완료 Nodemon 스크립트 실행..