본문 바로가기

분류 전체보기402

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.

티스토리툴바