전체 글(312)
-
[node] 404, 500 error handling
먼저 404, 500 에러 시 보여줄 템플릿 파일을 작성한다. template 하위 폴더에 comoon 폴더를 생성하고 404.html/ 500.html 파일을 각각 만들어준다. 만든 파일에 아래와 같은 소스 코드를 추가한다. 먼저 404 {% set title = "페이자가 없습니다" %} {% extends "layout/base.html" %} {% block content -%} 페이지가 없습니다. {%- endblock %} 다음으로 500 {% set title = "에러가 발생했습니다" %} {% extends "layout/base.html" %} {% block content -%} 에러가 발생했습니다. {%- endblock %} 다음으로 500 소스 {% set title = "에러가..
2020.09.07 -
[node] Global View Variable
예를 들어 상단에 로그인한 사람은 로그아웃 버튼 활성화 로그인 안 한 사람은 로그인과 회원가입이 보이도록 해줘야 하는 경우 템플릿에서만 사용할 글로벌 변수를 선언한다. app.js 에 아래와 같은 소스 코드를 추가한다. app.use( (req,res,next) => { app.locals.isLogin = false; //html 파일에서 isLogin 변수를 사용할 수 있음 next(); }); 해당 소스코드를 추가하게 되면 .html 파일에 해당 변수를 사용할 수 있다. base.html 화면으로 이동하여 아래 소스코드를 추가한다. {% if isLogin %} 로그인 중 {% else %} 로그인이 안 되어 있습니다. {% endif %} 해당 url에 접근 시 아래의 이미지와 같이 로그인 상태가..
2020.09.07 -
[node] 파일 읽기
새로운 폴더(node.js)를 만들어 fileread.js와 sample.txt 생성 sample.txt에 입력하고 싶은 문구 입력 fileread.js에 아래 소스 추가 var fs = require('fs'); fs.readFile('sample.txt', 'utf8', function(err, data){ console.log(data); }); cmd 창에서 fileread.js 실행 출처 : 본 포스트는 이고잉님의 '생활코딩' 강의를 보고 직접 정리한 소스입니다.
2020.09.07 -
[node] url을 통해서 입력된 값 사용하기
먼저 url의 구성이다. Url의 구성 http:opentutorials.org:3000/main?id=MTML&page=12 http -> protocol opentutorials -> host(domain) 3000 -> port main -> path(컴퓨터 디렉토리) id=MTML&page=12 -> query string url에 queryString을 화면에 출력하는 소스 var http = require('http'); var fs = require('fs'); var url = require('url'); //url이라는 모듈을 사용할 것이다. var app = http.createServer(function(request,response){ var _url = request.url; va..
2020.09.07 -
[CSS] 상속
▶ 상속(inheritance) - HTML, CSS에서도 조상(상위) 요소로부터 자손(하위) 요소로 CSS의 명령 또는 속성들이 상속될 수 있음. - 실제로 위의 예에서 .ecosystem에 해당하는 생태계 텍스트뿐만 아니라 그 하위의 동물, 식물, 호랑이 등의 요소들까지도 빨간색 텍스트로 변경됨. - 생태계(.ecosystem)에 적용된 색상이 하위 요소들에도 적용된 것. - 특정 CSS 속성들은 조상 요소에 지정하는 것만으로도 하위 요소에 영향을 미칠 수 있음. - 상속되는 속성들은 대부분 글자를 다루는 속성. ※ 상속되는 속성들(properties) - font - font-size - font-weight - font-style - line-height - font-family - color -..
2020.09.03 -
[CSS] 속성 선택자(Attribute Selectors)
▶ 속성 선택자(Attribute Selectors) - HTML의 속성은 attribute, CSS에서의 속성은 property로 구분됨. - 속성 선택자는 HTML의 속성을 선택하는 것. 1. attr - 특정한 속성 attr을 포함한 요소 선택. - 사용법: [attr] ex) [class] - HTML 요소가 해당 속성을 가지고 있는 것만으로도 그 요소를 선택할 수 있음. 2. attr=value - 속성 attr을 포함하며, 그 속성의 값이 value인 요소 선택. - 사용법: [attr=value] - [type="password"]에서 큰 따옴표 ""는 생략할 수 있음. [type=password]와 같이 사용 가능. 3. attr^=value - 속성 attr을 포함하며, 그 속성의 값이 ..
2020.09.03