# todoList
추석 프로젝트 - 1일차
긴긴 추석 연휴를 맞아 백엔드와 협업하는 todo 프로젝트를 완수하기로 했다. 오늘은 삽질이 99%지만 삽질한 시간들이 아까워서 기록이라도 하기로 한다. 오늘의 삽질이 내일의 디버깅이 되기를... 1. todo 완료 기능 만들기 완료기능 코드는 이분 벨로그를 많이 참고했다. https://velog.io/@hamham/리액트로-ToDo앱-만들기3-완료-표시-삭제-편 (감사합니다) 완료기능의 코드는 다음과 같다 2. 완료된 Todo 개수 세기 나는 todo 달성률을 나타내고 싶었다. 그러기 위해서는 (완료된 todo 개수 / 전체 todo 개수)의 값을 구해야 한다. 전체 todo 개수는 쉽게 알아냈는데 완료된 todo 개수 세는 것이 나를 2,3시간 동안 괴롭혔다....ㅂㄷㅂㄷ😡 나의 시도는 다음과 같다. 1. 완료된 것을 useState checked에 배열로 담기 → 배열 길이를 재기 완료선택을 할 때마다 특정 todo를 checked 배열에 담는
TodoList 기능 (23.09.13)
💡 TodoList 기능 📁 VS Code 🔎 TodoList.js 🔎 App.js 🔎 App.css 📁 Spring 🔎 TodoController.java 🔎 TodoService.java 🔎 TodoServiceImpl.java 🔎 TodoDao.java 🔎 todo-mapper.xml 💻 구현 화면
React로 TodoList 만들기 (23.09.07-08)
💡 TodoList 만들기 👀 코드로 살펴보기 📁 R05_todolist1.js 📁 App.js 📁 App.css 💻 구현 화면 이렇게 간단한 형태로 TodoList를 만들어 보았다. input 태그에 텍스트를 작성한 뒤 '추가하기' 버튼을 클릭해 보면 방금 작성한 텍
23.9.6
플러터와 chatGPT로 간단한 TodoList 만들기 해당 깃헙 링크 발단 우리 회사는 iOS와 Android를 Flutter라는 기술로 한 번에 개발한다. 항상 검수만 하다가 문득 dart가 궁금해졌다. JavaScript와 비슷하단 이야길 많이 들어서 더 궁금해졌다. 그래서 나도 한 번 배워볼까? 란 생각이 들었다. 그리고 난 chatGPT의 위대함을 이미 많이 느꼈다. 그래서 이것도 chatGPT가 해줄 수 있지 않을까 하는 호기심이 생겼다. 그렇게 1일차 첫 날은 설치만 했다. 하루에 1~2시간 이내로 해보자는 토이 프로젝트였기 때문에 주제도 리엑트 때 주구장창 했던 TodoList로 했고 그 전에 설치가 까다롭단 이야길 들어서 설치만 해보고 잠들기로 했다. 진짜 한 시간 넘게 걸렸다. 그 놈의 안드로이드 툴킷 때문에.. 진작 안드
Netlify를 사용하여 내가 만든 TO DO LIST 무료 배포하기
내가 만든 TO DO LIST 배포용 TO DO LIST Velog 정리 > 내가 만든 TO DO LIST를 다른 사람들이 사용할 수 있도록 무료 배포하는 방법! netlify 홈페이지에 접속하여 회원가입을 한다. https://www.netlify.com/ > 2. 좌측 메뉴에 'Sites' 버튼 클릭해준다. 우측 'Add new site' 버튼 클릭 후 'Import an existing project'를 눌러준다. > 4. gith
Todo앱 시리즈1 - Alamofire
반드시 구현해야 하는 부분 [x] table view cell만들어서 cell 재활용하기 [x] 할일 목록 가져와서 cell에 데이터 뿌려주기 [x] 할일 추가하기 할일 추가하기 부분에서 post로 데이터를 보내줘야 한다 post로 데이터를 보내주고 난 후에 success라면 popUp이 닫힌다 PopUp이 닫힌 후에 tableViewCell의 데이터로 추가한 데이터가 들어가 져야 한다 [x] 할일 추가할 때 6글자이상 데이터가 입력되지 않았다면 아래 label로 6글자 이상 입력하라고 하고 팝업창 닫지 않기 평소에는 hidden으로 화면상 안보이도록 하고 6글자가 안되면 label을 보이게 하기 [ ] 특정 할일 가져오기 [x] 특정 할일 수정하기 [x] 기존 할일 삭제하기 [x] 페이지네이션 구현하기 맨 아래에 스크롤이 내려오면 다음페이지에 해당하는 데이터를 불러오
[Javascript] TO DO LIST 만들기 (3)
TO DO LIST 만들기 (1),(2) 에서 부족했던 부분들을 공부하여 수정 후 velog에 올려본다. TO DO LIST 만들기 (1) TO DO LIST 만들기 (2) > ✍ 내가 만든 TODOLIST (2)에서 부족했던 부분 Check ! 브라우저를 새로고침 하게 되면 내가 작성해둔 리스트가 사라진다. > ✍ TO DO LIST 만들기 (3)에 추가한 기능 Check ! localStorage를 사용하여 브라우저 새로고침을 하게 되어도 내가 작성한 리스트가 계속 화면에 표시되게끔 기능을 구현해주었다. (삭제한 리스트는 새로고침시 보이지않게 코드 작성) 
[Todo List 만들기]Bootstrap-jumbotron, localStorage 적용
점보트론은 특별한 내용이나 정보에 특별한 주의를 환기시키키 위한 큰 상자를 나타낸다.또한 모서리가 둥근 회색 상자로 표시된다. 보통 블로그나 회사 홈페이지에 맨위 상단에 소개글이나 사진 등으로 많이 사용한다. div class="jumbotron text-center" style="margin-bottom:0" ↑ 나는 맨위 상단과 하단에 점보트론을 사용하였다. localStorage란? =>localStorage를 사용하면, 브라우저에 key-value 값을 저장소(Storage)에 저장할 수 있다. setItem() - 인자값(매개변수) 2개 필요 key, value로 추가하는 함수 getItem() - 인자값 1개 필요 value값 읽어오는 함수 if(localStorage.getItem("todoListData") == null) { localStorage.setItem("todoListData", J
TO DO LIST 업데이트
📌업데이트 할 내역 할 일 완료 시 전체에 선이 그어지는 내역 수정하기 새로고침 시에 사라지는 내용 수정하기 1. 할 일 완료 시 중앙에 선 긋기 기존의 내용은 liEl 내부에 할 일을 나타내는 input.value 의 값을 어떠한 태그로도 감싸지 않고 그대로 문자로 나타내게 표현했다. 그리고 input 박스에 체크하게 되면 li의 모든 문자의 중앙에 선이 그어지는 문제가 발생했다. >### ❌ 문제 innerHTML을 통해 내용을 생성한 뒤에 중앙에 선을 그려고 하니 li의 모든 자식 요소에 선이 그어졌다. 할 일을 의미하는 inputEl.value 값을 제외하고 button 태그에 있는 삭제라는 텍스트까지 선이 그어졌다. 변경사항 >### ✔️ 해결방안 li태그 내부에 innerHTML로 생성되는 내용 inputEl.value를 span 태그로 감싼 뒤에 span 태그에
[Javascript] TO DO LIST 만들기 (2)
TO DO LIST 만들기 (1) 에서 부족했던 부분들을 공부하여 수정 후 velog에 올려본다. 처음 내가 만든 TODOLIST > ✍ 부족했던 부분 Check ! 할 일 작성 후 Enter를 눌렀을때 리스트에 추가되게끔 기능을 구현하고 싶었는데 못하였다. 할 일을 작성하여 추가하면 리스트가 여러 개 생성되는 게 아니라 계속 리스트가 새로고침 되어 전에 작성했던 리스트가 없어진다. > ✍ 추가하고 싶은 기능 Check ! 할 일 완료시 체크박스에 체크를 해주면 선을 그어준다. ❌ 버튼을 누르게 되면 해당 할 일을 삭제해준다. 📌 todo.html 📌 todo.css 📌 todo.js ✍ 수정 사항 (부족한 부분 개선) 1. 할 일 작성 후 Enter를 눌렀을때
[Javascript] todo-list
리액트로 todo-list 를 만들기 전, 기능을 생각해볼 겸 JS로 먼저 만들어보았다. > 기능구현 개요 input value 값을 받아 동적으로 생성한 li 태그에 넣는다. li태그 안에 span, i 태그를 생성하여 리스트 우측에 삭제 버튼을 만든다. 현재시간 불러오기 리스트 추가 기능 리스트 변경 기능(완료 및 삭제) 폰트어썸 아이콘 추가 ➡️ 현재시간 불러오기 new Date() 객체 및 메소드 활용 getMonth() + 1 달을 출력하는 getMonth() 메소드는 반환값이 0~11 이므로 정확한 값을 얻기 위해서는 "반환값 + 1" 을 한다. getDay() 요일을 출력하는 getDay() 메소드는 반환값이
[Javascript] TO DO LIST 만들기 (1)
To Do List 관련 블로그나 강의를 찾아보지 않고 내 실력으로 어디까지 만들어 볼 수 있을까 궁금해서 검색 없이 만들어 보았다. 완벽하게 기능 구현은 하지 못하였지만, 지금까지 작성했던 코드를 리뷰하면서 어떤 부분이 부족하였으며 추가로 알게 된 부분에 대해 차근차근 정리해 볼 생각이다. 📌 만들고 싶었던 기능 할 일 입력 후 엔터 혹은 추가 버튼을 누르면 아래 리스트에 추가 Delete 버튼을 누르게 되면 해당할 일 삭제 ✍ todo.Html ✍ todo.css ✍ todo.js 📌 어려웠던 부분 & 해결방안 할 일을 입력 후 Enter를 눌러도 리스트에 추가되게끔 기능을 구현하고 싶었는데 못하였다. 해결 방안 : Html에서 해당 input 바깥쪽에 form으로 감싸주고 javascript로preventDefault() 를 통해서 submit할 때 브라우저가 새로고침 되지 않도록 event를 컨트롤해준
[React] Todo-List
React로 간단하게 todolist를 만든 경험을 바탕으로 Typescript와 Firebase를 추가로 활용해서 조금더 todolist를 업그레이드를 해보았다. > ## ✅ Todo-List 구성 먼저 Todo-List를 만들기 전에 필요한 기본적인 구성을 아래와같이 체크를 해보았다. Firebase 활용한 회원가입, 이메일 로그인 및 구글 소셜로그인 로그인을 통해 사용자별로 todolist를 관리하기 todolist의 추가, 가져오기, 수정, 삭제 등 구성 사용자가 로그인을 하면 로그인한 유저정보(email, uid)에 대한 상태를 저장 한다. > ## 📚 todolist 추가 list를 적을 input에 onChange로 값을 추적해서 setTodoValue에 담아 사용하고 user 컬렉션에 사용자의 uid별로 문서를 넣고 todo 컬렉션에 todo에 대한 정보들을 담아 추가한다. 만약에 input에 todoValue의
[React] TodoList 만들기
📃 TodoList 만들기 📌 만들기 전에... TodoList에 어떤 구현을 하면 좋을까? 구현할 항목들을 어떤식으로 배치하면 좋을까? React로 만들기 위해서 몇 가지의 상태관리 기능이 필요할까? 기능들을 여러가지 훅, 함수들로 어떻게 구현을 진행하면 좋을까? > 개인적으로 간단한 토이프로젝트를 진행해보면 좋을 것 같다고 생각해서 가장 처음으로 만들어보는 프로젝트를 "내가 오늘 해야할 일을 어떤식으로 정리해볼까?"라는 생각에 TodoList를 한번 만들어봐야겠다는 생각이 들었다. 👨🏻💻 기능 및 메소드별 코드 설명 💡 useState() 상태관리 > * 내가 할 일의 목록을 관리하는 'todos'와 input란에 입력된 텍스트를 관리하기 위해 'todoText'를 useState로 상태 관리를 해준다. 또한, 'darkMode' 상태를 사용하여
TO DO LIST 만들기
HTML과 CSS, JavaScript를 공부하고 공부한 내용이 얼마나 머릿속에 남아있고 활용할 수 있는지를 점검하기 위해 TO DO List를 만들어 보기로 했다. 사용자의 입장에서는 구현된 기능들을 사용할 때 별생각 없이 사용했었는데, 직접 기능들을 구현하려고 하니 어떤 기능들을 구현해야 하는지 고민되었다. 사소한 기능들은 제외하고 필수적인 기능들만 살펴봤을 때 기본적으로 추가, 삭제, 완료 등의 기능이 필요했고, 이러한 기능들을 위주로 구현하려고 했다. 🔍 구현하려고 했던 기능 ✚ Add Item 버튼을 누르면 입력받은 할 일을 추가하는 기능 ✂️ 삭제 버
[Web Project #1] Todo List Day5
앞선 과정에서 계속 html에 사용된 이미지 파일을 업로드 하는데 애를 먹었었다. 기존의 코드는 http.createServer를 사용해 웹서버를 구축했다. 이 방법을 이용해 이미지를 출력하는 방법들을 구글링 해보았지만.. 아무것도 작동하지 않았다ㅜㅜ 결국 express를 이용해 서버를 다시 구축해 간단하게 이미지를 출력하는데 성공하였다. 참고 사이트 : https://velog.io/@goody/NodeJs-Express-%EB%A1%9C-%EC%9B%B9%EC%84%9C%EB%B2%84-%EA%B5%AC%EC%B6%95%ED%95%
[2023-2] 프로젝트랑 할일
여름 방학 [상상기업] CS기술면접대비(이름미정) 프론트엔드: 리액트 백엔드: 스프링 [개인프젝] 캡스톤 코드 jsp->리액트 [기사] 정처기 실기 7/22 [개인공부] 노드js 교과서 인프런 강의 듣기 2학기 [스터디] 코테스터디 [sqld] DB 잘 다룰줄 몰라서 공부해야함 [토익스피킹] 졸업인증제땜에 해야함 [프로젝트] 노드로 프로젝트 하나 만들고 싶당.
TodoList
강의 제목 7. TodoListInMemory_초간단 인-메모리 TODO 리스트 만들기 간단한 ToDoList 페이지 > 페이지에서 할일을 메모를 하고 체크 박스를 통해 완료 유무 체크 강의 에서는 inMemory방식으로만 진행 했으며 개인적으로 DB연동 페이지도 만들어 봤습니다. InMemory TodoList TOdoListInMemoery 하단 박스에 할일 작성후 enter를 하면 할일 목록이 추가됨. 남은 할일은 체크박스가 체크 되지 않은(완료되지 않은) 목록의 count 할일을 완료 하면 체크 박스를 체크 하면 남은 할일 count가 줄어듬. 
[React] 초간단 투두리스트 만들기
리액트를 어떻게 공부하면 좋을까 해서 시작한 TO DO LIST..🤔 대략 이런 형태의 리스트를 만들어 보았다. UI - JSX로 HTML 작성 & CSS 입혀주기 추가 - input에 입력한 리스트 생성하기 삭제 - 입력한 리스트 삭제하기 이 순서로 진행했고, 처음엔 클래스형으로 작성했었는데 대세를 좇기위해 함수형으로 바꿨다. 1. UI - HTML, CSS 가장 먼저 UI. 디자인을..내가 했어야했다는 점만 제외하면 어렵지 않게 작성할 수 있었다. 디자인은 너무 어렵다..💦 index.js
[멋사] TodoList-2
저번에 올린 todo-1 과 이어진다. (이전 페이지 참고 부탁) 06. Todo Post > 결과 미리보기 일단 생성을 할 때 폼 형식으로 보내기 때문에 foms.py (폼을 관리할 파일)을 만들어야한다. todo/forms.py todo/templates/todo/todo_post.html 저번에 작성한 photoweb에서도 form을 post방식으로 보내야하므로 csrf_token은 필수이다. todo/views.py todo/urls.py todo/templates/todo/todo_list.html 07. Todo Edit > 결과 미리보기 ![](https://velog.velcdn.com/images/kim