본문 바로가기

전체 글393

React BootStrap : 화면 중앙에 나타나는 로딩 스피너 인라인 스타일링import { Spinner } from 'react-bootstrap';.. if (isLoading) return ( ); 스피너는 기본적으로 부트스트랩 문서에 있지만, 화면 정중앙 정렬하는 속성이 복잡해서 작성한다.스타일드 컴포넌트로 재사용만약 저 스타일을 여러 군데서 쓸 것 같다거나, 인라인 스타일링이 복잡해서 분리하고 싶은 경우 Styled-components로 정의하고 export 한 후 다른 곳에서 재사용 해도 된다.import styled from 'styled-components';const SpinnerContainer = styled.div` display: flex; justify-content: center; align-items:.. Programing/CSS 2024. 6. 17.
배열로 렌더링 된 아이템 리스트 클릭 시 디테일 페이지에 정보 넘기기 상황이런 식으로 데이터를 받아와 렌더링하는 배열이 있다.이것을 클릭했을 때 디테일 페이지로 해당 아이템의 정보만 디테일 페이지로 넘기는 방법에 대해서 간단하게 알아 보겠다. 방식은 여러 가지가 있을 수 있다.리스트가 렌더링 된 페이지에서 해당 아이템의 고유한 값(예를 들어 id 컬럼)을 URL 파라미터로 넘겨서 디테일 페이지에서 다시 fetch를 받은 뒤, 그 fetch 의 응답값을 다시 filter 하여 find 메서드로 id와 일치하는 값을 찾아오는 방법필요한 정보가 리스트 렌더링 페이지에서 아이템에 다 담겨 있으니 그것을 그대로 디테일 페이지로 넘기는 방법데이터가 여러 사람에 의해 실시간으로 변할 가능성이 있다면 1번의 방법이 좋겠고, 그럴 가능성이 적다면 굳이 디테일 페이지에서 한 번 더 fetc.. Programing/React 2024. 6. 17.
포매팅 함수 - 데이터를 원하는 형식으로 변환하기 상황원본 데이터 날짜 형태가 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.
React BootStrap Quick Start 공식 사이트https://react-bootstrap.netlify.app React Bootstrap | React BootstrapThe most popular front-end framework, rebuilt for Reactreact-bootstrap.netlify.app패키지 설치npm install react-bootstrap bootstrapMain.jsx에 부트스트랩 CSS Importimport 'bootstrap/dist/css/bootstrap.min.css';부트스트랩 문서를 보고 필요한 컴포넌트 Import 복붙 사용import Accordion from 'react-bootstrap/Accordion';function BasicExample() { return ( .. Programing/CSS 2024. 6. 16.
React Redux Toolkit Quick Start 리덕스 툴킷 설치하기npm install @reduxjs/toolkit react-redux파일 생성하기src/├── store/│ ├── store.js // Redux store 설정 파일│ ├── userSlice.js // user slice 파일│ ├── anotherSlice.js // another slice 파일│ └── ... // 추가적인 slice 파일들└── ...Store 작성하기// src/store/store.jsimport { configureStore } from '@reduxjs/toolkit';import userReducer from './userSlice';// 다른 슬라이스가 더 있다면 그 슬라이스의 리듀.. Programing/React 2024. 6. 16.
[코딩애플] Redux-toolkit 리덕스란?Redux는 전역으로 상태를 관리할 수 있게 도와주는 라이브러리이다.이런 라이브러리를 사용하지 않는다면 상위 컴포넌트에서 만든 State가 10개 밑의 deps를 가진 자식 컴포넌트에서 이 state를 전달 받으려면중간에 끼어 있는 부모들은 그 state를 사용하지 않음에도 계속 드릴처럼 뚫고 내려 가야 하는 단점이 있다. 그런데 Redux는 Store라는 중앙 저장소를 만들어 두고 그곳에서 필요한 곳에 바로 state를 전달할 수 있는 장점이 있다. 리덕스 구 버전과 툴킷이라는 신 버전이 있는데, 신버전을 권장한다.사용방법패키지 설치yarn add @reduxjs/toolkit react-reduxStore.js 파일 만들기중앙 저장소인 store 파일을 만든다.// src/store.jsim.. Programing/React 2024. 6. 15.

티스토리툴바