만학도 프로젝트
-
[JavaScript] 투두리스트 만들기 - 생성한 아이템 저장하고 불러오기 (2)만학도 프로젝트/JavaScript TodoList 2024. 3. 24. 22:00
지난 글 정리 지난 글에서 로컬스토리지에 할 일들을 저장하는 기능까지 완료했었습니다. 지금까지 완성한 코드를 실행해보면 아이템들이 잘 생성되기도 하고 로컬스토리지에 저장도 되지만, 막상 페이지를 새로고침하면 모두 사라지는 상태인데요. 심지어 그 상태에서 새로고침을 한 이후에 새로운 아이템들을 생성하게 되면 아래 이미지처럼 로컬 스토리지에 저장된 아이템과, 화면에 보이는 아이템들 간의 차이도 발생하게 됩니다. 그럼 지금부터는 페이지를 새로고침했을 때 로컬스토리지에 저장된 값을 불러와서 화면에 그려주는 것까지 마무리해볼게요. load 함수 만들기 일단 그럼 로컬스토리지에 있는 데이터를 가져와서 아이템을 추가해 주는 함수를 한번 만들어봅시다. // ... addTodoItem ... const loadTodo..
-
[JavaScript] 투두리스트 만들기 - 생성한 아이템 저장하고 불러오기 (1)만학도 프로젝트/JavaScript TodoList 2024. 3. 1. 21:36
지난 글에서 할 일을 생성하는 기능을 만들었었는데요. 생성하는 기능이 잘 동작하긴 하는데, 페이지를 새로고침 하면 아이템들이 모두 사라져 버립니다. 이번에는 localStorage를 활용해서 아이템을 생성할 때 그 정보를 저장해 두고, 새로고침을 해서 페이지가 갱신될 때 localStorage에 저장된 정보를 가지고 와서 아이템들이 사라지지 않고 페이지가 갱신되기 직전의 모습을 유지할 수 있도록 해보려고 해요. 리팩터링 일단은 지난번에 작성했던 코드를 조금 수정해 보겠습니다. 수정하는 이유는, 앞으로의 코드들이 읽기, 수정, 삭제 기능들이 붙으면서 점점 더 복잡해질 예정이기 때문에 조금 더 의미를 명확하게 구분할 수 있도록 각 역할에 맞는 이름을 붙여주기 위해서예요. 일단은 handleFormSubmit..
-
[JavaScript] 투두리스트 만들기 - 할 일 생성 기능만학도 프로젝트/JavaScript TodoList 2024. 2. 24. 17:48
지난 글에서 HTML 구조를 잡았었는데요. 결과물은 아래 이미지처럼 예쁘진 않지만 일단 필요한 모양들은 다 갖춰진 모습을 하고 있습니다. 너무 보기 힘든 수준이면 예쁘게 다듬는 작업부터 하려고 했었는데, 기능적은 부분을 만드는데 크게 불편함은 없는 수준이라 투두리스트의 기능부터 만들어보려고 해요. 가장 먼저 해야 할 일은 생성 기능이라 생각해서, 생성 기능부터 한번 만들어 보겠습니다. input#todo-input에 텍스트를 입력하고 button#submit-btn을 클릭하면 ul#todo-list에 li.todo-item이 추가되도록 해볼거예요. HTML 수정 일단은 HTML 수정을 먼저 해보겠습니다. li.todo-item이 계속 반복될 거라서 li 부분을 template 태그로 빼볼 건데요. 달라지..
-
[JavaScript] 투두리스트 만들기 - HTML 뼈대 잡기만학도 프로젝트/JavaScript TodoList 2024. 2. 18. 01:55
두 번째 프로젝트가 2020년에 완성됐는데, 2024년에 세 번째 프로젝트를 시작하네요. ㅎㅎㅎ 세 번째는 투두리스트를 만들어보려 합니다. 두 번째 프로젝트와 연계해서 날짜별로 투두리스트를 관리하는 큰 그림을 그려볼까 하는데, 일단은 투두리스트에만 집중해서 프로젝트를 완성시켜 볼게요. 기획 이번에도 손그림으로 간단하게 프로젝트를 그려봤습니다. 투두리스트 하면 제 머릿속에 떠오르는 세로로 긴 사각 박스를 그렸고, 손으로는 이렇게 그렸지만 가로 세로 1:1.61804 황금비로 만들어 보겠습니다. 상단에는 가운데 정렬로 Todo-list라는 타이틀이 들어가고, 그 아래는 input 태그랑 add 버튼으로 아이템을 생성(Create)하는 기능을 갖추고 그 아래는 생성된 아이템들을 나열(Read)하고, 각 아이템..
-
[JavaScript] 일반적인 달력 만들기 - 날짜 이동 버그 수정하기!만학도 프로젝트/JavaScript Calendar 2021. 9. 11. 20:35
갑자기 너무 바빠졌다는 핑계로 블로그 관리를 소홀히 하던 중 오랜만에 들어왔더니 너무 감사하신 분이 버그를 제보해 주셨습니다. 잉? 31일엔 왜 2개월이 넘어가지..?!... 그러고 나서 왜 그런지 봤더니 지난달, 다음 달로 넘어가는 코드를 제가 너무 고민 없이 작성했더라고요! let date = new Date(); // ...( 생략 )... const prevMonth = () => { date.setMonth(date.getMonth() - 1); renderCalendar(); } const nextMonth = () => { date.setMonth(date.getMonth() + 1); renderCalendar(); } const goToday = () => { date = new Date..
-
[JavaScript] 일반적인 달력 만들기 - 영상만학도 프로젝트/JavaScript Calendar 2021. 4. 16. 11:45
자바스크립트로 간단한 달력 만들기에 이어서 일반적인 달력 만들기를 영상으로 녹화해봤습니다. 의도치 않게 오랜시간이 지나서야 이 영상을 제작하게 되었는데, 막상 시간이 지나서 제가 작성한 코드를 보니 개선해야 될 부분들이 많이 보이더라고요 ㅎㅎ 따로 수정은 하지 않았지만 이번에 촬영하면서 느꼈던 저의 부족한 부분들을 좀 더 보완해서 다음 프로젝트에 녹여보도록 하겠습니다. 여담이지만 이번엔 영상 길이가 생각보다 길었는데요, 생각보다 이거 그냥 틀어놓고 1,20분 집중할 때 노동요(?)로 써도 괜찮은 것 같더라구요. 나중에 영상들이 늘어나서 재생시간이 1,2시간 정도가 쌓이면 재생목록으로 묶어서 진짜 노동요로 써볼까도 고민 중입니다..ㅎㅎ 아무튼 재미있게 봐주셨으면 좋겠고, 혹시나 잘못된 부분이나 개선할 부분..
-
[JavaScript] 일반적인 달력 만들기 - 날짜 이동, 날짜 구분, 오늘 표시만학도 프로젝트/JavaScript Calendar 2020. 8. 7. 00:16
지난 포스트 마지막에 정리한 남은 일들을 다시 한번 훑어보면 1. 지난달 다음 달 오늘 날짜로 돌아가는 기능 만들기 2. 지난 달 부분과 다음 달 부분을 조금 투명하게 하기 3. 오늘 날짜 표기하기 총 3가지였습니다. 그럼 1번부터 하나씩 차근차근 해결해보죠. 생각해보면 일단 달력을 그리는 로직은 모두 잘 만들어 뒀으니깐, 지난달, 다음 달 오늘로 Date객체의 정보만 수정해주면 됩니다. 그래서 그동안 만든 코드에서 date부분만 남기고 나머지를 함수로 만들어 줍시다. // Date 객체 생성 const date = new Date(); const renderCalendar = () => { const viewYear = date.getFullYear(); const viewMonth = date.get..
-
[JavaScript] 일반적인 달력 만들기 - 스타일 입히기만학도 프로젝트/JavaScript Calendar 2020. 8. 6. 00:42
지난 포스트까지 해서 필요한 날짜 데이터는 다 불러왔으니깐, 일단 가볍게 스타일을 좀 주도록 하겠습니다. 왜냐하면 지금 너무 못생겼거든요..ㅎㅎ(?) 자, 그러면 일단은 index.html에서 css파일 링크를 걸어줍시다. ... MHDP Full Calendar ... 그러고 나서 간단하게 전체적인 태그들의 margin, padding을 없애주고, 지난번과 마찬가지로 calendar를 가운데 정렬하기 위해서 body부분에 display: flex를 주고 min-height 값을 100vh 만큼 주도록 하겠습니다. * { margin: 0; padding: 0; font-family: sans-serif; box-sizing: border-box; } body { display: flex; justify..