Skip to content

[Week6/mission] Tanstack Query 입문 1편: useQuery와 useInfiniteQuery로 무한 스크롤과 효율적인 데이터 패칭하기 #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
starvingorange merged 8 commits into from
May 13, 2025
Merged

[Week6/mission] Tanstack Query 입문 1편: useQuery와 useInfiniteQuery로 무한 스크롤과 효율적인 데이터 패칭하기 #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fad09b9
[Week2/mission] React를 활용하여 To-Do List 만들기, useContext를 활용해서 다크모드 구현하기
starvingorange Mar 27, 2025
ca830ae
[Week3/mission] Tailwind CSS, React Router, API 통신 완전 정복
starvingorange Apr 3, 2025
a746fb6
[Week4/mission] 첫 커스텀 훅 만들어보기, 로그인 / 회원가입 기능 구현해보기 (feat. 유효성 검사)
starvingorange Apr 10, 2025
234215e
My Page
starvingorange Apr 10, 2025
16a65d5
[Week5/mission] Protected Route / JWT 토큰 동작 방식 / OAuth 2.0 (RefreshTo…
starvingorange May 1, 2025
53413d2
[Week5/mission] Protected Route / JWT 토큰 동작 방식 / OAuth 2.0 (RefreshTo…
starvingorange May 2, 2025
bb6e7a2
충돌 수정
starvingorange May 2, 2025
9ff23b8
Chapter 06 - Tanstack Query 입문 1편: useQuery와 useInfiniteQuery로 무한 스크롤…
starvingorange May 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 33 additions & 30 deletions gang/Week1/todo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UMC ToDoList</title>
<link rel="stylesheet" href="./style.css">
<script type= "module" src="./dist/script.js" defer></script>
<body>
<div id="container">
<h1 id="header">GANG TODO</h1>
<form id="add_form">
<input type="text" id="input" placeholder="할 일 입력">
<button class= "greenbtn" type="submit">할 일 추가</button>
</form>

<div id= "list" display="flex">
<div id="ongoing_list">
<h2 class="minititle">할 일</h2>
<ul>
</div>
<div id ="done_list">
<h2 class="minititle">완료</h2>
<ul>
</ul>
</div>
</div>
</div>

</body>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UMC ToDoList</title>
<link rel="styleshee t" href="./style.css">
<script type="module" src="./dist/script.js" defer></script>

<body>
<div id="todo-container">
<h1 id="todo-container_header">GANG TODO</h1>
<form id="todo-container-form">
<input type="text" id="todo-container_input" placeholder="할 일 입력">
<button class="todo-container_button" type="submit">할 일 추가</button>
</form>

<div id="render-container" display="flex">
<div id="render-container-ongoing">
<h2>할 일</h2>
<ul>
</ul>
</div>
<div id="render-container-done">
<h2>완료</h2>
<ul>
</ul>
</div>
</div>
</div>
</body>

</html>
256 changes: 130 additions & 126 deletions gang/Week1/todo/src/script.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,127 +1,131 @@
const todoContainer = document.getElementById('container') as HTMLFormElement;
const todoInput = document.getElementById('input') as HTMLInputElement;
const todoButton = document.getElementById('input_button');
const ongoingList= document.getElementById('ongoing_list') as HTMLUListElement;
const doneList= document.getElementById('done_list')as HTMLUListElement;;


let todos: {text:string, id:number}[] = [];//할 일 저장 배열
let donetodos: {text:string, id:number}[] = [];//완료 저장 배열


const savedDoneList = localStorage.getItem("donetodos");//새로고침 시 저장된 목록
const savedTodoList = localStorage.getItem("todos");//저장된 할 일 목록

//할 일 추가
function addTodo(event:SubmitEvent){
event.preventDefault();
const newTodo:string = todoInput.value;
const newTodoObj={
text: newTodo,
id: Date.now(),
};

todos.push(newTodoObj);
todoInput.value = "";
todoListup(newTodoObj);
saveTodo();
}

//저장
function saveTodo(){
localStorage.setItem("todos", JSON.stringify(todos));
}
function saveDone(){
localStorage.setItem("donetodos", JSON.stringify(donetodos));
}

//할 일 목록 생성
function todoListup(newTodoObj: {text:string, id: number}){
const newtodoList = document.createElement('li');
newtodoList.classList.add("listline");
newtodoList.id = newTodoObj.id.toString();
const newtodoText = document.createElement('span');
newtodoText.innerText = newTodoObj.text;
const newtodoButton = document.createElement('button');
newtodoButton.classList.add("greenbtn");
newtodoButton.innerText = "완료";
newtodoButton.addEventListener('click', doneListup);

newtodoList.appendChild(newtodoText);
newtodoList.appendChild(newtodoButton);
ongoingList.appendChild(newtodoList);
}

//완료 목록 생성
function doneListup(event: MouseEvent){
const doneBtn = event.target as HTMLButtonElement; ;
const doneLi = doneBtn.parentElement as HTMLLIElement;
const doneSpan= doneLi.querySelector('span') as HTMLSpanElement;
todos = todos.filter((todo) => todo.id !== parseInt(doneLi.id));//할 일 목록에서 삭제
donetodos.push({
text: doneSpan.innerText,
id:parseInt(doneLi.id),
});//완료 목록에 추가
doneLi.remove();
saveTodo();

const newdoneList = document.createElement('li');
newdoneList.classList.add("listline");
newdoneList.id = doneLi.id.toString();
const newdoneText = document.createElement('span');
newdoneText.innerText = doneSpan.innerText;
const newdoneButton = document.createElement('button');
newdoneButton.innerText = "삭제";
newdoneButton.classList.add("redbtn");

newdoneButton.addEventListener('click', deleteDone);

newdoneList.appendChild(newdoneText);
newdoneList.appendChild(newdoneButton);
doneList.appendChild(newdoneList);
saveDone();
}

//삭제
function deleteDone(event: Event){
const eraseBtn = event.target as HTMLButtonElement;
const eraseList = eraseBtn.parentElement as HTMLLIElement;
donetodos = donetodos.filter((done) => done.id !== parseInt(eraseList.id));
eraseList.remove();
saveDone();
}

//새로 고침 시 완료 목록 불러오기
function createDoneList(doneObj: { text: string, id: number }) {
const newdoneList = document.createElement('li');
newdoneList.classList.add("listline");
newdoneList.id = doneObj.id.toString();

const newdoneText = document.createElement('span');
newdoneText.innerText = doneObj.text;

const newdoneButton = document.createElement('button');
newdoneButton.innerText = "삭제";
newdoneButton.classList.add("redbtn");

newdoneButton.addEventListener('click', deleteDone);

newdoneList.appendChild(newdoneText);
newdoneList.appendChild(newdoneButton);
doneList.appendChild(newdoneList);
}

//새로고침 시 저장된 배열 불러오기기
if(savedDoneList){
const parsedDone = JSON.parse(savedDoneList);
donetodos = parsedDone;
parsedDone.forEach(createDoneList);
}
if(savedTodoList){
const parsedTodos = JSON.parse(savedTodoList);
todos = parsedTodos;
parsedTodos.forEach(todoListup);
}

//폼 제출 시 할 일 추가
const todoContainer = document.getElementById('todo-container') as HTMLFormElement;
const todoInput = document.getElementById('todo-container_input') as HTMLInputElement;
const todoButton = document.getElementById('todo-container_button');
const ongoingList= document.getElementById('render-container-ongoing') as HTMLUListElement;
const doneList= document.getElementById('render-container-done')as HTMLUListElement;;

interface savedArray{
text: string,
id: number,
}

let todos: savedArray[] = []; //할 일 저장 배열
let donetodos: savedArray[] = [];;//완료 저장 배열


const savedDoneList = localStorage.getItem("donetodos");//새로고침 시 저장된 목록
const savedTodoList = localStorage.getItem("todos");//저장된 할 일 목록

//할 일 추가
function addTodo(event:SubmitEvent){
event.preventDefault();
const newTodo:string = todoInput.value;
const newTodoObj={
text: newTodo,
id: Date.now(),
};

todos.push(newTodoObj);
todoInput.value = "";
todoListup(newTodoObj);
saveTodo();
}

//저장
function saveTodo(){
localStorage.setItem("todos", JSON.stringify(todos));
}
function saveDone(){
localStorage.setItem("donetodos", JSON.stringify(donetodos));
}

//할 일 목록 생성
function todoListup(newTodoObj: {text:string, id: number}){
const newtodoList = document.createElement('li');
newtodoList.classList.add("listline");
newtodoList.id = newTodoObj.id.toString();//newtodoList의 id는 HtmlElement의 id속성이라 string 형식만 가능하다
const newtodoText = document.createElement('span');
newtodoText.innerText = newTodoObj.text;
const newtodoButton = document.createElement('button');
newtodoButton.classList.add("greenbtn");
newtodoButton.innerText = "완료";
newtodoButton.addEventListener('click', doneListup);

newtodoList.appendChild(newtodoText);
newtodoList.appendChild(newtodoButton);
ongoingList.appendChild(newtodoList);
}

//완료 목록 생성
function doneListup(event: MouseEvent){
const doneBtn = event.target as HTMLButtonElement; ;
const doneLi = doneBtn.parentElement as HTMLLIElement;
const doneSpan= doneLi.querySelector('span') as HTMLSpanElement;
todos = todos.filter((todo) => todo.id !== parseInt(doneLi.id));//할 일 목록에서 삭제
donetodos.push({
text: doneSpan.innerText,
id:parseInt(doneLi.id),
});//완료 목록에 추가
doneLi.remove();
saveTodo();

const newdoneList = document.createElement('li');
newdoneList.classList.add("listline");
newdoneList.id = doneLi.id.toString();
const newdoneText = document.createElement('span');
newdoneText.innerText = doneSpan.innerText;
const newdoneButton = document.createElement('button');
newdoneButton.innerText = "삭제";
newdoneButton.classList.add("redbtn");

newdoneButton.addEventListener('click', deleteDone);

newdoneList.appendChild(newdoneText);
newdoneList.appendChild(newdoneButton);
doneList.appendChild(newdoneList);
saveDone();
}

//삭제
function deleteDone(event: Event){
const eraseBtn = event.target as HTMLButtonElement;
const eraseList = eraseBtn.parentElement as HTMLLIElement;
donetodos = donetodos.filter((done) => done.id !== parseInt(eraseList.id));
eraseList.remove();
saveDone();
}

//새로 고침 시 완료 목록 불러오기
function createDoneList(doneObj: { text: string, id: number }) {
const newdoneList = document.createElement('li');
newdoneList.classList.add("listline");
newdoneList.id = doneObj.id.toString();

const newdoneText = document.createElement('span');
newdoneText.innerText = doneObj.text;

const newdoneButton = document.createElement('button');
newdoneButton.innerText = "삭제";
newdoneButton.classList.add("redbtn");

newdoneButton.addEventListener('click', deleteDone);

newdoneList.appendChild(newdoneText);
newdoneList.appendChild(newdoneButton);
doneList.appendChild(newdoneList);
}

//새로고침 시 저장된 배열 불러오기
if(savedDoneList){
const parsedDone = JSON.parse(savedDoneList);
donetodos = parsedDone;
parsedDone.forEach(createDoneList);
}
if(savedTodoList){
const parsedTodos = JSON.parse(savedTodoList);
todos = parsedTodos;
parsedTodos.forEach(todoListup);
}

//폼 제출 시 할 일 추가
todoContainer.addEventListener('submit', addTodo);
Loading