전체 글50 Next.js 시작하기 - Drag and Drop 만들기 (2) MSW + indexedDB 시작하기...지난 시간에 indexedDB에 샘플 데이터가 저장되는 것 까지 세팅을 했다. 오늘은 indexedDB에서 데이터를 가져오는 get API와 데이터를 추가하는 post API 두 개를 만들어 실제로 데이터가 추가되는 것을 해볼 예정이다. indexedDB 데이터를 가져와보자먼저, useQuery를 통해 todoList 데이터를 가져오는 get API 호출 함수를 만들어야 한다.import { useQuery } from "react-query";import axios from "axios";const todoList = async () => { const response = await axios.get("/todoList"); return response.data;};export cons.. 2024. 8. 5. Next.js 시작하기 - Drag and Drop 만들기 (1) IndexedDB 시작하기...Trello 클론 코딩의 가장 메인 기능이라고 할 수 있는 드래그앤드롭 기능을 구현할 차례다. 라이브러리를 사용하는 방법도 있지만, 사용하지 않고 개발을 해볼 예정이다. 그냥 Drag and Drop은 간단하지만, Trello에서 제공하는 Drag and Drop 기능은 생각보다 복잡하다. 각각의 카드별로 드래그앤드롭이 가능한 것 뿐만 아니라 내부에 있는 카드 또한 자유롭게 이동이 가능한 구조로 되어있다. 우선, 간단하게 UI를 만들어보자. Draggable"use client";import React, { useState, useEffect } from "react";import { Card, Button } from "@mui/material";import { useMutation } f.. 2024. 8. 4. 매달 10만원을 버는 법 10만원만 더 벌고 싶다...늘 생각하는 것이다. 월급으로 받는 수익 이외에, 무언가 다른 부분에서 안정적으로 10만원 정도의 자잘한 수익을 내고 싶다고 생각했다. 그게 그림이 되었건 주식이 되었건 간에. 하지만 안정적으로 추가 수입을 얻을 방법은 마땅하지 않았다. 지금 당장 급한 것은 아니지만, 시간을 들여서라도 이러한 부수입을 얻을 수는 없는 걸까? 정말, 정말 딱 10만원, 아니면 5만원이라도 좋으니까. 풍차를 돌려보자 The Money Book(더 머니 북) 완독 후 리뷰시작하기...The money book에 대해서 알게 된 건 인별그램 광고를 통해서였다. 예쁜 일러스트도, 하물며 소설책도 아닌 금융 관련 도서가 인별그램 광고로 올라오는 일이 많지 않았기에 호기심이 가soomins.tistory.. 2024. 8. 1. AWS EC2와 ECS 그리고 Docker AWS, 아는 만큼 보인다전 직장에서는 클라우드 서비스를 사용하지 않았다. 언제 샀는지 알 수 없고, 더 이상 부품조차 구할 수 없는 오래된 물리 서버로 모든 것을 해결했다. 하지만 이제 AWS를 사용하는 곳으로 왔으니, 다시 클라우드 서비스의 대표 AWS의 개념을 오랜 기억속에서 꺼낼 때가 되었다. ECS, EC2 뭐가 다른가? Amazon Elastic Container Service란 무엇입니까? - Amazon Elastic Container ServiceAmazon Elastic Container Service란 무엇입니까? Amazon Elastic Container Service(Amazon ECS)는 컨테이너 애플리케이션을 쉽게 배포, 관리 및 확대할 수 있도록 도와주는 완전 관리형 컨테이.. 2024. 7. 29. Next.js 시작하기 - 간단한 Login 페이지 만들기 (4) React-Query React Query를 더 관리하기 좋게 만드는 법은 없을까?코드를 쪼갤 수 있을 만큼 쪼개고 관리하기 좋은 형태로 리팩토링하는 것은 어쩔 수 없는 프론트엔드 개발자의 고민이다. React-Query는 정말 좋은 기능들을 제공하지만, 많은 기능이 있는 만큼 코드가 굉장히 길어질 수도 있다. 어떻게 보면 React Query 또한 API 호출 함수와 같이 한 곳에 저장해뒀다가 필요할 때 마다 호출한다면 참 좋을 것 같은데, 더 나은 관리 방법은 없는 것일까? 기존의 React-Query를 개선해보자동일한 react-query문을 하나의 파일에서 필요할 때 마다 생성해서 사용하는 것은 코드를 길게 만들고 불필요한 반복 작업을 요구한다. 또한 기능이 변경될 필요가 있을 때, 해당 기능이 적용된 페이지마다 작업.. 2024. 7. 15. The Money Book(더 머니 북) 완독 후 리뷰 시작하기...The money book에 대해서 알게 된 건 인별그램 광고를 통해서였다. 예쁜 일러스트도, 하물며 소설책도 아닌 금융 관련 도서가 인별그램 광고로 올라오는 일이 많지 않았기에 호기심이 가는 책이었다. 책의 포장이 굉장히 독특(?)한 형태로 되어있었는데, 점선을 따라 박스를 뜯으면 책의 가장 핵심 내용인 '잘 살아갈 우리를 위한 금융생활 안내서'라는 문장이 나타나는 구조로 되어있었다. 첫 문구의 등장이 심상치 않은 것이, 애플 제품을 구매했을 때 포장을 뜯었던 때와는 또 다른 매력이 있는 언박싱이었다. 엮은이가 토스라는 점에서 완벽한 UI를 추구하겠다는 의지가 강렬했다. 뭐야 무서워... 금융 이야기는 재미가 없다하지만 중요하다. 직장에서 열심히 일하고 월급을 받아 돈을 잘 모으는 것 뿐만.. 2024. 7. 14. 이전 1 2 3 4 5 6 7 8 9 다음 728x90 반응형
