전체 글335 [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. 데이터베이스 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] 기본 세팅 강의 자료에서 다운 받았다. 파일 내용은 아래와 같다. 각 파일에 미리 세팅된 코딩을 적어본다. 그리고 파일목록에는 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. 11/9 간단 블로그 만들기 끝 | 개발 독학 중인 일상 코딩 독학 중인 일상 손톱 씹는 습관, 입술 만지는 습관이 생겼다. 산만하다. 이 건 독학해서 문제가 아니라 내 문제일 수 있지만 난 쉽게 산만해진다. 화장실 가서 잠깐 유튜브 보려다가 그냥 꼬리에 꼬리를 무는 클릭을 하고 있는 나. 뜬금없이 지디의 근황이 엄청 궁금해지고, 갑자기 영어 실력은 어떻게 향상시키지?하는 복합적인 고민을 하고 있다. 개발 공부를 하는 중에도 계속 진로 고민이 된다. 아는 사람도 없고 아직 구직을 하지 않았기에 앞 날이 그냥 뿌옇게 보인다. 막막하다. 지금하고 있는 유데미 강의를 보면 자바스크립트 리엑트 node.js mongodb mongoose 등 풀스택으로 배우긴 하지만 비전공이라 취업이 될진 모르지만 유튜브를 보면 풀스택으로 취업하지 말라 그러고 내 개인적으로도 프론트엔.. 2021. 11. 6. EJS 끝. To Do List 만들기 EJS 가 끝났다. 아주 편리한 기능을 배웠다. 불필요하게 코드 반복을 하지 않고 간단하게 할 수있는 방법이다. 초반에는 뭔지 감이 안와서 좀 헷갈린다 생각했는데 뒤로 갈 수록 재밌게 공부했다. 강의 내용이 지금 코드를 작성해도 그대로 동작해서 더 재밌게 한 것같다. 하지만 궁금한 내용이 생겼는데 html은 언제쓰나하는 것이다. EJS 를 쓰면 html은 쓸 필요가 없어지는 것 같다. 2021. 11. 3. 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. APIs, Git을 끝냈다 APIs 강의 들을 때는 정말 답답함이 많았다. 진도도 나가지 않았다. MailChimp으로 회원가입하면 회원 이메일 주소를 이메일 발송 리스트에 올리는 작업인데 API 강의 촬영 때와 지금의 MailChimp 사이트가 완전 달라져서 화면 안에서 정보 찾기도 어려웠고 메일침에서 제공하는 API 명령어도 배우지 않은 것들이라 생소하고 이해도 가지 않았었다. 막막한 벽에 부딪힌 기분이 계속 들었다. 다시 새 강의로 올려달라는 댓글도 많았다. 어떤 사람이 댓글로 자신이 찾은 방법을 올렸다. 어찌저찌 실행이 되긴 했지만 아직도 찜찜함은 여전히 있다. 나중에 실력이 좋아졌을 때 다시 시도해 봐야 하는 부분이다. 그에 반해 깃은 예전부터 궁금하던 거라서 재밌게 강의를 들었다. 하지만 깃허브 역시도 조금씩 화면이 바.. 2021. 10. 24. 깃허브 a personal access token 에러 해결하기 | remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. 내 컴퓨터 커밋된 파일을 깃허브에 올릴 때 아래와 같은 에러가 발생한다. 2021년 8월 13일 이후 personal access token 이 필요하다는 내용이다. remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. [ 1 ] 사용자 정보 아이콘을 누른다. 맨 오른쪽에 있는 동그란 버튼 아이콘을 눌러 아래에 있는 setting을 누른다. [ 2 ] Developer settings를 누른다. [ 3 ] Personal access tokens 를 누르고 Generate new token을 누른다. [ 4 ] Note에 토큰 이름을 입력하고 (.. 2021. 10. 22. API 강의를 마치며 찝찝한 마무리 강의 들으며 만든 웹사이트를 헤로쿠 서버에 올리는 것까지 했는데 내가 해결할 수 없는 에러 발생으로 결과물을 볼 수 없었다. 개운하지 않은 마무리 백엔드를 더 배우고 나서 다시 돌아와야겠다. 자료의 바다에 빠져 허우적대는 절 구해주세요~ API 강의를 듣고 있었습니다. 이 번 강의는 이 전과는 다른 새로운 벽에 마주한 기분입니다. 날씨 API를 연결해서 도시 이름을 입력하면 그 곳의 온도와 날씨가 나오게 하는 것을 해보았습니다. 여기까지 재밌었습니다. 그 다음 API는 Mailchimp이었습니다. 고객이 회원가입을 하면 고객 이름, 이메일이 내 메일침에 바로 저장이 되고 내 메일을 고객 1000명에게 모두에게 한 번에 보낼 수 있다고 해서 '신기한 게 다있네 편한 세상' 이라 생각하며 강의.. 2021. 10. 18. 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음
