Node.js/EJS (Embedded JavaScript Templating17 [블로그 6] 19~끝 | 본문 내용을 ... read more로 줄여 새창으로 연결 블로그 만들기를 하고 있다. 19. url에서 posts/day-1 눌렀을 때 새 페이지에 day-1 포스트 내용만 뜨게 하기 아래와 같이 블로그 글이 있다. 이 중에서 Day 1 글을 새 창에서 열어 보게 해보자. 19-1 일단 post.ejs 파일을 만든다. header와 footer는 layouts을 사용하고 title 과 content로 나눠 제목과 본문을 렌더링한다. 19-2 app.js 에서 if문 새롭게 채운다. 만약 포스트 타이틀과 주소창 마지막 키워드가 일치 했을 때 콘솔에 match 가 뜨게 하는 게 아니라 post.ejs 파일이 render 되도록 한다. 56번 줄이 trigger 될 때 53번에 access 하게 된다. 그 때 post가 true인지 false 인지 확인하는데 cur.. 2021. 11. 10. [블로그5] 18 | Lodash로 소문자로 바꾸기 블로그 만들기를 하고 있다. 18. url에 소문자로 입력하거나 캐밥 케이스로 입력되었을 때도 제목에서 찾을 수 있게하기 케밥' 케이스 : a-day-of-school 하이픈으로 연결된 단어 소문자로 입력했을 때 Not a Match로 나온다. 케밥 케이스로 입력했을 때도 Not a Match로 나온다. 하이픈, 대소문자 상관없이 다 소문자로 변경해서 검색이 가능할까? 이 때 lodash를 다운 받아서 사용한다. lodash https://lodash.com/ Node의 utility library 이다. 콘솔에서 다운로드 한다. npm i lodash app.js 에서 lodash를 부른다. const _ = require('lodash'); 언더스코어( _ )가 lodash를 줄인 것이다. lodas.. 2021. 11. 10. [블로그4] 16 - 17| Routing Parameters 블로그 사이트 만들기를 하고 있다. 현재는 홈 화면에서 포스트 한 내용이 본문까지 포함해서 전부 나온다. 본문 내용은 조금만 보이게 하고, 주소창에 포스트 제목을 쳐서 해당 포스트의 싱글 페이지로 갔을 때 본문 전체가 나오게 하는 것이 보기에 좀 더 좋지 않을까? 이 번 포스트에서는 글 제목과 url에 입력한 키워드를 똑같이 맞추는 법을 알아보자. 이럴 때 필요한 것이 routing parameter이다. bbc.com 뉴스의 url 주소를 보면 각 토픽에 따라서 분리된 path가 되어 있는 것을 볼 수 있다. 그리고 각 버튼 안에 또 여러 path가 있는데 그러면 무수히 많은 path가 필요하다는 것을 알 수있다. /sport/cricket 이 부분을 route parameter라고 한다. 이 부분이 .. 2021. 11. 10. [블로그 2] home, about, contact 페이지 만들기 1. home.ejs 에서 HOME 입력하고 localhost:3000에서 HOME 나오게 하기 app.get("/", function(req, res) { res.render("home") }); 2. 브라우저에 paragraph 내용 나오게 하기 home.ejs 템플릿에 내용 입력하고 ejs를 렌더해서 브라우저에 나오게 한다. 3. header.ejs footer.ejs 파일로 layouts 연결 4. views 폴더 안에 partials 폴더 만들고 header.ejs 와 footer.ejs를 넣는다. 그리고 home.ejs에서 header. footer 경로를 재설정해준다. 5. localhost:3000/about localhost:3000/contact 페이지 완성하기 localhost:300.. 2021. 11. 7. [블로그 1] 기본 세팅 강의 자료에서 다운 받았다. 파일 내용은 아래와 같다. 각 파일에 미리 세팅된 코딩을 적어본다. 그리고 파일목록에는 node_modules 가 없다. 필요한 module들을 다운 받기 위해서 콘솔에서 npm install 을 쓴다. css .container-fluid { padding-top: 70px; padding-bottom: 70px; } .navbar { padding-top: 15px; padding-bottom: 15px; border: 0; border-radius: 0; margin-bottom: 0; font-size: 12px; letter-spacing: 5px; } .navbar-nav li a:hover { color: #1abc9c !important; } .footer-pa.. 2021. 11. 7. To Do List 12 ] 최종 코드 EJS 템플릿을 사용해서 To Do List 만들기를 해보았다. 아직 데이터 베이스를 배우기 전이라 입력한 아이템은 저장되지 않는다. 또 원하는 아이템 리스트가 기본인 home 과 work 두 개만 가능하다. 내가 원하는 아이템 리스트를 만들어 거기에 아이템을 입력하고 아이템 리스트를 지우게 할 수는 없다. 다음 강의에서 설명이 나오길 바란다.. app.js const express = require("express"); const bodyParser = require("body-parser"); const date = require(__dirname + "/date.js"); const app = express(); app.set('view engine', 'ejs'); app.use(bodyParse.. 2021. 11. 3. To Do List 11 ] Refactoring 자바스크립트 함수 선언하는 6가지 방법 아래 글을 참고 하면 변수 선언함과 동시에 함수를 만들 수도 있다. https://dmitripavlutin.com/6-ways-to-declare-javascript-functions/ refactoring date.js 코드를 좀 더 간단하고 보기 편하게 정리해보자. 1. 함수 간단히 하기 1차 변수를 선언하면서 = 익명함수 정의 2차 변수도 지우고 바로 모듈과 익명함수로 연결 3차 exports shortcut 를 보면 module.export.getDate 은 더 간단하게 module을 생략해도 된다. export.getDate return 간단히 하기 let -> const let은 reassign이 가능하지만 const는 불가능하다. 이 안에 있는 코드들.. 2021. 11. 3. To Do List 10 ] module | exports | 다른 파일에 있는 function과 data 불러오는 법 지금까지 ejs, express, body-parse 등 node modules 를 사용하였다. 이 node modules은 어떻게 동작하는걸까? node_modules 폴더에서 ejs를 보면 많은 exports를 볼 수 있다. 이 exports는 무엇일까? 그 전에 우선 module에 대해 자세히 알아보자. Module 오늘 날짜를 알려주는 코드를 묶어서 app.js안에 놓지 말고 다른 파일로 옮겨놓자. app.js 안에 모든 코드가 계속 쌓이면 나중에 코드 보기가 어려워진다. route(get, post..) 와 상관없는 코드들은 외부 파일로 빼서 필요할 때 부르는 것이 더 효율적이다. date.js 파일을 만든다. 오늘의 날짜를 알 수 있는 코드인 빨간 박스 안의 코드들을 date.js 파일에 옮긴.. 2021. 11. 3. To Do List 9 ] Templating VS Layouts | header.ejs footer.ejs 따로 빼서 연결 EJS Layouts 이제 to do list 스타일이 아니라 About page, Contact page 처럼 다른 형태의 페이지를 만들 때는 ejs 템플릿을 쓸 수 없다. 하지만 about.html contact.html 파일을 새로 만들었는데 메인 페이지와 같은 css 스타일을 쓰고 싶다면 어떻게 해야할까? 이 때 ejs layouts 기능을 쓰면 편하다. headers, footers를 ejs로 컨텐트로 해놓으면 코드를 반복해서 쓸 필요도 없고, 같은 스타일의 적용을 받을 수 있다. views 폴더 안에 headers.ejs 와 footer.ejs 파일을 만든다. html header해당하는 부분을 잘라서 headers.ejs 파일에 붙인다. footer.ejs에도 마찬가지도 하단 부분을 잘라서 .. 2021. 11. 2. To Do List 8 ] work 페이지에서도 To Do List 되기 지금까지는 localhost:3000/ 홈페이지에서 To do list가 나오게 해보았다. 이제는 work에 관련된 내용만을 보기 위해 localhost:3000/work 주소를 따로 써 보자. work에 관련된 새로운 to do list가 나오게 해보자. 결과물 미리보기 title이 Work List로 바뀌고 새 아이템을 넣을 수 있게 해 놓았다. 1. To do list의 타이틀이 Work List로 뜨게 하기 index.ejs에서 위 제목에 오늘 날짜가 아니라 Work List가 와야하므로 이름을 로 바꿔준다. 2. app.get() 만들기 localhost:3000/work로 페이지 달라는 get request가 들어왔을 때 줄 수 있게 app.get() 을 만든다. 새로운 get에는 render.. 2021. 11. 1. To Do List 7 ] CSS 만들어 연결| index.ejs 수정하기 1. styles.css 파일을 만든다. 2. css 내용을 채운다. css 내용은 강사님이 이미 만들어 놓은 것을 따라 적었다. 3. css 폴더를 만들어 styles.css 파일을 넣는다. 4. index.ejs 에서 css 링크를 건다. (안됨) 이 전에는 컴퓨터 안에서 연습할 때 위 처럼하면 바로 화면에 떴지만 이제는 아무런 적용이 되지 않는 것을 발견할 것이다. express는 자동으로 모든 폴더를 서버에서 보여주지 않는다. 메인 access 포인트인 app.js와 views 폴더에 있는 것을 기본으로 보여준다. css 파일은 https://localhost:3000/css/styles.css로 찾을 수 없다는 말이다. 그럼 express에 css도 서버에서 나오게 하라고 명령 해야한다. css.. 2021. 11. 1. To Do List 6 ] Scope | Local | Globe function 안의 variable은 내부에서 호출한다. function 안의 variable은 외부에서 호출할 수 없다. function 안의 variable은 다른 function에서 호출 할 수 없다. Local variables 외부에서 호출 할 수 없는 variable을 local variable이라고 한다. variable을 함수 밖으로 빼면 function 안밖에서 호출 가능하다. Global variables function이 아닌 경우 if/else, for/while statement 등인 경우 외부에서 var에 접근 가능하다. function인 경우 var, let, const 모두 외부에서 호출 불가능하다. 하지만 if / else, for / while 인 경우 let, cons.. 2021. 11. 1. To Do List 5] 할일 입력하기 | res.redirect() | 아이템 입력시 ul에 자동 추가되게하기 이 전에는 To Do List 맨 위에 들어갈 오늘 날짜가 나오게 하는 법을 알아보았다. 오늘 포스트는 아래 처럼 리스트에 내용 입력하면 리스트에 보이게 하는 법에 대해 알아보자. 브라우저에서 유저가 할일을 입력하면 서버에서는 그 내용을 받아 다시 브라우저 화면에 띄우는 작업을 해야한다. 유저가 입력한 내용 콘솔에서 받아보기 ejs에서 form 으로 입력란 만들기 먼저 유저가 입력한 내용을 서버에서 받을려면 post request가 필요하다. 서버에서 post request를 작성하기 전에 먼저 index.ejs에서 입력 받을 form과 unorder list로 할 일을 미리 적어본다. unorder list 만들고 내용 입력하기 post request에 쓸 form 만들기 index.ejs에서 add .. 2021. 10. 30. To Do List 4] tolocaleDateString( ) Switch로 일일이 지정하지 않고 더 간단하게 설정하는 방법이 없을까? 자바스크립트에서 toLocaleDateString()을 사용하면 날짜, 요일을 한꺼번에 받아서 사용할 수 있다. https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date options 까지 적어주면 숫자로만 나오는게 아니라 옵션 설정한 대로 나온다. day: 날짜 "numeric", "2-digit". weekday: 요일 "narrow", "short", "long". year: 년도 "numeric", "2-digit". month: 월 "numeric", "2-digit", "narrow", ".. 2021. 10. 30. To Do List 3] EJS 탬플릿으로 평일, 주말 글자색 다르게 하기 | EJS 태그 주말인 경우 빨간 글씨로, 평일인 경우 하늘색 한 파일에 js, html 같이 있게 되었다. 각 줄마다 ejs 태그를 씌여준다. js는 html은 결과 ejs 태그 https://ejs.co/ 2021. 10. 30. To Do List 2] EJS 템플릿 시작하기 app.get( )으로 요일 별로 다른 html 문서를 보내야 할 때 html 문서를 일일이 7개 만들 필요없이 템플릿 하나만 써서 문서 안에 내용만 일부 바꿔서 보낼 수 있다. EJS, PUG(구 jade), nunjucks 등 다양한 템플릿이 있지만 지금은 EJS에 대해 알아보겠다. EJS 배우기: https://learn.co/lessons/using-ejs-in-express Templating 이란? HTML template를 만들어서 내용 중 일부분만 변경해 사용하는 것 Express에서 EJS Templates 사용하는 법 1. 터미널에서 ejs 다운받기 npm i ejs 2. views 폴더 만들기 일단 탬플릿 파일을 먼저 만들어 보자. views 폴더 만들기 작업 중인 Todolist 폴.. 2021. 10. 27. To Do List 1] 기본 세팅, app.get( ) 형태 기본 세팅 1. 시작 폴더, 파일 만들기 mkdir todolist-v1 touch index.html app.js npm init npm i express body-parser 2. app.js 기본 문형 완성하기 터미널 실행 후 npm i express body-parser const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.get("/", function(req, res) { res.send("Hello"); }); app.listen(3000, function() { console.log("server started on port 3000") }); app.ge.. 2021. 10. 25. 이전 1 다음
