본문 바로가기

Programing371

포매팅 함수 - 데이터를 원하는 형식으로 변환하기 상황원본 데이터 날짜 형태가 2022-08-31T12:49:00.000Z이러한 형태로 저장되어 있어 데이터를 fetch 해 와서 렌더링 시킬 때 저대로 렌더링 됨.이것을 2024년 6월 17일 과 같은 형태로 변환하고자 함. 이 외에도 금액이 100000과 같이 나오는 것을 세 자리수 마다 콤마를 찍는 포매팅 함수 등도 여러 가지 알아보고자 함.포매팅 함수 작성YYYY년 MM월 DD일const formatDate = (dateString) => { const options = { year: 'numeric', month: 'long', day: 'numeric' }; const date = new Date(dateString); return date.toLocaleDateString('ko-KR',.. Programing/JavaScript 2024. 6. 17.
TanStack-Query Quick Start TanStack Query 패키지 설치yarn add @tanstack/react-queryGET 요청 (useQuery)fetch 함수 활용// GET 요청할 컴포넌트 또는 최상단 컴포넌트// App.jsximport { useQuery } from '@tanstack/react-query';const apiUrl = '~~~';function App() { const { data, error, isLoading } = useQuery({ queryKey: ['data'], queryFn: async () => { try { const response = await fetch(apiUrl); if (!response.ok) { throw n.. Programing/React 2024. 6. 17.
2024-06-16 (나의 생각) AI 시대와 개발자 AI의 무서운 발전 속도AI의 발전 속도가 무섭다. 인공지능 sora 등 출시되는 족족 세상을 놀라게 하는 인공지능 모델들이 연이어 발표되고 있고, 심지어 악용 우려까지 있을 정도로 기술의 완성도가 높다 보니 상용화 하지 않는 기술도 많이 있다.그런데 놀랍게도 난 개발 공부를 하기 이전, 전혀 다른 직군에서 일을 해 왔는데 그 때는 AI의 발전에 대한 소식을 간간히 접하긴 했어도 이렇게 빠를 것인 줄은 체감할 수 없었다.컴퓨터와 관련이 크게 있지 않은 직업군에서는 AI의 발전이 나의 일을 대체하기에는 당장은 시기상조라고 생각하는 사람들이 대부분일 것이다. 개발을 공부 하며 ChatGPT를 누구보다 많이 하고 있다. 만약 인공지능 챗봇이 탄생하기 전이었다면 튜터님들께 계속 방문하며 막히는 점을 물어봐야 했.. Programing/TIL 2024. 6. 16.
2024-06-15 TanStack Query로 서버 상태 관리하기 기존의 내 프로젝트는 axios를 통해 json server에서 데이터를 불러오고 있었다. 그리고 이를 통해 CRUD를 구현하고 있었는데, 이것을 TanStack으로 관리해보고자 한다. 참고로 CRUD에서 R은 useQuery를, CUD는 useMutation을 이용한다. TanStack과 Axios로 json-server에 GET 요청 보내기 (useQuery)기존 코드는 아래와 같다.function App() { const [expenses, setExpenses] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { con.. Programing/TIL 2024. 6. 16.
React-Router-dom Page Routing Quick Start 패키지 설치yarn add react-router-dommain.jsx BrowserRouter 설정import React from 'react'import ReactDOM from 'react-dom/client'import App from './App.jsx'import './index.css'import { BrowserRouter } from 'react-router-dom'ReactDOM.createRoot(document.getElementById('root')).render( )필요한 컴포넌트에서 페이지 라우팅 설정import { Route, Routes } from 'react-router-dom'import './App.css'import Donation from '../pa.. Programing/React 2024. 6. 16.

티스토리툴바