전체 글75 [react-query] 1. react-query와 useQuery알아보기 간단한 사이트의 경우 데이터의 수가 많지 않아서 state와 props만으로도 충분히 만들 수 있다.하지만 대부분의 사이트는 데이터가 많기 때문에 프롭스 드릴링은 발생할 수 밖에 없는데 이러한 상황을 막기 위해 리액트 팀에서는 React-context를 만든다.데이터를 전역으로 관리하면 프롭스드릴링을 방지할 수 있지만 context의 부족한 점을 보완하기 위해서 redux / recooil 등 다양한 상태관리 라이브러리가 등장. 상태관리를 하는 데이터는 2가지로 나눌 수 있다.클라이언트 상태ui의 상태값입력 폼에 입력한 데이터 등서버 상태서버에서 가져오는 데이터를 관리서버 상태는 데이터는 몇가지 특징을 가지고 있다.비동기식 구현서버에서 데이터를 받아오기까지 시간이 걸리기 때문플레이스홀더를 보여주거나 로.. 2024. 6. 17. react-modal을 사용한 모달 만들기 react-modal npm 설치$ npm install --save react-modal$ yarn add react-modal redact-modal의 옵션들 interface Styles { content?: React.CSSProperties | undefined; overlay?: React.CSSProperties | undefined; }// react-modal Styles 옵션에는 content와 overlay가 있다.// content : 모달창 내부영역 디자인// overlay : 모달 외부영역 디자인interface Props { isOpen: boolean; // 모달의 열림을 결정 shouldCloseOnOverlayClick?: boolean | u.. 2024. 6. 2. [코드잇 스프린트] 6개월의 기록(일기) 1줄 요약하면 "으아아 이게 뭐야 으아아아 저게 뭐야 으아아아 넌 또 어디서 나왔어.." 하는 정신 없던 6개월 이었지만 좀 길게 일기를 써보자 때는 작년 5월, 미래에 대한 막연한 두려움에 많은 상상을 한 시기였다. 이런 저런 진로를 생각해 보다가 내린 결정은 1. 꾸준히 발전하는 기술을 배우자 2. 나이가 들어도, 취업을 못해도 혼자서 할 수 있는 무언가. 3. 다양한 직군에서 필요로 하는 직종 (+ 친구의 추천)까지 생각하다 보니 코딩을 공부하자는 결론이 나왔다. 빠른 결정을 하고 생활코딩을 보면서 HTML과 CSS를 공부했다. 코드를 작성하는 대로 화면에 그려지는 걸 보면서 **이거 재밌네?**를 느끼게 되고 나름 꿈이 생기기 시작했다. 어쩌다 코드잇인가? 심심했다. 혼자서 공부하기에 방향성.. 2024. 5. 29. ssr getInitialProps - import { NextPageContext } from 'next' Page.getInitialProps = async (ctx: NextPageContext) => { const res = await fetch('https://api.github.com/repos/vercel/next.js') const json = await res.json() return { stars: json.stargazers_count } } export default function Page({ stars }: { stars: number }) { return stars } - 페이지라는 최상위 컴포넌트를 선언 -> 페이지컴포넌트의 getInitalProps property에 함수를 선언,.. 2024. 4. 5. 이전 1 ··· 4 5 6 7 8 9 10 ··· 19 다음
