Databases/To Do List DB7 [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. 이전 1 다음
