분류 전체보기364 [ToDoList DB 7] 대소문자 상관없이 주소창에 같은 내용 나오기 주소창에 home, Home 을 따로 인식하고 있다. 이 건 Lodash를 이용하면 편하다 npm으로 lodash를 다운 받는다. Lodash Doc에서 Capitalize를 보면 그럼 app.js에서 lodash를 불러온다. 이 코드를 이렇게 _.capitalize()로 감싸준다. 이미 Home, home으로 따로 저장된 아이템들이 있으므로 모든 데이터를 삭제 시킨다. Work 대문자 일 때 work 소문자 일 때 Work 일 때의 아이템도 들어가 있다. 대소문자 상관없이 아이템이 모아진 것을 확인 할 수 있다. 2021. 11. 28. [ToDoList DB 6] 데이터 삭제- 해당 페이지에 있는 데이터 삭제 지금까지의 코드로는 해당 페이지에서 아이템을 지우면 메인인 "Today"로 이동만 되고 막상 해당 아이템은 지워지지 않는다. cleaning rooms를 체크박스에 체크해서 지웠는데, 바로 "Today" 화면으로 이동을 해버린다. 근데 다시 home으로 돌아가면 그 아이템은 지워지지 않고 아직 살아있다. 이 문제를 해결해 보자. list.ejs에서 delete가 일어나는 form은 다음과 같다. method="post" post request를 action="/delete" /delete route로 보내고 input에 설정된 내용을 전달pass over한다. value:"" 는 유저가 지우기를 원하는 아이템의 id이고 onChange="this.form.submit() " 체크박스는 submit 버튼이.. 2021. 11. 27. [ToDoList DB 5] 해당 페이지에 맞게 아이템 추가 시키기 Adding New Items to the Custom To-Do Lists 타이틀이 coding인 TO-DO LIST에 내용을 입력하여도 입력한 내용은 메인 페이지인 Today에 추가가된다. 이유는 list.ejs에서 + 사인을 누르면 홈으로 가도록 설정되어 있기 때문이다. 그리고 post로 내용들어오면 redirect도 홈으로 가게 설정되어있다. 여기서 각각의 타이틀로 입력한 내용이 가도록 해보자. 할 일을 입력하고 나서 submit인 + 버튼 눌렀을 때 의 name 뿐 아니라 value도 같이 서버로 이동시킨다. 이 때 value의 이름을 타이틀과 같이 맞춰 준다. 이 list 타이틀을 담을 변수를 하나 만든다. 만약 리스트의 타이틀이 메인 페이지인 "Today"인지 아닌지에 따라 다르게 명령어를 .. 2021. 11. 26. [ToDoList DB 4] Work 페이지 만들기 | Express Route Parameters 이제 오늘 할일 리스트 뿐만 아니라 work list 도 나오게 하려면 어떻게 해야할까? 지금은 아무 것도 연결된 것이 없어서 에러가 난다. home으로 갈려고 localhost:3000/home을 눌렀을 때 home 관련 할 일이 뜨게하려면 어떻게 해야할까? express는 route parameter를 이용해 dynamic route들을 만들어서 이를 해결 할 수있다. get("/work") route를 지우고, Express Route Parameters를 만들어 보자. get과 post route 사이에 적어본다. 주소창에 home을 쓰면 콘솔에도 그대로 나온다. work를 쓰면 그대로 나온다. 라우트 파라미터와 기본 멘트를 담을 새로운 스키마와 모델을 만든다. items:[] array에 담는다.. 2021. 11. 25. [ToDoList DB 3] 아이템 지우기 To Do List 만들기를 하고 있다. 할 일을 완료해서 체크를 하면 줄이 그어지며 지워져하는데 아이템이 지워지지는 않는다. 아이템 지우는 작업을 해보자. 1. list ejs에서 이미 있는 div를 form으로 감싼다. 2. 브라우저에서 보면 아이템 줄이 안맞는데 이 것은 방금 만든 새 form이 이미 설정된 form에 css 적용되어서 그렇다. 클래스를 설정하여 아래에 있는 form 만 적용되게 한다. 체크 박스가 있는 form에서 delete route로 가게 설정한다. 3. 그리고선 app.js에서 app.post()로 delete route를 만들어 form에서 보낸 내용을 받을 수 있게 한다. list.ejs에서 체크박스 form은 submit 버튼이 없다. 대신 체크 박스를 클릭하면 지워지.. 2021. 11. 25. [ToDoList DB 2] DB에 아이템 입력하기 To Do List 서버와 몽고디비 데이터 베이스를 연결하는 작업을 하고 있다. 앞 포스트에서 몽구스를 이용해 몽고디비를 연결하고, 데이터 베이스에서 데이터를 찾아서 EJS 파일을 렌더하는 것을 해보았다. 그래서 아래 화면까지 만들었지만 할 일을 입력하면 items 가 정의 되지 않았다는 에러가 난다. 1. 위의 post()로 들어오는 데이터가 데이터 베이스에 저장이 되지 않기 때문이다. post()에 들어오는 데이터를 데이터 베이스에 저장해야 한다. post에 이미 입력된 array에 저장하는 내용을 지운다. list.ejs의 form에서 이름을 가져와서 다음과 같이 데이터 베이스에 저장을 한다. mongosh에 들어가서 데이터베이스에 저장되었나 확인하기 get("/")으로 가서 실행되게 redirec.. 2021. 11. 25. [ToDoList DB 1] To Do List에 데이터 베이스 연결 | DB 데이터 ejs 로 렌더링 기본 시작 코딩 1. 터미널에서 다운 받은 파일로 이동한다. 2. 터미널에서 package를 다운 받는다. npm i 3. line14~15를 지운다. 더이상 array로 아이템을 담을 필요없이 데이터베이스에 담을 것이다. 데이터 베이스 연결하기 4. mongoose를 실행한다. npm i mongoose 5.mongoose를 불러온다 6. mongoose와 연결하고, 새로운 database를 만든다. 주소 뒤에 붙은 todolistDB가 데이터베이스 이름이다. 스키마, 모델 만든 후 데이터 입력하기 7. schema 만들기 field가 하나 밖에 없음 8. mongoose model 만들기 / schema를 바탕으로 mongoose.model("singularCollectionName", schemaN.. 2021. 11. 25. [Mongoose] DELETE DELETE https://mongoosejs.com/docs/api/model.html#model_Model-deleteOne deleteOne id로 지우기 blueberries를 지워보자. 1. 어디 지울지 선택 2. 에러 메세지 blueberries가 사라졌다. name으로 지우기 콘솔에서 Peaches 사라짐 mongosh에서 Peaches 사라짐 deleteMany() name이 John으로된 데이터는 모두 지워진다. 콘솔에서 성공 메세지가 떴다. name이 John으로 된 데이터들이 모두 지워졌다. 2021. 11. 21. [Mongoose] Update Model에 보면 querying, updating, deleting에 대한 내용이 나온다. https://mongoosejs.com/docs/api/model.html UPDATE https://mongoosejs.com/docs/api/model.html#model_Model.update filter: 어떤 것을 업데이트 할지 doc: 무엇을 추가할지 [callback]은 익명함수로 에러인지, 성공인지 콘솔에 메세지 나오게 하기 name 넣는 것을 깜박했는데 집어넣을려면 어떻게 해야할까? 이 때 update이 필요하다. 1. 어디에 2. 무엇을 업데이트 할지 3. 콜백 에러 메세지 mongosh에 추가된 내용이 나온다 맨 마지막에 붙는데 순서는 중요하지가 않다. 나중에 property를 원할 때 fr.. 2021. 11. 21. [Mongoose] Data Validation | 제약 걸기 데이터 입력해 들어올 때 validation 를 만들어 놓으면 참 편해진다. Validation이란? nosql은 일정한 규격없이 데이터 베이스에 모든 데이터를 다 입력 받을 수 있는데, 이게 나중에 엄청 관리하기가 힘들어진다. 그래서 validation을 이용해 데이터를 가려받을 수 있게 한다. 미리 입력받을 데이터에 프리셋을 주는 것이다. 예를 들어 나이를 입력받는데 Number로만 validation 해놓으면 10,000으로 입력해도 저장이되어버리니 Min 1 Max 120 이렇게 preset을 해놓으면 데이터를 가져 받을 수 있다. 데이터의 validation 넣는 법 https://mongoosejs.com/docs/validation.html 들어오는 데이터의 조건을 코드로 일일이 작성할 필요.. 2021. 11. 21. [Mongoose] READING | find() | close()연결끊기 native mongodb driver로 데이터 검색할 때는 아래와 같은 코드로 작성하였다. 하지만 이제는 이렇게 긴 코드는 필요없다 Mongoose로 데이터 찾기 mongoose는 간단하다 find() 함수를 사용하고, 콜백 함수까지 받을 수 있다. 콜백함수의 파라미터를 보면 파라미터1 은 err를 넣고 파라미터2 는 검색하고자 하는 내용을 넣어준다. fruits로 collection 안 모든 데이터가 나오게 했다. 에러가 없으면 검색 내용이 나온다. 나오는 데이터들은 array 안에 들어가 있는 자바스크립트 오브젝트이다. dot notation을 이용해서 이 데이터들의 properties를 활용할 수 있고, 2개의 다른 method를 보낼 수 있다. pass around. fruit은 각각 prope.. 2021. 11. 19. [Mongoose] 몽구스 시작하기 | INSERT | INSERT MANY 지금까지 mongodb 데이터 베이스에 데이터 입력하는 법을 배웠다. 이 mongodb 데이터 베이스를 서버와 연결하려면 2 가지 옵션이 있다. 첫 번째는 그냥 몽고디비(mongodb native driver)를 사용하는 것이고, 두 번재는 몽구스(mongoose)를 사용하는 것이다. 많은 개발자들이 몽구스를 더 선호한다. 이유는 몽구스 코드가 더 쉽고 간단하기 때문이다. 몽구스 문서보기 https://mongoosejs.com/ native mongodb driver로 몽고디비와 서버 연결하기 (비추) native mongodb driver를 사용해서 mongodb와 서버와 연결하려면 아래와 같은 코드가 필요하다. 여기서 db를 입력하는 코드들을 아래 입력한다. 입력 코드는 생략하도록 하겠다. 그럼 이.. 2021. 11. 19. [MongoDB] CRUD - DELETE DELETE https://docs.mongodb.com/manual/tutorial/remove-documents/ document 하나 지우기 db.collectionName.deleteOne({ }) 1. id:2 인 row 지우기 2. 지워졌나 확인 id: 1 만 남았다. 2021. 11. 15. [MongoDB] CRUD - UPDATE update https://docs.mongodb.com/manual/tutorial/update-documents/ 1. 한 개만 업데이트하기 updateOne({변경위치},{$set: {변경내용}}) 변경되었나 확인해보기 db.collection.find() 2021. 11. 15. [MongoDB] CRUD - QUERY (READ) READ collection에서 documents를 검색(retrieve) 해준다. 1. 모든 데이터 다 불러오기 db.collection.find() "_id" value는 항상 return 해준다. 2. collection에서 일부 데이터만 뽑아오기 db.collection.find(query, projection) 원래는 query와 projection 2 가지의 파라미터가 있다. 이 둘은 옵션이라서 안 적어줘도 된다. query 란? ✔️ 검색을 하기 위해 정해진 질의어. ✔️ document 타입이다 ✔️ optional이다. ✔️ 파라미터 자리에 query 안쓰면 collection 안 전체 document가 리턴된다. ✔️ query operatiors를 사용해 구체적으로 검색가능하다. pr.. 2021. 11. 15. VIM 사용하기 1. 터미널에서 vim 파일명을 입력해서 실행 시킨다. vim 파일명 2. i 를 눌러서 insert mode로 전환한다 3. 내용을 입력한다 4. 끝내기 :wq! 2021. 11. 13. 데이터베이스 SQL vs NOSQL 블로그 만들기를 하고 있다. 매 번 서버를 리프레쉬하면 입력한 내용이 모두 날아가는 것을 보았다. 그럼 이제는 입력한 내용을 저장해 놓을 데이터 베이스가 필요하다. internet live stats 사이트를 가보면 실시간으로 만들어지고 있는 어마어마한 데이터의 양을 알 수 있다. https://www.internetlivestats.com/ 데이터 베이스가 필요한 것까지는 알겠는데 이제는 어떤 데이터 베이스를 사용할 지 선택해야 한다. 데이터 베이스는 크게 2가지로 나눠 볼 수 있다. SQL Sequel bases Structured Query Language 데이터 베이스 많은 sql 데이터 베이스가 있다. customers details, products, inventories, orders.. S.. 2021. 11. 12. [블로그 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 ··· 6 7 8 9 10 11 12 ··· 18 다음
